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,245 +82,239 @@ function ThemeModal({
 		>
 			<Modal.Overlay />
 			<Modal.Content>
-				<Modal.Header>
-					<Modal.Title>Edit Theme</Modal.Title>
+				<Modal.Header style={{ justifyContent: 'center' }}>
+					<Group pos={'absolute'}>
+						<Text>Name:</Text>
+						<TextInput
+							className={textInputClasses.default}
+							classNames={textInputClasses}
+							value={selectedTheme.name}
+							onChange={(e) =>
+								setSelectedTheme({ ...selectedTheme, name: e.target.value })
+							}
+							styles={{
+								label: {
+									color: theme.primaryColor,
+								},
+								input: {
+									color: theme.primaryColor,
+									border: 'none',
+								},
+							}}
+						/>
+					</Group>
 					<Modal.CloseButton />
 				</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 })}
-						styles={{
-							label: {
-								color: theme.primaryColor,
-							},
-							input: {
-								color: theme.primaryColor,
-								border: 'none',
-							},
-						}}
-					/>
-					<Divider color='black' my='sm' />
 					<Group w={'100%'} h={'100%'} gap={0}>
 						<Stack w={'50%'}>
-							<Group justify='space-between'>
-								<Text className={textClasses.label} classNames={textClasses}>
-									Primary Color
-								</Text>
-								<ColorSwatch
-									onClick={() => {
-										setColorId('primaryColor');
-										openPicker();
-										setColorValue(selectedTheme.primaryColor);
-									}}
-									radius={'sm'}
-									w={'100px'}
-									color={selectedTheme.primaryColor}
-									style={{
-										cursor: 'pointer',
-										border: `2px dashed ${theme.primaryColor}`,
-									}}
-								/>
-							</Group>
-							<Group justify='space-between'>
-								<Text className={textClasses.label} classNames={textClasses}>
-									Accent Color
-								</Text>
-								<ColorSwatch
-									onClick={() => {
-										setColorId('accentColor');
-										openPicker();
-										setColorValue(selectedTheme.accentColor);
-									}}
-									radius={'sm'}
-									w={'100px'}
-									color={selectedTheme.accentColor}
-									style={{
-										cursor: 'pointer',
-										border: `2px dashed ${theme.primaryColor}`,
-									}}
-								/>
-							</Group>
-							<Group justify='space-between'>
-								<Text className={textClasses.label} classNames={textClasses}>
-									Background Color
-								</Text>
-								<ColorSwatch
-									onClick={() => {
-										setColorId('background');
-										openPicker();
-										setColorValue(selectedTheme.backgroundColor);
-									}}
-									radius={'sm'}
-									w={'100px'}
-									color={selectedTheme.backgroundColor}
-									style={{
-										cursor: 'pointer',
-										border: `2px dashed ${theme.primaryColor}`,
-									}}
-								/>
-							</Group>
-							<Group justify='space-between'>
-								<Text className={textClasses.label} classNames={textClasses}>
-									Border Color
-								</Text>
-								<ColorSwatch
-									onClick={() => {
-										setColorId('borderColor');
-										openPicker();
-										setColorValue(selectedTheme.borderColor);
-									}}
-									radius={'sm'}
-									w={'100px'}
-									color={selectedTheme.borderColor}
-									style={{
-										cursor: 'pointer',
-										border: `2px dashed ${theme.primaryColor}`,
-									}}
-								/>
-							</Group>
-							<Group justify='space-between'>
-								<Text className={textClasses.label} classNames={textClasses}>
-									Search Background Color
-								</Text>
-								<ColorSwatch
-									onClick={() => {
-										setColorId('searchBackground');
-										openPicker();
-										setColorValue(selectedTheme.searchColor);
-									}}
-									radius={'sm'}
-									w={'100px'}
-									color={selectedTheme.searchColor}
-									style={{
-										cursor: 'pointer',
-										border: `2px dashed ${theme.primaryColor}`,
-									}}
-								/>
-							</Group>
-							<Group justify='space-between'>
-								<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'>
+								<Group justify='center'>
+									<ColorPicker
+										value={colorValue}
+										onChange={setColorValue}
+										format='hexa'
+										w={'90%'}
+									/>
+									<Group justify='center'>
 										<TextInput
 											className={textInputClasses.default}
 											classNames={textInputClasses}
-											w={'100%'}
+											w={'55%'}
 											value={colorValue}
 											onChange={(e) => setColorValue(e.target.value)}
 										/>
-										<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();
-												}}
-											>
-												<FiSave />
-											</Button>
-											<Button color={'red'} onClick={closePicker}>
-												<FiX />
-											</Button>
-										</Group>
+										<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>
 							) : (
-								<Card bg={'#0002'} h={'100%'} w={'90%'} style={{ alignItems: 'center' }}>
-									<Text className={textClasses.label} classNames={textClasses}>
-										Pick a swatch to edit the color.
-									</Text>
-								</Card>
+								<Stack h={256} justify='center'>
+									<Group justify='space-between'>
+										<Text className={textClasses.label} classNames={textClasses}>
+											Primary Color
+										</Text>
+										<ColorSwatch
+											onClick={() => {
+												setColorId('primaryColor');
+												openPicker();
+												setColorValue(selectedTheme.primaryColor);
+											}}
+											radius={'sm'}
+											w={'100px'}
+											color={selectedTheme.primaryColor}
+											style={{
+												cursor: 'pointer',
+												border: `2px dashed ${theme.primaryColor}`,
+											}}
+										/>
+									</Group>
+									<Group justify='space-between'>
+										<Text className={textClasses.label} classNames={textClasses}>
+											Accent Color
+										</Text>
+										<ColorSwatch
+											onClick={() => {
+												setColorId('accentColor');
+												openPicker();
+												setColorValue(selectedTheme.accentColor);
+											}}
+											radius={'sm'}
+											w={'100px'}
+											color={selectedTheme.accentColor}
+											style={{
+												cursor: 'pointer',
+												border: `2px dashed ${theme.primaryColor}`,
+											}}
+										/>
+									</Group>
+									<Group justify='space-between'>
+										<Text className={textClasses.label} classNames={textClasses}>
+											Background Color
+										</Text>
+										<ColorSwatch
+											onClick={() => {
+												setColorId('background');
+												openPicker();
+												setColorValue(selectedTheme.backgroundColor);
+											}}
+											radius={'sm'}
+											w={'100px'}
+											color={selectedTheme.backgroundColor}
+											style={{
+												cursor: 'pointer',
+												border: `2px dashed ${theme.primaryColor}`,
+											}}
+										/>
+									</Group>
+									<Group justify='space-between'>
+										<Text className={textClasses.label} classNames={textClasses}>
+											Border Color
+										</Text>
+										<ColorSwatch
+											onClick={() => {
+												setColorId('borderColor');
+												openPicker();
+												setColorValue(selectedTheme.borderColor);
+											}}
+											radius={'sm'}
+											w={'100px'}
+											color={selectedTheme.borderColor}
+											style={{
+												cursor: 'pointer',
+												border: `2px dashed ${theme.primaryColor}`,
+											}}
+										/>
+									</Group>
+									<Group justify='space-between'>
+										<Text className={textClasses.label} classNames={textClasses}>
+											Search Background Color
+										</Text>
+										<ColorSwatch
+											onClick={() => {
+												setColorId('searchBackground');
+												openPicker();
+												setColorValue(selectedTheme.searchColor);
+											}}
+											radius={'sm'}
+											w={'100px'}
+											color={selectedTheme.searchColor}
+											style={{
+												cursor: 'pointer',
+												border: `2px dashed ${theme.primaryColor}`,
+											}}
+										/>
+									</Group>
+								</Stack>
 							)}
 						</Stack>
+						<Stack h={'100%'} w={'50%'} align='center' justify='center'>
+							<TextInput
+								className={textInputClasses.default}
+								classNames={textInputClasses}
+								value={query}
+								onChange={(event) => {
+									setQuery(event.currentTarget.value);
+									setHovered(-1);
+								}}
+								onKeyDown={(event) => {
+									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;
+										});
+									}
+								}}
+							/>
+							<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;
@@ -41,10 +40,10 @@
 
 @keyframes svgAnimation {
 	from {
-	  stroke-dashoffset: 0;
+		stroke-dashoffset: 0;
 	}
 	to {
-	  stroke-dashoffset: 1000;
+		stroke-dashoffset: 1000;
 	}
 }