Theme changes

src/components/HelpModal/HelpModal.tsx

@@ -21,7 +21,7 @@ export function HelpModal({
 	applicationData: Application[];
 	providerData: Provider[];
 }) {
-	const { theme, isMobile, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -36,7 +36,6 @@ export function HelpModal({
 				setProviderURL('https://www.google.com/search?q=');
 				closeProviderModal();
 			}}
-			style={modalStyle}
 			closeOnEscape
 			closeOnClickOutside
 		>
@@ -57,7 +56,7 @@ export function HelpModal({
 								};
 							})}
 						/>
-						<Divider my={8} color={theme.accentColor} />
+						<Divider my={8} color={'var(--mantine-color-accent-0)'} />
 						<HelpSection
 							name={'Available Applications'}
 							items={applicationData.map((application: Application) => {

src/components/HelpModal/HelpSection.tsx

@@ -1,10 +1,8 @@
 import { Divider, Group } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
 import type { SearchShortcut } from 'types';
 import HintItem from './HintItem';
 
 function HelpSection({ name, items }: { name: string; items: SearchShortcut[] }) {
-	const { theme } = useCommonHooks();
 	return (
 		<>
 			<h3
@@ -14,17 +12,17 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
 					marginTop: 0,
 					marginBottom: -32,
 					borderRadius: '8px',
-					color: theme.backgroundColor,
-					backgroundColor: theme.borderColor,
+					color: 'var(--mantine-color-background-0)',
+					backgroundColor: 'var(--mantine-color-border-0)',
 				}}
 			>
 				{name}
 			</h3>
-			<Divider py={8} color={theme.accentColor} />
+			<Divider py={8} color={'var(--mantine-color-accent-0)'} />
 			<Group
 				style={{
 					width: '100%',
-					backgroundColor: theme.searchColor,
+					backgroundColor: 'var(--mantine-color-search-0)',
 					borderRadius: '8px',
 					padding: '24px',
 					justifyItems: 'center',

src/components/HelpModal/HintItem.tsx

@@ -10,13 +10,13 @@ function HintItem({ command, name }: { command: string; name: string }) {
 				display: 'flex',
 				padding: '8px',
 				borderRadius: '10px',
-				backgroundColor: 'var(--color-background)',
+				backgroundColor: 'var(--mantine-color-background-0)',
 			}}
 		>
 			<Text
 				style={{
-					color: 'var(--color-background)',
-					backgroundColor: 'var(--color-text-pri)',
+					color: 'var(--mantine-color-background-0)',
+					backgroundColor: 'var(--mantine-color-primary-0)',
 					padding: '8px',
 					borderTopLeftRadius: '10px',
 					borderBottomLeftRadius: '10px',
@@ -26,8 +26,8 @@ function HintItem({ command, name }: { command: string; name: string }) {
 			</Text>
 			<Text
 				style={{
-					color: 'var(--color-background)',
-					backgroundColor: 'var(--color-text-acc)',
+					color: 'var(--mantine-color-background-0)',
+					backgroundColor: 'var(--mantine-color-accent-0)',
 					padding: '8px',
 					borderTopRightRadius: '10px',
 					borderBottomRightRadius: '10px',