New Theme modal

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.',