More theme styles

src/pages/settings/components/ThemeCard.tsx

@@ -1,5 +1,6 @@
-import { ActionIcon, Box, Button, Group, Stack, Text } from '@mantine/core';
-import { FiCheck, FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
+import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
+import { useState } from 'react';
+import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 
 function ThemeCard({
@@ -11,8 +12,17 @@ function ThemeCard({
 	setValue,
 	createTheme,
 }: any) {
+	const [hover, setHover] = useState(false);
 	return (
-		<Group gap={0} align='center' justify='center' display={'grid'} pos={'relative'}>
+		<Group
+			gap={0}
+			align='center'
+			justify='center'
+			display={'grid'}
+			pos={'relative'}
+			onMouseEnter={() => setHover(true)}
+			onMouseLeave={() => setHover(false)}
+		>
 			<Text
 				style={{
 					position: 'absolute',
@@ -32,8 +42,8 @@ function ThemeCard({
 				{cardTheme.name}
 			</Text>
 			<Button
-				w={'300px'}
-				h={'125px'}
+				w={'275px'}
+				h={'115px'}
 				disabled={currentTheme === 'random'}
 				style={{
 					background: `linear-gradient(${cardTheme.backgroundColor}33, ${cardTheme.backgroundColor}33), no-repeat center url(/backgrounds/${cardTheme.backgroundImage})`,
@@ -46,6 +56,7 @@ function ThemeCard({
 					setValue(cardTheme.name);
 				}}
 			>
+				{hover && currentTheme !== 'random' && <Overlay opacity={0.5} zIndex={0} />}
 				<Group w={'100%'} gap={0} display={'flex'} align='center' justify='center'>
 					<Stack align='center'>
 						<Box
@@ -177,10 +188,7 @@ function ThemeCard({
 							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: {
@@ -203,7 +211,7 @@ function ThemeCard({
 							});
 						}}
 					>
-						{cardTheme.randomEnabled ? <FiCheck color='green' /> : <FiX color='red' />}
+						{cardTheme.randomEnabled ? <FiShuffle color='green' /> : <FiX color='red' />}
 					</ActionIcon>
 					<ActionIcon
 						className={actionIconClasses.editButton}