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,69 +132,96 @@ function ThemeCard({ handleOpen, handleDeleteTheme, theme, setValue, createTheme
 					</Stack>
 				</Group>
 			</Button>
-			<Stack
-				gap={0}
-				style={{
-					padding: '4px',
-					paddingRight: '0px',
-					position: 'absolute',
-					right: 3,
-					backgroundColor: '#ffffff88',
-					borderTopLeftRadius: '10px',
-					borderBottomLeftRadius: '10px',
-				}}
-				align='center'
-				justify='center'
-			>
-				<ActionIcon
+			{currentTheme === 'random' && cardTheme.name === theme.name ? (
+				<Group
+					gap={0}
 					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 },
-						});
+						zIndex: 300,
+						position: 'absolute',
+						right: 0,
+						backgroundColor: 'white',
+						borderRadius: '50%',
+						padding: '8px',
+						margin: '4px',
+						border: 'solid 2px black',
 					}}
 				>
-					<FiCheck />
-				</ActionIcon>
-				<ActionIcon
-					className={actionIconClasses.editButton}
-					classNames={actionIconClasses}
-					onClick={() => handleOpen(theme)}
-					mb={2}
+					<FiShuffle
+						style={{
+							fontSize: '2em',
+							fontWeight: 'bold',
+							color: 'black',
+						}}
+					/>
+				</Group>
+			) : (
+				<Stack
+					gap={0}
+					style={{
+						padding: '4px',
+						paddingRight: '0px',
+						position: 'absolute',
+						right: 3,
+						backgroundColor: '#ffffff88',
+						borderTopLeftRadius: '10px',
+						borderBottomLeftRadius: '10px',
+					}}
+					align='center'
+					justify='center'
+					display={
+						currentTheme === 'random' && cardTheme.name === theme.name ? 'none' : 'flex'
+					}
 				>
-					<FiEdit color='green' />
-				</ActionIcon>
-				<ActionIcon
-					className={actionIconClasses.editButton}
-					classNames={actionIconClasses}
-					onClick={() => handleDeleteTheme(theme)}
-				>
-					<FiTrash color='red' />
-				</ActionIcon>
-			</Stack>
+					<ActionIcon
+						style={{
+							background: cardTheme.randomEnabled
+								? 'rgba(255,255,255,1)'
+								: 'rgba(255,255,255,0.5)',
+							border: `solid 1px ${cardTheme.borderColor}`,
+							borderRadius: '2%',
+							margin: '2px',
+							color: 'black',
+						}}
+						styles={{
+							root: {
+								height: '10px',
+								width: '10px',
+							},
+							icon: {
+								height: '20px',
+								width: '20px',
+								fontSize: '24px',
+								margin: 0,
+								padding: 0,
+							},
+						}}
+						onClick={() => {
+							createTheme({
+								method: 'PATCH',
+								endpoint: 'api/themes',
+								body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
+							});
+						}}
+					>
+						{cardTheme.randomEnabled ? <FiCheck color='green' /> : <FiX color='red' />}
+					</ActionIcon>
+					<ActionIcon
+						className={actionIconClasses.editButton}
+						classNames={actionIconClasses}
+						onClick={() => handleOpen(cardTheme)}
+						mb={2}
+					>
+						<FiEdit color='green' />
+					</ActionIcon>
+					<ActionIcon
+						className={actionIconClasses.editButton}
+						classNames={actionIconClasses}
+						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,
 									}}
 								/>
 							)}
-							<ThemeCard
-								theme={theme}
-								handleOpen={handleOpen}
-								handleDeleteTheme={handleDeleteTheme}
-								setValue={setValue}
-								createTheme={createTheme}
-							/>
+							<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>