Style fixes

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

@@ -2,7 +2,7 @@ import { Box, Group, LoadingOverlay, SimpleGrid, Stack, Text } from '@mantine/co
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
-import { useEffect, useState, useMemo, useCallback } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { FiChevronRight } from 'react-icons/fi';
 import { textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
@@ -23,11 +23,13 @@ export function ThemePlaylists() {
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 
 	const themePlaylists: ThemePlaylist[] = useMemo(() => {
-		return themePlaylistData?.filter(
+		return (
+			themePlaylistData?.filter(
 				(a: ThemePlaylist) =>
 					a.name.toLowerCase().includes((debouncedSearch as string).toLowerCase()) ||
 					a.name.includes('Time of Day'),
-		) || [];
+			) || []
+		);
 	}, [themePlaylistData, debouncedSearch]);
 	const defaultPlaylist: ThemePlaylist = {
 		id: undefined,
@@ -42,10 +44,13 @@ export function ThemePlaylists() {
 	const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
 	const [isLoading, setIsLoading] = useState(false);
 
-	const handleOpen = useCallback((playlist: ThemePlaylist) => {
+	const handleOpen = useCallback(
+		(playlist: ThemePlaylist) => {
 			setSelectedPlaylist(playlist);
 			open();
-	}, [open]);
+		},
+		[open],
+	);
 
 	const handleClose = useCallback(() => {
 		setSelectedPlaylist(defaultPlaylist);
@@ -67,17 +72,26 @@ export function ThemePlaylists() {
 		}
 	}, [debouncedSearch, searchValue]);
 
-	const allThemesIds = useMemo(() => 
+	const allThemesIds = useMemo(
-		allThemeData?.map((a: Theme) => a.id) ?? [], 
+		() => allThemeData?.map((a: Theme) => a.id) ?? [],
-	[allThemeData]);
+		[allThemeData],
+	);
 
-	const backgroundsThemes = useMemo(() => 
+	const backgroundsThemes = useMemo(
-		allThemeData?.filter((a: any) => !a.backgroundImage.toLowerCase().includes('none')) ?? [],
+		() =>
-	[allThemeData]);
+			allThemeData?.filter(
+				(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
+			) ?? [],
+		[allThemeData],
+	);
 
-	const noBackgroundsThemes = useMemo(() => 
+	const noBackgroundsThemes = useMemo(
-		allThemeData?.filter((a: any) => a.backgroundImage.toLowerCase().includes('none')) ?? [],
+		() =>
-	[allThemeData]);
+			allThemeData?.filter((a: any) =>
+				a.backgroundImage.toLowerCase().includes('none'),
+			) ?? [],
+		[allThemeData],
+	);
 
 	const timeOfDayPlaylist = useMemo(() => {
 		const found = themePlaylists?.find((a: ThemePlaylist) => a.name === 'Time of Day');
@@ -89,26 +103,35 @@ export function ThemePlaylists() {
 		};
 	}, [themePlaylists]);
 
-	const allStack = useMemo(() => ({
+	const allStack = useMemo(
+		() => ({
 			id: undefined,
 			name: 'All',
 			default: 1,
 			themeList: `[${allThemesIds.join(',')}]`,
-	}), [allThemesIds]);
+		}),
+		[allThemesIds],
+	);
 
-	const backgroundsStack = useMemo(() => ({
+	const backgroundsStack = useMemo(
+		() => ({
 			id: undefined,
 			name: 'Backgrounds',
 			default: 1,
 			themeList: `[${backgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
-	}), [backgroundsThemes]);
+		}),
+		[backgroundsThemes],
+	);
 
-	const noBackgroundsStack = useMemo(() => ({
+	const noBackgroundsStack = useMemo(
+		() => ({
 			id: undefined,
 			name: 'No Backgrounds',
 			default: 1,
 			themeList: `[${noBackgroundsThemes.map((a: Theme) => a.id).join(',')}]`,
-	}), [noBackgroundsThemes]);
+		}),
+		[noBackgroundsThemes],
+	);
 
 	return (
 		<Stack>
@@ -153,7 +176,7 @@ export function ThemePlaylists() {
 				/>
 				{allThemeData && (
 					<>
-						<Group justify='center' align='center' pos={'relative'}>
+						<Stack w={'100%'} justify='center' align='center' pos={'relative'}>
 							<Text
 								p={0}
 								className={textClasses.settingsSubTitle}
@@ -161,8 +184,7 @@ export function ThemePlaylists() {
 							>
 								Defaults
 							</Text>
-						</Group>
+							<Group>
-						<Group justify='center' align='center' pos={'relative'}>
 								<Group pos={'relative'}>
 									{'All' === currentThemePlaylist && (
 										<FiChevronRight
@@ -186,7 +208,6 @@ export function ThemePlaylists() {
 										/>
 									</Box>
 								</Group>
-						</Group>
 								<Group pos={'relative'}>
 									{'Backgrounds' === currentThemePlaylist && (
 										<FiChevronRight
@@ -265,6 +286,9 @@ export function ThemePlaylists() {
 										/>
 									</Box>
 								</Group>
+							</Group>
+						</Stack>
+						<Stack w={'100%'} justify='center' align='center' pos={'relative'}>
 							<Group justify='center' align='center' pos={'relative'}>
 								<Text
 									p={0}
@@ -324,6 +348,7 @@ export function ThemePlaylists() {
 									</Group>
 								)}
 							</Group>
+						</Stack>
 					</>
 				)}
 			</Stack>