Theme updates and style fixes

src/pages/settings/components/Theming/Themes.tsx

@@ -1,10 +1,11 @@
-import { Box, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
+import { Box, Button, Group, Overlay, Stack, Switch, Text, Tooltip } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiChevronRight } from 'react-icons/fi';
-import { switchClasses } from 'styles';
+import { useNavigate } from 'react-router-dom';
+import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
@@ -45,8 +46,15 @@ function ThemesSettings() {
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [isLoading, setIsLoading] = useState(false);
-	const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
-		useCommonHooks();
+	const navigate = useNavigate();
+	const {
+		currentTheme,
+		setCurrentTheme,
+		theme,
+		isMobile,
+		currentThemePlaylist,
+		setCurrentThemePlaylist,
+	} = useCommonHooks();
 
 	const handleOpen = (theme: Theme) => {
 		setSelectedTheme(theme);
@@ -102,7 +110,6 @@ function ThemesSettings() {
 			setIsLoading(false);
 		}
 	}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
-
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal
@@ -136,36 +143,13 @@ function ThemesSettings() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Switch
-				label={
-					isMobile ? (
-						<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
-					) : (
-						<Text c={'var(--mantine-color-primary-0)'}>Random Theme</Text>
-					)
-				}
-				labelPosition='left'
-				pos={'absolute'}
-				right={isMobile ? '2rem' : '1rem'}
-				top={isMobile ? '3.5rem' : '2rem'}
-				checked={currentTheme === 'random'}
-				onChange={(e) => {
-					setCurrentTheme(e.target.checked ? 'random' : theme.name);
-					setCurrentThemePlaylist('All');
-				}}
-				className={switchClasses.default}
-				classNames={switchClasses}
-				style={{
-					zIndex: 250,
-				}}
-			/>
 			<Group
 				w={'85%'}
 				justify='center'
 				align='center'
 				pos={'relative'}
 				mt={isMobile ? '10rem' : '7rem'}
-				mb={isMobile ? '6rem' : '1rem'}
+				mb={isMobile ? '8rem' : '6.5rem'}
 			>
 				<Overlay
 					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
@@ -202,7 +186,16 @@ function ThemesSettings() {
 							<Box
 								style={{
 									zIndex:
-										currentTheme === 'random' && cardTheme.name === theme.name ? 195 : 0,
+										currentTheme === 'random' &&
+										(themePlaylists
+											.filter(
+												(t: ThemePlaylist) =>
+													t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
+											)[0]
+											?.themeList.includes(`${cardTheme.id}`) ||
+											cardTheme.name === theme.name)
+											? 195
+											: 0,
 								}}
 							>
 								<ThemeCard
@@ -223,6 +216,96 @@ function ThemesSettings() {
 					</Group>
 				)}
 			</Group>
+			<Group
+				align='center'
+				justify='center'
+				style={{
+					backdropFilter: 'blur(10px) brightness(.75)',
+					zIndex: 199,
+					paddingTop: '1.5rem',
+					paddingBottom: '1.5rem',
+					paddingLeft: '1rem',
+					paddingRight: '1rem',
+					height: 'min-content',
+					width: '100%',
+					marginTop: 0,
+					position: 'absolute',
+					bottom: 0,
+				}}
+			>
+				<Group w={isMobile ? undefined : '100%'}>
+					<Text
+						miw={isMobile ? 100 : undefined}
+						className={textClasses.settingsSubTitle}
+						classNames={textClasses}
+					>
+						Current Settings:
+					</Text>
+					<Group pos={isMobile ? undefined : 'absolute'} w={'100%'} justify='center'>
+						<Group align='center' justify='center'>
+							<Text
+								style={{
+									color: 'var(--mantine-color-accent-0)',
+									fontWeight: 'bold',
+								}}
+							>
+								Active Playlist:
+							</Text>
+							<Text
+								style={{
+									color: 'var(--mantine-color-primary-0)',
+									fontWeight: 'bold',
+									fontSize: '1.2em',
+								}}
+							>
+								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
+							</Text>
+						</Group>
+						<Button
+							onClick={() => {
+								if (currentThemePlaylist === 'All') {
+									navigate(`/${import.meta.env.VITE_BASE_URL}/settings/themePlaylists`);
+								} else {
+									setCurrentThemePlaylist('All');
+									setCurrentTheme('random');
+								}
+							}}
+						>
+							{currentThemePlaylist === 'All' ? 'Select Playlist' : 'Disable Playlist'}
+						</Button>
+						<Tooltip
+							label='Shuffle is always on when a playlist is active.'
+							c={'var(--mantine-color-primary-0)'}
+							bg={'var(--mantine-color-background-0)'}
+							disabled={currentThemePlaylist === 'All'}
+						>
+							<Group>
+								<Switch
+									disabled={currentThemePlaylist !== 'All'}
+									label={
+										isMobile ? (
+											<FaDice size={20} color={'var(--mantine-color-primary-0)'} />
+										) : (
+											<Text c={'var(--mantine-color-primary-0)'}>Shuffle Enabled</Text>
+										)
+									}
+									labelPosition='left'
+									checked={currentTheme === 'random'}
+									onChange={(e) => {
+										setCurrentTheme(e.target.checked ? 'random' : theme.name);
+										setCurrentThemePlaylist('All');
+									}}
+									className={switchClasses.default}
+									classNames={switchClasses}
+									style={{
+										zIndex: 250,
+									}}
+								/>
+							</Group>
+						</Tooltip>
+					</Group>
+				</Group>
+			</Group>
 		</Stack>
 	);
 }