Updates to theme styles

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>