Background uploads

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

@@ -9,6 +9,7 @@ import { switchClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import NoItemsFound from '../Shared/NoItemsFound';
 import SettingsHeader from '../Shared/SettingsHeader';
+import BackgroundModal from './BackgroundModal';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 
@@ -27,7 +28,12 @@ function ThemesSettings() {
 	});
 	const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
 	const { mutateAsync } = useMutationAPI();
-	const [opened, { open, close }] = useDisclosure(false);
+	const [themeModalOpened, { open: openThemeModal, close: closeThemeModal }] =
+		useDisclosure(false);
+	const [
+		backgroundModalOpened,
+		{ open: openBackgroundModal, close: closeBackgroundModal },
+	] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
 	const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
@@ -57,11 +63,11 @@ function ThemesSettings() {
 	} = useCommonHooks();
 	const handleOpen = (theme: Theme) => {
 		setSelectedTheme(theme);
-		open();
+		openThemeModal();
 	};
 
 	const handleClose = () => {
-		close();
+		closeThemeModal();
 		closePicker();
 		setSelectedTheme({
 			id: undefined,
@@ -76,6 +82,10 @@ function ThemesSettings() {
 		});
 	};
 
+	const handleBackgroundModalClose = () => {
+		closeBackgroundModal();
+	};
+
 	const handleSaveTheme = () => {
 		mutateAsync({
 			method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
@@ -112,7 +122,7 @@ function ThemesSettings() {
 	return (
 		<Stack w={'100%'} align='center'>
 			<ThemeModal
-				opened={opened}
+				opened={themeModalOpened}
 				handleClose={handleClose}
 				selectedTheme={selectedTheme}
 				setSelectedTheme={setSelectedTheme}
@@ -126,9 +136,14 @@ function ThemesSettings() {
 				closePicker={closePicker}
 				handleSaveTheme={handleSaveTheme}
 			/>
+			<BackgroundModal
+				backgroundModalOpened={backgroundModalOpened}
+				handleBackgroundModalClose={handleBackgroundModalClose}
+				backgroundList={backgroundList}
+			/>
 			<SettingsHeader
 				setDragging={undefined}
-				openModal={open}
+				openModal={openThemeModal}
 				title={'Themes'}
 				tooltip={{
 					title: 'Themes can be created here and applied to the homepage.',
@@ -232,7 +247,7 @@ function ThemesSettings() {
 					bottom: isMobile ? '3.25rem' : 0,
 				}}
 			>
-				<Group w={isMobile ? undefined : '100%'}>
+				<Group w={isMobile ? undefined : '100%'} justify='space-between'>
 					<Text
 						miw={isMobile ? 100 : undefined}
 						className={textClasses.settingsSubTitle}
@@ -303,6 +318,16 @@ function ThemesSettings() {
 							</Group>
 						</Tooltip>
 					</Group>
+					<Button
+						style={{
+							zIndex: 200,
+						}}
+						onClick={() => {
+							openBackgroundModal();
+						}}
+					>
+						Manage Backgrounds
+					</Button>
 				</Group>
 			</Group>
 		</Stack>