Theme updates

src/pages/settings/components/ThemeCard.tsx

@@ -0,0 +1,194 @@
+import { ActionIcon, Box, Button, Group, Stack, Text } from '@mantine/core';
+import { FiCheck, FiEdit, FiTrash } from 'react-icons/fi';
+import { actionIconClasses } from 'styles';
+
+function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme }: any) {
+	return (
+		<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
+			<Text
+				style={{
+					position: 'absolute',
+					top: -10,
+					left: 6,
+					paddingRight: 4,
+					paddingLeft: 4,
+					backgroundColor: theme.borderColor,
+					borderRadius: '4px',
+					color: theme.primaryColor,
+					zIndex: 3,
+				}}
+			>
+				{theme.name}
+			</Text>
+			<Button
+				w={'300px'}
+				h={'125px'}
+				style={{
+					background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`,
+					backgroundSize: 'cover',
+					backgroundColor: theme.backgroundColor,
+					border: `solid ${theme.borderColor}`,
+					color: theme.primaryColor,
+				}}
+				data-theme={theme.name}
+				onClick={() => {
+					setValue(theme.name);
+				}}
+			>
+				<Group
+					style={{ zIndex: 2 }}
+					w={'100%'}
+					gap={0}
+					display={'flex'}
+					align='center'
+					justify='center'
+				>
+					<Stack align='center'>
+						<Box
+							style={{
+								height: '10px',
+								width: '100px',
+								backgroundColor: theme.searchColor,
+								borderRadius: '4px',
+								borderBottom: `solid 1px ${theme.borderColor}`,
+							}}
+						/>
+						<Group justify='space-between'>
+							<Box
+								style={{
+									height: '8px',
+									width: '100px',
+									backgroundColor: theme.accentColor,
+									borderRadius: '4px',
+								}}
+							/>
+							<Box
+								style={{
+									height: '8px',
+									width: '50px',
+									backgroundColor: theme.primaryColor,
+									borderRadius: '4px',
+								}}
+							/>
+						</Group>
+						<Group w={'100%'}>
+							<Box
+								style={{
+									height: '5px',
+									width: '40px',
+									backgroundColor: theme.primaryColor,
+									borderRadius: '4px',
+								}}
+							/>
+						</Group>
+						<Group w={'100%'}>
+							<Box
+								style={{
+									height: '10px',
+									width: '40px',
+									borderRadius: '4px',
+									backdropFilter: 'blur(10px) brightness(1.5)',
+									fontSize: '6px',
+									justifyContent: 'center',
+									alignContent: 'center',
+								}}
+							>
+								lorem ipsum
+							</Box>
+							<Box
+								style={{
+									height: '10px',
+									width: '40px',
+									borderRadius: '4px',
+									backdropFilter: 'blur(10px) brightness(1.5)',
+									fontSize: '6px',
+									justifyContent: 'center',
+									alignContent: 'center',
+								}}
+							>
+								lorem ipsum
+							</Box>
+							<Box
+								style={{
+									height: '10px',
+									width: '40px',
+									borderRadius: '4px',
+									backdropFilter: 'blur(10px) brightness(1.5)',
+									fontSize: '6px',
+									justifyContent: 'center',
+									alignContent: 'center',
+								}}
+							>
+								lorem ipsum
+							</Box>
+						</Group>
+					</Stack>
+				</Group>
+			</Button>
+			<Stack
+				gap={0}
+				style={{
+					padding: '4px',
+					paddingRight: '0px',
+					position: 'absolute',
+					right: 3,
+					backgroundColor: '#ffffff66',
+					borderTopLeftRadius: '10px',
+					borderBottomLeftRadius: '10px',
+				}}
+				align='center'
+				justify='center'
+			>
+				<ActionIcon
+					style={{
+						background: theme.randomEnabled
+							? 'rgba(255,255,255,1)'
+							: 'rgba(255,255,255,0.5)',
+						border: `solid 1px ${theme.borderColor}`,
+						borderRadius: '2%',
+						margin: '2px',
+						color: 'black',
+					}}
+					styles={{
+						root: {
+							height: '10px',
+							width: '10px',
+						},
+						icon: {
+							height: '10px',
+							width: '10px',
+							fontSize: '24px',
+							margin: 0,
+							padding: 0,
+						},
+					}}
+					onClick={() => {
+						createTheme({
+							method: 'PATCH',
+							endpoint: 'api/themes',
+							body: { ...theme, randomEnabled: !theme.randomEnabled },
+						});
+					}}
+				>
+					<FiCheck />
+				</ActionIcon>
+				<ActionIcon
+					className={actionIconClasses.editButton}
+					classNames={actionIconClasses}
+					onClick={() => handleOpen(theme)}
+				>
+					<FiEdit />
+				</ActionIcon>
+				<ActionIcon
+					className={actionIconClasses.editButton}
+					classNames={actionIconClasses}
+					onClick={() => handleDeleteTheme(theme)}
+				>
+					<FiTrash color='red' />
+				</ActionIcon>
+			</Stack>
+		</Group>
+	);
+}
+
+export default ThemeCard;

src/pages/settings/components/ThemeModal.tsx

@@ -0,0 +1,267 @@
+import {
+	Button,
+	Card,
+	ColorPicker,
+	ColorSwatch,
+	Divider,
+	Group,
+	Image,
+	Modal,
+	OptionalPortal,
+	Select,
+	Stack,
+	Text,
+	TextInput,
+} from '@mantine/core';
+import { FiSave, FiX } from 'react-icons/fi';
+import { modalClasses, selectClasses, textClasses } from 'styles';
+import ThemeModalContent from './ThemeModalContent';
+
+function ThemeModal({
+	opened,
+	handleClose,
+	selectedTheme,
+	setSelectedTheme,
+	theme,
+	setColorId,
+	colorId,
+	setColorValue,
+	openPicker,
+	backgroundList,
+	pickerOpen,
+	colorValue,
+	closePicker,
+	handleSaveTheme,
+}: any) {
+	return (
+		<Modal.Root
+			size={'50%'}
+			className={modalClasses.editThemeModal}
+			classNames={modalClasses}
+			opened={opened}
+			onClose={handleClose}
+			style={{
+				'--color-text-pri': theme.primaryColor,
+				'--color-text-acc': theme.accentColor,
+				'--color-background': theme.backgroundImage ? 'gray' : theme.backgroundColor,
+				'--color-border': theme.borderColor,
+				'--color-search-background': theme.searchColor,
+				'--image-background': `url("${theme.backgroundImage}")`,
+			}}
+		>
+			<Modal.Overlay />
+			<Modal.Content>
+				<Modal.Header>
+					<Modal.Title>Edit Theme</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body p={'2rem'}>
+					<ThemeModalContent selectedTheme={selectedTheme} />
+					<Divider color='black' my='sm' />
+					<TextInput
+						label='Theme Name'
+						value={selectedTheme.name}
+						onChange={(e) => setSelectedTheme({ ...selectedTheme, name: e.target.value })}
+						styles={{
+							label: {
+								color: theme.primaryColor,
+							},
+						}}
+					/>
+					<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' }}
+								/>
+							</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' }}
+								/>
+							</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' }}
+								/>
+							</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' }}
+								/>
+							</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' }}
+								/>
+							</Group>
+							<Group justify='space-between'>
+								<OptionalPortal withinPortal={false}>
+									<Select
+										data={backgroundList}
+										className={selectClasses.select}
+										classNames={selectClasses}
+										label='Background Image'
+										value={selectedTheme.backgroundImage}
+										renderOption={(value) => {
+											return (
+												<Group h={'100%'} w={'100%'} justify='space-between'>
+													{value.option.value}
+													{value.option.value && value.option.value !== 'None' && (
+														<Image
+															h={'28px'}
+															w={'50px'}
+															src={`/backgrounds/${value.option.value}`}
+														/>
+													)}
+												</Group>
+											);
+										}}
+										onChange={(value) =>
+											setSelectedTheme({
+												...selectedTheme,
+												backgroundImage: value,
+											})
+										}
+									/>
+								</OptionalPortal>
+							</Group>
+						</Stack>
+						<Stack h={'100%'} w={'50%'} align='center' justify='center'>
+							{pickerOpen ? (
+								<>
+									<ColorPicker value={colorValue} onChange={setColorValue} />
+									<Group w={'75%'} justify='space-between'>
+										<TextInput
+											w={'50%'}
+											value={colorValue}
+											onChange={(e) => setColorValue(e.target.value)}
+										/>
+										<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>
+									</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>
+					</Group>
+					<Divider color='black' my='sm' />
+					<Group>
+						<Button color={'green'} onClick={handleSaveTheme}>
+							Save
+						</Button>
+						<Button color={'red'} onClick={close}>
+							Cancel
+						</Button>
+					</Group>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}
+
+export default ThemeModal;

src/pages/settings/components/Themes.tsx

@@ -1,40 +1,20 @@
-import {
-	ActionIcon,
-	Button,
-	Card,
-	ColorPicker,
-	ColorSwatch,
-	Divider,
-	Group,
-	Image,
-	Modal,
-	OptionalPortal,
-	Select,
-	Stack,
-	Text,
-	TextInput,
-} from '@mantine/core';
+import { Button, Group, Stack, Switch, Text } from '@mantine/core';
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiCheck, FiEdit, FiPlus, FiSave, FiTrash, FiX } from 'react-icons/fi';
+import { FiChevronRight, FiPlus } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Modal.css';
 import { modals } from '@mantine/modals';
-import {
-	actionIconClasses,
-	buttonClasses,
-	modalClasses,
-	selectClasses,
-	textClasses,
-} from 'styles';
-import ThemeModalContent from './ThemeModalContent';
+import { buttonClasses, textClasses } from 'styles';
+import ThemeCard from './ThemeCard';
+import ThemeModal from './ThemeModal';
 function ThemesSettings({ theme }: any) {
 	const [opened, { open, close }] = useDisclosure(false);
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
-	const [_, setValue] = useLocalStorage<any>({
+	const [currentTheme, setValue] = useLocalStorage<any>({
 		key: 'theme',
 		defaultValue: 'blackboard',
 	});
@@ -95,393 +75,86 @@ function ThemesSettings({ theme }: any) {
 		close();
 	};
 
-	const randomColor = () => {
-		return `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},1)`;
-	};
-
 	return (
 		<>
-			<Modal.Root
-				size={'50%'}
-				className={modalClasses.editThemeModal}
-				classNames={modalClasses}
+			<ThemeModal
 				opened={opened}
-				onClose={handleClose}
-				style={{
-					'--color-text-pri': theme.primaryColor,
-					'--color-text-acc': theme.accentColor,
-					'--color-background': theme.backgroundImage ? 'gray' : theme.backgroundColor,
-					'--color-border': theme.borderColor,
-					'--color-search-background': theme.searchColor,
-					'--image-background': `url("${theme.backgroundImage}")`,
-				}}
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Edit Theme</Modal.Title>
-						<Modal.CloseButton />
-					</Modal.Header>
-					<Modal.Body p={'2rem'}>
-						<ThemeModalContent selectedTheme={selectedTheme} />
-						<Divider color='black' my='sm' />
-						<TextInput
-							label='Theme Name'
-							value={selectedTheme.name}
-							onChange={(e) =>
-								setSelectedTheme({ ...selectedTheme, name: e.target.value })
-							}
-							styles={{
-								label: {
-									color: theme.primaryColor,
-								},
-							}}
-						/>
-						<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' }}
-									/>
-								</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' }}
-									/>
-								</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' }}
-									/>
-								</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' }}
-									/>
-								</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' }}
-									/>
-								</Group>
-								<Group justify='space-between'>
-									<OptionalPortal withinPortal={false}>
-										<Select
-											data={backgroundList}
-											className={selectClasses.select}
-											classNames={selectClasses}
-											label='Background Image'
-											value={selectedTheme.backgroundImage}
-											renderOption={(value) => {
-												return (
-													<Group h={'100%'} w={'100%'} justify='space-between'>
-														{value.option.value}
-														{value.option.value && value.option.value !== 'None' && (
-															<Image
-																h={'28px'}
-																w={'50px'}
-																src={`/backgrounds/${value.option.value}`}
-															/>
-														)}
-													</Group>
-												);
-											}}
-											onChange={(value) =>
-												setSelectedTheme({
-													...selectedTheme,
-													backgroundImage: value,
-												})
-											}
-										/>
-									</OptionalPortal>
-								</Group>
-							</Stack>
-							<Stack h={'100%'} w={'50%'} align='center' justify='center'>
-								{pickerOpen ? (
-									<>
-										<ColorPicker value={colorValue} onChange={setColorValue} />
-										<Group w={'75%'} justify='space-between'>
-											<TextInput
-												w={'50%'}
-												value={colorValue}
-												onChange={(e) => setColorValue(e.target.value)}
-											/>
-											<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>
-										</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>
-						</Group>
-						<Divider color='black' my='sm' />
-						<Group>
-							<Button color={'green'} onClick={handleSaveTheme}>
-								Save
-							</Button>
-							<Button color={'red'} onClick={close}>
-								Cancel
-							</Button>
-						</Group>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
+				handleClose={handleClose}
+				selectedTheme={selectedTheme}
+				setSelectedTheme={setSelectedTheme}
+				theme={theme}
+				setColorId={setColorId}
+				colorId={colorId}
+				setColorValue={setColorValue}
+				openPicker={openPicker}
+				backgroundList={backgroundList}
+				pickerOpen={pickerOpen}
+				colorValue={colorValue}
+				closePicker={closePicker}
+				handleSaveTheme={handleSaveTheme}
+			/>
 			<Stack h={'100%'} w={'100%'}>
-				<Group>
-					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-						Themes
-					</Text>
-					<Button
-						className={buttonClasses.tableButton}
-						classNames={buttonClasses}
-						onClick={() => {
-							setSelectedTheme({
-								id: undefined,
-								name: 'default',
-								backgroundImage: 'none',
-								backgroundColor: '#EEEEEE',
-								searchColor: '#00000033',
-								primaryColor: '#222222',
-								accentColor: '#5c5c5c',
-								borderColor: '#5c5c5c',
-							});
-							open();
+				<Group w={'100%'} justify='space-between'>
+					<Group>
+						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+							Themes
+						</Text>
+						<Button
+							className={buttonClasses.tableButton}
+							classNames={buttonClasses}
+							onClick={() => {
+								setSelectedTheme({
+									id: undefined,
+									name: 'default',
+									backgroundImage: 'none',
+									backgroundColor: '#EEEEEE',
+									searchColor: '#00000033',
+									primaryColor: '#222222',
+									accentColor: '#5c5c5c',
+									borderColor: '#5c5c5c',
+								});
+								open();
+							}}
+						>
+							<FiPlus />
+						</Button>
+					</Group>
+					<Switch
+						label={<Text c={theme.primaryColor}>Random Theme</Text>}
+						labelPosition='left'
+						checked={currentTheme === 'random'}
+						onChange={(e) => {
+							setValue(e.target.checked ? 'random' : 'blackboard');
 						}}
-					>
-						<FiPlus />
-					</Button>
+						color={theme.primaryColor}
+					/>
 				</Group>
 				<Group justify='center'>
 					{themesList.map((theme: any) => (
-						<Stack key={theme.name} w={'300px'}>
-							<Group gap={0} justify='space-between'>
-								<Button
-									w={'100%'}
-									h={'75px'}
+						<Group key={theme.name} pos={'relative'}>
+							{theme.name === currentTheme && (
+								<FiChevronRight
 									style={{
-										background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`,
-										backgroundSize: 'cover',
-										backgroundColor: theme.backgroundColor,
-										border: `solid ${theme.borderColor}`,
-										color: theme.primaryColor,
+										position: 'absolute',
+										left: -14,
+										zIndex: 1,
+										fontSize: '2em',
+										fontWeight: 'bold',
+										borderRadius: '50%',
+										backgroundColor: theme.borderColor,
+										color: 'var(--color-text-pri)',
 									}}
-									data-theme={theme.name}
-									onClick={() => {
-										setValue(theme.name);
-									}}
-								>
-									{theme.name}
-								</Button>
-							</Group>
-							<Group justify='space-between' gap={0}>
-								<ActionIcon
-									style={{
-										background: theme.randomEnabled
-											? 'rgba(255,255,255,1)'
-											: 'rgba(255,255,255,0.5)',
-										border: `solid 1px ${theme.borderColor}`,
-										borderRadius: '2%',
-										margin: '2px',
-										color: 'black',
-									}}
-									styles={{
-										root: {
-											height: '10px',
-											width: '10px',
-										},
-										icon: {
-											height: '10px',
-											width: '10px',
-											margin: 0,
-											padding: 0,
-										},
-									}}
-									onClick={() => {
-										createTheme({
-											method: 'PATCH',
-											endpoint: 'api/themes',
-											body: { ...theme, randomEnabled: !theme.randomEnabled },
-										});
-									}}
-								>
-									<FiCheck height={'10px'} width={'10px'} />
-								</ActionIcon>
-								<ActionIcon
-									className={actionIconClasses.editButton}
-									classNames={actionIconClasses}
-									onClick={() => handleOpen(theme)}
-								>
-									<FiEdit />
-								</ActionIcon>
-								<ColorSwatch color={theme.backgroundColor} />
-								<ColorSwatch color={theme.searchColor} />
-								<ColorSwatch color={theme.primaryColor} />
-								<ColorSwatch color={theme.accentColor} />
-								<ColorSwatch color={theme.borderColor} />
-
-								<ActionIcon
-									className={actionIconClasses.editButton}
-									classNames={actionIconClasses}
-									onClick={() => handleDeleteTheme(theme)}
-								>
-									<FiTrash color='red' />
-								</ActionIcon>
-							</Group>
-						</Stack>
+								/>
+							)}
+							<ThemeCard
+								theme={theme}
+								handleOpen={handleOpen}
+								handleDeleteTheme={handleDeleteTheme}
+								setValue={setValue}
+								createTheme={createTheme}
+							/>
+						</Group>
 					))}
-					<Stack key={theme.name} w={'300px'}>
-						<Group gap={0} justify='space-between'>
-							<Button
-								w={'100%'}
-								h={'75px'}
-								style={{
-									backgroundSize: 'cover',
-									backgroundColor: 'white',
-									border: 'solid black',
-									color: 'black',
-								}}
-								data-theme={theme.name}
-								onClick={() => {
-									setValue('random');
-								}}
-							>
-								Random
-							</Button>
-						</Group>
-						<Group justify='space-between' gap={0}>
-							<Group className='theme-palette'>
-								<ActionIcon
-									className={actionIconClasses.editButton}
-									classNames={actionIconClasses}
-									onClick={() => handleOpen(theme)}
-								>
-									<FiEdit />
-								</ActionIcon>
-								<ColorSwatch color={randomColor()} />
-								<ColorSwatch color={randomColor()} />
-								<ColorSwatch color={randomColor()} />
-								<ColorSwatch color={randomColor()} />
-								<ColorSwatch color={randomColor()} />
-
-								<ActionIcon
-									className={actionIconClasses.editButton}
-									classNames={actionIconClasses}
-									onClick={() => handleDeleteTheme(theme)}
-								>
-									<FiTrash color='red' />
-								</ActionIcon>
-							</Group>
-						</Group>
-					</Stack>
 				</Group>
 			</Stack>
 		</>