Bugfixes & UI updates

README.md

@@ -3,8 +3,6 @@
 
 - Image uploads for backgrounds
 
-- Update PATCH on links to translate from name to ID of category
-
 - Create actions section
 
 - Fix all query/setState problems
@@ -12,7 +10,6 @@
 - Remove the following
     * hardcoded base url (trigger)
     * hardcoded mariadb password
-    * hardcoded name in greetings
 
 - Add /? help popup from search
 

package-lock.json

@@ -17,7 +17,7 @@
 				"@mantine/modals": "^7.12.1",
 				"@tabler/icons-react": "^3.12.0",
 				"@tanstack/react-query": "^5.51.23",
-				"@tanstack/react-query-devtools": "^4.36.1",
+				"@tanstack/react-query-devtools": "^5.0.0-alpha.91",
 				"@tanstack/react-query-persist-client": "^5.51.23",
 				"clsx": "^2.1.1",
 				"dayjs": "^1.11.12",
@@ -1534,6 +1534,15 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			}
 		},
+		"node_modules/@tanstack/query-devtools": {
+			"version": "5.0.0-alpha.89",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.0.0-alpha.89.tgz",
+			"integrity": "sha512-/D7D2xq+vW1qkz/AJyD44ACsHLNtDC5/tRqozhIlpu/OOEM1RkjMiHv2IAJmWgJJ1cWm80qA5UXT4dropkUyMw==",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/tannerlinsley"
+			}
+		},
 		"node_modules/@tanstack/query-persist-client-core": {
 			"version": "5.51.21",
 			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.51.21.tgz",
@@ -1562,22 +1571,20 @@
 			}
 		},
 		"node_modules/@tanstack/react-query-devtools": {
-			"version": "4.36.1",
+			"version": "5.0.0-alpha.91",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.36.1.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.0.0-alpha.91.tgz",
-			"integrity": "sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==",
+			"integrity": "sha512-nFsLJowDDuvVRX8j6iEyBZaOcD2hwHDQhbn1GnkHpZqg3EuroVIi7lKZNpzcDyKLa7a8pZTdmMbZ6Ki51JnP7w==",
 			"dependencies": {
-				"@tanstack/match-sorter-utils": "^8.7.0",
+				"@tanstack/query-devtools": "5.0.0-alpha.89"
-				"superjson": "^1.10.0",
-				"use-sync-external-store": "^1.2.0"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^4.36.1",
+				"@tanstack/react-query": "5.0.0-alpha.91",
-				"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+				"react": "^18.0.0",
-				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+				"react-dom": "^18.0.0"
 			}
 		},
 		"node_modules/@tanstack/react-query-persist-client": {
@@ -2170,20 +2177,6 @@
 			"integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
 			"dev": true
 		},
-		"node_modules/copy-anything": {
-			"version": "3.0.5",
-			"resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
-			"integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
-			"dependencies": {
-				"is-what": "^4.1.8"
-			},
-			"engines": {
-				"node": ">=12.13"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/mesqueeb"
-			}
-		},
 		"node_modules/cosmiconfig": {
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -3025,17 +3018,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/is-what": {
-			"version": "4.1.16",
-			"resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
-			"integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
-			"engines": {
-				"node": ">=12.13"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/mesqueeb"
-			}
-		},
 		"node_modules/isexe": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3976,17 +3958,6 @@
 			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
 			"integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
 		},
-		"node_modules/superjson": {
-			"version": "1.13.3",
-			"resolved": "https://registry.npmjs.org/superjson/-/superjson-1.13.3.tgz",
-			"integrity": "sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==",
-			"dependencies": {
-				"copy-anything": "^3.0.2"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
 		"node_modules/supports-color": {
 			"version": "5.5.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -4219,14 +4190,6 @@
 				}
 			}
 		},
-		"node_modules/use-sync-external-store": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
-			"integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
-			"peerDependencies": {
-				"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-			}
-		},
 		"node_modules/vite": {
 			"version": "5.4.0",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.0.tgz",

package.json

@@ -19,7 +19,7 @@
 		"@mantine/modals": "^7.12.1",
 		"@tabler/icons-react": "^3.12.0",
 		"@tanstack/react-query": "^5.51.23",
-		"@tanstack/react-query-devtools": "^4.36.1",
+		"@tanstack/react-query-devtools": "^5.0.0-alpha.91",
 		"@tanstack/react-query-persist-client": "^5.51.23",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.12",

src/App.tsx

@@ -20,6 +20,7 @@ import Settings from './pages/settings/Settings';
 import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
 import '@mantine/dates/styles.css'; //if using mantine date picker features
 import 'mantine-react-table/styles.css'; //import MRT styles
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useAtom } from 'jotai';
 import { appTheme } from './contexts/theme';
 
@@ -34,7 +35,6 @@ function App() {
 	});
 
 	const [theme, setTheme] = useAtom(appTheme);
-
 	useEffect(() => {
 		if (data && themeName) {
 			const temp = data.find((t: any) => t.name === themeName);
@@ -64,6 +64,7 @@ function App() {
 					<ThemeProvider theme={theme}>
 						<ModalsProvider>
 							<RouterProvider router={router} />
+							<ReactQueryDevtools initialIsOpen={false} />
 						</ModalsProvider>
 					</ThemeProvider>
 				</MantineProvider>

src/DataTable/DataTable.tsx

@@ -100,7 +100,7 @@ export function DataTableComponent({
 		),
 		mantineCreateRowModalProps: {
 			style: {
-				color: theme.primary,
+				color: theme.primaryColor,
 			},
 		},
 		renderTopToolbarCustomActions: ({ table }) => {

src/components/ThemeProvider.tsx

@@ -7,10 +7,10 @@ export default function ThemeProvider({
 	return (
 		<Box
 			style={{
-				'--color-text-pri': theme.primary,
+				'--color-text-pri': theme.primaryColor,
-				'--color-text-acc': theme.accent,
+				'--color-text-acc': theme.accentColor,
 				'--color-background': theme.backgroundColor,
-				'--color-border': theme.border,
+				'--color-border': theme.borderColor,
 				'--color-search-background': theme.searchColor,
 				'--image-background': `url(${theme.backgroundImage})`,
 			}}

src/hooks/useAPI.ts

@@ -106,24 +106,13 @@ export function useMutationAPI() {
 		}: {
 			method: string;
 			endpoint: string;
-			body?: object | undefined | null;
+			body: object | undefined | null;
 		}) => callEndpoint(method, endpoint, body),
-		onMutate: () => {},
+		onMutate: () => {
-		onSuccess: (data, variables) => {
+			queryClient.invalidateQueries();
-			queryClient.invalidateQueries({ queryKey: ['GET', variables.endpoint] });
+		},
-
+		onSuccess: () => {
-			if (variables.endpoint.includes('/')) {
+			queryClient.invalidateQueries();
-				if ((variables.endpoint.match(/\//g) || []).length > 2) {
-					const GetEndpoint = variables.endpoint.split('/');
-					const Endpoint = `${GetEndpoint[1]}/${GetEndpoint[2]}`;
-					queryClient.invalidateQueries({ queryKey: ['GET', `/${Endpoint}`] });
-				} else {
-					const GetEndpoint = variables.endpoint.split('/')[1];
-					queryClient.invalidateQueries({
-						queryKey: ['GET', `/${GetEndpoint}`],
-					});
-				}
-			}
 		},
 	});
 }

src/pages/homepage/components/Applications.tsx

@@ -14,7 +14,7 @@ function Applications({ contentType }: any) {
 	}, [isFetching]);
 	return (
 		<>
-			{applications.length > 0 && (
+			{applications.length > 0 && contentType.length > 0 && (
 				<Stack id='apps' style={{ gap: 0 }}>
 					<Text className={texts.sectionTitle} classNames={texts}>
 						Applications

src/pages/homepage/components/Bookmarks.tsx

@@ -22,40 +22,43 @@ function Links({ contentType }: any) {
 	}, [linksIsFetched, groupsIsFetched]);
 	return (
 		<>
-			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
+			{groupsIsFetched &&
-				<Stack id='links' style={{ gap: 0 }}>
+				linksIsFetched &&
-					<Text className={texts.sectionTitle} classNames={texts}>
+				categories?.length > 0 &&
-						Bookmarks
+				contentType.length > 0 && (
-					</Text>
+					<Stack id='links' style={{ gap: 0 }}>
-					<Stack
+						<Text className={texts.sectionTitle} classNames={texts}>
-						style={{
+							Bookmarks
-							display: 'grid',
+						</Text>
-							flexWrap: 'nowrap',
+						<Stack
-							gridColumnGap: '20px',
+							style={{
-							gridRowGap: '0px',
+								display: 'grid',
-							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
+								flexWrap: 'nowrap',
-							gridTemplateRows: 'auto',
+								gridColumnGap: '20px',
-						}}
+								gridRowGap: '0px',
-					>
+								gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
-						{categories.map((category: any) => {
+								gridTemplateRows: 'auto',
-							if (
+							}}
-								contentType.includes(category.filterName) ||
+						>
-								contentType.includes('All')
+							{categories.map((category: any) => {
-							) {
+								if (
-								return (
+									contentType.includes(category.filterName) ||
-									<LinkGroups
+									contentType.includes('All')
-										key={category.id}
+								) {
-										category={category.categoryName}
+									return (
-										links={bookmarks.filter(
+										<LinkGroups
-											(bookmark: any) => bookmark.category === category.categoryName,
+											key={category.id}
-										)}
+											category={category.categoryName}
-									/>
+											links={bookmarks.filter(
-								);
+												(bookmark: any) => bookmark.category === category.categoryName,
-							}
+											)}
-						})}
+										/>
+									);
+								}
+							})}
+						</Stack>
 					</Stack>
-				</Stack>
+				)}
-			)}
 		</>
 	);
 }

src/pages/homepage/components/Search.tsx

@@ -1,15 +1,18 @@
-import { Stack, TextInput } from '@mantine/core';
+import { Divider, Group, Modal, Stack, Text, TextInput } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useAtom } from 'jotai';
 import { useState } from 'react';
+import { appTheme } from '../../../contexts/theme';
 import { useQueryAPI } from '../../../hooks';
-import { textInputClasses } from '../../../styles';
+import { modalClasses, textInputClasses } from '../../../styles';
 
 export default function Search() {
 	const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
-
+	const [opened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [providerLabel, setProviderLabel] = useState('Google Search');
 	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
 	const [value, setValue] = useState('');
-
+	const [theme, setTheme] = useAtom(appTheme);
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -22,7 +25,9 @@ export default function Search() {
 			subtext = item.target.value;
 		}
 		if (item.key === 'Enter') {
-			if (item.target.value.startsWith('/')) {
+			if (providerLabel === 'Show help') {
+				openModal();
+			} else if (item.target.value.startsWith('/')) {
 				open(`${providerURL}${subtext}`, '_self');
 			} else if (validURL(item.target.value)) {
 				if (containsProtocol(item.target.value)) window.location = item.target.value;
@@ -72,7 +77,9 @@ export default function Search() {
 				data-active={value !== ''}
 				onChange={(item: any) => {
 					setValue(item.currentTarget.value);
-					if (item.target.value.startsWith('/')) {
+					if (item.target.value === '/?') {
+						setProviderLabel('Show help');
+					} else if (item.target.value.startsWith('/')) {
 						const provider = providers?.find(
 							(p: any) => p.prefix === item.target.value.split(' ')[0],
 						);
@@ -89,6 +96,48 @@ export default function Search() {
 					}
 				}}
 			/>
+			<Modal.Root
+				size={'50%'}
+				className={modalClasses.helpModal}
+				classNames={modalClasses}
+				opened={opened}
+				onClose={() => {
+					closeModal();
+					setValue('');
+					setProviderLabel('Google Search');
+					setProviderURL('https://www.google.com/search?q=');
+				}}
+				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})`,
+				}}
+				closeOnEscape
+				closeOnClickOutside
+			>
+				<Modal.Overlay />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Help info</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body pb={'2rem'}>
+						<Stack gap={0} w={'100%'} align='center'>
+							<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
+							<Divider py={8} w={'65%'} color={theme.accentColor} />
+							{providers?.map((provider: any) => (
+								<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
+									<Text>{provider.prefix}</Text>
+									<Text>{provider.name}</Text>
+								</Group>
+							))}
+						</Stack>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
 		</Stack>
 	);
 }

src/pages/settings/components/Applications.tsx

@@ -16,7 +16,7 @@ const ApplicationSettings = () => {
 		if (isFetched) {
 			setApplicationData(data);
 		}
-	});
+	}, [data, isFetching]);
 
 	return (
 		<Stack>

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>

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'
 					>

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',
+									color: theme.primaryColor,
-								},
-								input: {
-									color: 'black',
-									backgroundColor: 'white',
 								},
 							}}
 						/>
@@ -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',
+												color: theme.primaryColor,
-											},
-											input: {
-												color: 'black',
-												backgroundColor: 'white',
 											},
 										}}
 									/>
@@ -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',
+								primaryColor: '#222222',
-								accent: '#5c5c5c',
+								accentColor: '#5c5c5c',
-								border: '#5c5c5c',
+								borderColor: '#5c5c5c',
 							});
 							open();
 						}}
@@ -320,8 +336,8 @@ function ThemesSettings({ theme }: any) {
 									h={'75px'}
 									style={{
 										backgroundColor: theme.backgroundColor,
-										border: `solid ${theme.border}`,
+										border: `solid ${theme.borderColor}`,
-										color: theme.primary,
+										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.primaryColor} />
-									<ColorSwatch color={theme.accent} />
+									<ColorSwatch color={theme.accentColor} />
-									<ColorSwatch color={theme.border} />
+									<ColorSwatch color={theme.borderColor} />
 
 									<ActionIcon
 										className={actionIconClasses.editButton}

src/styles/Modal.module.css

@@ -1,27 +1,50 @@
+.helpModal {
+    &.root {
+        .content {
+            color: var(--color-text-pri);
+            background-color: var(--color-background);
+            .header {
+                .close {
+                    color: white;
+                    background-color: var(--mantine-color-red-6);
+                    max-width: 20px!important;
+                    max-height: 20px!important;
+                    &:hover {
+                        color: var(--mantine-color-red-1);
+                        background-color: var(--mantine-color-red-4);
+                    }
+                }
+            }
+        }
+    }
+
+}
 .editThemeModal {
-    .header {
+    &.root {
-        color: white;
+        .content {
-        background-color: var(--color-background);
+            justify-content: center;
-    }
+            align-content: center;
-    .content {
+            color: var(--color-text-pri);
-        justify-content: center;
+            background-color: var(--color-background);
-        align-content: center;
+            .header {
-        color: light-dark(var(--mantine-primary-color-6), white);
+                color: white;
-        background-color: white;
+                background-color: var(--color-text-acc);
-    }
+                .close {
-    .body {
+                    color: white;
-        display: flex;
+                    background-color: var(--mantine-color-red-6);
-        flex-direction: column;
+                    max-width: 20px!important;
-        align-items: center;
+                    max-height: 20px!important;
-    }
+                    &:hover {
-    .close {
+                        color: var(--mantine-color-red-1);
-        color: var(--mantine-color-appRed-3);
+                        background-color: var(--mantine-color-red-4);
-        background-color: var(--mantine-color-appRed-1);
+                    }
-        max-width: 20px!important;
+                }
-        max-height: 20px!important;
+            }
-        &:hover {
+            .body {
-            color: var(--mantine-color-appRed-1);
+                display: flex;
-            background-color: var(--mantine-color-appRed-3);
+                flex-direction: column;
+                align-items: center;
+            }
         }
     }
 }

src/styles/Text.module.css

@@ -40,6 +40,12 @@
     }
 }
 
+.label {
+    &.root {
+        color: var(--color-text-pri);
+    }
+}
+
 .appName {
     &.root {
         font-weight: 400;