Style updates

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

@@ -12,7 +12,7 @@ import {
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { textInputClasses } from 'styles';
+import { popoverClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
 import SettingsHeader from '../Shared/SettingsHeader';
@@ -141,12 +141,13 @@ const SearchProviderSettings = () => {
 				title={'Search Providers'}
 				tooltip={{
 					title: 'Search providers and shortcuts can be configured here.',
-					highlightList: ['Providers', 'search'],
+					highlightList: ['Providers', 'search', 'provider', 'prefix'],
 					description:
 						'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Search Providers...'}
 			/>
 			<Stack
 				mt={isMobile ? '9rem' : '6rem'}
@@ -162,6 +163,7 @@ const SearchProviderSettings = () => {
 								withOverlay
 								withinPortal={false}
 								closeOnClickOutside={!isOpen}
+								classNames={popoverClasses}
 							>
 								<Popover.Target>
 									<Box