Style consistency

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

@@ -1,7 +1,6 @@
 import { ActionIcon, Box, Group, Text } from '@mantine/core';
 import { useState } from 'react';
 import { FiEdit } from 'react-icons/fi';
-import { actionIconClasses } from 'styles';
 
 function BookmarkSettingsItem({ bookmark }: any) {
 	const [hover, setHover] = useState(false);
@@ -10,8 +9,8 @@ function BookmarkSettingsItem({ bookmark }: any) {
 			style={{
 				cursor: 'pointer',
 				borderRadius: '4px',
-				color: 'var(--color-text-pri)',
-				backgroundColor: 'var(--color-text-acc)',
+				color: 'var(--color-text-acc)',
+				backgroundColor: 'var(--color-search-background)',
 				padding: '8px',
 			}}
 			onMouseEnter={() => setHover(true)}
@@ -21,11 +20,11 @@ function BookmarkSettingsItem({ bookmark }: any) {
 				<Text>{bookmark.name}</Text>
 				{hover && (
 					<ActionIcon
-						className={actionIconClasses.editButton}
-						classNames={actionIconClasses}
+						variant='subtle'
 						style={{
 							position: 'absolute',
 							right: 24,
+							color: 'var(--color-text-acc)',
 						}}
 					>
 						<FiEdit />

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

@@ -145,66 +145,70 @@ const BookmarkSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
-					Bookmarks
-				</Text>
-				<Popover withArrow withOverlay withinPortal={false}>
-					<Popover.Target>
-						<ActionIcon
-							className={actionIconClasses.settingsTooltip}
-							classNames={actionIconClasses}
-						>
-							<FiHelpCircle />
-						</ActionIcon>
-					</Popover.Target>
-					<Popover.Dropdown
-						style={{
-							color: theme.primaryColor,
-							backgroundColor: theme.backgroundColor,
-							width: '500px',
-						}}
-					>
-						<Stack>
-							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'Bookmarks are the links that will be displayed on the homepage.'}
-							</Text>
-							<Highlight
-								highlight={[
-									'Bookmark',
-									'Bookmarks',
-									'Group',
-									'Groups',
-									'Link',
-									'Links',
-									'Category',
-									'Categories',
-								]}
-								className={textClasses.settingsTooltip}
-								classNames={textClasses}
-								highlightStyles={{
-									backgroundImage:
-										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
-									fontWeight: 700,
-									WebkitBackgroundClip: 'text',
-									WebkitTextFillColor: 'transparent',
-								}}
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
+					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+						Bookmarks
+					</Text>
+					<Popover withArrow withOverlay withinPortal={false}>
+						<Popover.Target>
+							<ActionIcon
+								className={actionIconClasses.settingsTooltip}
+								classNames={actionIconClasses}
 							>
-								{
-									'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.'
-								}
-							</Highlight>
-						</Stack>
-					</Popover.Dropdown>
-				</Popover>
-				<Button
-					className={buttonClasses.tableButton}
-					classNames={buttonClasses}
-					onClick={openModal}
-				>
-					<FiPlus />
-				</Button>
+								<FiHelpCircle />
+							</ActionIcon>
+						</Popover.Target>
+						<Popover.Dropdown
+							style={{
+								color: theme.primaryColor,
+								backgroundColor: theme.backgroundColor,
+								width: '500px',
+							}}
+						>
+							<Stack>
+								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+									{'Bookmarks are the links that will be displayed on the homepage.'}
+								</Text>
+								<Highlight
+									highlight={[
+										'Bookmark',
+										'Bookmarks',
+										'Group',
+										'Groups',
+										'Link',
+										'Links',
+										'Category',
+										'Categories',
+									]}
+									className={textClasses.settingsTooltip}
+									classNames={textClasses}
+									highlightStyles={{
+										backgroundImage:
+											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+										fontWeight: 700,
+										WebkitBackgroundClip: 'text',
+										WebkitTextFillColor: 'transparent',
+									}}
+								>
+									{
+										'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.'
+									}
+								</Highlight>
+							</Stack>
+						</Popover.Dropdown>
+					</Popover>
+					<Button
+						className={buttonClasses.tableButton}
+						classNames={buttonClasses}
+						onClick={openModal}
+					>
+						<FiPlus />
+					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus

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

@@ -15,6 +15,7 @@ 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 BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
@@ -242,7 +243,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 									});
 								}}
 							>
-								Add bookmark
+								<FiPlus /> Bookmark
 							</Button>
 						</Popover.Target>
 						<Popover.Dropdown