From 2174b1d7bebbe9e19a8b416e07753b0be5d88aee Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Mon, 30 Dec 2024 15:09:20 -0600
Subject: [PATCH] Fixes to styles

---
 src/App.tsx                              |  2 +-
 src/pages/settings/components/Themes.tsx | 73 +++++++++++++++---------
 src/styles/Modal.module.css              |  2 +-
 src/styles/Select.module.css             | 19 +++---
 4 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7ca02ed..6585f87 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -43,7 +43,7 @@ function App() {
 				const temp = data.find((t: any) => t.name === themeName);
 				setTheme(temp);
 			} else {
-				let enabled = data.filter((t: any) => t.randomEnabled);
+				const enabled = data.filter((t: any) => t.randomEnabled);
 				if (enabled.length === 0) {
 					setTheme(data[0]);
 				} else {
diff --git a/src/pages/settings/components/Themes.tsx b/src/pages/settings/components/Themes.tsx
index c3e1403..1eb5bb2 100644
--- a/src/pages/settings/components/Themes.tsx
+++ b/src/pages/settings/components/Themes.tsx
@@ -6,7 +6,9 @@ import {
 	ColorSwatch,
 	Divider,
 	Group,
+	Image,
 	Modal,
+	OptionalPortal,
 	Select,
 	Stack,
 	Text,
@@ -19,7 +21,13 @@ import { FiCheck, FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Modal.css';
 import { modals } from '@mantine/modals';
-import { actionIconClasses, buttonClasses, modalClasses, textClasses } from 'styles';
+import {
+	actionIconClasses,
+	buttonClasses,
+	modalClasses,
+	selectClasses,
+	textClasses,
+} from 'styles';
 import ThemeModalContent from './ThemeModalContent';
 function ThemesSettings({ theme }: any) {
 	const [opened, { open, close }] = useDisclosure(false);
@@ -35,9 +43,9 @@ function ThemesSettings({ theme }: any) {
 	});
 	const { data: backgrounds, isFetched: isBackgroundFetched } = useQueryAPI({
 		endpoint: 'api/backgrounds',
-	})
+	});
 	const [themesList, setThemesList] = useState([]);
-	const [backgroundList, setBackgroundList] = useState<any>(["None"]);
+	const [backgroundList, setBackgroundList] = useState<any>(['None']);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const { mutateAsync: createTheme } = useMutationAPI();
 	const { mutateAsync: deleteTheme } = useMutationAPI();
@@ -50,7 +58,7 @@ function ThemesSettings({ theme }: any) {
 
 	useEffect(() => {
 		if (backgrounds && isBackgroundFetched) {
-			setBackgroundList(["None", ...backgrounds]);
+			setBackgroundList(['None', ...backgrounds]);
 		}
 	}, [backgrounds, isBackgroundFetched]);
 
@@ -132,7 +140,7 @@ function ThemesSettings({ theme }: any) {
 						<Divider color='black' my='sm' />
 						<Group w={'100%'} h={'100%'} gap={0}>
 							<Stack w={'50%'}>
-								<Group c={'black'} justify='space-between'>
+								<Group justify='space-between'>
 									<Text className={textClasses.label} classNames={textClasses}>
 										Primary Color
 									</Text>
@@ -148,7 +156,7 @@ function ThemesSettings({ theme }: any) {
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
-								<Group c={'black'} justify='space-between'>
+								<Group justify='space-between'>
 									<Text className={textClasses.label} classNames={textClasses}>
 										Accent Color
 									</Text>
@@ -164,7 +172,7 @@ function ThemesSettings({ theme }: any) {
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
-								<Group c={'black'} justify='space-between'>
+								<Group justify='space-between'>
 									<Text className={textClasses.label} classNames={textClasses}>
 										Background Color
 									</Text>
@@ -180,7 +188,7 @@ function ThemesSettings({ theme }: any) {
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
-								<Group c={'black'} justify='space-between'>
+								<Group justify='space-between'>
 									<Text className={textClasses.label} classNames={textClasses}>
 										Border Color
 									</Text>
@@ -196,7 +204,7 @@ function ThemesSettings({ theme }: any) {
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
-								<Group c={'black'} justify='space-between'>
+								<Group justify='space-between'>
 									<Text className={textClasses.label} classNames={textClasses}>
 										Search Background Color
 									</Text>
@@ -212,23 +220,36 @@ function ThemesSettings({ theme }: any) {
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
-								<Group c={'black'} justify='space-between'>
-									<Select
-										data={backgroundList}
-										label='Background Image'
-										value={selectedTheme.backgroundImage}
-										onChange={(value) =>
-											setSelectedTheme({
-												...selectedTheme,
-												backgroundImage: value,
-											})
-										}
-										styles={{
-											label: {
-												color: theme.primaryColor,
-											},
-										}}
-									/>
+								<Group justify='space-between'>
+									<OptionalPortal withinPortal={false}>
+										<Select
+											data={backgroundList}
+											className={selectClasses.select}
+											classNames={selectClasses}
+											label='Background Image'
+											value={selectedTheme.backgroundImage}
+											renderOption={(value) => {
+												return (
+													<Group h={'100%'} w={'100%'} justify='space-between'>
+														{value.option.value}
+														{value.option.value && value.option.value !== 'None' && (
+															<Image
+																h={'28px'}
+																w={'50px'}
+																src={`/backgrounds/${value.option.value}`}
+															/>
+														)}
+													</Group>
+												);
+											}}
+											onChange={(value) =>
+												setSelectedTheme({
+													...selectedTheme,
+													backgroundImage: value,
+												})
+											}
+										/>
+									</OptionalPortal>
 								</Group>
 							</Stack>
 							<Stack h={'100%'} w={'50%'} align='center' justify='center'>
diff --git a/src/styles/Modal.module.css b/src/styles/Modal.module.css
index ebd7d89..d262506 100644
--- a/src/styles/Modal.module.css
+++ b/src/styles/Modal.module.css
@@ -27,7 +27,7 @@
             color: var(--color-text-pri);
             background-color: var(--color-background);
             .header {
-                color: white;
+                color: var(--color-text-pri);
                 background-color: var(--color-text-acc);
                 .close {
                     color: white;
diff --git a/src/styles/Select.module.css b/src/styles/Select.module.css
index fd56125..13380ab 100644
--- a/src/styles/Select.module.css
+++ b/src/styles/Select.module.css
@@ -1,6 +1,6 @@
 .label {
     margin-bottom: 5px !important;
-    color: light-dark(var(--mantine-color-appGray-8), white) !important;
+    color: var(--color-text-pri) !important;
     font-size: 14px !important;
 }
 .input {
@@ -14,21 +14,26 @@
 
 .options {
     .option {
-        color: var(--color-text-pri) !important;
+        color: black !important;
         font-size: 14px !important;
         /* applies styles to selected item */
         &[data-checked] {
-            background-color: var(--color-text-pri) !important;
-            &, &:hover {
-                background-color: var(--color-text-acc) !important;
+            background-color: gray !important;
+            color: white !important;
+            &:hover {
+                background-color: black !important;
                 color: white !important;
             }
         }
 
         /* applies styles to hovered item (with mouse or keyboard) */
         &:hover {
-            background-color: var(--color-text-acc) !important;
-            color: var(--color-text-pri) !important;
+            background-color: black !important;
+            color: white !important;
         }
     }
+}
+
+.dropdown {
+    background-color: white !important;
 }
\ No newline at end of file