Updates to styles

src/pages/settings/components/ThemeCard.tsx

@@ -53,6 +53,7 @@ function ThemeCard({
 					backgroundSize: 'cover',
 					backgroundColor: cardTheme.backgroundColor,
 					border: `solid ${cardTheme.borderColor}`,
+					filter: cardTheme.randomEnabled === 0 ? 'saturate(0)' : undefined,
 				}}
 				onClick={() => {
 					setCurrentTheme(cardTheme.name);

src/pages/settings/components/ThemeModal.tsx

@@ -1,20 +1,20 @@
 import {
 	Button,
-	Card,
 	ColorPicker,
 	ColorSwatch,
 	Divider,
 	Group,
-	Image,
 	Modal,
-	Select,
+	ScrollArea,
 	Stack,
 	Text,
 	TextInput,
+	UnstyledButton,
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
+import { useEffect, useRef, useState } from 'react';
 import { FiSave, FiX } from 'react-icons/fi';
-import { modalClasses, selectClasses, textClasses, textInputClasses } from 'styles';
+import { modalClasses, textClasses, textInputClasses } from 'styles';
 import ThemeModalContent from './ThemeModalContent';
 
 function ThemeModal({
@@ -33,6 +33,37 @@ function ThemeModal({
 	handleSaveTheme,
 }: any) {
 	const { theme } = useCommonHooks();
+	const viewportRef = useRef<HTMLDivElement>(null);
+	const [query, setQuery] = useState('');
+	const [hovered, setHovered] = useState(-1);
+	const filtered = backgroundList.filter((item: any) =>
+		item.toLowerCase().includes(query.toLowerCase()),
+	);
+	const items = filtered.map((item: any, index: any) => (
+		<UnstyledButton
+			data-list-item
+			key={item}
+			display='block'
+			bg={index === hovered ? 'red' : undefined}
+			p={50}
+			w={'90%'}
+			onClick={() =>
+				setSelectedTheme({
+					...selectedTheme,
+					backgroundImage: item,
+				})
+			}
+		>
+			{item}
+		</UnstyledButton>
+	));
+
+	useEffect(() => {
+		if (selectedTheme) {
+			setQuery(selectedTheme?.backgroundImage || '');
+		}
+	}, [selectedTheme]);
+
 	return (
 		<Modal.Root
 			size={'50%'}
@@ -51,19 +82,16 @@ function ThemeModal({
 		>
 			<Modal.Overlay />
 			<Modal.Content>
-				<Modal.Header>
+				<Modal.Header style={{ justifyContent: 'center' }}>
-					<Modal.Title>Edit Theme</Modal.Title>
+					<Group pos={'absolute'}>
-					<Modal.CloseButton />
+						<Text>Name:</Text>
-				</Modal.Header>
-				<Modal.Body p={'2rem'}>
-					<ThemeModalContent selectedTheme={selectedTheme} />
-					<Divider color='black' my='sm' />
 						<TextInput
 							className={textInputClasses.default}
 							classNames={textInputClasses}
-						label='Theme Name'
 							value={selectedTheme.name}
-						onChange={(e) => setSelectedTheme({ ...selectedTheme, name: e.target.value })}
+							onChange={(e) =>
+								setSelectedTheme({ ...selectedTheme, name: e.target.value })
+							}
 							styles={{
 								label: {
 									color: theme.primaryColor,
@@ -74,9 +102,78 @@ function ThemeModal({
 								},
 							}}
 						/>
+					</Group>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body p={'2rem'}>
+					<ThemeModalContent selectedTheme={selectedTheme} />
 					<Divider color='black' my='sm' />
 					<Group w={'100%'} h={'100%'} gap={0}>
 						<Stack w={'50%'}>
+							{pickerOpen ? (
+								<Group justify='center'>
+									<ColorPicker
+										value={colorValue}
+										onChange={setColorValue}
+										format='hexa'
+										w={'90%'}
+									/>
+									<Group justify='center'>
+										<TextInput
+											className={textInputClasses.default}
+											classNames={textInputClasses}
+											w={'55%'}
+											value={colorValue}
+											onChange={(e) => setColorValue(e.target.value)}
+										/>
+										<Button
+											color={'green'}
+											onClick={() => {
+												switch (colorId) {
+													case 'primaryColor':
+														setSelectedTheme({
+															...selectedTheme,
+															primaryColor: colorValue,
+														});
+														break;
+													case 'accentColor':
+														setSelectedTheme({
+															...selectedTheme,
+															accentColor: colorValue,
+														});
+														break;
+													case 'background':
+														setSelectedTheme({
+															...selectedTheme,
+															backgroundColor: colorValue,
+														});
+														break;
+													case 'borderColor':
+														setSelectedTheme({
+															...selectedTheme,
+															borderColor: colorValue,
+														});
+														break;
+													case 'searchBackground':
+														setSelectedTheme({
+															...selectedTheme,
+															searchColor: colorValue,
+														});
+														break;
+												}
+												closePicker();
+											}}
+										>
+											<FiSave />
+										</Button>
+										<Button color={'red'} onClick={closePicker}>
+											<FiX />
+										</Button>
+										<Group w={'100%'} align='center' justify='center' />
+									</Group>
+								</Group>
+							) : (
+								<Stack h={256} justify='center'>
 									<Group justify='space-between'>
 										<Text className={textClasses.label} classNames={textClasses}>
 											Primary Color
@@ -172,124 +269,52 @@ function ThemeModal({
 											}}
 										/>
 									</Group>
-							<Group justify='space-between'>
+								</Stack>
-								<Select
-									w={'100%'}
-									data={backgroundList}
-									classNames={{
-										input: selectClasses.menuSelectInput,
-										label: selectClasses.menuSelectLabel,
-										options: selectClasses.menuSelectOptions,
-										option: selectClasses.menuSelectOption,
-									}}
-									label='Background Image'
-									value={
-										selectedTheme.backgroundImage === 'none'
-											? 'None'
-											: selectedTheme.backgroundImage
-									}
-									renderOption={(value) => {
-										return (
-											<Group
-												h={'50px'}
-												w={'100%'}
-												justify='space-between'
-												style={{
-													color: theme.primaryColor,
-													backgroundColor: theme.backgroundColor,
-													fontSize: '18px',
-												}}
-											>
-												{value.option.value}
-												{value.option.value && value.option.value !== 'None' && (
-													<Image
-														h={'50px'}
-														w={'90px'}
-														src={`/backgrounds/${value.option.value}`}
-													/>
 							)}
-											</Group>
-										);
-									}}
-									onChange={(value) =>
-										setSelectedTheme({
-											...selectedTheme,
-											backgroundImage: value,
-										})
-									}
-								/>
-							</Group>
 						</Stack>
 						<Stack h={'100%'} w={'50%'} align='center' justify='center'>
-							{pickerOpen ? (
-								<>
-									<ColorPicker value={colorValue} onChange={setColorValue} />
-									<Group w={'75%'} justify='space-between'>
 							<TextInput
 								className={textInputClasses.default}
 								classNames={textInputClasses}
-											w={'100%'}
+								value={query}
-											value={colorValue}
+								onChange={(event) => {
-											onChange={(e) => setColorValue(e.target.value)}
+									setQuery(event.currentTarget.value);
-										/>
+									setHovered(-1);
-										<Group w={'100%'} align='center' justify='center'>
-											<Button
-												color={'green'}
-												onClick={() => {
-													switch (colorId) {
-														case 'primaryColor':
-															setSelectedTheme({
-																...selectedTheme,
-																primaryColor: colorValue,
-															});
-															break;
-														case 'accentColor':
-															setSelectedTheme({
-																...selectedTheme,
-																accentColor: colorValue,
-															});
-															break;
-														case 'background':
-															setSelectedTheme({
-																...selectedTheme,
-																backgroundColor: colorValue,
-															});
-															break;
-														case 'borderColor':
-															setSelectedTheme({
-																...selectedTheme,
-																borderColor: colorValue,
-															});
-															break;
-														case 'searchBackground':
-															setSelectedTheme({
-																...selectedTheme,
-																searchColor: colorValue,
-															});
-															break;
-													}
-													closePicker();
 								}}
-											>
+								onKeyDown={(event) => {
-												<FiSave />
+									if (event.key === 'ArrowDown') {
-											</Button>
+										event.preventDefault();
-											<Button color={'red'} onClick={closePicker}>
+										setHovered((current) => {
-												<FiX />
+											const nextIndex =
-											</Button>
+												current + 1 >= filtered.length ? current : current + 1;
-										</Group>
+											viewportRef.current
-									</Group>
+												?.querySelectorAll('[data-list-item]')
-								</>
+												?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
-							) : (
+											return nextIndex;
-								<Card bg={'#0002'} h={'100%'} w={'90%'} style={{ alignItems: 'center' }}>
+										});
-									<Text className={textClasses.label} classNames={textClasses}>
+									}
-										Pick a swatch to edit the color.
+
-									</Text>
+									if (event.key === 'ArrowUp') {
-								</Card>
+										event.preventDefault();
-							)}
+										setHovered((current) => {
+											const nextIndex = current - 1 < 0 ? current : current - 1;
+											viewportRef.current
+												?.querySelectorAll('[data-list-item]')
+												?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+											return nextIndex;
+										});
+									}
+								}}
+							/>
+							<ScrollArea viewportRef={viewportRef} h={150} w={'100%'}>
+								<Stack gap={0} align='center'>
+									{items}
+								</Stack>
+							</ScrollArea>
 						</Stack>
 					</Group>
 					<Divider color='black' my='sm' />
-					<Group mt={'2rem'}>
+					<Group pos={'absolute'} bottom={8}>
 						<Button
 							color={'green'}
 							styles={{ label: { color: 'black' } }}

src/styles/Stack.module.css

@@ -25,7 +25,6 @@
 	text-transform: uppercase;
 }
 
-  
 .appItemBox rect {
 	border-radius: 6px;
 	stroke-dasharray: 260;