Theme changes

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

@@ -41,7 +41,7 @@ function SettingsHeader({
 	setSearchValue: (searchValue: string) => void;
 	searchPlaceholder: string | undefined;
 }) {
-	const { isMobile, theme, modalStyle } = useCommonHooks();
+	const { isMobile } = useCommonHooks();
 	return (
 		<Group
 			align='center'
@@ -66,15 +66,7 @@ function SettingsHeader({
 				>
 					{title}
 				</Text>
-				<Popover
-					withArrow
-					withOverlay
-					withinPortal={true}
-					styles={{
-						dropdown: modalStyle,
-					}}
-					classNames={popoverClasses}
-				>
+				<Popover withArrow withOverlay classNames={popoverClasses}>
 					<Popover.Target>
 						<ActionIcon
 							className={actionIconClasses.settingsTooltip}
@@ -85,8 +77,8 @@ function SettingsHeader({
 					</Popover.Target>
 					<Popover.Dropdown
 						style={{
-							color: theme.primaryColor,
-							backgroundColor: theme.backgroundColor,
+							color: 'var(--mantine-color-primary-0)',
+							backgroundColor: 'var(--mantine-color-background-0)',
 							width: isMobile ? '95%' : '500px',
 						}}
 					>
@@ -99,7 +91,8 @@ function SettingsHeader({
 								className={textClasses.settingsTooltip}
 								classNames={textClasses}
 								highlightStyles={{
-									backgroundImage: `linear-gradient(45deg, ${theme.accentColor}, ${theme.primaryColor})`,
+									backgroundImage:
+										'linear-gradient(45deg, var(--mantine-color-accent-0), var(--mantine-color-primary-0))',
 									fontWeight: 700,
 									WebkitBackgroundClip: 'text',
 									WebkitTextFillColor: 'transparent',