Working empty version

src/App.tsx

@@ -52,7 +52,7 @@ function App() {
 	);
 
 	const overrides = createTheme({
-		white: theme?.colorbackground,
+		white: theme?.backgroundColor,
 		fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
 	});
 

src/DataTable/DataTable.tsx

@@ -22,6 +22,7 @@ export function DataTableComponent({
 	isFetching,
 	isLoading,
 	endpoint,
+	grouping,
 }: {
 	tableName: string;
 	columns: any;
@@ -29,6 +30,7 @@ export function DataTableComponent({
 	isFetching: boolean;
 	isLoading: boolean;
 	endpoint: string;
+	grouping?: string;
 }) {
 	const [theme, setTheme] = useAtom(appTheme);
 	const { mutateAsync: createRow } = useMutationAPI();
@@ -98,7 +100,7 @@ export function DataTableComponent({
 		),
 		mantineCreateRowModalProps: {
 			style: {
-				color: theme.colortextpri,
+				color: theme.primary,
 			},
 		},
 		renderTopToolbarCustomActions: ({ table }) => {

src/DataTable/columns/ApplicationColumns.tsx

@@ -15,10 +15,6 @@ export default function ApplicationColumns() {
 				id: 'id',
 				header: 'ID',
 				size: 50,
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'id',
-					id: `${cell.getValue()}-id`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
@@ -31,10 +27,6 @@ export default function ApplicationColumns() {
 				},
 				id: 'name',
 				header: 'Name',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'name',
-					id: `${cell.getValue()}-name`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
@@ -47,10 +39,6 @@ export default function ApplicationColumns() {
 				},
 				id: 'url',
 				header: 'Url',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'url',
-					id: `${cell.getValue()}-url`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
@@ -63,42 +51,30 @@ export default function ApplicationColumns() {
 				},
 				id: 'icon',
 				header: 'Icon',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'icon',
-					id: `${cell.getValue()}-icon`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
 			{
 				accessorFn: (row) => {
-					if (row.urlbase) {
+					if (row.baseUrl) {
-						return `${row.urlbase}`;
+						return `${row.baseUrl}`;
 					}
 					return '';
 				},
-				id: 'urlbase',
+				id: 'baseUrl',
 				header: 'Base Url',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'urlbase',
-					id: `${cell.getValue()}-urlbase`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
 			{
 				accessorFn: (row) => {
-					if (row.category) {
+					if (row.filterName) {
-						return `${row.category}`;
+						return `${row.filterName}`;
 					}
 					return '';
 				},
-				id: 'category',
+				id: 'filterName',
-				header: 'Category',
+				header: 'Filter Name',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'category',
-					id: `${cell.getValue()}-category`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},

src/DataTable/columns/BookmarkColumns.tsx

@@ -1,7 +1,7 @@
 import type { MRT_ColumnDef } from 'mantine-react-table';
 import { useMemo } from 'react';
 
-export default function ApplicationColumns(groups: any, groupData: any) {
+export default function ApplicationColumns(groups: any) {
 	const columns = useMemo<MRT_ColumnDef<any>[]>(
 		() => [
 			{
@@ -15,10 +15,6 @@ export default function ApplicationColumns(groups: any, groupData: any) {
 				id: 'id',
 				header: 'ID',
 				size: 50,
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'id',
-					id: `${cell.getValue()}-id`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
@@ -31,10 +27,6 @@ export default function ApplicationColumns(groups: any, groupData: any) {
 				},
 				id: 'name',
 				header: 'Name',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'name',
-					id: `${cell.getValue()}-name`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
@@ -47,31 +39,21 @@ export default function ApplicationColumns(groups: any, groupData: any) {
 				},
 				id: 'url',
 				header: 'Url',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'url',
-					id: `${cell.getValue()}-url`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
 			{
 				accessorFn: (row) => {
-					const index: number = row.category;
+					if (row.category) {
-					if (index !== null && index !== undefined) {
+						return `${row.category}`;
-						return `${index}`;
 					}
-					return 'N/A';
+					return '';
 				},
 				id: 'category',
 				header: 'Category',
 				editVariant: 'select',
 				mantineEditSelectProps: { data: groups },
-				mantineCopyButtonProps: ({ cell, row }) => ({
+				Cell: ({ renderedCellValue }) => renderedCellValue,
-					className: 'category',
-					id: `${cell.getValue()}-category`,
-				}),
-				Cell: ({ renderedCellValue, row }) =>
-					groupData[row?.original.category].category_name,
 				Header: ({ column }) => column.columnDef.header,
 			},
 		],

src/DataTable/columns/CategoryColumns.tsx

@@ -20,12 +20,12 @@ export default function CategoryColumns() {
 			},
 			{
 				accessorFn: (row) => {
-					if (row.category_name) {
+					if (row.categoryName) {
-						return `${row.category_name}`;
+						return `${row.categoryName}`;
 					}
 					return '';
 				},
-				id: 'category_name',
+				id: 'categoryName',
 				header: 'Name',
 				size: 50,
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
@@ -33,13 +33,13 @@ export default function CategoryColumns() {
 			},
 			{
 				accessorFn: (row) => {
-					if (row.category_index > -1) {
+					if (row.categoryIndex > -1) {
-						return `${row.category_index}`;
+						return `${row.categoryIndex}`;
 					}
 					return '';
 				},
 				enableEditing: false,
-				id: 'category_index',
+				id: 'categoryIndex',
 				header: 'Index',
 				size: 50,
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
@@ -47,12 +47,12 @@ export default function CategoryColumns() {
 			},
 			{
 				accessorFn: (row) => {
-					if (row.column_filter) {
+					if (row.filterName) {
-						return `${row.column_filter}`;
+						return `${row.filterName}`;
 					}
 					return '';
 				},
-				id: 'column_filter',
+				id: 'filterName',
 				header: 'Filter Name',
 				size: 50,
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,

src/DataTable/columns/MessagesColumns.tsx

@@ -15,10 +15,6 @@ export default function MessagesColumns() {
 				id: 'id',
 				header: 'ID',
 				size: 50,
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'id',
-					id: `${cell.getValue()}-id`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
@@ -31,26 +27,6 @@ export default function MessagesColumns() {
 				},
 				id: 'message',
 				header: 'Message',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'message',
-					id: `${cell.getValue()}-message`,
-				}),
-				Cell: ({ renderedCellValue, row }) => renderedCellValue,
-				Header: ({ column }) => column.columnDef.header,
-			},
-			{
-				accessorFn: (row) => {
-					if (row.easteregg) {
-						return `${row.easteregg}`;
-					}
-					return '';
-				},
-				id: 'easteregg',
-				header: 'Easter Egg?',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'easteregg',
-					id: `${cell.getValue()}-easteregg`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},

src/DataTable/columns/PersonalizationColumns.tsx

@@ -6,34 +6,26 @@ export default function PersonalizationColumns() {
 		() => [
 			{
 				accessorFn: (row: any) => {
-					if (row.firstname) {
+					if (row.firstName) {
-						return `${row.firstname}`;
+						return `${row.firstName}`;
 					}
 					return '';
 				},
-				id: 'firstname',
+				id: 'firstName',
 				header: 'First Name',
 				size: 50,
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'firstname',
-					id: `${cell.getValue()}-firstname`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
 			{
 				accessorFn: (row: any) => {
-					if (row.lastname) {
+					if (row.lastName) {
-						return `${row.lastname}`;
+						return `${row.lastName}`;
 					}
 					return '';
 				},
-				id: 'lastname',
+				id: 'lastName',
 				header: 'Last Name',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'lastname',
-					id: `${cell.getValue()}-lastname`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},
@@ -46,10 +38,6 @@ export default function PersonalizationColumns() {
 				},
 				id: 'email',
 				header: 'Email',
-				mantineCopyButtonProps: ({ cell, row }) => ({
-					className: 'email',
-					id: `${cell.getValue()}-email`,
-				}),
 				Cell: ({ renderedCellValue, row }) => renderedCellValue,
 				Header: ({ column }) => column.columnDef.header,
 			},

src/components/ThemeProvider.tsx

@@ -7,12 +7,12 @@ export default function ThemeProvider({
 	return (
 		<Box
 			style={{
-				'--color-text-pri': theme.colortextpri,
+				'--color-text-pri': theme.primary,
-				'--color-text-acc': theme.colortextacc,
+				'--color-text-acc': theme.accent,
-				'--color-background': theme.colorbackground,
+				'--color-background': theme.backgroundColor,
-				'--color-border': theme.colorborder,
+				'--color-border': theme.border,
-				'--color-search-background': theme.colorsearchbackground,
+				'--color-search-background': theme.searchColor,
-				'--image-background': `url(${theme.imagebackground})`,
+				'--image-background': `url(${theme.backgroundImage})`,
 			}}
 		>
 			{children}

src/pages/homepage/Homepage.tsx

@@ -13,9 +13,13 @@ import { useLocalStorage } from '@mantine/hooks';
 export default function Homepage({ theme }: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
-	const [contentType, setContentType] = useLocalStorage<any>({
+	const [appFilter, setAppFilter] = useLocalStorage<[any]>({
-		key: 'contenttype',
+		key: 'appFilter',
-		defaultValue: 'All',
+		defaultValue: ['All'],
+	});
+	const [bookmarkFilter, setBookmarkFilter] = useLocalStorage<[any]>({
+		key: 'bookmarkFilter',
+		defaultValue: ['All'],
 	});
 	function date() {
 		const currentDate = new Date();
@@ -33,18 +37,18 @@ export default function Homepage({ theme }: any) {
 		const greet = Math.floor(currentTime.getHours() / 6);
 		const easterEggChance = Math.floor(Math.random() * 100);
 		let timeBased: any = [];
-		let easterEggs: any = [];
+		let customGreetings: any = [];
 		for (const l of list) {
-			if (l.easteregg === 'N') {
+			if (l.customGreeting === 0) {
 				timeBased = timeBased.concat(l);
 			} else {
-				easterEggs = easterEggs.concat(l);
+				customGreetings = customGreetings.concat(l);
 			}
 		}
-		if (easterEggChance > 10 || easterEggs.length === 0) {
+		if (easterEggChance > 10 || customGreetings.length === 0) {
 			return timeBased[greet].message;
 		}
-		return easterEggs[Math.floor(Math.random() * easterEggs.length)].message;
+		return customGreetings[Math.floor(Math.random() * customGreetings.length)].message;
 	}
 
 	useEffect(() => {
@@ -57,12 +61,14 @@ export default function Homepage({ theme }: any) {
 		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search />
 			<Header date={date()} greet={displayedGreeting} />
-			<Applications contentType={contentType} />
+			<Applications contentType={appFilter} />
-			<Bookmarks contentType={contentType} />
+			<Bookmarks contentType={bookmarkFilter} />
 			<SettingsButton
 				theme={theme}
-				contentType={contentType}
+				setAppFilter={setAppFilter}
-				setContentType={setContentType}
+				appFilter={appFilter}
+				setBookmarkFilter={setBookmarkFilter}
+				bookmarkFilter={bookmarkFilter}
 			/>
 		</Stack>
 	);

src/pages/homepage/components/Applications.tsx

@@ -13,6 +13,8 @@ function Applications({ contentType }: any) {
 		}
 	}, [isFetching]);
 	return (
+		<>
+			{applications.length > 0 && (
 				<Stack id='apps' style={{ gap: 0 }}>
 					<Text className={texts.sectionTitle} classNames={texts}>
 						Applications
@@ -31,20 +33,25 @@ function Applications({ contentType }: any) {
 							paddingBottom: 'var(--module-spacing)',
 						}}
 					>
-				{applications?.map((item: any) => {
+						{applications?.map((application: any) => {
-					if (item.category === contentType || contentType === 'All')
+							if (
+								contentType.includes(application.filterName) ||
+								contentType.includes('All')
+							)
 								return (
 									<AppItem
-								key={item.name}
+										key={application.name}
-								name={item.name}
+										name={application.name}
-								url={item.url}
+										url={application.url}
-								icon={item.icon}
+										icon={application.icon}
-								category={item.category}
+										category={application.category}
 									/>
 								);
 						})}
 					</Stack>
 				</Stack>
+			)}
+		</>
 	);
 }
 

src/pages/homepage/components/Bookmarks.tsx

@@ -20,7 +20,6 @@ function Links({ contentType }: any) {
 			setCategories(groupData);
 		}
 	}, [linksIsFetched, groupsIsFetched]);
-
 	return (
 		<>
 			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
@@ -39,13 +38,16 @@ function Links({ contentType }: any) {
 						}}
 					>
 						{categories.map((category: any) => {
-							if (category.column_filter === contentType || contentType === 'All') {
+							if (
+								contentType.includes(category.filterName) ||
+								contentType.includes('All')
+							) {
 								return (
 									<LinkGroups
 										key={category.id}
-										category={category.category_name}
+										category={category.categoryName}
 										links={bookmarks.filter(
-											(bookmark: any) => bookmark.category === category.category_index,
+											(bookmark: any) => bookmark.category === category.categoryName,
 										)}
 									/>
 								);

src/pages/homepage/components/MessageInfo.jsx

@@ -22,7 +22,7 @@ function MessageInfo() {
 							group={index + 1}
 							index={greeting.index}
 							greeting={greeting.message}
-							easterEgg={greeting.easteregg}
+							easterEgg={greeting.customGreeting}
 						/>
 					))}
 				</div>

src/pages/homepage/components/Search.tsx

@@ -63,6 +63,7 @@ export default function Search() {
 			}}
 		>
 			<TextInput
+				autoFocus
 				className={textInputClasses.search}
 				classNames={textInputClasses}
 				spellCheck='true'

src/pages/homepage/components/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, NavLink, Select } from '@mantine/core';
+import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
 import { useQueryAPI } from '../../../hooks/useAPI';
@@ -7,7 +7,13 @@ import menu from '../../../styles/Menu.module.css';
 import navLink from '../../../styles/NavLink.module.css';
 import selectClasses from '../../../styles/Select.module.css';
 
-function SettingsButton({ contentType, setContentType, theme }: any) {
+function SettingsButton({
+	appFilter,
+	setAppFilter,
+	bookmarkFilter,
+	setBookmarkFilter,
+	theme,
+}: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 
@@ -15,7 +21,7 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
 		if (data) {
 			const list: [any] =
 				data.map((category: any) => {
-					return { value: category.category, label: category.category };
+					return { value: category.filterName, label: category.filterName };
 				}) || [];
 			list.unshift({ value: 'All', label: 'All' });
 			setCategories(list);
@@ -57,13 +63,24 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
 						classNames={navLink}
 					/>
 				</NavLink>
-				<Select
+				<MultiSelect
-					label='Homepage Filter'
+					label='App Filter'
 					data={categories ?? []}
-					defaultValue={contentType}
+					defaultValue={appFilter}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						setContentType(data);
+						setAppFilter(data);
+					}}
+					classNames={selectClasses}
+					comboboxProps={{ withinPortal: false }}
+				/>
+				<MultiSelect
+					label='Bookmark Filter'
+					data={categories ?? []}
+					defaultValue={bookmarkFilter}
+					withCheckIcon={false}
+					onChange={(data: any) => {
+						setBookmarkFilter(data);
 					}}
 					classNames={selectClasses}
 					comboboxProps={{ withinPortal: false }}

src/pages/settings/components/Bookmarks.tsx

@@ -11,9 +11,9 @@ const BookmarkSettings = () => {
 	});
 	const {
 		data: groupData,
-		isFetching: groupDataisFetching,
+		isFetching: groupDataIsFetching,
-		isLoading: groupDataisLoading,
+		isLoading: groupDataIsLoading,
-		isFetched: groupDataisFetched,
+		isFetched: groupDataIsFetched,
 	} = useQueryAPI({ endpoint: 'api/categories' });
 	const [bookmarkData, setBookmarkData] = useState<any>([]);
 	const [groups, setGroups] = useState([]);
@@ -26,15 +26,14 @@ const BookmarkSettings = () => {
 	});
 
 	useEffect(() => {
-		if (groupDataisFetched) {
+		if (groupData) {
-			const groupList = groupData.map((category: any) => {
+			const groupList = groupData?.map((category: any) => {
-				return category.category_name;
+				return category.categoryName;
 			});
 			setGroups(groupList);
 			setFullyFetched(true);
 		}
-	}, [groupDataisFetched]);
+	}, [groupData]);
-
 	return (
 		<Stack>
 			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -42,11 +41,12 @@ const BookmarkSettings = () => {
 			</Text>
 			<DataTable
 				tableName='Applications'
-				columns={BookmarkColumns(groups, groupData)}
+				columns={BookmarkColumns(groups)}
 				tableData={bookmarkData}
 				isFetching={isFetching}
 				isLoading={isLoading}
 				endpoint={endpoint}
+				grouping='category'
 			/>
 		</Stack>
 	);

src/pages/settings/components/Personalization.tsx

@@ -5,7 +5,7 @@ import PersonalizationColumns from '../../../DataTable/columns/PersonalizationCo
 import { useQueryAPI } from '../../../hooks/useAPI';
 import { textClasses } from '../../../styles';
 const PersonalizationSettings = () => {
-	const endpoint = 'api/personaldata';
+	const endpoint = 'api/personalData';
 	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
 		endpoint: endpoint,
 	});

src/pages/settings/components/ThemeModalContent.tsx

@@ -22,7 +22,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					}}
 				>
 					<Icon
-						style={{ color: previewTheme.theme.colortextpri }}
+						style={{ color: previewTheme.theme.primary }}
 						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.colortextpri,
+							color: previewTheme.theme.primary,
 							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.colortextacc,
+							color: previewTheme.theme.accent,
 							fontFamily:
 								'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 							margin: 0,
@@ -73,14 +73,14 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 		<Stack
 			style={{
 				width: '100%',
-				backgroundColor: selectedTheme.colorbackground,
+				backgroundColor: selectedTheme.backgroundColor,
 				borderRadius: '10px',
 			}}
 		>
 			<Group
 				justify='center'
 				style={{
-					color: selectedTheme.colortextpri,
+					color: selectedTheme.primary,
 					paddingTop: '1rem',
 				}}
 			>
@@ -97,14 +97,14 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					textTransform: 'uppercase',
 					marginTop: '20px',
 					marginBottom: '20px',
-					color: selectedTheme.colortextpri,
+					color: selectedTheme.primary,
 				}}
 			>
 				Applications
 			</Text>
 			<Stack
 				style={{
-					background: selectedTheme.colorbackground,
+					background: selectedTheme.backgroundColor,
 					gap: '.25rem',
 					backgroundSize: 'cover',
 					borderBottom: '0px solid',
@@ -134,7 +134,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 					textTransform: 'uppercase',
 					marginTop: '20px',
 					marginBottom: '20px',
-					color: selectedTheme.colortextpri,
+					color: selectedTheme.primary,
 				}}
 			>
 				Bookmarks
@@ -166,7 +166,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							height: '10px',
 							width: 'auto',
-							color: selectedTheme.colortextacc,
+							color: selectedTheme.accent,
 							textTransform: 'uppercase',
 							marginTop: '20px',
 							marginBottom: '20px',
@@ -179,7 +179,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.colortextpri,
+							color: selectedTheme.primary,
 						}}
 						component='a'
 					>
@@ -190,7 +190,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.colortextpri,
+							color: selectedTheme.primary,
 						}}
 						component='a'
 					>
@@ -213,7 +213,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							fontWeight: 400,
 							height: '10px',
 							width: 'auto',
-							color: selectedTheme.colortextacc,
+							color: selectedTheme.accent,
 							textTransform: 'uppercase',
 							marginTop: '20px',
 							marginBottom: '20px',
@@ -226,7 +226,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.colortextpri,
+							color: selectedTheme.primary,
 						}}
 						component='a'
 					>
@@ -237,7 +237,7 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 							display: 'block',
 							fontSize: '14px',
 							lineHeight: 2,
-							color: selectedTheme.colortextpri,
+							color: selectedTheme.primary,
 						}}
 						component='a'
 					>

src/pages/settings/components/Themes.tsx

@@ -123,11 +123,11 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('primary');
 											openPicker();
-											setColorValue(selectedTheme.colortextpri);
+											setColorValue(selectedTheme.primary);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colortextpri}
+										color={selectedTheme.primary}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
@@ -137,11 +137,11 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('accent');
 											openPicker();
-											setColorValue(selectedTheme.colortextacc);
+											setColorValue(selectedTheme.accent);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colortextacc}
+										color={selectedTheme.accent}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
@@ -151,11 +151,11 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('background');
 											openPicker();
-											setColorValue(selectedTheme.colorbackground);
+											setColorValue(selectedTheme.backgroundColor);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colorbackground}
+										color={selectedTheme.backgroundColor}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
@@ -165,11 +165,11 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('border');
 											openPicker();
-											setColorValue(selectedTheme.colorborder);
+											setColorValue(selectedTheme.border);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colorborder}
+										color={selectedTheme.border}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
@@ -179,20 +179,23 @@ function ThemesSettings({ theme }: any) {
 										onClick={() => {
 											setColorId('searchbackground');
 											openPicker();
-											setColorValue(selectedTheme.colorsearchbackground);
+											setColorValue(selectedTheme.searchColor);
 										}}
 										radius={'sm'}
 										w={'100px'}
-										color={selectedTheme.colorsearchbackground}
+										color={selectedTheme.searchColor}
 										style={{ cursor: 'pointer' }}
 									/>
 								</Group>
 								<Group c={'black'} justify='space-between'>
 									<TextInput
 										label='Background Image Path'
-									value={selectedTheme.imagebackground}
+										value={selectedTheme.backgroundImage}
 										onChange={(e) =>
-										setSelectedTheme({ ...selectedTheme, imagebackground: e.target.value })
+											setSelectedTheme({
+												...selectedTheme,
+												backgroundImage: e.target.value,
+											})
 										}
 										styles={{
 											label: {
@@ -220,31 +223,31 @@ function ThemesSettings({ theme }: any) {
 															case 'primary':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colortextpri: colorValue,
+																	primary: colorValue,
 																});
 																break;
 															case 'accent':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colortextacc: colorValue,
+																	accent: colorValue,
 																});
 																break;
 															case 'background':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colorbackground: colorValue,
+																	backgroundColor: colorValue,
 																});
 																break;
 															case 'border':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colorborder: colorValue,
+																	border: colorValue,
 																});
 																break;
 															case 'searchbackground':
 																setSelectedTheme({
 																	...selectedTheme,
-																	colorsearchbackground: colorValue,
+																	searchColor: colorValue,
 																});
 																break;
 														}
@@ -295,12 +298,12 @@ function ThemesSettings({ theme }: any) {
 							setSelectedTheme({
 								id: undefined,
 								name: 'default',
-								imagebackground: 'none',
+								backgroundImage: 'none',
-								colorbackground: '#EEEEEE',
+								backgroundColor: '#EEEEEE',
-								colorsearchbackground: '#00000033',
+								searchColor: '#00000033',
-								colortextpri: '#222222',
+								primary: '#222222',
-								colortextacc: '#5c5c5c',
+								accent: '#5c5c5c',
-								colorborder: '#5c5c5c',
+								border: '#5c5c5c',
 							});
 							open();
 						}}
@@ -316,9 +319,9 @@ function ThemesSettings({ theme }: any) {
 									w={'100%'}
 									h={'75px'}
 									style={{
-										backgroundColor: theme.colorbackground,
+										backgroundColor: theme.backgroundColor,
-										border: `solid ${theme.colorborder}`,
+										border: `solid ${theme.border}`,
-										color: theme.colortextpri,
+										color: theme.primary,
 									}}
 									data-theme={theme.name}
 									onClick={() => {
@@ -337,11 +340,11 @@ function ThemesSettings({ theme }: any) {
 									>
 										<FiEdit />
 									</ActionIcon>
-									<ColorSwatch color={theme.colorbackground} />
+									<ColorSwatch color={theme.backgroundColor} />
-									<ColorSwatch color={theme.colorsearchbackground} />
+									<ColorSwatch color={theme.searchColor} />
-									<ColorSwatch color={theme.colortextpri} />
+									<ColorSwatch color={theme.primary} />
-									<ColorSwatch color={theme.colortextacc} />
+									<ColorSwatch color={theme.accent} />
-									<ColorSwatch color={theme.colorborder} />
+									<ColorSwatch color={theme.border} />
 
 									<ActionIcon
 										className={actionIconClasses.editButton}