Added edit button while shuffling themes

src/pages/settings/components/ThemeCard.tsx

@@ -12,7 +12,8 @@ function ThemeCard({
 	allThemes,
 }: any) {
 	const [hover, setHover] = useState(false);
-	const [shift, setShift] = useState<number>(0);
+	const [shiftEdit, setShiftEdit] = useState<number>(0);
+	const [shiftShuffle, setShiftShuffle] = useState<number>(0);
 	const { handleThemeChange, currentTheme, setCurrentTheme, theme } = useCommonHooks();
 
 	return (
@@ -145,41 +146,79 @@ function ThemeCard({
 				</Group>
 			</Button>
 			{currentTheme === 'random' && cardTheme.name === theme.name ? (
-				<Group
+				<Group>
-					onMouseEnter={() => {
+					<Group
-						setShift(2);
+						onMouseEnter={() => {
-					}}
+							setShiftEdit(2);
-					onMouseLeave={() => {
+						}}
-						setShift(0);
+						onMouseLeave={() => {
-					}}
+							setShiftEdit(0);
-					onClick={() => {
+						}}
-						setShift(0);
-					}}
-					gap={0}
-					style={{
-						zIndex: 300,
-						position: 'absolute',
-						right: 0,
-						top: 27 - shift,
-						backgroundColor: shift === 0 ? 'white' : 'var(--color-background)',
-						borderRadius: '50%',
-						padding: '8px',
-						margin: '4px',
-						border: 'solid 2px',
-						borderColor: shift === 0 ? 'black' : 'var(--color-text-pri)',
-						transition: 'all 0.2s',
-					}}
-				>
-					<FiShuffle
 						onClick={() => {
-							handleThemeChange(allThemes, false);
+							setShiftEdit(0);
 						}}
+						gap={0}
 						style={{
-							fontSize: '2em',
+							zIndex: 300,
-							fontWeight: 'bold',
+							position: 'absolute',
-							color: shift === 0 ? 'black' : 'var(--color-text-pri)',
+							left: 0,
+							top: 27 - shiftEdit,
+							backgroundColor: shiftEdit === 0 ? 'white' : 'var(--color-background)',
+							borderRadius: '50%',
+							padding: '8px',
+							margin: '4px',
+							border: 'solid 2px',
+							borderColor: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)',
+							transition: 'all 0.2s',
 						}}
-					/>
+					>
+						<FiEdit
+							onClick={() => {
+								handleOpen(cardTheme);
+							}}
+							style={{
+								fontSize: '2em',
+								fontWeight: 'bold',
+								color: shiftEdit === 0 ? 'black' : 'var(--color-text-pri)',
+							}}
+						/>
+					</Group>
+						<Group
+						onMouseEnter={() => {
+							setShiftShuffle(2);
+						}}
+						onMouseLeave={() => {
+							setShiftShuffle(0);
+						}}
+						onClick={() => {
+							setShiftShuffle(0);
+						}}
+						gap={0}
+						style={{
+							zIndex: 300,
+							position: 'absolute',
+							right: 0,
+							top: 27 - shiftShuffle,
+							backgroundColor: shiftShuffle === 0 ? 'white' : 'var(--color-background)',
+							borderRadius: '50%',
+							padding: '8px',
+							margin: '4px',
+							border: 'solid 2px',
+							borderColor: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
+							transition: 'all 0.2s',
+						}}
+					>
+						<FiShuffle
+							onClick={() => {
+								handleThemeChange(allThemes, false);
+							}}
+							style={{
+								fontSize: '2em',
+								fontWeight: 'bold',
+								color: shiftShuffle === 0 ? 'black' : 'var(--color-text-pri)',
+							}}
+						/>
+					</Group>
 				</Group>
 			) : (
 				<Stack