Toggleable shadows

src/pages/homepage/components/SettingsButton/SettingsCard.tsx

@@ -7,6 +7,7 @@ import {
 	Stack,
 	Text,
 } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { multiSelectClasses, selectClasses, sliderClasses, stackClasses } from 'styles';
 
 function SettingsCard({
@@ -32,6 +33,7 @@ function SettingsCard({
 	scale: any;
 	setScale: any;
 }) {
+	const { theme } = useCommonHooks();
 	return (
 		<Stack
 			gap={0}
@@ -117,6 +119,11 @@ function SettingsCard({
 						withinPortal: false,
 						position: 'top',
 					}}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 				<Select
 					label={'Sorting'}
@@ -139,6 +146,11 @@ function SettingsCard({
 						setSort(option.value);
 					}}
 					labelProps={{ top: 8 }}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
 				/>
 			</Group>
 		</Stack>