Updates to theme styles

2025-01-02 10:36:26 -06:00
parent aa0661d574
commit 6899d7c7f0
3 changed files with 152 additions and 105 deletions
--- a/src/pages/settings/components/ThemeCard.tsx
+++ b/src/pages/settings/components/ThemeCard.tsx
@@ -1,8 +1,16 @@
 import { ActionIcon, Box, Button, Group, Stack, Text } from '@mantine/core';
-import { FiCheck, FiEdit, FiTrash } from 'react-icons/fi';
+import { FiCheck, FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';

-function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme }: any) {
+function ThemeCard({
+	handleOpen,
+	handleDeleteTheme,
+	theme,
+	cardTheme,
+	currentTheme,
+	setValue,
+	createTheme,
+}: any) {
 	return (
 		<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
 			<Text
@@ -12,47 +20,41 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 					left: 6,
 					paddingRight: 4,
 					paddingLeft: 4,
-					backgroundColor: theme.borderColor,
+					backgroundColor: cardTheme.borderColor,
 					borderRadius: '4px',
 					color:
-						theme.borderColor === theme.primaryColor
-							? theme.accentColor
-							: theme.primaryColor,
+						cardTheme.borderColor === cardTheme.primaryColor
+							? cardTheme.accentColor
+							: cardTheme.primaryColor,
 					zIndex: 3,
 				}}
 			>
-				{theme.name}
+				{cardTheme.name}
 			</Text>
 			<Button
 				w={'300px'}
 				h={'125px'}
+				disabled={currentTheme === 'random'}
 				style={{
-					background: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), no-repeat center url(/backgrounds/${theme.backgroundImage})`,
+					background: `linear-gradient(${cardTheme.backgroundColor}33, ${cardTheme.backgroundColor}33), no-repeat center url(/backgrounds/${cardTheme.backgroundImage})`,
 					backgroundSize: 'cover',
-					backgroundColor: theme.backgroundColor,
-					border: `solid ${theme.borderColor}`,
+					backgroundColor: cardTheme.backgroundColor,
+					border: `solid ${cardTheme.borderColor}`,
 				}}
-				data-theme={theme.name}
+				data-cardTheme={cardTheme.name}
 				onClick={() => {
-					setValue(theme.name);
+					setValue(cardTheme.name);
 				}}
 			>
-				<Group
-					style={{ zIndex: 2 }}
-					w={'100%'}
-					gap={0}
-					display={'flex'}
-					align='center'
-					justify='center'
-				>
+				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
 					<Stack align='center'>
 						<Box
 							style={{
 								height: '10px',
 								width: '100px',
-								backgroundColor: theme.searchColor,
+								backgroundColor: cardTheme.searchColor,
 								borderRadius: '4px',
-								borderBottom: `solid 1px ${theme.borderColor}`,
+								borderBottom: `solid 1px ${cardTheme.borderColor}`,
 							}}
 						/>
 						<Group justify='space-between'>
@@ -60,7 +62,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 								style={{
 									height: '8px',
 									width: '100px',
-									backgroundColor: theme.accentColor,
+									backgroundColor: cardTheme.accentColor,
 									borderRadius: '4px',
 								}}
 							/>
@@ -68,7 +70,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 								style={{
 									height: '8px',
 									width: '50px',
-									backgroundColor: theme.primaryColor,
+									backgroundColor: cardTheme.primaryColor,
 									borderRadius: '4px',
 								}}
 							/>
@@ -78,7 +80,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 								style={{
 									height: '5px',
 									width: '40px',
-									backgroundColor: theme.primaryColor,
+									backgroundColor: cardTheme.primaryColor,
 									borderRadius: '4px',
 								}}
 							/>
@@ -93,7 +95,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 									fontSize: '6px',
 									justifyContent: 'center',
 									alignContent: 'center',
-									color: theme.primaryColor,
+									color: cardTheme.primaryColor,
 								}}
 							>
 								lorem ipsum
@@ -107,7 +109,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 									fontSize: '6px',
 									justifyContent: 'center',
 									alignContent: 'center',
-									color: theme.primaryColor,
+									color: cardTheme.primaryColor,
 								}}
 							>
 								lorem ipsum
@@ -121,7 +123,7 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 									fontSize: '6px',
 									justifyContent: 'center',
 									alignContent: 'center',
-									color: theme.primaryColor,
+									color: cardTheme.primaryColor,
 								}}
 							>
 								lorem ipsum
@@ -130,6 +132,29 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 					</Stack>
 				</Group>
 			</Button>
+			{currentTheme === 'random' && cardTheme.name === theme.name ? (
+				<Group
+					gap={0}
+					style={{
+						zIndex: 300,
+						position: 'absolute',
+						right: 0,
+						backgroundColor: 'white',
+						borderRadius: '50%',
+						padding: '8px',
+						margin: '4px',
+						border: 'solid 2px black',
+					}}
+				>
+					<FiShuffle
+						style={{
+							fontSize: '2em',
+							fontWeight: 'bold',
+							color: 'black',
+						}}
+					/>
+				</Group>
+			) : (
 				<Stack
 					gap={0}
 					style={{
@@ -143,13 +168,16 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 					}}
 					align='center'
 					justify='center'
+					display={
+						currentTheme === 'random' && cardTheme.name === theme.name ? 'none' : 'flex'
+					}
 				>
 					<ActionIcon
 						style={{
-						background: theme.randomEnabled
+							background: cardTheme.randomEnabled
 								? 'rgba(255,255,255,1)'
 								: 'rgba(255,255,255,0.5)',
-						border: `solid 1px ${theme.borderColor}`,
+							border: `solid 1px ${cardTheme.borderColor}`,
 							borderRadius: '2%',
 							margin: '2px',
 							color: 'black',
@@ -160,8 +188,8 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 								width: '10px',
 							},
 							icon: {
-							height: '10px',
-							width: '10px',
+								height: '20px',
+								width: '20px',
 								fontSize: '24px',
 								margin: 0,
 								padding: 0,
@@ -171,16 +199,16 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 							createTheme({
 								method: 'PATCH',
 								endpoint: 'api/themes',
-							body: { ...theme, randomEnabled: !theme.randomEnabled },
+								body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
 							});
 						}}
 					>
-					<FiCheck />
+						{cardTheme.randomEnabled ? <FiCheck color='green' /> : <FiX color='red' />}
 					</ActionIcon>
 					<ActionIcon
 						className={actionIconClasses.editButton}
 						classNames={actionIconClasses}
-					onClick={() => handleOpen(theme)}
+						onClick={() => handleOpen(cardTheme)}
 						mb={2}
 					>
 						<FiEdit color='green' />
@@ -188,11 +216,12 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 					<ActionIcon
 						className={actionIconClasses.editButton}
 						classNames={actionIconClasses}
-					onClick={() => handleDeleteTheme(theme)}
+						onClick={() => handleDeleteTheme(cardTheme)}
 					>
 						<FiTrash color='red' />
 					</ActionIcon>
 				</Stack>
+			)}
 		</Group>
 	);
 }
--- a/src/pages/settings/components/ThemeModal.tsx
+++ b/src/pages/settings/components/ThemeModal.tsx
@@ -254,7 +254,7 @@ function ThemeModal({
 						<Button color={'green'} onClick={handleSaveTheme}>
 							Save
 						</Button>
-						<Button color={'red'} onClick={close}>
+						<Button color={'red'} onClick={handleClose}>
 							Cancel
 						</Button>
 					</Group>
--- a/src/pages/settings/components/Themes.tsx
+++ b/src/pages/settings/components/Themes.tsx
@@ -1,4 +1,4 @@
-import { Button, Group, Stack, Switch, Text } from '@mantine/core';
+import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
 import { useDisclosure, useLocalStorage } from '@mantine/hooks';
 import { useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
@@ -74,7 +74,6 @@ function ThemesSettings({ theme }: any) {
 		openDeleteConfirmModal(theme);
 		close();
 	};
-
 	return (
 		<>
 			<ThemeModal
@@ -129,10 +128,20 @@ function ThemesSettings({ theme }: any) {
 						color={theme.primaryColor}
 					/>
 				</Group>
-				<Group justify='center'>
-					{themesList.map((theme: any) => (
-						<Group key={theme.name} pos={'relative'}>
-							{theme.name === currentTheme && (
+				<Group justify='center' pos={'relative'}>
+					<Overlay
+						display={currentTheme === 'random' ? 'flex' : 'none'}
+						blur={5}
+						style={{
+							borderRadius: '10px',
+							marginTop: '-15px',
+							marginBottom: '-10px',
+						}}
+						pos={'absolute'}
+					/>
+					{themesList.map((cardTheme: any) => (
+						<Group key={cardTheme.name} pos={'relative'}>
+							{cardTheme.name === currentTheme && (
 								<FiChevronRight
 									style={{
 										position: 'absolute',
@@ -141,21 +150,30 @@ function ThemesSettings({ theme }: any) {
 										fontSize: '2em',
 										fontWeight: 'bold',
 										borderRadius: '50%',
-										backgroundColor: theme.borderColor,
+										backgroundColor: cardTheme.borderColor,
 										color:
-											theme.borderColor === theme.primaryColor
-												? theme.accentColor
-												: theme.primaryColor,
+											cardTheme.borderColor === cardTheme.primaryColor
+												? cardTheme.accentColor
+												: cardTheme.primaryColor,
 									}}
 								/>
 							)}
+							<Box
+								style={{
+									zIndex:
+										currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
+								}}
+							>
 								<ThemeCard
 									theme={theme}
+									cardTheme={cardTheme}
+									currentTheme={currentTheme}
 									handleOpen={handleOpen}
 									handleDeleteTheme={handleDeleteTheme}
 									setValue={setValue}
 									createTheme={createTheme}
 								/>
+							</Box>
 						</Group>
 					))}
 				</Group>