More typing and fixes

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

@@ -10,7 +10,7 @@ import {
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, textInputClasses } from 'styles';
-import type { Theme } from 'types';
+import type { Theme, ThemePlaylist } from 'types';
 import ThemeMiniCard from './ThemeMiniCard';
 import TimeOfDay from './TimeOfDay';
 
@@ -19,6 +19,7 @@ function ThemePlaylistModal({
 	handleClose,
 	createPlaylist,
 	selectedPlaylist,
+	defaultPlaylist,
 	setSelectedPlaylist,
 	handleSavePlaylist,
 	allThemes,
@@ -26,13 +27,15 @@ function ThemePlaylistModal({
 	opened: boolean;
 	handleClose: () => void;
 	createPlaylist: any;
-	selectedPlaylist: any;
-	setSelectedPlaylist: (selectedPlaylist: any) => void;
+	selectedPlaylist: ThemePlaylist;
+	defaultPlaylist: ThemePlaylist;
+	setSelectedPlaylist: (selectedPlaylist: ThemePlaylist) => void;
 	handleSavePlaylist: () => void;
 	allThemes: Theme[];
 }) {
 	const { theme, isMobile, modalStyle } = useCommonHooks();
-	const [themeList, setThemeList] = useState<any>('[]');
+	const [themeList, setThemeList] = useState<any>([]);
+
 	useEffect(() => {
 		if (selectedPlaylist?.themeList) {
 			setThemeList(JSON.parse(selectedPlaylist?.themeList));
@@ -40,12 +43,8 @@ function ThemePlaylistModal({
 	}, [selectedPlaylist]);
 
 	if (selectedPlaylist?.name === undefined) {
-		setSelectedPlaylist({
-			name: 'New Playlist',
-			themeList: '[]',
-		});
+		setSelectedPlaylist(defaultPlaylist);
 	}
-
 	return (
 		<Modal.Root
 			size={'50%'}
@@ -64,7 +63,7 @@ function ThemePlaylistModal({
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
-						<Text>Name:</Text>
+						<Text c={theme.backgroundColor}>Name:</Text>
 						<TextInput
 							className={textInputClasses.default}
 							classNames={textInputClasses}
@@ -145,7 +144,7 @@ function ThemePlaylistModal({
 									onClick={() => {
 										handleClose();
 										setThemeList('[]');
-										setSelectedPlaylist({});
+										setSelectedPlaylist(defaultPlaylist);
 									}}
 								>
 									Cancel