Updated header and bug fixes

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

@@ -1,16 +1,13 @@
 import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
+import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses } from 'styles';
 import type { ThemePlaylist } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
-function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
-	const { data: themePlaylists } = useQueryAPI({
-		endpoint: 'api/themePlaylists',
-	});
+function ThemeCard({ cardTheme, handleOpen, allThemes, themePlaylists }: any) {
 	const [hover, setHover] = useState(false);
 	const [shiftEdit, setShiftEdit] = useState<number>(0);
 	const [shiftShuffle, setShiftShuffle] = useState<number>(0);

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

@@ -69,7 +69,7 @@ function ThemePlaylists() {
 					searchValue={searchValue}
 					setSearchValue={setSearchValue}
 				/>
-				<Group justify='center' align='center' pos={'relative'}>
+				<Group mt={'6rem'} justify='center' align='center' pos={'relative'}>
 					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
 						Defaults
 					</Text>

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

@@ -17,6 +17,9 @@ function ThemesSettings() {
 	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
 		endpoint: backgroundsEndpoint,
 	});
+	const { data: themePlaylists } = useQueryAPI({
+		endpoint: 'api/themePlaylists',
+	});
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
@@ -97,15 +100,18 @@ function ThemesSettings() {
 					labelPosition='left'
 					pos={'absolute'}
 					right={isMobile ? '2rem' : '1rem'}
-					top={isMobile ? '9.5rem' : '7rem'}
+					top={isMobile ? '9.5rem' : '2rem'}
 					checked={currentTheme === 'random'}
 					onChange={(e) => {
 						setCurrentTheme(e.target.checked ? 'random' : theme.name);
 						setCurrentThemePlaylist('All');
 					}}
 					color={theme.primaryColor}
+					style={{
+						zIndex: 1,
+					}}
 				/>
-				<Group justify='center' align='center' pos={'relative'} mt={'1rem'}>
+				<Group justify='center' align='center' pos={'relative'} mt={'10rem'}>
 					<Overlay
 						display={currentTheme === 'random' ? 'flex' : 'none'}
 						blur={5}
@@ -152,6 +158,7 @@ function ThemesSettings() {
 										allThemes={allThemes}
 										cardTheme={cardTheme}
 										handleOpen={handleOpen}
+										themePlaylists={themePlaylists}
 									/>
 								</Box>
 							</Group>