Clean up and typing

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();
 									}}
 								>