Theme modal updates

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

@@ -1,7 +1,17 @@
-import { Box, Button, Group, Overlay, Stack, Switch, Text, Tooltip } from '@mantine/core';
+import {
+	Box,
+	Button,
+	Divider,
+	Group,
+	Overlay,
+	Stack,
+	Switch,
+	Text,
+	Tooltip,
+} from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { NoItemsFound, SettingsHeader } from 'components';
-import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
+import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiChevronRight, FiEdit, FiMousePointer, FiStopCircle } from 'react-icons/fi';
@@ -10,10 +20,9 @@ import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import { BackgroundModal } from '../Backgrounds';
 import { ThemeCard } from './ThemeCard';
-import { ThemeModal } from './ThemeModal';
+import { ThemeModal } from './ThemeModal/ThemeModal';
 
 export function Themes() {
-	const themesEndpoint = 'api/themes';
 	const backgroundsEndpoint = 'api/backgrounds';
 	const { data: allThemeData, isFetched: isAllThemeDataFetched } = useQueryAPI({
 		endpoint: 'api/themes',
@@ -26,7 +35,6 @@ export function Themes() {
 		endpoint: 'api/themePlaylists',
 	});
 	const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
-	const { mutateAsync } = useMutationAPI();
 	const [themeModalOpened, { open: openThemeModal, close: closeThemeModal }] =
 		useDisclosure(false);
 	const [
@@ -48,7 +56,6 @@ export function Themes() {
 		textShadowsEnabled: 0,
 		appShadowsEnabled: 0,
 	});
-	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [isLoading, setIsLoading] = useState(false);
@@ -63,44 +70,11 @@ export function Themes() {
 		setCurrentThemePlaylist,
 	} = useCommonHooks();
 
-	const handleOpen = (theme: Theme) => {
-		setSelectedTheme(theme);
-		openThemeModal();
-	};
-
-	const handleClose = () => {
-		closeThemeModal();
-		closePicker();
-		setIsNew(false);
-		setSelectedTheme({
-			id: undefined,
-			name: 'default',
-			backgroundImage: 'none',
-			backgroundColor: '#EEEEEE',
-			searchColor: '#00000033',
-			primaryColor: '#222222',
-			accentColor: '#5c5c5c',
-			borderColor: '#5c5c5c',
-			randomEnabled: 1,
-			textShadowsEnabled: 0,
-			appShadowsEnabled: 0,
-		});
-	};
-
 	const handleNewTheme = () => {
 		setIsNew(true);
 		openThemeModal();
 	};
 
-	const handleSaveTheme = () => {
-		mutateAsync({
-			method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
-			endpoint: themesEndpoint,
-			body: selectedTheme,
-		});
-		handleClose();
-	};
-
 	useEffect(() => {
 		if (backgroundData && isBackgroundFetched) {
 			setBackgroundList(['None', ...backgroundData]);
@@ -146,17 +120,13 @@ export function Themes() {
 		<Stack>
 			<ThemeModal
 				opened={themeModalOpened}
-				handleClose={handleClose}
 				selectedTheme={selectedTheme}
 				setSelectedTheme={setSelectedTheme}
-				openPicker={openPicker}
 				backgroundList={backgroundList}
-				pickerOpen={pickerOpen}
-				closePicker={closePicker}
-				handleSaveTheme={handleSaveTheme}
 				isNew={isNew}
 				setIsNew={setIsNew}
 				allThemes={allThemes}
+				closeThemeModal={closeThemeModal}
 			/>
 			<BackgroundModal
 				backgroundModalOpened={backgroundModalOpened}
@@ -239,8 +209,9 @@ export function Themes() {
 									<ThemeCard
 										allThemes={allThemeData}
 										cardTheme={cardTheme}
-										handleOpen={handleOpen}
 										themePlaylists={themePlaylists}
+										setSelectedTheme={setSelectedTheme}
+										openThemeModal={openThemeModal}
 									/>
 								</Box>
 							</Group>
@@ -259,8 +230,8 @@ export function Themes() {
 				style={{
 					backdropFilter: 'blur(5px) brightness(.75)',
 					zIndex: 199,
-					paddingTop: isMobile ? '.5rem' : '1.5rem',
-					paddingBottom: '1.5rem',
+					paddingTop: '.5rem',
+					paddingBottom: '.5rem',
 					paddingLeft: '1rem',
 					paddingRight: '1rem',
 					width: '100%',
@@ -291,7 +262,16 @@ export function Themes() {
 					>
 						Current Settings:
 					</Text>
-					<Group>
+					<Group
+						style={{
+							backgroundColor: 'var(--mantine-color-search-0)',
+							borderRadius: '8px',
+							paddingTop: '.5rem',
+							paddingBottom: '.5rem',
+							paddingLeft: '1rem',
+							paddingRight: '1rem',
+						}}
+					>
 						<Group>
 							<Text
 								style={{
@@ -311,6 +291,11 @@ export function Themes() {
 								{currentThemePlaylist === 'All' ? 'All' : currentThemePlaylist}
 							</Text>
 						</Group>
+						<Divider
+							orientation='vertical'
+							size={'xs'}
+							color={'var(--mantine-color-primary-0)'}
+						/>
 						<Button
 							onClick={() => {
 								if (currentThemePlaylist === 'All') {