MainLayout for theme persistence

src/pages/settings/components/ThemeCard.tsx

@@ -7,12 +7,15 @@ function ThemeCard({
 	handleOpen,
 	handleDeleteTheme,
 	theme,
+	allThemes,
+	setTheme,
 	cardTheme,
 	currentTheme,
 	setValue,
 	createTheme,
 }: any) {
 	const [hover, setHover] = useState(false);
+	const [shift, setShift] = useState<number>(0);
 	return (
 		<Group
 			gap={0}
@@ -51,7 +54,7 @@ function ThemeCard({
 					backgroundColor: cardTheme.backgroundColor,
 					border: `solid ${cardTheme.borderColor}`,
 				}}
-				data-cardTheme={cardTheme.name}
+				// data-cardTheme={cardTheme.name}
 				onClick={() => {
 					setValue(cardTheme.name);
 				}}
@@ -145,23 +148,46 @@ function ThemeCard({
 			</Button>
 			{currentTheme === 'random' && cardTheme.name === theme.name ? (
 				<Group
+					onMouseEnter={() => {
+						setShift(2);
+					}}
+					onMouseLeave={() => {
+						setShift(0);
+					}}
+					onClick={() => {
+						setShift(0);
+					}}
 					gap={0}
 					style={{
 						zIndex: 300,
 						position: 'absolute',
 						right: 0,
-						backgroundColor: 'white',
+						top: 27 - shift,
+						backgroundColor: shift === 0 ? 'white' : 'var(--color-background)',
 						borderRadius: '50%',
 						padding: '8px',
 						margin: '4px',
-						border: 'solid 2px black',
+						border: 'solid 2px',
+						borderColor: shift === 0 ? 'black' : 'var(--color-text-pri)',
+						transition: 'all 0.2s',
 					}}
 				>
 					<FiShuffle
+						onClick={() => {
+							const enabled = allThemes
+								.filter((t: any) => t.randomEnabled)
+								.filter((t: any) => t.name !== theme.name);
+							if (enabled.length === 0) {
+								setTheme(allThemes[0]);
+							} else {
+								const index = Math.floor(Math.random() * enabled.length);
+								setTheme(enabled[index]);
+							}
+						}}
 						style={{
 							fontSize: '2em',
 							fontWeight: 'bold',
-							color: 'black',
+							color: shift === 0 ? 'black' : 'var(--color-text-pri)',
 						}}
 					/>
 				</Group>