Style updates

src/pages/homepage/components/Applications/Applications.tsx

@@ -9,7 +9,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 	const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
 		endpoint: 'api/enabledApplications',
 	});
-	const { appSort, appDensity, appScale, theme } = useCommonHooks();
+	const { appSort, appDensity, appScale, theme, textShadowStyle } = useCommonHooks();
 	const [applications, setApplications] = useState<Application[]>([]);
 
 	useEffect(() => {
@@ -54,9 +54,7 @@ function Applications({ contentType }: { contentType: string[] }) {
 						className={textClasses.sectionTitle}
 						classNames={textClasses}
 						style={{
-							boxShadow: theme.textShadowsEnabled
-								? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-								: undefined,
+							boxShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 						}}
 					>
 						Applications

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -12,7 +12,8 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/bookmarkCategories',
 	});
-	const { bookmarkSort, bookmarkDensity, bookmarkScale, theme } = useCommonHooks();
+	const { bookmarkSort, bookmarkDensity, bookmarkScale, theme, textShadowStyle } =
+		useCommonHooks();
 	const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -72,9 +73,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 							mb={'-.5rem'}
 							mt={'1.25rem'}
 							style={{
-								boxShadow: theme.textShadowsEnabled
-									? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-									: undefined,
+								boxShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 							}}
 						>
 							Bookmarks

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

@@ -16,7 +16,14 @@ function Header({
 	openWeatherModal: () => void;
 }) {
 	const [time, setTime] = useState(new Date());
-	const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
+	const {
+		isMobile,
+		currentUser,
+		fixDigits,
+		theme,
+		textShadowStyle,
+		largeTextShadowStyle,
+	} = useCommonHooks();
 
 	useEffect(() => {
 		setInterval(() => {
@@ -38,9 +45,7 @@ function Header({
 					classNames={textClasses}
 					fz={isMobile ? 24 : undefined}
 					style={{
-						textShadow: theme.textShadowsEnabled
-							? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
-							: undefined,
+						textShadow: theme.textShadowsEnabled ? largeTextShadowStyle : undefined,
 					}}
 				>
 					{greet
@@ -61,9 +66,7 @@ function Header({
 					classNames={textClasses}
 					style={{
 						width: 'max-content',
-						textShadow: theme.textShadowsEnabled
-							? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-							: undefined,
+						textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 					}}
 				>
 					{date}
@@ -91,9 +94,7 @@ function Header({
 							classNames={textClasses}
 							mr={'.25rem'}
 							style={{
-								textShadow: theme.textShadowsEnabled
-									? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-									: undefined,
+								textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 							}}
 						>
 							{current.temperature}°F
@@ -104,9 +105,7 @@ function Header({
 							fz={'.875rem'}
 							mb={'.375rem'}
 							style={{
-								textShadow: theme.textShadowsEnabled
-									? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-									: undefined,
+								textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 							}}
 						>
 							{current.highTemp}°F/{current.lowTemp}°F
@@ -116,9 +115,7 @@ function Header({
 						className={textClasses.dateTime}
 						classNames={textClasses}
 						style={{
-							textShadow: theme.textShadowsEnabled
-								? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-								: undefined,
+							textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 						}}
 					>
 						{`${

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

@@ -5,7 +5,14 @@ import { textClasses } from 'styles';
 
 function LargeHeader({ greet, date }: { greet: string | undefined; date: string }) {
 	const [time, setTime] = useState(new Date());
-	const { isMobile, currentUser, fixDigits, theme } = useCommonHooks();
+	const {
+		isMobile,
+		currentUser,
+		fixDigits,
+		theme,
+		textShadowStyle,
+		largeTextShadowStyle,
+	} = useCommonHooks();
 
 	useEffect(() => {
 		setInterval(() => {
@@ -21,9 +28,7 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
 				classNames={textClasses}
 				fz={isMobile ? '2rem' : '6rem'}
 				style={{
-					textShadow: theme.textShadowsEnabled
-						? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
-						: undefined,
+					textShadow: theme.textShadowsEnabled ? largeTextShadowStyle : undefined,
 				}}
 			>
 				{greet
@@ -39,9 +44,7 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
 				m={0}
 				style={{
 					width: 'max-content',
-					textShadow: theme.textShadowsEnabled
-						? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-						: undefined,
+					textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 				}}
 			>
 				{date}
@@ -52,9 +55,7 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
 				className={textClasses.dateTime}
 				classNames={textClasses}
 				style={{
-					textShadow: theme.textShadowsEnabled
-						? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-						: undefined,
+					textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
 				}}
 			>
 				{`${

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

@@ -13,7 +13,13 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiShuffle } from 'react-icons/fi';
-import { actionIconClasses, selectClasses, stackClasses, textClasses } from 'styles';
+import {
+	actionIconClasses,
+	selectClasses,
+	stackClasses,
+	textClasses,
+	toolTipClasses,
+} from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 
 function ThemingCard() {
@@ -80,9 +86,9 @@ function ThemingCard() {
 					</Text>
 				</Stack>
 				<Tooltip
+					className={toolTipClasses.default}
+					classNames={toolTipClasses}
 					label='Random Theme'
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
 					withArrow
 				>
 					<ActionIcon
@@ -226,9 +232,9 @@ function ThemingCard() {
 					}}
 				/>
 				<Tooltip
+					className={toolTipClasses.default}
+					classNames={toolTipClasses}
 					label='Shuffle Playlist'
-					c={'var(--mantine-color-primary-0)'}
-					bg={'var(--mantine-color-background-0)'}
 					withArrow
 				>
 					<ActionIcon