Updated Settings pages

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

@@ -2,30 +2,31 @@ import {
 	ActionIcon,
 	Button,
 	Group,
+	Modal,
 	Overlay,
 	ScrollArea,
 	Stack,
 	Text,
 } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
+import { useDisclosure } from '@mantine/hooks';
+import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi';
+import { modalClasses } from 'styles';
 import ThemeMiniCard from './ThemeMiniCard';
 
-function ThemePlaylistCard({
-	cardPlaylist,
-	handleOpen,
-	handleDeletePlaylist,
-	createPlaylist,
-	allThemes,
-}: any) {
+function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 	const [hover, setHover] = useState(false);
-	const { setThemeName, setCurrentThemePlaylist, theme } = useCommonHooks();
+	const { setThemeName, setCurrentThemePlaylist, theme, isMobile } = 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}
@@ -36,6 +37,72 @@ function ThemePlaylistCard({
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
 		>
+			<Modal.Root
+				size={'60%'}
+				fullScreen={isMobile}
+				className={modalClasses.helpModal}
+				classNames={modalClasses}
+				opened={modalOpened}
+				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})`,
+				}}
+				closeOnEscape
+				closeOnClickOutside
+			>
+				<Modal.Overlay />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Delete Theme Playlist</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body pb={'2rem'}>
+						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+							<Text>Are you sure you want to delete this Theme Playlist?</Text>
+							<Text
+								style={{
+									fontWeight: 'bold',
+									fontSize: '20px',
+									padding: '8px',
+									margin: '8px',
+									borderRadius: '10px',
+									backgroundColor: 'var(--color-text-acc)',
+									color: 'var(--color-background)',
+								}}
+							>{`"${cardPlaylist.name}"`}</Text>
+							<Text c='red'>This action cannot be undone!</Text>
+							<Group pos={'absolute'} bottom={8}>
+								<Button
+									color={'red'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										handleDelete(cardPlaylist);
+										closeModal();
+									}}
+								>
+									Delete
+								</Button>
+								<Button
+									color={'grey'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										closeModal();
+									}}
+								>
+									Cancel
+								</Button>
+							</Group>
+						</Stack>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
 			<Text
 				style={{
 					position: 'absolute',
@@ -73,7 +140,7 @@ function ThemePlaylistCard({
 					onClick={(event) => {
 						event.stopPropagation();
 						if (cardPlaylist.name === 'All') {
-							createPlaylist({
+							mutateAsync({
 								method: 'PATCH',
 								endpoint: 'api/themePlaylists',
 								body: {
@@ -84,7 +151,7 @@ function ThemePlaylistCard({
 							});
 						}
 						if (cardPlaylist.name === 'Backgrounds') {
-							createPlaylist({
+							mutateAsync({
 								method: 'PATCH',
 								endpoint: 'api/themePlaylists',
 								body: {
@@ -101,7 +168,7 @@ function ThemePlaylistCard({
 							});
 						}
 						if (cardPlaylist.name === 'No Backgrounds') {
-							createPlaylist({
+							mutateAsync({
 								method: 'PATCH',
 								endpoint: 'api/themePlaylists',
 								body: {
@@ -160,7 +227,9 @@ function ThemePlaylistCard({
 										: theme.primaryColor,
 								zIndex: 3,
 							}}
-							onClick={() => handleDeletePlaylist(cardPlaylist)}
+							onClick={() => {
+								openModal();
+							}}
 						>
 							<FiTrash />
 						</ActionIcon>