Toggleable shadows

src/pages/homepage/components/Header/Header.tsx

@@ -22,7 +22,7 @@ function Header({
 	openWeatherModal: () => void;
 }) {
 	const [time, setTime] = useState(new Date());
-	const { isMobile, currentUser, fixDigits } = useCommonHooks();
+	const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
 
 	useEffect(() => {
 		setInterval(() => {
@@ -80,6 +80,11 @@ function Header({
 					className={textClasses.greeting}
 					classNames={textClasses}
 					fz={isMobile ? 24 : undefined}
+					style={{
+						textShadow:
+							theme.textShadowsEnabled &&
+							'3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)',
+					}}
 				>
 					{greet
 						?.replace('$firstName', currentUser.firstName)
@@ -97,7 +102,12 @@ function Header({
 				<Text
 					className={textClasses.dateTime}
 					classNames={textClasses}
-					style={{ width: 'max-content' }}
+					style={{
+						width: 'max-content',
+						textShadow:
+							theme.textShadowsEnabled &&
+							'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+					}}
 				>
 					{date}
 				</Text>
@@ -119,7 +129,16 @@ function Header({
 						}}
 						onClick={openWeatherModal}
 					>
-						<Text className={textClasses.dateTime} classNames={textClasses} mr={'.25rem'}>
+						<Text
+							className={textClasses.dateTime}
+							classNames={textClasses}
+							mr={'.25rem'}
+							style={{
+								textShadow:
+									theme.textShadowsEnabled &&
+									'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+							}}
+						>
 							{current.temperature}°F
 						</Text>
 						<Text
@@ -127,11 +146,24 @@ function Header({
 							classNames={textClasses}
 							fz={'.875rem'}
 							mb={'.375rem'}
+							style={{
+								textShadow:
+									theme.textShadowsEnabled &&
+									'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+							}}
 						>
 							{current.highTemp}°F/{current.lowTemp}°F
 						</Text>
 					</Group>
-					<Text className={textClasses.dateTime} classNames={textClasses}>
+					<Text
+						className={textClasses.dateTime}
+						classNames={textClasses}
+						style={{
+							textShadow:
+								theme.textShadowsEnabled &&
+								'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)',
+						}}
+					>
 						{`${
 							time.getHours() === 0
 								? 12