More typing

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

@@ -12,6 +12,7 @@ import {
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
 import { modalClasses, selectClasses, textInputClasses } from 'styles';
+import type { Theme } from 'types';
 import ThemeMiniCard from './ThemeMiniCard';
 
 function ThemePlaylistModal({
@@ -22,8 +23,16 @@ function ThemePlaylistModal({
 	setSelectedPlaylist,
 	handleSavePlaylist,
 	allThemes,
-}: any) {
-	const { theme, isMobile } = useCommonHooks();
+}: {
+	opened: boolean;
+	handleClose: () => void;
+	createPlaylist: any;
+	selectedPlaylist: any;
+	setSelectedPlaylist: (selectedPlaylist: any) => void;
+	handleSavePlaylist: () => void;
+	allThemes: Theme[];
+}) {
+	const { theme, isMobile, modalStyle } = useCommonHooks();
 	const [themeList, setThemeList] = useState<any>('[]');
 	useEffect(() => {
 		if (selectedPlaylist.themeList) {
@@ -50,14 +59,7 @@ function ThemePlaylistModal({
 				handleClose();
 				setThemeList('[]');
 			}}
-			style={{
-				'--color-text-pri': theme.primaryColor,
-				'--color-text-acc': theme.accentColor,
-				'--color-background': theme.backgroundColor,
-				'--color-border': theme.borderColor,
-				'--color-search-background': theme.searchColor,
-				'--image-background': `url("${theme.backgroundImage}")`,
-			}}
+			style={modalStyle}
 		>
 			<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
 			<Modal.Content>
@@ -95,7 +97,7 @@ function ThemePlaylistModal({
 									labelProps={{ display: 'none' }}
 									placeholder='Select Theme'
 									defaultValue={themeList['0']}
-									data={allThemes?.map((theme: any) => {
+									data={allThemes?.map((theme: Theme) => {
 										return {
 											value: `${theme.id}`,
 											label: theme.name,
@@ -128,7 +130,7 @@ function ThemePlaylistModal({
 									labelProps={{ display: 'none' }}
 									placeholder='Select Theme'
 									defaultValue={themeList['1']}
-									data={allThemes?.map((theme: any) => {
+									data={allThemes?.map((theme: Theme) => {
 										return {
 											value: `${theme.id}`,
 											label: theme.name,
@@ -161,7 +163,7 @@ function ThemePlaylistModal({
 									labelProps={{ display: 'none' }}
 									placeholder='Select Theme'
 									defaultValue={themeList['2']}
-									data={allThemes?.map((theme: any) => {
+									data={allThemes?.map((theme: Theme) => {
 										return {
 											value: `${theme.id}`,
 											label: theme.name,
@@ -194,7 +196,7 @@ function ThemePlaylistModal({
 									labelProps={{ display: 'none' }}
 									placeholder='Select Theme'
 									defaultValue={themeList['3']}
-									data={allThemes?.map((theme: any) => {
+									data={allThemes?.map((theme: Theme) => {
 										return {
 											value: `${theme.id}`,
 											label: theme.name,
@@ -225,7 +227,7 @@ function ThemePlaylistModal({
 					) : (
 						<SimpleGrid cols={3}>
 							{selectedPlaylist.name !== 'Time of Day' &&
-								allThemes?.map((miniTheme: any) => {
+								allThemes.map((miniTheme: Theme) => {
 									const newThemeList = themeList;
 									return (
 										<Group
@@ -248,7 +250,7 @@ function ThemePlaylistModal({
 												setSelectedPlaylist(newSelectedPlaylist);
 											}}
 										>
-											<ThemeMiniCard allThemes={allThemes} item={miniTheme.id} />
+											<ThemeMiniCard allThemes={allThemes} item={Number(miniTheme.id)} />
 										</Group>
 									);
 								})}