Application adding bugfix; consolidated Settings headers

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

@@ -1,19 +1,11 @@
-import {
-	ActionIcon,
-	Box,
-	Button,
-	Group,
-	Modal,
-	Overlay,
-	Stack,
-	Text,
-} from '@mantine/core';
+import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 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 { actionIconClasses } from 'styles';
 import type { ThemePlaylist } from 'types';
+import DeleteItemModal from '../Shared/DeleteItemModal';
 
 function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
 	const { data: themePlaylists } = useQueryAPI({
@@ -29,10 +21,8 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
 		currentTheme,
 		setCurrentTheme,
 		theme,
-		isMobile,
 		currentThemePlaylist,
 		setCurrentThemePlaylist,
-		modalStyle,
 		handleDelete,
 	} = useCommonHooks();
 
@@ -46,65 +36,49 @@ function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
 		>
-			<Modal.Root
-				size={'60%'}
-				fullScreen={isMobile}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={modalOpened}
-				onClose={() => {
-					closeModal();
-				}}
-				style={modalStyle}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Delete Theme</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?</Text>
-							<Text
-								style={{
-									fontWeight: 'bold',
-									fontSize: '20px',
-									padding: '8px',
-									margin: '8px',
-									borderRadius: '10px',
-									backgroundColor: 'var(--color-text-acc)',
-									color: 'var(--color-background)',
+			<DeleteItemModal
+				modalOpened={modalOpened}
+				handleClose={closeModal}
+				title={'Delete Theme'}
+				body={
+					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+						<Text>Are you sure you want to delete this theme?</Text>
+						<Text
+							style={{
+								fontWeight: 'bold',
+								fontSize: '20px',
+								padding: '8px',
+								margin: '8px',
+								borderRadius: '10px',
+								backgroundColor: 'var(--color-text-acc)',
+								color: 'var(--color-background)',
+							}}
+						>{`"${cardTheme.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(cardTheme, 'api/themes');
+									closeModal();
 								}}
-							>{`"${cardTheme.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(cardTheme, 'api/themes');
-										closeModal();
-									}}
-								>
-									Delete
-								</Button>
-								<Button
-									color={'grey'}
-									styles={{ label: { color: 'black' } }}
-									onClick={() => {
-										closeModal();
-									}}
-								>
-									Cancel
-								</Button>
-							</Group>
-						</Stack>
-					</Modal.Body>
-				</Modal.Content>
-			</Modal.Root>
+							>
+								Delete
+							</Button>
+							<Button
+								color={'grey'}
+								styles={{ label: { color: 'black' } }}
+								onClick={() => {
+									closeModal();
+								}}
+							>
+								Cancel
+							</Button>
+						</Group>
+					</Stack>
+				}
+			/>
 			<Text
 				style={{
 					position: 'absolute',