Clean up and typing

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

@@ -13,6 +13,7 @@ import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
 import { actionIconClasses, modalClasses } from 'styles';
+import type { ThemePlaylist } from 'types';
 
 function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
 	const { data: themePlaylists } = useQueryAPI({
@@ -31,10 +32,9 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
 		isMobile,
 		currentThemePlaylist,
 		setCurrentThemePlaylist,
+		modalStyle,
+		handleDelete,
 	} = useCommonHooks();
-	const handleDelete = (application: any) => {
-		mutateAsync({ method: 'DELETE', endpoint: 'api/themes', body: application });
-	};
 
 	return (
 		<Group
@@ -55,14 +55,7 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
 				onClose={() => {
 					closeModal();
 				}}
-				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}
 				closeOnEscape
 				closeOnClickOutside
 			>
@@ -92,7 +85,7 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
 									color={'red'}
 									styles={{ label: { color: 'black' } }}
 									onClick={() => {
-										handleDelete(cardTheme);
+										handleDelete(cardTheme, 'api/themes');
 										closeModal();
 									}}
 								>
@@ -299,8 +292,9 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
 						<FiShuffle
 							onClick={() => {
 								const themeList = JSON.parse(
-									themePlaylists.find((t: any) => t.name === currentThemePlaylist)
-										.themeList,
+									themePlaylists.find(
+										(t: ThemePlaylist) => t.name === currentThemePlaylist,
+									).themeList,
 								);
 								const filteredThemes = allThemes.filter((t: any) =>
 									themeList.includes(t.id),

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

@@ -17,16 +17,21 @@ import ThemeMiniCard from './ThemeMiniCard';
 
 function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 	const [hover, setHover] = useState(false);
-	const { setThemeName, setCurrentThemePlaylist, theme, isMobile } = useCommonHooks();
+	const {
+		setThemeName,
+		setCurrentThemePlaylist,
+		theme,
+		isMobile,
+		modalStyle,
+		handleDelete,
+	} = useCommonHooks();
 	const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
 	const { mutateAsync } = useMutationAPI();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const themeList = JSON.parse(
 		cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
 	);
-	const handleDelete = (application: any) => {
-		mutateAsync({ method: 'DELETE', endpoint: 'api/themePlaylists', body: application });
-	};
+
 	return (
 		<Group
 			gap={0}
@@ -46,14 +51,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 				onClose={() => {
 					closeModal();
 				}}
-				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}
 				closeOnEscape
 				closeOnClickOutside
 			>
@@ -83,7 +81,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 									color={'red'}
 									styles={{ label: { color: 'black' } }}
 									onClick={() => {
-										handleDelete(cardPlaylist);
+										handleDelete(cardPlaylist, 'api/themePlaylists');
 										closeModal();
 									}}
 								>

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

@@ -14,6 +14,7 @@ import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
 import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
 import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
+import type { ThemePlaylist } from 'types';
 import ThemePlaylistCard from './ThemePlaylistCard';
 import ThemePlaylistModal from './ThemePlaylistModal';
 
@@ -140,11 +141,11 @@ function ThemePlaylists() {
 				</Group>
 				<Group justify='center' align='center' pos={'relative'}>
 					{themePlaylists
-						?.filter((playlist: any) => playlist.default === 1)
-						?.filter((a: any) =>
+						?.filter((playlist: ThemePlaylist) => playlist.default === 1)
+						?.filter((a: ThemePlaylist) =>
 							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
 						)
-						.map((cardPlaylist: any) => {
+						.map((cardPlaylist: ThemePlaylist) => {
 							return (
 								<Group key={cardPlaylist.name} pos={'relative'}>
 									{cardPlaylist.name === currentThemePlaylist && (
@@ -184,11 +185,11 @@ function ThemePlaylists() {
 				</Group>
 				<Group justify='center' align='center' pos={'relative'}>
 					{themePlaylists
-						?.filter((playlist: any) => playlist.default === 0)
-						?.filter((a: any) =>
+						?.filter((playlist: ThemePlaylist) => playlist.default === 0)
+						?.filter((a: ThemePlaylist) =>
 							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
 						)
-						.map((cardPlaylist: any) => {
+						.map((cardPlaylist: ThemePlaylist) => {
 							return (
 								<Group key={cardPlaylist.name} pos={'relative'}>
 									{cardPlaylist.name === currentThemePlaylist && (

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

@@ -19,6 +19,7 @@ import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Modal.css';
 import { FaDice } from 'react-icons/fa';
 import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
+import type { Theme } from 'types';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 function ThemesSettings() {
@@ -32,7 +33,7 @@ function ThemesSettings() {
 	const [opened, { open, close }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
-	const [backgroundList, setBackgroundList] = useState<any>(['None']);
+	const [backgroundList, setBackgroundList] = useState<string[]>(['None']);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [searchValue, setSearchValue] = useState('');
@@ -40,7 +41,7 @@ function ThemesSettings() {
 	const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
 		useCommonHooks();
 
-	const handleOpen = (theme: any) => {
+	const handleOpen = (theme: Theme) => {
 		setSelectedTheme(theme);
 		open();
 	};
@@ -192,10 +193,10 @@ function ThemesSettings() {
 						pos={'absolute'}
 					/>
 					{allThemes
-						?.filter((a: any) =>
+						?.filter((a: Theme) =>
 							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
 						)
-						.map((cardTheme: any) => (
+						.map((cardTheme: Theme) => (
 							<Group key={cardTheme.name} pos={'relative'}>
 								{cardTheme.name === currentTheme && (
 									<FiChevronRight