New Theme Builder UI

package-lock.json

@@ -13,16 +13,16 @@
 				"@mantine/form": "^8.1.2",
 				"@mantine/hooks": "^8.1.2",
 				"@mantine/notifications": "^8.1.2",
-				"@tanstack/react-query": "^5.81.2",
+				"@tanstack/react-query": "^5.81.4",
-				"@tanstack/react-query-devtools": "^5.81.2",
+				"@tanstack/react-query-devtools": "^5.81.4",
-				"@tanstack/react-query-persist-client": "^5.81.2",
+				"@tanstack/react-query-persist-client": "^5.81.4",
 				"idb-keyval": "^6.2.2",
 				"jotai": "^2.12.5",
 				"react": "^19.1.0",
 				"react-dom": "^19.1.0",
 				"react-icons": "^5.5.0",
 				"react-router-dom": "^7.6.2",
-				"recharts": "^3.0.1"
+				"recharts": "^3.0.2"
 			},
 			"devDependencies": {
 				"@types/node": "^24.0.4",
@@ -1630,9 +1630,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@tanstack/query-core": {
-			"version": "5.81.2",
+			"version": "5.81.4",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.2.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.4.tgz",
-			"integrity": "sha512-QLYkPdrudoMATDFa3MiLEwRhNnAlzHWDf0LKaXUqJd0/+QxN8uTPi7bahRlxoAyH0UbLMBdeDbYzWALj7THOtw==",
+			"integrity": "sha512-z0yBgRFTPIEYcjFFiahOwtEU3kEKpF5Rwls7UjBCsRghmhwIXyxd5U2p0yEmUfcwm85W4XZkt4dc1OWc5my3Yw==",
 			"license": "MIT",
 			"funding": {
 				"type": "github",
@@ -1650,12 +1650,12 @@
 			}
 		},
 		"node_modules/@tanstack/query-persist-client-core": {
-			"version": "5.81.2",
+			"version": "5.81.4",
-			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.2.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.4.tgz",
-			"integrity": "sha512-FSLHr3DL+eezaKNiAexM7+KdgpXvLmUuMQhtORPIC7QuhemM6kfzcrQC5AN34zhvVh2PZXRcib2JnHKeTMjyyg==",
+			"integrity": "sha512-8SlCCzIPBYCOfWRPUGkzJAdPMu+7JT42J51n6rWvaLVj20mzrVX2EKTtm7QoP19LdX+prS8ndCMClrILQi7nUA==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.81.2"
+				"@tanstack/query-core": "5.81.4"
 			},
 			"funding": {
 				"type": "github",
@@ -1663,12 +1663,12 @@
 			}
 		},
 		"node_modules/@tanstack/react-query": {
-			"version": "5.81.2",
+			"version": "5.81.4",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.2.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.4.tgz",
-			"integrity": "sha512-pe8kFlTrL2zFLlcAj2kZk9UaYYHDk9/1hg9EBaoO3cxDhOZf1FRGJeziSXKrVZyxIfs7b3aoOj/bw7Lie0mDUg==",
+			"integrity": "sha512-bBrf5kTNr9t5BnskvyHQGwe2LRZsgnmx1sClyRQbAHxhSJfnT6z9h27IfGpY6JtfEH5y5R9jJegTG/93zyox/A==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-core": "5.81.2"
+				"@tanstack/query-core": "5.81.4"
 			},
 			"funding": {
 				"type": "github",
@@ -1679,9 +1679,9 @@
 			}
 		},
 		"node_modules/@tanstack/react-query-devtools": {
-			"version": "5.81.2",
+			"version": "5.81.4",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.2.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.4.tgz",
-			"integrity": "sha512-TX0OQ4cbgX6z2uN8c9x0QUNbyePGyUGdcgrGnV6TYEJc7KPT8PqeASuzoA5NGw1CiMGvyFAkIGA2KipvhM9d1g==",
+			"integrity": "sha512-zFg7rzOmM9Q+Ym/TujWR4HD+jKwQd+N8WuWZRmHU8sjI2flyxWTWIEQvl9BFt+HiNA6leS3ODZ9SHYmEb3zduw==",
 			"license": "MIT",
 			"dependencies": {
 				"@tanstack/query-devtools": "5.81.2"
@@ -1691,24 +1691,24 @@
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.81.2",
+				"@tanstack/react-query": "^5.81.4",
 				"react": "^18 || ^19"
 			}
 		},
 		"node_modules/@tanstack/react-query-persist-client": {
-			"version": "5.81.2",
+			"version": "5.81.4",
-			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.2.tgz",
+			"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.4.tgz",
-			"integrity": "sha512-HUlnB7FGqN/he4AOvR0vNA06Wn4dg3rEK7EgzenWfc0gQ9Aa6thqTWgT3Q27CnKiTkzhRn2uZJKRseTP4g54LQ==",
+			"integrity": "sha512-8SlkNDZmWUZLKYYm6DvYybJYrZngnERx/7W1KLUQ3IPaANM9tfmtQjBQBhr1dagyebNK1h/c69IY24dfUaNVIA==",
 			"license": "MIT",
 			"dependencies": {
-				"@tanstack/query-persist-client-core": "5.81.2"
+				"@tanstack/query-persist-client-core": "5.81.4"
 			},
 			"funding": {
 				"type": "github",
 				"url": "https://github.com/sponsors/tannerlinsley"
 			},
 			"peerDependencies": {
-				"@tanstack/react-query": "^5.81.2",
+				"@tanstack/react-query": "^5.81.4",
 				"react": "^18 || ^19"
 			}
 		},
@@ -3785,9 +3785,9 @@
 			}
 		},
 		"node_modules/recharts": {
-			"version": "3.0.1",
+			"version": "3.0.2",
-			"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.2.tgz",
-			"integrity": "sha512-T5PZzeqzkdQpwdd/wG/hzuhaKAFTNY/PsezVlhdg4GbME4mfcau3DEYP4VCejEsUVOpX6hQTN6FJE4z9zL0RWA==",
+			"integrity": "sha512-eDc3ile9qJU9Dp/EekSthQPhAVPG48/uM47jk+PF7VBQngxeW3cwQpPHb/GHC1uqwyCRWXcIrDzuHRVrnRryoQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@reduxjs/toolkit": "1.x.x || 2.x.x",

package.json

@@ -15,16 +15,16 @@
 		"@mantine/form": "^8.1.2",
 		"@mantine/hooks": "^8.1.2",
 		"@mantine/notifications": "^8.1.2",
-		"@tanstack/react-query": "^5.81.2",
+		"@tanstack/react-query": "^5.81.4",
-		"@tanstack/react-query-devtools": "^5.81.2",
+		"@tanstack/react-query-devtools": "^5.81.4",
-		"@tanstack/react-query-persist-client": "^5.81.2",
+		"@tanstack/react-query-persist-client": "^5.81.4",
 		"idb-keyval": "^6.2.2",
 		"jotai": "^2.12.5",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-icons": "^5.5.0",
 		"react-router-dom": "^7.6.2",
-		"recharts": "^3.0.1"
+		"recharts": "^3.0.2"
 	},
 	"devDependencies": {
 		"@types/node": "^24.0.4",

src/pages/settings/components/Theming/ThemeExampleApp.tsx

@@ -22,7 +22,7 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
 					paddingTop: '1rem',
 				}}
 			>
-				<FiCheck style={{ color: selectedTheme.primaryColor }} height={32} width={32} />
+				<FiCheck style={{ color: selectedTheme?.primaryColor }} height={32} width={32} />
 			</Stack>
 			<Stack
 				style={{
@@ -39,7 +39,7 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
 						fontWeight: 400,
 						fontSize: '.625rem',
 						fontStyle: 'normal',
-						color: selectedTheme.primaryColor,
+						color: selectedTheme?.primaryColor,
 						fontFamily:
 							'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 						margin: 0,
@@ -52,7 +52,7 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
 						fontWeight: 400,
 						fontSize: '.625rem',
 						fontStyle: 'italic',
-						color: selectedTheme.accentColor,
+						color: selectedTheme?.accentColor,
 						fontFamily:
 							'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
 						margin: 0,

src/pages/settings/components/Theming/ThemeModal.tsx

@@ -1,20 +1,23 @@
 import {
+	ActionIcon,
 	Button,
 	ColorPicker,
+	ColorSwatch,
 	Group,
 	Modal,
 	ScrollArea,
 	Stack,
 	Text,
 	TextInput,
+	Tooltip,
 	UnstyledButton,
 } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useRef, useState } from 'react';
-import { FiSave, FiX } from 'react-icons/fi';
+import { FiImage, FiSave, FiX } from 'react-icons/fi';
-import { modalClasses, scrollAreaClasses, textInputClasses } from 'styles';
+import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
 import type { Theme } from 'types';
-import ThemeModalColorSwatches from './ThemeModalColorSwatches';
 import ThemeModalContent from './ThemeModalContent';
 
 function ThemeModal({
@@ -22,10 +25,6 @@ function ThemeModal({
 	handleClose,
 	selectedTheme,
 	setSelectedTheme,
-	colorId,
-	setColorId,
-	colorValue,
-	setColorValue,
 	openPicker,
 	backgroundList,
 	pickerOpen,
@@ -36,10 +35,6 @@ function ThemeModal({
 	handleClose: () => void;
 	selectedTheme: Theme;
 	setSelectedTheme: (selectedTheme: Theme) => void;
-	colorId: string;
-	setColorId: (colorId: string) => void;
-	colorValue: string;
-	setColorValue: (colorValue: string) => void;
 	openPicker: () => void;
 	backgroundList: string[];
 	pickerOpen: boolean;
@@ -50,10 +45,18 @@ function ThemeModal({
 	const viewportRef = useRef<HTMLDivElement>(null);
 	const [query, setQuery] = useState('');
 	const [hovered, setHovered] = useState(-1);
+	const [colorId, setColorId] = useState<string>('');
+	const [colorValue, setColorValue] = useState('#000000');
+	const [designerTheme, setDesignerTheme] = useState<Theme>({
+		...selectedTheme,
+	});
 	const filtered = backgroundList.filter((item: string) =>
 		item.toLowerCase().includes(query.toLowerCase()),
 	);
 
+	const [backgroundPicker, { open: openBackgroundPicker, close: closeBackgroundPicker }] =
+		useDisclosure(false);
+
 	const re = /(?:\.([^.]+))?$/;
 	const items = filtered.map((item: string, index: number) => {
 		return (
@@ -75,8 +78,8 @@ function ThemeModal({
 					alignItems: 'center',
 				}}
 				onClick={() =>
-					setSelectedTheme({
+					setDesignerTheme({
-						...selectedTheme,
+						...designerTheme,
 						backgroundImage: item,
 					})
 				}
@@ -116,18 +119,11 @@ function ThemeModal({
 	});
 
 	useEffect(() => {
-		if (selectedTheme) {
+		setDesignerTheme(selectedTheme);
-			if (selectedTheme?.backgroundImage === 'none') {
-				setQuery('');
-			} else {
-				setQuery(selectedTheme?.backgroundImage || '');
-			}
-		}
 	}, [selectedTheme]);
-
 	return (
 		<Modal.Root
-			size={'50%'}
+			size={'75%'}
 			className={modalClasses.editThemeModal}
 			classNames={modalClasses}
 			opened={opened}
@@ -152,7 +148,8 @@ function ThemeModal({
 									color: 'var(--mantine-color-primary-0)',
 								},
 								input: {
-									color: 'var(--mantine-color-primary-0)',
+									color: selectedTheme.primaryColor,
+									backgroundColor: selectedTheme.backgroundColor,
 									border: 'none',
 									borderBottom: '1px solid var(--mantine-color-primary-0)',
 								},
@@ -161,32 +158,158 @@ function ThemeModal({
 					</Group>
 					<Modal.CloseButton />
 				</Modal.Header>
-				<Modal.Body p={'2rem'}>
+				<Modal.Body>
-					<ThemeModalContent selectedTheme={selectedTheme} />
+					<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
-					<Group
+						<Stack display={'flex'} pos={'relative'} w={'70%'}>
-						w={'100%'}
+							<ThemeModalContent selectedTheme={designerTheme} />
-						h={'100%'}
+							<Tooltip
-						gap={isMobile ? 20 : 0}
+								label={'Change Primary Color'}
-						style={{ flexDirection: isMobile ? 'column' : 'row' }}
+								c={'var(--mantine-color-primary-0)'}
-					>
+								bg={'var(--mantine-color-background-0)'}
-						<Stack w={isMobile ? '100%' : '50%'}>
+							>
-							{pickerOpen ? (
+								<ColorSwatch
-								<Group justify='center'>
+									onClick={() => {
+										closeBackgroundPicker();
+										setColorId('primaryColor');
+										openPicker();
+										setColorValue(selectedTheme.primaryColor);
+									}}
+									color={selectedTheme.primaryColor}
+									bd={`1px solid ${selectedTheme.primaryColor}`}
+									pos={'absolute'}
+									top={'6.25rem'}
+									left={'1.5rem'}
+								/>
+							</Tooltip>
+							<Tooltip
+								label={'Change Accent Color'}
+								c={'var(--mantine-color-primary-0)'}
+								bg={'var(--mantine-color-background-0)'}
+							>
+								<ColorSwatch
+									onClick={() => {
+										closeBackgroundPicker();
+										setColorId('accentColor');
+										openPicker();
+										setColorValue(selectedTheme.accentColor);
+									}}
+									color={selectedTheme.accentColor}
+									bd={`1px solid ${selectedTheme.primaryColor}`}
+									pos={'absolute'}
+									bottom={'6rem'}
+									left={'11rem'}
+								/>
+							</Tooltip>
+							<Tooltip
+								label={'Change Background Color'}
+								c={'var(--mantine-color-primary-0)'}
+								bg={'var(--mantine-color-background-0)'}
+							>
+								<ColorSwatch
+									onClick={() => {
+										closeBackgroundPicker();
+										setColorId('backgroundColor');
+										openPicker();
+										setColorValue(selectedTheme.backgroundColor);
+									}}
+									color={selectedTheme.backgroundColor}
+									bd={`1px solid ${selectedTheme.primaryColor}`}
+									pos={'absolute'}
+									bottom={'10rem'}
+									right={'3.5rem'}
+								/>
+							</Tooltip>
+							<Tooltip
+								label={'Change Border Color'}
+								c={'var(--mantine-color-primary-0)'}
+								bg={'var(--mantine-color-background-0)'}
+							>
+								<ColorSwatch
+									onClick={() => {
+										closeBackgroundPicker();
+										setColorId('borderColor');
+										openPicker();
+										setColorValue(selectedTheme.borderColor);
+									}}
+									color={selectedTheme.borderColor}
+									bd={`1px solid ${selectedTheme.primaryColor}`}
+									pos={'absolute'}
+									top={'4.5rem'}
+									right={'7rem'}
+								/>
+							</Tooltip>
+							<Tooltip
+								label={'Change Search Color'}
+								c={'var(--mantine-color-primary-0)'}
+								bg={'var(--mantine-color-background-0)'}
+							>
+								<ColorSwatch
+									onClick={() => {
+										closeBackgroundPicker();
+										setColorId('searchBackground');
+										openPicker();
+										setColorValue(selectedTheme.searchColor);
+									}}
+									color={selectedTheme.searchColor}
+									bd={`1px solid ${selectedTheme.primaryColor}`}
+									pos={'absolute'}
+									top={'3.25rem'}
+									left={'14.5rem'}
+								/>
+							</Tooltip>
+							<Tooltip
+								label={'Change Background'}
+								c={'var(--mantine-color-primary-0)'}
+								bg={'var(--mantine-color-background-0)'}
+							>
+								<ActionIcon
+									onClick={() => {
+										closePicker();
+										openBackgroundPicker();
+									}}
+									pos={'absolute'}
+									right={0}
+								>
+									<FiImage size={20} />
+								</ActionIcon>
+							</Tooltip>
+						</Stack>
+						<Stack
+							w={'28%'}
+							h={'436px'}
+							p={'1rem'}
+							style={{
+								borderRadius: '1rem',
+								backgroundColor:
+									'color-mix(in srgb, var(--mantine-color-primary-0) 20%, transparent)',
+							}}
+						>
+							{pickerOpen && (
+								<Stack h={'100%'} align='center' justify='space-between'>
+									<Text className={textClasses.sectionTitle} classNames={textClasses}>
+										Change {colorId}
+									</Text>
 									<ColorPicker
 										value={colorValue}
-										onChange={setColorValue}
+										onChange={(e) => {
-										format={colorId === 'background' ? 'hex' : 'hexa'}
+											setColorValue(e);
+											setDesignerTheme({
+												...designerTheme,
+												[colorId]: e,
+											});
+										}}
+										format={colorId === 'backgroundColor' ? 'hex' : 'hexa'}
 										w={'90%'}
-										mb={colorId === 'background' ? '1.5rem' : undefined}
+										mb={colorId === 'backgroundColor' ? '1.5rem' : undefined}
 									/>
-									<Group justify='center'>
+									<TextInput
-										<TextInput
+										className={textInputClasses.default}
-											className={textInputClasses.default}
+										classNames={textInputClasses}
-											classNames={textInputClasses}
+										w={'90%'}
-											w={'55%'}
+										value={colorValue}
-											value={colorValue}
+										onChange={(e) => setColorValue(e.target.value)}
-											onChange={(e) => setColorValue(e.target.value)}
+									/>
-										/>
+									<Group mt={'auto'} justify='center'>
 										<Button
 											color={'green'}
 											onClick={() => {
@@ -203,7 +326,7 @@ function ThemeModal({
 															accentColor: colorValue,
 														});
 														break;
-													case 'background':
+													case 'backgroundColor':
 														setSelectedTheme({
 															...selectedTheme,
 															backgroundColor: colorValue,
@@ -230,89 +353,112 @@ function ThemeModal({
 										<Button
 											color={'red'}
 											styles={{ label: { color: 'black' } }}
-											onClick={closePicker}
+											onClick={() => {
+												closePicker();
+												setDesignerTheme({
+													...designerTheme,
+													[colorId]: selectedTheme[colorId as keyof Theme],
+												});
+											}}
 										>
 											<FiX />
 										</Button>
-										<Group w={'100%'} align='center' justify='center' />
 									</Group>
-								</Group>
+								</Stack>
-							) : (
-								<ThemeModalColorSwatches
-									selectedTheme={selectedTheme}
-									openPicker={openPicker}
-									setColorId={setColorId}
-									setColorValue={setColorValue}
-								/>
 							)}
-						</Stack>
+							{backgroundPicker && (
-						<Stack
+								<Stack h={'100%'} align='center' justify='center'>
-							h={'100%'}
+									<Group gap={0}>
-							w={isMobile ? '100%' : '50%'}
+										<TextInput
-							align='center'
+											className={textInputClasses.default}
-							justify='center'
+											classNames={textInputClasses}
-						>
+											placeholder='Search'
-							<Group gap={0}>
+											value={query.replace(/\.[^/.]+$/, '')}
-								<Text mr={'.5rem'}>Search:</Text>
+											rightSection={
-								<TextInput
+												<FiX
-									className={textInputClasses.default}
+													style={{
-									classNames={textInputClasses}
+														cursor: 'pointer',
-									value={query.replace(/\.[^/.]+$/, '')}
+														margin: '.25rem',
-									rightSection={
+													}}
-										<FiX
+													onClick={() => {
-											style={{
+														setQuery('');
-												cursor: 'pointer',
+													}}
-												margin: '.25rem',
+												/>
+											}
+											onChange={(event) => {
+												setQuery(event.currentTarget.value);
+												setHovered(-1);
 											}}
-											onClick={() => {
+											onKeyDown={(event) => {
-												setQuery('');
+												if (event.key === 'ArrowDown') {
+													event.preventDefault();
+													setHovered((current) => {
+														const nextIndex =
+															current + 1 >= filtered.length ? current : current + 1;
+														viewportRef.current
+															?.querySelectorAll('[data-list-item]')
+															?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+														return nextIndex;
+													});
+												}
+
+												if (event.key === 'ArrowUp') {
+													event.preventDefault();
+													setHovered((current) => {
+														const nextIndex = current - 1 < 0 ? current : current - 1;
+														viewportRef.current
+															?.querySelectorAll('[data-list-item]')
+															?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+														return nextIndex;
+													});
+												}
 											}}
 										/>
-									}
+									</Group>
-									onChange={(event) => {
+									<ScrollArea.Autosize
-										setQuery(event.currentTarget.value);
+										viewportRef={viewportRef}
-										setHovered(-1);
+										className={scrollAreaClasses.default}
-									}}
+										classNames={scrollAreaClasses}
-									onKeyDown={(event) => {
+										style={{
-										if (event.key === 'ArrowDown') {
+											height: 325,
-											event.preventDefault();
+											width: '90%',
-											setHovered((current) => {
+											borderRadius: 8,
-												const nextIndex =
+										}}
-													current + 1 >= filtered.length ? current : current + 1;
+									>
-												viewportRef.current
+										<Stack gap={0} align='center' display={'block'}>
-													?.querySelectorAll('[data-list-item]')
+											{items}
-													?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+										</Stack>
-												return nextIndex;
+									</ScrollArea.Autosize>
-											});
+									<Group justify='center'>
-										}
+										<Button
-
+											color={'green'}
-										if (event.key === 'ArrowUp') {
+											onClick={() => {
-											event.preventDefault();
+												setSelectedTheme({
-											setHovered((current) => {
+													...selectedTheme,
-												const nextIndex = current - 1 < 0 ? current : current - 1;
+													backgroundImage: designerTheme.backgroundImage,
-												viewportRef.current
+												});
-													?.querySelectorAll('[data-list-item]')
+												closeBackgroundPicker();
-													?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+											}}
-												return nextIndex;
+										>
-											});
+											<FiSave />
-										}
+										</Button>
-									}}
+										<Button
-								/>
+											color={'red'}
-							</Group>
+											styles={{ label: { color: 'black' } }}
-							<ScrollArea.Autosize
+											onClick={() => {
-								viewportRef={viewportRef}
+												closeBackgroundPicker();
-								className={scrollAreaClasses.default}
+												setDesignerTheme({
-								classNames={scrollAreaClasses}
+													...designerTheme,
-								style={{
+													backgroundImage: selectedTheme.backgroundImage,
-									height: 150,
+												});
-									width: '90%',
+											}}
-									borderRadius: 8,
+										>
-								}}
+											<FiX />
-							>
+										</Button>
-								<Stack gap={0} align='center' display={'block'}>
+									</Group>
-									{items}
 								</Stack>
-							</ScrollArea.Autosize>
+							)}
+							{!pickerOpen && !backgroundPicker && <Stack />}
 						</Stack>
 					</Group>
 					<Group>
@@ -322,7 +468,10 @@ function ThemeModal({
 						<Button
 							color={'red'}
 							styles={{ label: { color: 'black' } }}
-							onClick={handleClose}
+							onClick={() => {
+								closeBackgroundPicker();
+								handleClose();
+							}}
 						>
 							Cancel
 						</Button>

src/pages/settings/components/Theming/ThemeModalColorSwatches.tsx

@@ -1,5 +1,4 @@
 import { ColorSwatch, Group, Stack, Text } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
 import { colorSwatchClasses, textClasses } from 'styles';
 import type { Theme } from 'types';
 
@@ -14,9 +13,8 @@ function ThemeModalColorSwatches({
 	setColorId: (colorId: string) => void;
 	setColorValue: (colorValue: string) => void;
 }) {
-	const { isMobile } = useCommonHooks();
 	return (
-		<Stack h={isMobile ? '100%' : 256} justify='center'>
+		<Stack justify='center'>
 			<Group justify='space-between'>
 				<Text className={textClasses.label} classNames={textClasses}>
 					Primary Color

src/pages/settings/components/Theming/ThemeModalContent.tsx

@@ -1,4 +1,6 @@
-import { Group, Stack, Text } from '@mantine/core';
+import { Select, Stack, Text } from '@mantine/core';
+import SearchSelectItem from 'pages/homepage/components/Search/SearchSelectItem';
+import { selectClasses } from 'styles';
 import type { Theme } from 'types';
 import ThemeExampleApp from './ThemeExampleApp';
 
@@ -6,7 +8,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 	return (
 		<Stack
 			style={{
-				width: '100%',
 				backgroundImage:
 					selectedTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
 						? `linear-gradient(${selectedTheme?.backgroundColor}33, ${selectedTheme?.backgroundColor}33), url(../../api/backgroundImages/${selectedTheme?.backgroundImage})`
@@ -22,173 +23,197 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 				backgroundPosition: 'center',
 				borderRadius: '10px',
 				border: '2px solid var(--mantine-color-primary-0)',
+				padding: '1rem',
 			}}
+			align='center'
 		>
-			<Group
+			<Select
-				justify='center'
+				disabled
-				style={{
+				w={'80%'}
-					color: selectedTheme.primaryColor,
+				classNames={selectClasses}
-					paddingTop: '1rem',
+				data={[
+					{
+						label: 'Google Search',
+						value: 'google',
+					},
+				]}
+				searchValue={'example search'}
+				data-active={true}
+				dropdownOpened={true}
+				autoFocus={false}
+				leftSection={'Google Search'}
+				rightSection={<div />}
+				renderOption={(item: any) => {
+					return (
+						<SearchSelectItem
+							item={item}
+							handleSearchHistoryItem={undefined}
+							searchEndpoint={undefined}
+						/>
+					);
 				}}
-			>
+			/>
-				{selectedTheme.name}
+			<Stack gap={0} w={'100%'}>
-			</Group>
+				<Text
-			<Text
+					pl={'1.5rem'}
-				pl={'1.5rem'}
-				style={{
-					textDecoration: 'underline',
-					fontSize: '1.25rem',
-					fontWeight: 200,
-					fontStyle: 'italic',
-					height: '10px',
-					textTransform: 'uppercase',
-					marginTop: '1.25rem',
-					marginBottom: '1.25rem',
-					color: selectedTheme.primaryColor,
-				}}
-			>
-				Applications
-			</Text>
-			<Stack
-				style={{
-					gap: '.25rem',
-					backgroundSize: 'cover',
-					borderBottom: '0px solid',
-					display: 'grid',
-					gridColumnGap: '5px',
-					gridRowGap: '5px',
-					gridTemplateColumns: '1fr 1fr 1fr',
-					gridTemplateRows: '64px',
-					padding: '1rem',
-					paddingTop: 0,
-					justifyContent: 'center',
-					alignContent: 'center',
-				}}
-			>
-				<ThemeExampleApp selectedTheme={selectedTheme} />
-				<ThemeExampleApp selectedTheme={selectedTheme} />
-				<ThemeExampleApp selectedTheme={selectedTheme} />
-			</Stack>
-			<Text
-				pl={'1.5rem'}
-				style={{
-					textDecoration: 'underline',
-					fontSize: '1.25rem',
-					fontWeight: 200,
-					fontStyle: 'italic',
-					height: '10px',
-					textTransform: 'uppercase',
-					marginTop: '1.25rem',
-					marginBottom: '1.25rem',
-					color: selectedTheme.primaryColor,
-				}}
-			>
-				Bookmarks
-			</Text>
-			<Stack
-				style={{
-					display: 'flex',
-					flexDirection: 'row',
-					flexWrap: 'nowrap',
-					gridColumnGap: '20px',
-					gridRowGap: '0px',
-					gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
-					gridTemplateRows: 'auto',
-				}}
-			>
-				<Stack
 					style={{
-						width: '100%',
+						textDecoration: 'underline',
-						marginBottom: 0,
+						fontSize: '1.25rem',
-						display: 'block',
+						fontWeight: 200,
-						lineHeight: '1.5rem',
+						fontStyle: 'italic',
-						padding: '1rem',
+						height: '10px',
-						paddingTop: 0,
+						textTransform: 'uppercase',
+						marginTop: '1.25rem',
+						marginBottom: '1.25rem',
+						color: selectedTheme?.primaryColor,
 					}}
 				>
-					<Text
+					Applications
-						style={{
+				</Text>
-							fontSize: '.875rem',
+				<Stack
-							fontWeight: 400,
+					style={{
-							height: '10px',
+						gap: '.25rem',
-							width: 'auto',
+						backgroundSize: 'cover',
-							color: selectedTheme.accentColor,
+						borderBottom: '0px solid',
-							textTransform: 'uppercase',
+						display: 'grid',
-							marginTop: '1.25rem',
+						gridColumnGap: '5px',
-							marginBottom: '1.25rem',
+						gridRowGap: '5px',
-						}}
+						gridTemplateColumns: '1fr 1fr 1fr',
-					>
+						gridTemplateRows: '64px',
-						Example Category
+						padding: '1rem',
-					</Text>
+						paddingTop: 0,
-					<Text
+						justifyContent: 'center',
-						style={{
+						alignContent: 'center',
-							display: 'block',
+					}}
-							fontSize: '.875rem',
+				>
-							lineHeight: 2,
+					<ThemeExampleApp selectedTheme={selectedTheme} />
-							color: selectedTheme.primaryColor,
+					<ThemeExampleApp selectedTheme={selectedTheme} />
-						}}
+					<ThemeExampleApp selectedTheme={selectedTheme} />
-						component='a'
-					>
-						{'Bookmark 1'}
-					</Text>
-					<Text
-						style={{
-							display: 'block',
-							fontSize: '.875rem',
-							lineHeight: 2,
-							color: selectedTheme.primaryColor,
-						}}
-						component='a'
-					>
-						{'Bookmark 2'}
-					</Text>
 				</Stack>
+			</Stack>
+			<Stack gap={0} w={'100%'}>
+				<Text
+					pl={'1.5rem'}
+					style={{
+						textDecoration: 'underline',
+						fontSize: '1.25rem',
+						fontWeight: 200,
+						fontStyle: 'italic',
+						height: '10px',
+						textTransform: 'uppercase',
+						marginTop: '1.25rem',
+						marginBottom: '1.25rem',
+						color: selectedTheme?.primaryColor,
+					}}
+				>
+					Bookmarks
+				</Text>
 				<Stack
 					style={{
 						width: '100%',
-						marginBottom: 0,
+						display: 'flex',
-						display: 'block',
+						flexDirection: 'row',
-						lineHeight: '1.5rem',
+						flexWrap: 'nowrap',
-						padding: '1rem',
+						gridColumnGap: '20px',
-						paddingTop: 0,
+						gridRowGap: '0px',
+						gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
+						gridTemplateRows: 'auto',
 					}}
 				>
-					<Text
+					<Stack
-						style={{
-							fontSize: '.875rem',
-							fontWeight: 400,
-							height: '10px',
-							width: 'auto',
-							color: selectedTheme.accentColor,
-							textTransform: 'uppercase',
-							marginTop: '1.25rem',
-							marginBottom: '1.25rem',
-						}}
-					>
-						Example Category
-					</Text>
-					<Text
 						style={{
+							width: '100%',
+							marginBottom: 0,
 							display: 'block',
-							fontSize: '.875rem',
+							lineHeight: '1.5rem',
-							lineHeight: 2,
+							padding: '1rem',
-							color: selectedTheme.primaryColor,
+							paddingTop: 0,
 						}}
-						component='a'
 					>
-						{'Bookmark 1'}
+						<Text
-					</Text>
+							style={{
-					<Text
+								fontSize: '.875rem',
+								fontWeight: 400,
+								height: '10px',
+								width: 'auto',
+								color: selectedTheme?.accentColor,
+								textTransform: 'uppercase',
+								marginTop: '1.25rem',
+								marginBottom: '1.25rem',
+							}}
+						>
+							Example Category
+						</Text>
+						<Text
+							style={{
+								display: 'block',
+								fontSize: '.875rem',
+								lineHeight: 2,
+								color: selectedTheme?.primaryColor,
+							}}
+							component='a'
+						>
+							{'Bookmark 1'}
+						</Text>
+						<Text
+							style={{
+								display: 'block',
+								fontSize: '.875rem',
+								lineHeight: 2,
+								color: selectedTheme?.primaryColor,
+							}}
+							component='a'
+						>
+							{'Bookmark 2'}
+						</Text>
+					</Stack>
+					<Stack
 						style={{
+							width: '100%',
+							marginBottom: 0,
 							display: 'block',
-							fontSize: '.875rem',
+							lineHeight: '1.5rem',
-							lineHeight: 2,
+							padding: '1rem',
-							color: selectedTheme.primaryColor,
+							paddingTop: 0,
 						}}
-						component='a'
 					>
-						{'Bookmark 2'}
+						<Text
-					</Text>
+							style={{
+								fontSize: '.875rem',
+								fontWeight: 400,
+								height: '10px',
+								width: 'auto',
+								color: selectedTheme?.accentColor,
+								textTransform: 'uppercase',
+								marginTop: '1.25rem',
+								marginBottom: '1.25rem',
+							}}
+						>
+							Example Category
+						</Text>
+						<Text
+							style={{
+								display: 'block',
+								fontSize: '.875rem',
+								lineHeight: 2,
+								color: selectedTheme?.primaryColor,
+							}}
+							component='a'
+						>
+							{'Bookmark 1'}
+						</Text>
+						<Text
+							style={{
+								display: 'block',
+								fontSize: '.875rem',
+								lineHeight: 2,
+								color: selectedTheme?.primaryColor,
+							}}
+							component='a'
+						>
+							{'Bookmark 2'}
+						</Text>
+					</Stack>
 				</Stack>
 			</Stack>
 		</Stack>

src/pages/settings/components/Theming/Themes.tsx

@@ -34,8 +34,6 @@ function ThemesSettings() {
 		backgroundModalOpened,
 		{ open: openBackgroundModal, close: closeBackgroundModal },
 	] = useDisclosure(false);
-	const [colorId, setColorId] = useState<string>('');
-	const [colorValue, setColorValue] = useState('#000000');
 	const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
 	const [inUseBackgrounds, setInUseBackgrounds] = useState<string[]>([]);
 	const [selectedTheme, setSelectedTheme] = useState<Theme>({
@@ -144,13 +142,9 @@ function ThemesSettings() {
 				handleClose={handleClose}
 				selectedTheme={selectedTheme}
 				setSelectedTheme={setSelectedTheme}
-				setColorId={setColorId}
-				colorId={colorId}
-				setColorValue={setColorValue}
 				openPicker={openPicker}
 				backgroundList={backgroundList}
 				pickerOpen={pickerOpen}
-				colorValue={colorValue}
 				closePicker={closePicker}
 				handleSaveTheme={handleSaveTheme}
 			/>