Style updates and bugfixes

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

@@ -19,13 +19,13 @@ import {
 } from '@mantine/core';
 import { isNotEmpty, useForm } from '@mantine/form';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
+import { DeleteItemModal } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaChevronLeft } from 'react-icons/fa';
 import { FiPlus, FiTrash } from 'react-icons/fi';
 import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
-import DeleteItemModal from '../Shared/DeleteItemModal';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
 
@@ -51,6 +51,7 @@ function DebouncedGroupSettingsItem({
 		url: '',
 		category: group.categoryName,
 		index: 0,
+		enabled: 1,
 	});
 	const form = useForm({
 		initialValues: newBookmark,
@@ -111,7 +112,7 @@ function DebouncedGroupSettingsItem({
 				modalOpened={modalOpened}
 				handleClose={closeModal}
 				handleDelete={() => {
-					handleDelete(bookmarks, 'api/bookmarks');
+					bookmarks.length > 0 && handleDelete(bookmarks, 'api/bookmarks');
 					handleDelete(group, 'api/bookmarkCategories');
 				}}
 				title='Delete message'
@@ -141,12 +142,13 @@ function DebouncedGroupSettingsItem({
 				pt={0}
 				bg={'var(--mantine-color-search-0)'}
 				c={'var(--mantine-color-background-0)'}
+				mt={'-1.5rem'}
 			>
 				<Stack gap={0}>
-					<Group gap={0} align='center' justify='space-between'>
+					<Group gap={0} align='end' justify='space-between'>
 						<TextInput
 							label={'Name'}
-							w={isMobile ? undefined : '58%'}
+							w={isMobile ? undefined : '56%'}
 							className={textInputClasses.settingsItem}
 							classNames={textInputClasses}
 							defaultValue={group.categoryName}
@@ -187,9 +189,8 @@ function DebouncedGroupSettingsItem({
 							label={'Delete'}
 						>
 							<ActionIcon
-								mt={'2.5rem'}
-								size={'lg'}
 								color='red'
+								size={'2.75rem'}
 								onClick={() => {
 									openModal();
 								}}
@@ -206,8 +207,8 @@ function DebouncedGroupSettingsItem({
 							borderRadius: '100%',
 							backgroundColor: 'var(--mantine-color-accent-0)',
 							position: 'absolute',
-							top: isMobile ? 170 : 92,
-							right: 18,
+							top: isMobile ? 156 : 78,
+							right: 22,
 							zIndex: 10,
 							fontSize: '1.25rem',
 							textAlign: 'center',