New Theme modal

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

@@ -1,4 +1,4 @@
-import { Button, Group, Modal, SimpleGrid, Text, TextInput } from '@mantine/core';
+import { Button, Group, Modal, Text, TextInput } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
@@ -87,7 +87,7 @@ export function ThemePlaylistModal({
 						/>
 					) : (
 						<>
-							<SimpleGrid cols={3}>
+							<Group w={'100%'} justify='center'>
 								{selectedPlaylist?.name !== 'Time of Day' &&
 									allThemes?.map((miniTheme: Theme) => {
 										const newThemeList = themeList;
@@ -102,7 +102,7 @@ export function ThemePlaylistModal({
 											/>
 										);
 									})}
-							</SimpleGrid>
+							</Group>
 							<Group mt={'1rem'}>
 								<Button color={'green'} onClick={handleSavePlaylist}>
 									Save

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

@@ -44,7 +44,7 @@ export function Themes() {
 		primaryColor: '#222222',
 		accentColor: '#5c5c5c',
 		borderColor: '#5c5c5c',
-		randomEnabled: 0,
+		randomEnabled: 1,
 		textShadowsEnabled: 0,
 		appShadowsEnabled: 0,
 	});
@@ -52,6 +52,7 @@ export function Themes() {
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [isLoading, setIsLoading] = useState(false);
+	const [isNew, setIsNew] = useState(false);
 	const navigate = useNavigate();
 	const {
 		currentTheme,
@@ -70,6 +71,7 @@ export function Themes() {
 	const handleClose = () => {
 		closeThemeModal();
 		closePicker();
+		setIsNew(false);
 		setSelectedTheme({
 			id: undefined,
 			name: 'default',
@@ -79,12 +81,17 @@ export function Themes() {
 			primaryColor: '#222222',
 			accentColor: '#5c5c5c',
 			borderColor: '#5c5c5c',
-			randomEnabled: 0,
+			randomEnabled: 1,
 			textShadowsEnabled: 0,
 			appShadowsEnabled: 0,
 		});
 	};
 
+	const handleNewTheme = () => {
+		setIsNew(true);
+		openThemeModal();
+	};
+
 	const handleSaveTheme = () => {
 		mutateAsync({
 			method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
@@ -147,6 +154,9 @@ export function Themes() {
 				pickerOpen={pickerOpen}
 				closePicker={closePicker}
 				handleSaveTheme={handleSaveTheme}
+				isNew={isNew}
+				setIsNew={setIsNew}
+				allThemes={allThemes}
 			/>
 			<BackgroundModal
 				backgroundModalOpened={backgroundModalOpened}
@@ -156,7 +166,7 @@ export function Themes() {
 			/>
 			<SettingsHeader
 				setDragging={undefined}
-				openModal={openThemeModal}
+				openModal={handleNewTheme}
 				title={'Themes'}
 				tooltip={{
 					title: 'Themes can be created here and applied to the homepage.',