Style updates

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

@@ -209,7 +209,7 @@ const BookmarkSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Bookmark Groups...'}
+				searchPlaceholder={'Search Bookmarks...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>

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

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, selectClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 
 function DebouncedBookmarkItem({
@@ -63,15 +63,8 @@ function DebouncedBookmarkItem({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this bookmark?</Text>
 						<Text
-							style={{
-								fontWeight: 'bold',
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
+							className={textClasses.deleteItem}
+							classNames={textClasses}
 						>{`"${bookmark.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>

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

@@ -23,7 +23,13 @@ import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaChevronLeft } from 'react-icons/fa';
 import { FiPlus } from 'react-icons/fi';
-import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
+import {
+	buttonClasses,
+	cardClasses,
+	popoverClasses,
+	textClasses,
+	textInputClasses,
+} from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
@@ -119,15 +125,8 @@ function DebouncedGroupSettingsItem({
 					<Stack gap={0} w={'100%'} h={'175px'} align='center'>
 						<Text>Are you sure you want to delete this bookmark group?</Text>
 						<Text
-							style={{
-								fontWeight: 'bold',
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
+							className={textClasses.deleteItem}
+							classNames={textClasses}
 						>{`"${group.categoryName}"`}</Text>
 						<Text style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>
 							This will also delete all bookmarks in this group!