Style updates and bugfixes

src/components/AddItemModal.tsx

@@ -0,0 +1,55 @@
+import { Card, Modal } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
+import type React from 'react';
+import { cardClasses, modalClasses } from 'styles';
+
+export function AddItemModal({
+	modalOpened,
+	handleClose,
+	body,
+	title,
+}: {
+	modalOpened: boolean;
+	handleClose: () => 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 h={'auto'}>
+				<Modal.Header>
+					<Modal.Title>{title}</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body
+					h={isMobile ? '90%' : undefined}
+					style={{
+						justifyContent: 'center',
+						alignContent: 'center',
+						paddingBottom: '2rem',
+					}}
+				>
+					<Card
+						style={{ alignContent: 'center', justifyContent: 'center' }}
+						className={cardClasses.settingsItem}
+						classNames={cardClasses}
+					>
+						{body}
+					</Card>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}