Style updates

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

@@ -19,7 +19,7 @@ import { useEffect, useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
 import * as si from 'react-icons/si';
 import * as vsc from 'react-icons/vsc';
-import { selectClasses, textInputClasses } from 'styles';
+import { popoverClasses, selectClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
 import SettingsHeader from '../Shared/SettingsHeader';
@@ -117,11 +117,12 @@ const ApplicationSettings = () => {
 				title={'Add a new application'}
 				body={
 					<Stack gap={0} align='center'>
-						<Group justify='center'>
+						<Group w={'100%'} justify='center'>
 							<TextInput
 								label={'Name'}
 								className={textInputClasses.settingsItem}
 								pt={16}
+								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.name}
 								onChange={(event) => {
@@ -135,6 +136,7 @@ const ApplicationSettings = () => {
 								label={'Base URL'}
 								className={textInputClasses.settingsItem}
 								pt={16}
+								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.baseUrl}
 								onChange={(event) => {
@@ -145,12 +147,12 @@ const ApplicationSettings = () => {
 								}}
 							/>
 						</Group>
-						<Group w={isMobile ? undefined : '64%'} justify='center'>
+						<Group w={isMobile ? '94%' : '92%'} justify='center'>
 							<TextInput
 								label={'URL'}
 								className={textInputClasses.settingsItem}
 								pt={16}
-								w={isMobile ? undefined : '99%'}
+								w={'100%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.url}
 								onChange={(event) => {
@@ -161,7 +163,7 @@ const ApplicationSettings = () => {
 								}}
 							/>
 						</Group>
-						<Group justify='center'>
+						<Group w={'100%'} justify='center'>
 							<Select
 								label={'Icon'}
 								className={selectClasses.settingsItem}
@@ -172,7 +174,10 @@ const ApplicationSettings = () => {
 									option: selectClasses.menuSelectOption,
 									dropdown: selectClasses.dropdown,
 								}}
+								w={'45%'}
 								mt={12}
+								limit={100}
+								placeholder='Search for an icon...'
 								data={Object.keys(allIcons).map((icon) => {
 									return { value: icon, label: icon };
 								})}
@@ -205,6 +210,7 @@ const ApplicationSettings = () => {
 								label={'Filter'}
 								className={textInputClasses.settingsItem}
 								pt={16}
+								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.filterName}
 								onChange={(event) => {
@@ -268,6 +274,7 @@ const ApplicationSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Applications...'}
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
@@ -366,6 +373,7 @@ const ApplicationSettings = () => {
 									withOverlay
 									withinPortal={false}
 									closeOnClickOutside={!isOpen}
+									classNames={popoverClasses}
 								>
 									<Popover.Target>
 										<Box

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

@@ -14,7 +14,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiTrash } from 'react-icons/fi';
-import { cardClasses, selectClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
@@ -111,7 +111,9 @@ function DebouncedApplication({
 				label={'Enabled'}
 			>
 				<Switch
-					label={<Text c={theme.primaryColor}>Enabled</Text>}
+					className={switchClasses.default}
+					classNames={switchClasses}
+					label={'Enabled'}
 					labelPosition='left'
 					pos={'absolute'}
 					left={16}
@@ -123,7 +125,6 @@ function DebouncedApplication({
 							enabled: event.target.checked ? 1 : 0,
 						});
 					}}
-					color={theme.primaryColor}
 				/>
 			</Tooltip>
 			<Group w={'100%'} justify='center'>
@@ -183,10 +184,12 @@ function DebouncedApplication({
 						dropdown: selectClasses.dropdown,
 					}}
 					mt={12}
+					limit={100}
+					defaultSearchValue={app?.icon}
 					data={Object.keys(allIcons).map((icon) => {
 						return { value: icon, label: icon };
 					})}
-					defaultValue={app.icon}
+					defaultValue={app?.icon}
 					comboboxProps={{
 						zIndex: 3000,
 						withinPortal: false,

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

@@ -179,6 +179,7 @@ const BookmarkSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Bookmark Groups...'}
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>

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

@@ -15,7 +15,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiPlus, FiTrash } from 'react-icons/fi';
-import { buttonClasses, cardClasses, textInputClasses } from 'styles';
+import { buttonClasses, cardClasses, popoverClasses, textInputClasses } from 'styles';
 import type { Bookmark, BookmarkGroup } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
@@ -231,7 +231,12 @@ function DebouncedGroupSettingsItem({
 													{...provided.draggableProps}
 													{...provided.dragHandleProps}
 												>
-													<Popover withArrow withOverlay closeOnClickOutside={!isOpen}>
+													<Popover
+														withArrow
+														withOverlay
+														closeOnClickOutside={!isOpen}
+														classNames={popoverClasses}
+													>
 														<Popover.Target>
 															<Box>
 																<BookmarkSettingsItem bookmark={bookmark} />
@@ -276,7 +281,7 @@ function DebouncedGroupSettingsItem({
 						opened={popoverOpened}
 						onChange={setPopoverOpened}
 						closeOnEscape
-						// closeOnClickOutside={}
+						classNames={popoverClasses}
 					>
 						<Popover.Target>
 							<Button

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

@@ -53,12 +53,19 @@ const MessageSettings = () => {
 				title={'Messages'}
 				tooltip={{
 					title: 'These custom messages will be displayed in the header on the homepage.',
-					highlightList: ['$firstName', '$lastName', '$^firstName', '$^lastName'],
+					highlightList: [
+						'$firstName',
+						'$lastName',
+						'$^firstName',
+						'$^lastName',
+						'messages',
+					],
 					description:
 						'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName. Messages may contain any unicode text.',
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Message content...'}
 			/>
 			<AddItemModal
 				modalOpened={modalOpened}

src/pages/settings/components/Personalization/Personalization.tsx

@@ -48,20 +48,19 @@ const PersonalizationSettings = () => {
 				tooltip={{
 					title: 'The personalization section allows you to update basic information.',
 					highlightList: [
-						'Applications',
-						'apps',
-						'application',
+						'first name',
+						'last name',
 						'name',
-						'base url',
-						'url',
-						'icon',
-						'filter',
+						'first',
+						'last',
+						'physical address',
 					],
 					description:
 						'The first and last name fields will be used for greetings, and the physical address field will be used for weather.',
 				}}
 				searchValue={undefined}
 				setSearchValue={() => {}}
+				searchPlaceholder={undefined}
 			/>
 			<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
 				<Grid w={'75%'} pos={'relative'}>

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

@@ -12,7 +12,7 @@ import {
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { textInputClasses } from 'styles';
+import { popoverClasses, textInputClasses } from 'styles';
 import type { Provider } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
 import SettingsHeader from '../Shared/SettingsHeader';
@@ -141,12 +141,13 @@ const SearchProviderSettings = () => {
 				title={'Search Providers'}
 				tooltip={{
 					title: 'Search providers and shortcuts can be configured here.',
-					highlightList: ['Providers', 'search'],
+					highlightList: ['Providers', 'search', 'provider', 'prefix'],
 					description:
 						'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Search Providers...'}
 			/>
 			<Stack
 				mt={isMobile ? '9rem' : '6rem'}
@@ -162,6 +163,7 @@ const SearchProviderSettings = () => {
 								withOverlay
 								withinPortal={false}
 								closeOnClickOutside={!isOpen}
+								classNames={popoverClasses}
 							>
 								<Popover.Target>
 									<Box

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

@@ -23,8 +23,16 @@ function AddItemModal({ modalOpened, handleClose, body, title }: any) {
 					<Modal.Title>{title}</Modal.Title>
 					<Modal.CloseButton />
 				</Modal.Header>
-				<Modal.Body pb={'2rem'}>
-					<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+				<Modal.Body
+					h={isMobile ? '90%' : undefined}
+					pb={'2rem'}
+					style={{ justifyContent: 'center', alignContent: 'center' }}
+				>
+					<Card
+						style={{ alignContent: 'center', justifyContent: 'center' }}
+						className={cardClasses.settingsItem}
+						classNames={cardClasses}
+					>
 						{body}
 					</Card>
 				</Modal.Body>

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

@@ -11,7 +11,14 @@ import {
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { FiHelpCircle, FiPlus } from 'react-icons/fi';
-import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
+import {
+	actionIconClasses,
+	buttonClasses,
+	popoverClasses,
+	switchClasses,
+	textClasses,
+	textInputClasses,
+} from 'styles';
 
 function SettingsHeader({
 	setDragging,
@@ -20,8 +27,9 @@ function SettingsHeader({
 	tooltip,
 	searchValue,
 	setSearchValue,
+	searchPlaceholder,
 }: any) {
-	const { isMobile, theme } = useCommonHooks();
+	const { isMobile, theme, modalStyle } = useCommonHooks();
 	return (
 		<Group
 			py={'1.5rem'}
@@ -42,7 +50,15 @@ function SettingsHeader({
 				>
 					{title}
 				</Text>
-				<Popover withArrow withOverlay withinPortal={true}>
+				<Popover
+					withArrow
+					withOverlay
+					withinPortal={true}
+					styles={{
+						dropdown: modalStyle,
+					}}
+					classNames={popoverClasses}
+				>
 					<Popover.Target>
 						<ActionIcon
 							className={actionIconClasses.settingsTooltip}
@@ -95,7 +111,7 @@ function SettingsHeader({
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus={!isMobile}
-					placeholder='Search...'
+					placeholder={searchPlaceholder || 'Search...'}
 					value={searchValue}
 					onInput={(event: any) => {
 						setSearchValue(event.target.value);
@@ -107,7 +123,9 @@ function SettingsHeader({
 			)}
 			{setDragging && (
 				<Switch
-					label={<Text c={theme.primaryColor}>Reorder</Text>}
+					className={switchClasses.default}
+					classNames={switchClasses}
+					label={'Reorder'}
 					labelPosition='left'
 					pos={'absolute'}
 					right={isMobile ? '2rem' : '1rem'}
@@ -115,15 +133,6 @@ function SettingsHeader({
 					onChange={(e) => {
 						setDragging(e.target.checked);
 					}}
-					color={theme.primaryColor}
-					styles={{
-						label: {
-							color: theme.primaryColor,
-							top: isMobile ? -22 : 0,
-							left: isMobile ? -8 : 0,
-							position: isMobile ? 'absolute' : undefined,
-						},
-					}}
 				/>
 			)}
 		</Group>

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

@@ -172,8 +172,9 @@ function ThemeModal({
 									<ColorPicker
 										value={colorValue}
 										onChange={setColorValue}
-										format='hexa'
+										format={colorId === 'background' ? 'hex' : 'hexa'}
 										w={'90%'}
+										mb={colorId === 'background' ? '24px' : undefined}
 									/>
 									<Group justify='center'>
 										<TextInput

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

@@ -63,12 +63,13 @@ function ThemePlaylists() {
 					title={'Theme Playlists'}
 					tooltip={{
 						title: 'Theme playlists can be created here and applied to the homepage.',
-						highlightList: ['Clients', 'homepage'],
+						highlightList: ['theme', 'themes', 'homepage', 'playlist'],
 						description:
 							'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
 					}}
 					searchValue={searchValue}
 					setSearchValue={setSearchValue}
+					searchPlaceholder={'Search Theme Playlists...'}
 				/>
 				<Group mt={'6rem'} justify='center' align='center' pos={'relative'}>
 					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>

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

@@ -4,6 +4,7 @@ import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiChevronRight } from 'react-icons/fi';
+import { switchClasses } from 'styles';
 import type { Theme } from 'types';
 import SettingsHeader from '../Shared/SettingsHeader';
 import ThemeCard from './ThemeCard';
@@ -81,12 +82,13 @@ function ThemesSettings() {
 				title={'Themes'}
 				tooltip={{
 					title: 'Themes can be created here and applied to the homepage.',
-					highlightList: ['Clients', 'homepage'],
+					highlightList: ['theme', 'themes', 'homepage', 'playlist'],
 					description:
 						'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Themes...'}
 			/>
 			<Switch
 				label={
@@ -105,7 +107,8 @@ function ThemesSettings() {
 					setCurrentTheme(e.target.checked ? 'random' : theme.name);
 					setCurrentThemePlaylist('All');
 				}}
-				color={theme.primaryColor}
+				className={switchClasses.default}
+				classNames={switchClasses}
 				style={{
 					zIndex: 250,
 				}}

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

@@ -11,7 +11,7 @@ import {
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { textInputClasses } from 'styles';
+import { popoverClasses, textInputClasses } from 'styles';
 import type { WolClient } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
 import SettingsHeader from '../Shared/SettingsHeader';
@@ -130,6 +130,7 @@ const WolClientSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Clients...'}
 			/>
 			<Stack
 				mt={isMobile ? '9rem' : '6rem'}
@@ -145,6 +146,7 @@ const WolClientSettings = () => {
 								withOverlay
 								withinPortal={false}
 								closeOnClickOutside={!isOpen}
+								classNames={popoverClasses}
 							>
 								<Popover.Target>
 									<Group

src/styles/MultiSelect.module.css

@@ -4,7 +4,7 @@
 	font-size: 14px !important;
 }
 .input {
-	border-color: light-dark(var(--mantine-color-appGray-2), white) !important;
+	border-color: var(--color-border) !important;
 	background-color: var(--color-background) !important;
 	color: var(--color-text-pri) !important;
 	&:focus {
@@ -13,28 +13,31 @@
 	display: flex !important;
 	overflow: clip !important;
 	height: 36px !important;
+	&::placeholder {
+		color: var(--color-text-acc) !important;
+	}
 }
 
 .options {
-	.option {
-		color: var(--color-text-pri) !important;
-		font-size: 14px !important;
-		/* applies styles to selected item */
-		&[data-checked] {
-			background-color: var(--color-text-acc) !important;
-			color: var(--color-text-pri) !important;
-			&:hover {
-				background-color: var(--color-text-acc) !important;
-				color: var(--color-background) !important;
-			}
-		}
+	color: var(--color-text-pri) !important;
+}
 
-		/* applies styles to hovered item (with mouse or keyboard) */
+.option {
+	color: var(--color-text-pri) !important;
+	font-size: 14px !important;
+	&[data-checked] {
+		background-color: var(--color-text-acc) !important;
+		color: var(--color-background) !important;
 		&:hover {
 			background-color: var(--color-text-acc) !important;
-			color: var(--color-text-pri) !important;
+			color: var(--color-background) !important;
 		}
 	}
+
+	&:hover {
+		background-color: var(--color-text-pri) !important;
+		color: var(--color-background) !important;
+	}
 }
 
 .dropdown {

src/styles/Popover.module.css

@@ -1,5 +1,3 @@
 .dropdown {
-	background-color: var(--color-background);
-	border: solid 2px var(--color-border);
-	border-color: var(--color-border);
+	border: solid 2px var(--color-border) !important;
 }

src/styles/Select.module.css

@@ -5,7 +5,7 @@
 }
 .menuSelectInput {
 	border-color: var(--color-border) !important;
-	background-color: var(--color-search-background) !important;
+	background-color: var(--color-background) !important;
 	color: var(--color-text-pri) !important;
 	&:focus {
 		border-color: var(--color-text-pri) !important;
@@ -25,17 +25,14 @@
 .menuSelectOption {
 	color: var(--color-text-pri) !important;
 	font-size: 14px !important;
-	/* applies styles to selected item */
 	&[data-checked] {
 		background-color: var(--color-text-acc) !important;
-		color: var(--color-text-pri) !important;
+		color: var(--color-background) !important;
 		&:hover {
 			background-color: var(--color-text-acc) !important;
 			color: var(--color-background) !important;
 		}
 	}
-
-	/* applies styles to hovered item (with mouse or keyboard) */
 	&:hover {
 		background-color: var(--color-text-pri) !important;
 		color: var(--color-background) !important;

src/styles/Switch.module.css

@@ -0,0 +1,36 @@
+.default {
+	@media (max-width: 600px) {
+		&.root {
+			.label {
+				position: absolute;
+				top: -22px;
+				left: -8px;
+			}
+		}
+	}
+	&.root {
+		.label {
+			font-size: 16px;
+			color: var(--color-text-pri);
+		}
+		.track {
+			transition: all .2s ease !important;
+			border: none;
+			background-color: var(--color-search-background);
+			border-color: var(--color-text-acc);
+		}
+		.thumb {
+			transition: all .2s ease !important;
+			border: none;
+			background-color: var(--color-text-acc);
+		}
+		.input:checked + * > .thumb {
+			transition: all .2s ease !important;
+			background-color: var(--color-background);
+		}
+		.input:checked + .track {
+			transition: all .2s ease !important;
+			background-color: var(--color-text-acc);
+		}
+	}
+}

src/styles/TextInput.module.css

@@ -40,94 +40,7 @@
 			}
 			::placeholder {
 				color: var(--color-text-acc) !important;
-			}
-		}
-	}
-}
-
-.search {
-	&.root {
-		.wrapper {
-			display: flex;
-			justify-content: center;
-			.input {
-				border: 0;
-				border-bottom: thin solid var(--color-border);
-				background-color: transparent;
-				color: var(--color-text-pri);
-				font-style: italic;
-				font-size: 0.8em;
-				height: 3.5em;
-				transition: all 0.4s ease;
-				width: 50%;
-				padding-left: 1em;
-				padding-right: 1em;
-				text-align: center;
-				&[data-active="true"] {
-					background-color: color-mix(
-						in srgb,
-						var(--color-search-background),
-						transparent 50%
-					);
-					border-color: var(--color-border);
-					outline: none;
-					color: var(--color-text-pri);
-					font-style: normal;
-					font-weight: 500;
-					font-size: 1.2em;
-					letter-spacing: .2em;
-					width: 100%;
-					border-top-left-radius: .25em;
-					border-top-right-radius: .25em;
-					border-bottom-left-radius: .25em;
-					border-bottom-right-radius: .25em;
-				}
-			}
-			.section {
-				transition: opacity 0.1s 0s ease;
-				color: var(--color-border);
-				width: auto;
-				padding-left: .5rem;
-				opacity: 0;
-			}
-		}
-		.wrapper:focus-within {
-			.input {
-				background-color: var(--color-search-background);
-				border-color: var(--color-border);
-				outline: none;
-				color: var(--color-text-pri);
-				font-style: normal;
-				font-weight: 500;
-				font-size: 1.2em;
-				letter-spacing: .2em;
-				width: 100%;
-				border-top-left-radius: .25em;
-				border-top-right-radius: .25em;
-				border-bottom-left-radius: .25em;
-				border-bottom-right-radius: .25em;
-				&[data-active="true"] {
-					background-color: var(--color-search-background);
-					border-color: var(--color-border);
-					outline: none;
-					color: var(--color-text-pri);
-					font-style: normal;
-					font-weight: 500;
-					font-size: 1.2em;
-					letter-spacing: .2em;
-					width: 100%;
-					border-top-left-radius: .25em;
-					border-top-right-radius: .25em;
-					border-bottom-left-radius: .25em;
-					border-bottom-right-radius: .25em;
-				}
-			}
-			.section {
-				transition: opacity 0.4s 0.4s ease;
-				color: var(--color-border);
-				width: auto;
-				padding-left: .5rem;
-				opacity: 1;
+				opacity: 50%;
 			}
 		}
 	}

src/styles/index.ts

@@ -8,6 +8,7 @@ import multiSelectClasses from './MultiSelect.module.css';
 import popoverClasses from './Popover.module.css';
 import selectClasses from './Select.module.css';
 import stackClasses from './Stack.module.css';
+import switchClasses from './Switch.module.css';
 import tabClasses from './Tabs.module.css';
 import textClasses from './Text.module.css';
 import textInputClasses from './TextInput.module.css';
@@ -23,6 +24,7 @@ export {
 	popoverClasses,
 	selectClasses,
 	stackClasses,
+	switchClasses,
 	tabClasses,
 	textClasses,
 	textInputClasses,