Style updates and bugfixes

src/components/DeleteItemModal.tsx

@@ -0,0 +1,58 @@
+import { Button, Card, Group, Modal } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import { cardClasses, modalClasses } from 'styles';
+
+export function DeleteItemModal({
+	modalOpened,
+	handleClose,
+	handleDelete,
+	body,
+	title,
+}: {
+	modalOpened: boolean;
+	handleClose: () => void;
+	handleDelete: () => void;
+	body: React.ReactNode;
+	title: string;
+}) {
+	const { isMobile } = useCommonHooks();
+	return (
+		<Modal.Root
+			size={'60%'}
+			className={modalClasses.helpModal}
+			classNames={modalClasses}
+			opened={modalOpened}
+			fullScreen={isMobile}
+			onClose={handleClose}
+			closeOnEscape
+			closeOnClickOutside
+			centered
+		>
+			<Modal.Overlay />
+			<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
+				<Modal.Header>
+					<Modal.Title>{title}</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body pb={'2rem'}>
+					<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+						{body}
+						<Group justify='center' mt={'-1.5rem'}>
+							<Button
+								color={'red'}
+								styles={{ label: { color: 'black' } }}
+								onClick={() => {
+									handleDelete();
+									handleClose();
+								}}
+							>
+								Delete
+							</Button>
+							<Button onClick={handleClose}>Cancel</Button>
+						</Group>
+					</Card>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}