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 />