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),