Style updates

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -11,7 +11,14 @@ import {
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { FiHelpCircle, FiPlus } from 'react-icons/fi';
-import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
+import {
+	actionIconClasses,
+	buttonClasses,
+	popoverClasses,
+	switchClasses,
+	textClasses,
+	textInputClasses,
+} from 'styles';
 
 function SettingsHeader({
 	setDragging,
@@ -20,8 +27,9 @@ function SettingsHeader({
 	tooltip,
 	searchValue,
 	setSearchValue,
+	searchPlaceholder,
 }: any) {
-	const { isMobile, theme } = useCommonHooks();
+	const { isMobile, theme, modalStyle } = useCommonHooks();
 	return (
 		<Group
 			py={'1.5rem'}
@@ -42,7 +50,15 @@ function SettingsHeader({
 				>
 					{title}
 				</Text>
-				<Popover withArrow withOverlay withinPortal={true}>
+				<Popover
+					withArrow
+					withOverlay
+					withinPortal={true}
+					styles={{
+						dropdown: modalStyle,
+					}}
+					classNames={popoverClasses}
+				>
 					<Popover.Target>
 						<ActionIcon
 							className={actionIconClasses.settingsTooltip}
@@ -95,7 +111,7 @@ function SettingsHeader({
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus={!isMobile}
-					placeholder='Search...'
+					placeholder={searchPlaceholder || 'Search...'}
 					value={searchValue}
 					onInput={(event: any) => {
 						setSearchValue(event.target.value);
@@ -107,7 +123,9 @@ function SettingsHeader({
 			)}
 			{setDragging && (
 				<Switch
-					label={<Text c={theme.primaryColor}>Reorder</Text>}
+					className={switchClasses.default}
+					classNames={switchClasses}
+					label={'Reorder'}
 					labelPosition='left'
 					pos={'absolute'}
 					right={isMobile ? '2rem' : '1rem'}
@@ -115,15 +133,6 @@ function SettingsHeader({
 					onChange={(e) => {
 						setDragging(e.target.checked);
 					}}
-					color={theme.primaryColor}
-					styles={{
-						label: {
-							color: theme.primaryColor,
-							top: isMobile ? -22 : 0,
-							left: isMobile ? -8 : 0,
-							position: isMobile ? 'absolute' : undefined,
-						},
-					}}
 				/>
 			)}
 		</Group>