Style updates

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,
 				}}