Style updates

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, textInputClasses } from 'styles';
+import { cardClasses, textClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 
 function DebouncedSearchProvider({
@@ -53,15 +53,8 @@ function DebouncedSearchProvider({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this Search Provider?</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}
 						>{`"${provider.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>

src/pages/settings/components/Search/SearchProviders.tsx

@@ -16,7 +16,7 @@ import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiPower } from 'react-icons/fi';
-import { popoverClasses, switchClasses, textInputClasses } from 'styles';
+import { popoverClasses, switchClasses, textInputClasses, toolTipClasses } from 'styles';
 import type { Provider } from 'types';
 import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';
@@ -158,15 +158,10 @@ const SearchProviderSettings = () => {
 								}}
 							>
 								<Tooltip
-									c={'var(--mantine-color-primary-0)'}
-									bg={'var(--mantine-color-background-0)'}
-									bd={'solid 1px var(--mantine-color-border-0)'}
+									className={toolTipClasses.default}
+									classNames={toolTipClasses}
 									label={'Default'}
 									refProp='rootRef'
-									styles={{
-										tooltip: { marginTop: '-.5rem' },
-										arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
-									}}
 									withArrow
 								>
 									<Switch
@@ -208,7 +203,7 @@ const SearchProviderSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Search providerData...'}
+				searchPlaceholder={'Search Providers...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>