Style updates

README.md

@@ -65,7 +65,7 @@ cp TriggerFrontend/.env.example TriggerFrontend/.env
 cp TriggerBackend/.env.example TriggerBackend/.env
 ```
 
-⚠️ Update the following fields to match your environment's URLs and credentials. The Domains and Base URL here must be defined without a leading '/'! ⚠️
+⚠️ Update the following fields to match your environment's URLs and credentials. The Domains and Base URL here must be defined without leading or trailing '/'! ⚠️
 
 Frontend .env.example
 ```shell

src/components/Applications/AppItem.tsx

@@ -6,7 +6,7 @@ import * as fa6 from 'react-icons/fa6';
 import { FiAlertCircle } from 'react-icons/fi';
 import * as si from 'react-icons/si';
 import * as vsc from 'react-icons/vsc';
-import { actionIconClasses, boxClasses, textClasses } from 'styles';
+import { actionIconClasses, boxClasses, textClasses, toolTipClasses } from 'styles';
 import type { Theme } from 'types';
 
 export function AppItem({
@@ -67,8 +67,8 @@ export function AppItem({
 		>
 			{enabled === 0 && (
 				<Tooltip
-					c={'var(--mantine-color-primary-0)'}
+					className={toolTipClasses.default}
-					bg={'var(--mantine-color-background-0)'}
+					classNames={toolTipClasses}
 					label='This app is disabled.'
 				>
 					<ActionIcon

src/components/ManagementPill.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core';
 import { FiPower, FiTrash } from 'react-icons/fi';
-import { switchClasses } from 'styles';
+import { switchClasses, toolTipClasses } from 'styles';
 
 export function ManagementPill({
 	enabled,
@@ -29,15 +29,10 @@ export function ManagementPill({
 			}}
 		>
 			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
+				className={toolTipClasses.default}
-				bg={'var(--mantine-color-background-0)'}
+				classNames={toolTipClasses}
-				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={label[enabled]}
 				refProp='rootRef'
-				styles={{
-					tooltip: { marginTop: '-.5rem' },
-					arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
-				}}
 				withArrow
 			>
 				<Switch
@@ -57,9 +52,8 @@ export function ManagementPill({
 			</Tooltip>
 			|
 			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
+				className={toolTipClasses.default}
-				bg={'var(--mantine-color-background-0)'}
+				classNames={toolTipClasses}
-				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Delete'}
 			>
 				<ActionIcon

src/components/WeatherModal/CurrentWeather.tsx

@@ -10,7 +10,7 @@ import WeatherFeaturePill from './WeatherFeaturePill';
 import WeatherIcon from './WeatherIcon';
 
 export default function CurrentWeather({ current }: { current: CW }) {
-	const { currentLocation, isMobile, theme } = useCommonHooks();
+	const { currentLocation, isMobile, theme, textShadowStyle } = useCommonHooks();
 	const { data: sunStateData } = useSunStateAPI({
 		lat: currentLocation.lat,
 		lon: currentLocation.lon,
@@ -156,9 +156,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
 									classNames={textClasses}
 									style={{
 										textAlign: 'center',
-										textShadow: theme.textShadowsEnabled
+										textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-											? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-											: undefined,
 									}}
 									w={'100%'}
 								>
@@ -201,9 +199,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
 									classNames={textClasses}
 									style={{
 										textAlign: 'center',
-										textShadow: theme.textShadowsEnabled
+										textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-											? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-											: undefined,
 									}}
 									w={'100%'}
 								>
@@ -248,9 +244,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
 									classNames={textClasses}
 									style={{
 										textAlign: 'center',
-										textShadow: theme.textShadowsEnabled
+										textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-											? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-											: undefined,
 									}}
 									w={'100%'}
 								>

src/hooks/useCommonHooks.ts

@@ -107,6 +107,11 @@ export function useCommonHooks() {
 		'i',
 	);
 
+	const textShadowStyle =
+		'1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)';
+	const largeTextShadowStyle =
+		'3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)';
+
 	const reorder = (list: any, startIndex: number, endIndex: number) => {
 		const result = Array.from(list);
 		const [removed]: any = result.splice(startIndex, 1);
@@ -235,5 +240,7 @@ export function useCommonHooks() {
 		setCurrentUser,
 		currentLocation,
 		setCurrentLocation,
+		textShadowStyle,
+		largeTextShadowStyle,
 	};
 }

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
+							boxShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-								? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-								: 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
+								boxShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-									? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-									: 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
+						textShadow: theme.textShadowsEnabled ? largeTextShadowStyle : undefined,
-							? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
-							: undefined,
 					}}
 				>
 					{greet
@@ -61,9 +66,7 @@ function Header({
 					classNames={textClasses}
 					style={{
 						width: 'max-content',
-						textShadow: theme.textShadowsEnabled
+						textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-							? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-							: undefined,
 					}}
 				>
 					{date}
@@ -91,9 +94,7 @@ function Header({
 							classNames={textClasses}
 							mr={'.25rem'}
 							style={{
-								textShadow: theme.textShadowsEnabled
+								textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-									? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-									: undefined,
 							}}
 						>
 							{current.temperature}°F
@@ -104,9 +105,7 @@ function Header({
 							fz={'.875rem'}
 							mb={'.375rem'}
 							style={{
-								textShadow: theme.textShadowsEnabled
+								textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-									? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-									: undefined,
 							}}
 						>
 							{current.highTemp}°F/{current.lowTemp}°F
@@ -116,9 +115,7 @@ function Header({
 						className={textClasses.dateTime}
 						classNames={textClasses}
 						style={{
-							textShadow: theme.textShadowsEnabled
+							textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-								? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-								: 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
+					textShadow: theme.textShadowsEnabled ? largeTextShadowStyle : undefined,
-						? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
-						: undefined,
 				}}
 			>
 				{greet
@@ -39,9 +44,7 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
 				m={0}
 				style={{
 					width: 'max-content',
-					textShadow: theme.textShadowsEnabled
+					textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-						? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-						: undefined,
 				}}
 			>
 				{date}
@@ -52,9 +55,7 @@ function LargeHeader({ greet, date }: { greet: string | undefined; date: string
 				className={textClasses.dateTime}
 				classNames={textClasses}
 				style={{
-					textShadow: theme.textShadowsEnabled
+					textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-						? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-						: 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

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -12,7 +12,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, selectClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 
 function DebouncedApplication({
@@ -61,15 +61,8 @@ function DebouncedApplication({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this application?</Text>
 						<Text
-							style={{
+							className={textClasses.deleteItem}
-								fontWeight: 'bold',
+							classNames={textClasses}
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
 						>{`"${app.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -209,7 +209,7 @@ const BookmarkSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Bookmark Groups...'}
+				searchPlaceholder={'Search Bookmarks...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>

src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, selectClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 
 function DebouncedBookmarkItem({
@@ -63,15 +63,8 @@ function DebouncedBookmarkItem({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this bookmark?</Text>
 						<Text
-							style={{
+							className={textClasses.deleteItem}
-								fontWeight: 'bold',
+							classNames={textClasses}
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
 						>{`"${bookmark.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -23,7 +23,13 @@ import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaChevronLeft } from 'react-icons/fa';
 import { FiPlus } from 'react-icons/fi';
-import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
+import {
+	buttonClasses,
+	cardClasses,
+	popoverClasses,
+	textClasses,
+	textInputClasses,
+} from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
@@ -119,15 +125,8 @@ function DebouncedGroupSettingsItem({
 					<Stack gap={0} w={'100%'} h={'175px'} align='center'>
 						<Text>Are you sure you want to delete this bookmark group?</Text>
 						<Text
-							style={{
+							className={textClasses.deleteItem}
-								fontWeight: 'bold',
+							classNames={textClasses}
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
 						>{`"${group.categoryName}"`}</Text>
 						<Text style={{ fontWeight: 'bold', textTransform: 'uppercase' }}>
 							This will also delete all bookmarks in this group!

src/pages/settings/components/Messages/DebouncedMessage.tsx

@@ -2,7 +2,7 @@ import { Card, Stack, Text, TextInput } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks } from 'hooks';
-import { cardClasses, textInputClasses } from 'styles';
+import { cardClasses, textClasses, textInputClasses } from 'styles';
 import type { Message } from 'types';
 
 function DebouncedMessage({
@@ -32,15 +32,8 @@ function DebouncedMessage({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this message?</Text>
 						<Text
-							style={{
+							className={textClasses.deleteItem}
-								fontWeight: 'bold',
+							classNames={textClasses}
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
 						>{`"${message.message}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>

src/pages/settings/components/Messages/Messages.tsx

@@ -69,7 +69,7 @@ const MessageSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Message content...'}
+				searchPlaceholder={'Search Messages...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -3,7 +3,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { DeleteItemModal, ManagementPill } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { cardClasses, textInputClasses } from 'styles';
+import { cardClasses, textClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 
 function DebouncedSearchProvider({
@@ -53,15 +53,8 @@ function DebouncedSearchProvider({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this Search Provider?</Text>
 						<Text
-							style={{
+							className={textClasses.deleteItem}
-								fontWeight: 'bold',
+							classNames={textClasses}
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
 						>{`"${provider.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>

src/pages/settings/components/Search/SearchProviders.tsx

@@ -16,7 +16,7 @@ import { AddItemModal, NoItemsFound, SettingsHeader } from 'components';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiPower } from 'react-icons/fi';
-import { popoverClasses, switchClasses, textInputClasses } from 'styles';
+import { popoverClasses, switchClasses, textInputClasses, toolTipClasses } from 'styles';
 import type { Provider } from 'types';
 import DebouncedSearchProvider from './DebouncedSearchProvider';
 import SearchProviderSettingsItem from './SearchProviderSettingsItem';
@@ -158,15 +158,10 @@ const SearchProviderSettings = () => {
 								}}
 							>
 								<Tooltip
-									c={'var(--mantine-color-primary-0)'}
+									className={toolTipClasses.default}
-									bg={'var(--mantine-color-background-0)'}
+									classNames={toolTipClasses}
-									bd={'solid 1px var(--mantine-color-border-0)'}
 									label={'Default'}
 									refProp='rootRef'
-									styles={{
-										tooltip: { marginTop: '-.5rem' },
-										arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
-									}}
 									withArrow
 								>
 									<Switch
@@ -208,7 +203,7 @@ const SearchProviderSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Search providerData...'}
+				searchPlaceholder={'Search Providers...'}
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>

src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx

@@ -12,7 +12,7 @@ import { DeleteItemModal } from 'components';
 import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiTrash } from 'react-icons/fi';
-import { scrollAreaClasses } from 'styles';
+import { scrollAreaClasses, textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import { ThemeMiniCard } from '../../Themes';
 
@@ -51,15 +51,8 @@ export function ThemePlaylistCard({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this Theme Playlist?</Text>
 						<Text
-							style={{
+							className={textClasses.deleteItem}
-								fontWeight: 'bold',
+							classNames={textClasses}
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
 						>{`"${cardPlaylist.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>

src/pages/settings/components/Theming/Themes/ThemeCard/ThemeCard.tsx

@@ -7,6 +7,7 @@ import {
 } from '@mantine/hooks';
 import { DeleteItemModal } from 'components';
 import { useCommonHooks } from 'hooks';
+import { textClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import { MiniAppItem } from './components/MiniAppItem';
 import { MiniGroupItem } from './components/MiniGroupItem';
@@ -57,15 +58,8 @@ export function ThemeCard({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this theme?</Text>
 						<Text
-							style={{
+							className={textClasses.deleteItem}
-								fontWeight: 'bold',
+							classNames={textClasses}
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
 						>{`"${cardTheme.name}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>

src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeEditor.tsx

@@ -18,7 +18,13 @@ import { useCommonHooks } from 'hooks';
 import { useRef, useState } from 'react';
 import { FaShuffle } from 'react-icons/fa6';
 import { FiImage, FiSave, FiShuffle, FiX } from 'react-icons/fi';
-import { scrollAreaClasses, textClasses, textInputClasses } from 'styles';
+import {
+	colorSwatchClasses,
+	scrollAreaClasses,
+	textClasses,
+	textInputClasses,
+	toolTipClasses,
+} from 'styles';
 import { BackgroundProperties, type Theme } from 'types';
 import { ThemeModalContent } from './ThemeModalContent';
 
@@ -53,7 +59,7 @@ export function ThemeEditor({
 }) {
 	const [query, setQuery] = useState('');
 	const [hovered, setHovered] = useState(-1);
-	const { isMobile, theme, getObjectDiff } = useCommonHooks();
+	const { isMobile, theme, getObjectDiff, textShadowStyle } = useCommonHooks();
 	const viewportRef = useRef<HTMLDivElement>(null);
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
@@ -124,7 +130,9 @@ export function ThemeEditor({
 		);
 	});
 
-	const handleSwatchClick = () => {
+	const handleSwatchClick = (colorId: string, colorValue: string) => {
+		setColorId(colorId || '');
+		setColorValue(colorValue || '');
 		closeBackgroundPicker();
 		openPicker();
 		setDesignerTheme(selectedTheme);
@@ -140,108 +148,98 @@ export function ThemeEditor({
 	};
 	return (
 		<>
-			<Group p={'2rem'} w={'100%'} align='flex-start' justify='space-between'>
+			<Group p={'2rem'} w={'100%'} justify='space-between'>
-				<Stack display={'flex'} pos={'relative'} w={isMobile ? '100%' : '70%'}>
+				<Stack pos={'relative'} w={isMobile ? '100%' : '70%'}>
 					<ThemeModalContent selectedTheme={designerTheme} />
 					<Tooltip
 						label={'Change Primary Color'}
-						c={'var(--mantine-color-primary-0)'}
+						className={toolTipClasses.default}
-						bg={'var(--mantine-color-background-0)'}
+						classNames={toolTipClasses}
 					>
 						<ColorSwatch
 							onClick={() => {
-								setColorId('primaryColor');
+								handleSwatchClick('primaryColor', selectedTheme.primaryColor);
-								setColorValue(selectedTheme.primaryColor);
-								handleSwatchClick();
 							}}
 							color={selectedTheme.primaryColor}
-							bd={`1px solid ${selectedTheme.primaryColor}`}
+							style={{ borderColor: selectedTheme.primaryColor }}
-							pos={'absolute'}
+							className={colorSwatchClasses.themeDesignerSwatch}
+							classNames={colorSwatchClasses}
 							top={'11.5rem'}
 							left={'8.5rem'}
-							style={{ cursor: 'pointer' }}
 						/>
 					</Tooltip>
 					<Tooltip
 						label={'Change Accent Color'}
-						c={'var(--mantine-color-primary-0)'}
+						className={toolTipClasses.default}
-						bg={'var(--mantine-color-background-0)'}
+						classNames={toolTipClasses}
 					>
 						<ColorSwatch
 							onClick={() => {
-								setColorId('accentColor');
+								handleSwatchClick('accentColor', selectedTheme.accentColor);
-								setColorValue(selectedTheme.accentColor);
-								handleSwatchClick();
 							}}
 							color={selectedTheme.accentColor}
-							bd={`1px solid ${selectedTheme.primaryColor}`}
+							style={{ borderColor: selectedTheme.primaryColor }}
-							pos={'absolute'}
+							className={colorSwatchClasses.themeDesignerSwatch}
+							classNames={colorSwatchClasses}
 							bottom={'6rem'}
 							left={'11rem'}
-							style={{ cursor: 'pointer' }}
 						/>
 					</Tooltip>
 					<Tooltip
 						label={'Change Background Color'}
-						c={'var(--mantine-color-primary-0)'}
+						className={toolTipClasses.default}
-						bg={'var(--mantine-color-background-0)'}
+						classNames={toolTipClasses}
 					>
 						<ColorSwatch
 							onClick={() => {
-								setColorId('backgroundColor');
+								handleSwatchClick('backgroundColor', selectedTheme.backgroundColor);
-								setColorValue(selectedTheme.backgroundColor);
-								handleSwatchClick();
 							}}
 							color={selectedTheme.backgroundColor}
-							bd={`1px solid ${selectedTheme.primaryColor}`}
+							style={{ borderColor: selectedTheme.primaryColor }}
-							pos={'absolute'}
+							className={colorSwatchClasses.themeDesignerSwatch}
+							classNames={colorSwatchClasses}
 							bottom={'4rem'}
 							right={'3.5rem'}
-							style={{ cursor: 'pointer' }}
 						/>
 					</Tooltip>
 					<Tooltip
 						label={'Change Border Color'}
-						c={'var(--mantine-color-primary-0)'}
+						className={toolTipClasses.default}
-						bg={'var(--mantine-color-background-0)'}
+						classNames={toolTipClasses}
 					>
 						<ColorSwatch
 							onClick={() => {
-								setColorId('borderColor');
+								handleSwatchClick('borderColor', selectedTheme.borderColor);
-								setColorValue(selectedTheme.borderColor);
-								handleSwatchClick();
 							}}
 							color={selectedTheme.borderColor}
-							bd={`1px solid ${selectedTheme.primaryColor}`}
+							style={{ borderColor: selectedTheme.primaryColor }}
-							pos={'absolute'}
+							className={colorSwatchClasses.themeDesignerSwatch}
+							classNames={colorSwatchClasses}
 							top={'4.5rem'}
 							right={'15%'}
-							style={{ cursor: 'pointer' }}
 						/>
 					</Tooltip>
 					<Tooltip
 						label={'Change Search Color'}
-						c={'var(--mantine-color-primary-0)'}
+						className={toolTipClasses.default}
-						bg={'var(--mantine-color-background-0)'}
+						classNames={toolTipClasses}
 					>
 						<ColorSwatch
 							onClick={() => {
-								setColorId('searchColor');
+								handleSwatchClick('searchColor', selectedTheme.searchColor);
-								setColorValue(selectedTheme.searchColor);
-								handleSwatchClick();
 							}}
 							color={selectedTheme.searchColor}
-							bd={`1px solid ${selectedTheme.primaryColor}`}
+							style={{ borderColor: selectedTheme.primaryColor }}
-							pos={'absolute'}
+							className={colorSwatchClasses.themeDesignerSwatch}
+							classNames={colorSwatchClasses}
 							top={'3.25rem'}
 							left={'6.5rem'}
-							style={{ cursor: 'pointer' }}
 						/>
 					</Tooltip>
 					<Tooltip
 						label={'Change Background'}
-						c={'var(--mantine-color-primary-0)'}
+						className={toolTipClasses.default}
-						bg={'var(--mantine-color-background-0)'}
+						classNames={toolTipClasses}
 					>
 						<ActionIcon
 							onClick={() => {
@@ -273,15 +271,13 @@ export function ThemeEditor({
 					}}
 				>
 					{pickerOpen && (
-						<Stack h={'100%'} align='center' justify='space-between'>
+						<Stack h={'100%'} align='center'>
 							<Text
 								className={textClasses.sectionTitle}
 								classNames={textClasses}
 								c={'var(--mantine-color-background-0)'}
 								style={{
-									textShadow: theme.textShadowsEnabled
+									textShadow: theme.textShadowsEnabled ? textShadowStyle : undefined,
-										? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-										: undefined,
 								}}
 							>
 								Change{' '}
@@ -372,6 +368,17 @@ export function ThemeEditor({
 								<TextInput
 									className={textInputClasses.default}
 									classNames={textInputClasses}
+									styles={{
+										label: {
+											color: 'var(--mantine-color-primary-0)',
+										},
+										input: {
+											color: selectedTheme.primaryColor,
+											backgroundColor: selectedTheme.backgroundColor,
+											border: 'none',
+											borderBottom: '1px solid var(--mantine-color-primary-0)',
+										},
+									}}
 									placeholder='Search'
 									value={query.replace(/\.[^/.]+$/, '')}
 									rightSection={

src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeModalContent.tsx

@@ -1,9 +1,11 @@
 import { Group, Select, Stack, Text } from '@mantine/core';
 import { AppItem } from 'components';
+import { useCommonHooks } from 'hooks';
 import { selectClasses, textClasses } from 'styles';
 import type { Theme } from 'types';
 
 export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
+	const { textShadowStyle, largeTextShadowStyle } = useCommonHooks();
 	return (
 		<Stack
 			style={{
@@ -65,9 +67,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 				m={0}
 				w={'100%'}
 				style={{
-					textShadow: selectedTheme.textShadowsEnabled
+					textShadow: selectedTheme.textShadowsEnabled ? largeTextShadowStyle : undefined,
-						? '3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%)'
-						: undefined,
 					transition: 'all 0.2s ease',
 				}}
 			>
@@ -78,9 +78,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 					className={textClasses.sectionTitle}
 					classNames={textClasses}
 					style={{
-						boxShadow: selectedTheme.textShadowsEnabled
+						boxShadow: selectedTheme.textShadowsEnabled ? textShadowStyle : undefined,
-							? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-							: undefined,
 						transition: 'all 0.2s ease',
 					}}
 				>
@@ -148,9 +146,7 @@ export function ThemeModalContent({ selectedTheme }: { selectedTheme: Theme }) {
 					mb={'-.5rem'}
 					mt={0}
 					style={{
-						boxShadow: selectedTheme.textShadowsEnabled
+						boxShadow: selectedTheme.textShadowsEnabled ? textShadowStyle : undefined,
-							? '1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%)'
-							: undefined,
 						transition: 'all 0.2s ease',
 					}}
 				>

src/pages/settings/components/Theming/Themes/Themes.tsx

@@ -16,7 +16,7 @@ import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiChevronRight, FiEdit, FiMousePointer, FiStopCircle } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
-import { switchClasses, textClasses } from 'styles';
+import { switchClasses, textClasses, toolTipClasses } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 import { BackgroundModal } from '../Backgrounds';
 import { ThemeCard } from './ThemeCard';
@@ -325,9 +325,9 @@ export function Themes() {
 							)}
 						</Button>
 						<Tooltip
+							className={toolTipClasses.default}
+							classNames={toolTipClasses}
 							label='Shuffle is always on when a playlist is active.'
-							c={'var(--mantine-color-primary-0)'}
-							bg={'var(--mantine-color-background-0)'}
 							disabled={currentThemePlaylist === 'All'}
 						>
 							<Group>

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -4,7 +4,7 @@ import { DeleteItemModal } from 'components';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiTrash } from 'react-icons/fi';
-import { cardClasses, textInputClasses } from 'styles';
+import { cardClasses, textClasses, textInputClasses, toolTipClasses } from 'styles';
 import type { WolClient } from 'types';
 
 function DebouncedWolClient({
@@ -53,24 +53,16 @@ function DebouncedWolClient({
 					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
 						<Text>Are you sure you want to delete this WoL Client?</Text>
 						<Text
-							style={{
+							className={textClasses.deleteItem}
-								fontWeight: 'bold',
+							classNames={textClasses}
-								fontSize: '1.25rem',
-								padding: '.5rem',
-								margin: '.5rem',
-								borderRadius: '10px',
-								backgroundColor: 'var(--mantine-color-accent-0)',
-								color: 'var(--mantine-color-background-0)',
-							}}
 						>{`"${client.hostname}"`}</Text>
 						<Text c='red'>This action cannot be undone!</Text>
 					</Stack>
 				}
 			/>
 			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
+				className={toolTipClasses.default}
-				bg={'var(--mantine-color-background-0)'}
+				classNames={toolTipClasses}
-				bd={'solid 1px var(--mantine-color-border-0)'}
 				label={'Delete'}
 			>
 				<ActionIcon

src/styles/ColorSwatch.module.css

@@ -18,4 +18,13 @@
         }
     }
     
+}
+
+.themeDesignerSwatch {
+    &.root {
+        cursor: pointer;
+        position: absolute !important;
+        border-width: 1px !important;
+        border-style: solid !important;
+    }
 }

src/styles/Text.module.css

@@ -188,6 +188,18 @@
 	}
 }
 
+.deleteItem {
+	&.root {
+		font-weight: bold;
+		font-size: 1.25rem;
+		padding: .5rem;
+		margin: .5rem;
+		border-radius: 10px;
+		background-color: var(--mantine-color-accent-0);
+		color: var(--mantine-color-background-0);
+	}
+}
+
 @keyframes carousel {
 	25% {
 		transform: translate(0, 0);

src/styles/Tooltip.module.css

@@ -0,0 +1,10 @@
+.default {
+    &.tooltip {
+        color: var(--mantine-color-primary-0);
+        background-color: var(--mantine-color-background-0);
+        border: solid 1px var(--mantine-color-border-0);
+    }
+    .arrow {
+        border: solid 1px var(--mantine-color-border-0) !important;
+    }
+}

src/styles/index.ts

@@ -15,6 +15,7 @@ import switchClasses from './Switch.module.css';
 import tabClasses from './Tabs.module.css';
 import textClasses from './Text.module.css';
 import textInputClasses from './TextInput.module.css';
+import toolTipClasses from './Tooltip.module.css';
 
 export {
 	actionIconClasses,
@@ -34,4 +35,5 @@ export {
 	tabClasses,
 	textClasses,
 	textInputClasses,
+	toolTipClasses,
 };