Application adding bugfix; consolidated Settings headers

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -5,7 +5,6 @@ import {
 	Button,
 	Card,
 	Group,
-	Modal,
 	Popover,
 	Stack,
 	Text,
@@ -13,12 +12,12 @@ import {
 	Tooltip,
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
-import { IconTrash } from '@tabler/icons-react';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiPlus } from 'react-icons/fi';
-import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles';
+import { FiPlus, FiTrash } from 'react-icons/fi';
+import { buttonClasses, cardClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
+import DeleteItemModal from '../Shared/DeleteItemModal';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
 
@@ -26,7 +25,7 @@ function DebouncedGroupSettingsItem({
 	bookmarkGroup,
 	bookmarks,
 }: { bookmarkGroup: BookmarkGroup; bookmarks: Bookmark[] }) {
-	const { theme, isMobile, modalStyle, handleDelete } = useCommonHooks();
+	const { theme, isMobile, handleDelete } = useCommonHooks();
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [popoverOpened, setPopoverOpened] = useState(false);
 	const { mutateAsync } = useMutationAPI();
@@ -41,6 +40,7 @@ function DebouncedGroupSettingsItem({
 		index: 0,
 	});
 	const [bookmarkList, setBookmarkList] = useState<Bookmark[]>(bookmarks);
+	const [isOpen, setIsOpen] = useState(false);
 
 	const reorder = (list: any, startIndex: any, endIndex: any) => {
 		const result = Array.from(list);
@@ -90,65 +90,49 @@ function DebouncedGroupSettingsItem({
 
 	return (
 		<Card w={'400px'} className={cardClasses.settingsItem} classNames={cardClasses}>
-			<Modal.Root
-				size={'60%'}
-				className={modalClasses.helpModal}
-				classNames={modalClasses}
-				opened={modalOpened}
-				fullScreen={isMobile}
-				onClose={() => {
-					closeModal();
-				}}
-				style={modalStyle}
-				closeOnEscape
-				closeOnClickOutside
-			>
-				<Modal.Overlay />
-				<Modal.Content>
-					<Modal.Header>
-						<Modal.Title>Delete Group</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 bookmark group?</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 message'
+				body={
+					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+						<Text>Are you sure you want to delete this bookmark group?</Text>
+						<Text
+							style={{
+								fontWeight: 'bold',
+								fontSize: '20px',
+								padding: '8px',
+								margin: '8px',
+								borderRadius: '10px',
+								backgroundColor: 'var(--color-text-acc)',
+								color: 'var(--color-background)',
+							}}
+						>{`"${group.categoryName}"`}</Text>
+						<Text c='red'>This action cannot be undone!</Text>
+						<Group pos={'absolute'} bottom={8}>
+							<Button
+								color={'red'}
+								styles={{ label: { color: 'black' } }}
+								onClick={() => {
+									handleDelete(group, 'api/categories');
+									closeModal();
 								}}
-							>{`"${group.categoryName}"`}</Text>
-							<Text c='red'>This action cannot be undone!</Text>
-							<Group pos={'absolute'} bottom={8}>
-								<Button
-									color={'red'}
-									styles={{ label: { color: 'black' } }}
-									onClick={() => {
-										handleDelete(group, 'api/categories');
-										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>
+				}
+			/>
 			<Card.Section p={16} bg={theme.searchColor} c={theme.backgroundColor}>
 				<Stack gap={0}>
 					<Group gap={0} align='center' justify='space-between'>
@@ -201,7 +185,7 @@ function DebouncedGroupSettingsItem({
 									openModal();
 								}}
 							>
-								<IconTrash />
+								<FiTrash />
 							</ActionIcon>
 						</Tooltip>
 					</Group>
@@ -243,7 +227,7 @@ function DebouncedGroupSettingsItem({
 													{...provided.draggableProps}
 													{...provided.dragHandleProps}
 												>
-													<Popover withArrow withOverlay>
+													<Popover withArrow withOverlay closeOnClickOutside={!isOpen}>
 														<Popover.Target>
 															<Box>
 																<BookmarkSettingsItem bookmark={bookmark} />
@@ -259,7 +243,10 @@ function DebouncedGroupSettingsItem({
 																'--image-background': `url(${theme.backgroundImage})`,
 															}}
 														>
-															<DebouncedBookmarkItem bookmarkItem={bookmark} />
+															<DebouncedBookmarkItem
+																bookmarkItem={bookmark}
+																setIsOpen={setIsOpen}
+															/>
 														</Popover.Dropdown>
 													</Popover>
 													{provided.placeholder}
@@ -284,6 +271,7 @@ function DebouncedGroupSettingsItem({
 						opened={popoverOpened}
 						onChange={setPopoverOpened}
 						closeOnEscape
+						// closeOnClickOutside={}
 					>
 						<Popover.Target>
 							<Button