From 00c141d8d747766579ac988be0014d3a37461625 Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Thu, 5 Dec 2024 16:32:28 -0600
Subject: [PATCH] Random themes

---
 src/App.tsx                              |  9 ++++-
 src/pages/settings/components/Themes.tsx | 48 ++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 38a688a..639706e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,8 +39,13 @@ function App() {
 	const [theme, setTheme] = useAtom(appTheme);
 	useEffect(() => {
 		if (data && themeName) {
-			const temp = data.find((t: any) => t.name === themeName);
-			setTheme(temp);
+			if (themeName !== 'random') {
+				const temp = data.find((t: any) => t.name === themeName);
+				setTheme(temp);
+			} else {
+				const index = Math.floor(Math.random() * data.length);
+				setTheme(data[index]);
+			}
 		}
 	}, [isFetched, themeName]);
 
diff --git a/src/pages/settings/components/Themes.tsx b/src/pages/settings/components/Themes.tsx
index 8f36271..bcd07ff 100644
--- a/src/pages/settings/components/Themes.tsx
+++ b/src/pages/settings/components/Themes.tsx
@@ -79,6 +79,10 @@ function ThemesSettings({ theme }: any) {
 		openDeleteConfirmModal(theme);
 		close();
 	};
+
+	const randomColor = () => {
+		return `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`;
+	};
 	return (
 		<>
 			<Modal.Root
@@ -374,6 +378,50 @@ function ThemesSettings({ theme }: any) {
 							</Group>
 						</Stack>
 					))}
+					<Stack key={theme.name} w={'300px'}>
+						<Group gap={0} justify='space-between'>
+							<Button
+								w={'100%'}
+								h={'75px'}
+								style={{
+									backgroundSize: 'cover',
+									backgroundColor: 'white',
+									border: 'solid black',
+									color: 'black',
+								}}
+								data-theme={theme.name}
+								onClick={() => {
+									setValue('random');
+								}}
+							>
+								Random
+							</Button>
+						</Group>
+						<Group justify='space-between' gap={0}>
+							<Group className='theme-palette'>
+								<ActionIcon
+									className={actionIconClasses.editButton}
+									classNames={actionIconClasses}
+									onClick={() => handleOpen(theme)}
+								>
+									<FiEdit />
+								</ActionIcon>
+								<ColorSwatch color={randomColor()} />
+								<ColorSwatch color={randomColor()} />
+								<ColorSwatch color={randomColor()} />
+								<ColorSwatch color={randomColor()} />
+								<ColorSwatch color={randomColor()} />
+
+								<ActionIcon
+									className={actionIconClasses.editButton}
+									classNames={actionIconClasses}
+									onClick={() => handleDeleteTheme(theme)}
+								>
+									<FiTrash color='red' />
+								</ActionIcon>
+							</Group>
+						</Group>
+					</Stack>
 				</Group>
 			</Stack>
 		</>