Updated header and bug fixes

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>