Style updates

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!