Bugfixes & UI updates

2024-08-29 12:45:25 -05:00
parent 9a3cbbd0e2
commit e9ccd0906c
16 changed files with 249 additions and 201 deletions
--- a/src/pages/settings/components/Applications.tsx
+++ b/src/pages/settings/components/Applications.tsx
@@ -16,7 +16,7 @@ const ApplicationSettings = () => {
 		if (isFetched) {
 			setApplicationData(data);
 		}
-	});
+	}, [data, isFetching]);

 	return (
 		<Stack>
--- a/src/pages/settings/components/Categories.tsx
+++ b/src/pages/settings/components/Categories.tsx
@@ -12,10 +12,10 @@ const CategorySettings = () => {
 	const [categoryData, setCategoryData] = useState<any>([]);

 	useEffect(() => {
-		if (isFetched) {
+		if (data && isFetched) {
 			setCategoryData(data);
 		}
-	});
+	}, [data, isFetched]);

 	return (
 		<Stack>
--- a/src/pages/settings/components/ThemeModalContent.tsx
+++ b/src/pages/settings/components/ThemeModalContent.tsx
@@ -22,7 +22,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					}}
 				>
 					<Icon
-						style={{ color: previewTheme.theme.primary }}
+						style={{ color: previewTheme.theme.primaryColor }}
 						icon={'mdi:check'}
 						height={32}
 						width={32}
@@ -43,7 +43,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							fontSize: 11,
 							fontStyle: 'normal',
-							color: previewTheme.theme.primary,
+							color: previewTheme.theme.primaryColor,
 							fontFamily:
 								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 							margin: 0,
@@ -56,7 +56,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							fontSize: 11,
 							fontStyle: 'italic',
-							color: previewTheme.theme.accent,
+							color: previewTheme.theme.accentColor,
 							fontFamily:
 								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 							margin: 0,
@@ -75,12 +75,13 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 				width: '100%',
 				backgroundColor: selectedTheme.backgroundColor,
 				borderRadius: '10px',
+				border: '2px solid',
 			}}
 		>
 			<Group
 				justify='center'
 				style={{
-					color: selectedTheme.primary,
+					color: selectedTheme.primaryColor,
 					paddingTop: '1rem',
 				}}
 			>
@@ -97,7 +98,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					textTransform: 'uppercase',
 					marginTop: '20px',
 					marginBottom: '20px',
-					color: selectedTheme.primary,
+					color: selectedTheme.primaryColor,
 				}}
 			>
 				Applications
@@ -134,7 +135,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					textTransform: 'uppercase',
 					marginTop: '20px',
 					marginBottom: '20px',
-					color: selectedTheme.primary,
+					color: selectedTheme.primaryColor,
 				}}
 			>
 				Bookmarks
@@ -166,7 +167,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							height: '10px',
 							width: 'auto',
-							color: selectedTheme.accent,
+							color: selectedTheme.accentColor,
 							textTransform: 'uppercase',
 							marginTop: '20px',
 							marginBottom: '20px',
@@ -179,7 +180,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.primary,
+							color: selectedTheme.primaryColor,
 						}}
 						component='a'
 					>
@@ -190,7 +191,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.primary,
+							color: selectedTheme.primaryColor,
 						}}
 						component='a'
 					>
@@ -213,7 +214,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							height: '10px',
 							width: 'auto',
-							color: selectedTheme.accent,
+							color: selectedTheme.accentColor,
 							textTransform: 'uppercase',
 							marginTop: '20px',
 							marginBottom: '20px',
@@ -226,7 +227,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.primary,
+							color: selectedTheme.primaryColor,
 						}}
 						component='a'
 					>
@@ -237,7 +238,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.primary,
+							color: selectedTheme.primaryColor,
 						}}
 						component='a'
 					>
--- a/src/pages/settings/components/Themes.tsx
+++ b/src/pages/settings/components/Themes.tsx
@@ -32,7 +32,7 @@ function ThemesSettings({ theme }: any) {
 	const [colorValue, setColorValue] = useState('#000000');
 	const [value, setValue] = useLocalStorage<any>({
 		key: 'theme',
-		defaultValue: {},
+		defaultValue: 'blackboard',
 	});
 	const { data, isFetched } = useQueryAPI({
 		endpoint: 'api/themes',
@@ -88,6 +88,14 @@ function ThemesSettings({ theme }: any) {
 				classNames={modalClasses}
 				opened={opened}
 				onClose={handleClose}
+				style={{
+					'--color-text-pri': theme.primaryColor,
+					'--color-text-acc': theme.accentColor,
+					'--color-background': theme.backgroundColor,
+					'--color-border': theme.borderColor,
+					'--color-search-background': theme.searchColor,
+					'--image-background': `url(${theme.backgroundImage})`,
+				}}
 			>
 				<Modal.Overlay />
 				<Modal.Content>
@@ -106,11 +114,7 @@ function ThemesSettings({ theme }: any) {
 							}
 							styles={{
 								label: {
-									color: 'black',
-								},
-								input: {
-									color: 'black',
-									backgroundColor: 'white',
+									color: theme.primaryColor,
 								},
 							}}
 						/>
@@ -118,35 +122,41 @@ function ThemesSettings({ theme }: any) {
 						<Group w={'100%'} h={'100%'} gap={0}>
 							<Stack w={'50%'}>
 								<Group c={'black'} justify='space-between'>
-									<Text>Primary Color</Text>
+									<Text className={textClasses.label} classNames={textClasses}>
+										Primary Color
+									</Text>
 									<ColorSwatch
 										onClick={() => {
-											setColorId('primary');
+											setColorId('primaryColor');
 											openPicker();
-											setColorValue(selectedTheme.primary);
+											setColorValue(selectedTheme.primaryColor);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.primary}
+										color={selectedTheme.primaryColor}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
 								<Group c={'black'} justify='space-between'>
-									<Text>Accent Color</Text>
+									<Text className={textClasses.label} classNames={textClasses}>
+										Accent Color
+									</Text>
 									<ColorSwatch
 										onClick={() => {
-											setColorId('accent');
+											setColorId('accentColor');
 											openPicker();
-											setColorValue(selectedTheme.accent);
+											setColorValue(selectedTheme.accentColor);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.accent}
+										color={selectedTheme.accentColor}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
 								<Group c={'black'} justify='space-between'>
-									<Text>Background Color</Text>
+									<Text className={textClasses.label} classNames={textClasses}>
+										Background Color
+									</Text>
 									<ColorSwatch
 										onClick={() => {
 											setColorId('background');
@@ -160,24 +170,28 @@ function ThemesSettings({ theme }: any) {
 									/>
 								</Group>
 								<Group c={'black'} justify='space-between'>
-									<Text>Border Color</Text>
+									<Text className={textClasses.label} classNames={textClasses}>
+										Border Color
+									</Text>
 									<ColorSwatch
 										onClick={() => {
-											setColorId('border');
+											setColorId('borderColor');
 											openPicker();
-											setColorValue(selectedTheme.border);
+											setColorValue(selectedTheme.borderColor);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.border}
+										color={selectedTheme.borderColor}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
 								<Group c={'black'} justify='space-between'>
-									<Text>Search Background Color</Text>
+									<Text className={textClasses.label} classNames={textClasses}>
+										Search Background Color
+									</Text>
 									<ColorSwatch
 										onClick={() => {
-											setColorId('searchbackground');
+											setColorId('searchBackground');
 											openPicker();
 											setColorValue(selectedTheme.searchColor);
 										}}
@@ -199,11 +213,7 @@ function ThemesSettings({ theme }: any) {
 										}
 										styles={{
 											label: {
-												color: 'black',
-											},
-											input: {
-												color: 'black',
-												backgroundColor: 'white',
+												color: theme.primaryColor,
 											},
 										}}
 									/>
@@ -214,22 +224,26 @@ function ThemesSettings({ theme }: any) {
 									<>
 										<ColorPicker value={colorValue} onChange={setColorValue} />
 										<Group w={'75%'} justify='space-between'>
-											<Text c={'black'}>{colorValue}</Text>
+											<TextInput
+												w={'50%'}
+												value={colorValue}
+												onChange={(e) => setColorValue(e.target.value)}
+											/>
 											<Group>
 												<Button
 													color={'green'}
 													onClick={() => {
 														switch (colorId) {
-															case 'primary':
+															case 'primaryColor':
 																setSelectedTheme({
 																	...selectedTheme,
-																	primary: colorValue,
+																	primaryColor: colorValue,
 																});
 																break;
-															case 'accent':
+															case 'accentColor':
 																setSelectedTheme({
 																	...selectedTheme,
-																	accent: colorValue,
+																	accentColor: colorValue,
 																});
 																break;
 															case 'background':
@@ -238,13 +252,13 @@ function ThemesSettings({ theme }: any) {
 																	backgroundColor: colorValue,
 																});
 																break;
-															case 'border':
+															case 'borderColor':
 																setSelectedTheme({
 																	...selectedTheme,
-																	border: colorValue,
+																	borderColor: colorValue,
 																});
 																break;
-															case 'searchbackground':
+															case 'searchBackground':
 																setSelectedTheme({
 																	...selectedTheme,
 																	searchColor: colorValue,
@@ -269,7 +283,9 @@ function ThemesSettings({ theme }: any) {
 										w={'90%'}
 										style={{ alignItems: 'center' }}
 									>
-										<Text c='black'>Pick a swatch to edit the color.</Text>
+										<Text className={textClasses.label} classNames={textClasses}>
+											Pick a swatch to edit the color.
+										</Text>
 									</Card>
 								)}
 							</Stack>
@@ -301,9 +317,9 @@ function ThemesSettings({ theme }: any) {
 								backgroundImage: 'none',
 								backgroundColor: '#EEEEEE',
 								searchColor: '#00000033',
-								primary: '#222222',
-								accent: '#5c5c5c',
-								border: '#5c5c5c',
+								primaryColor: '#222222',
+								accentColor: '#5c5c5c',
+								borderColor: '#5c5c5c',
 							});
 							open();
 						}}
@@ -320,8 +336,8 @@ function ThemesSettings({ theme }: any) {
 									h={'75px'}
 									style={{
 										backgroundColor: theme.backgroundColor,
-										border: `solid ${theme.border}`,
-										color: theme.primary,
+										border: `solid ${theme.borderColor}`,
+										color: theme.primaryColor,
 									}}
 									data-theme={theme.name}
 									onClick={() => {
@@ -342,9 +358,9 @@ function ThemesSettings({ theme }: any) {
 									</ActionIcon>
 									<ColorSwatch color={theme.backgroundColor} />
 									<ColorSwatch color={theme.searchColor} />
-									<ColorSwatch color={theme.primary} />
-									<ColorSwatch color={theme.accent} />
-									<ColorSwatch color={theme.border} />
+									<ColorSwatch color={theme.primaryColor} />
+									<ColorSwatch color={theme.accentColor} />
+									<ColorSwatch color={theme.borderColor} />

 									<ActionIcon
 										className={actionIconClasses.editButton}