Style consistency

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

@@ -193,7 +193,8 @@ const ApplicationSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
 					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 						Applications
 					</Text>
@@ -252,7 +253,10 @@ const ApplicationSettings = () => {
 					>
 						<FiPlus />
 					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus

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

@@ -1,7 +1,6 @@
 import { ActionIcon, Box, Group, Text } from '@mantine/core';
 import { useState } from 'react';
 import { FiEdit } from 'react-icons/fi';
-import { actionIconClasses } from 'styles';
 
 function BookmarkSettingsItem({ bookmark }: any) {
 	const [hover, setHover] = useState(false);
@@ -10,8 +9,8 @@ function BookmarkSettingsItem({ bookmark }: any) {
 			style={{
 				cursor: 'pointer',
 				borderRadius: '4px',
-				color: 'var(--color-text-pri)',
+				color: 'var(--color-text-acc)',
-				backgroundColor: 'var(--color-text-acc)',
+				backgroundColor: 'var(--color-search-background)',
 				padding: '8px',
 			}}
 			onMouseEnter={() => setHover(true)}
@@ -21,11 +20,11 @@ function BookmarkSettingsItem({ bookmark }: any) {
 				<Text>{bookmark.name}</Text>
 				{hover && (
 					<ActionIcon
-						className={actionIconClasses.editButton}
+						variant='subtle'
-						classNames={actionIconClasses}
 						style={{
 							position: 'absolute',
 							right: 24,
+							color: 'var(--color-text-acc)',
 						}}
 					>
 						<FiEdit />

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

@@ -145,7 +145,8 @@ const BookmarkSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
 					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 						Bookmarks
 					</Text>
@@ -204,7 +205,10 @@ const BookmarkSettings = () => {
 					>
 						<FiPlus />
 					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus

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

@@ -15,6 +15,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { IconTrash } from '@tabler/icons-react';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
+import { FiPlus } from 'react-icons/fi';
 import { buttonClasses, cardClasses, modalClasses, textInputClasses } from 'styles';
 import BookmarkSettingsItem from './BookmarkSettingsItem';
 import DebouncedBookmarkItem from './DebouncedBookmarkItem';
@@ -242,7 +243,7 @@ function DebouncedGroupSettingsItem({ bookmarkGroup, bookmarks }: any) {
 									});
 								}}
 							>
-								Add bookmark
+								<FiPlus /> Bookmark
 							</Button>
 						</Popover.Target>
 						<Popover.Dropdown

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

@@ -134,7 +134,8 @@ const MessageSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
 					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 						Messages
 					</Text>
@@ -156,7 +157,9 @@ const MessageSettings = () => {
 						>
 							<Stack>
 								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'These custom messages will be displayed in the header on the homepage.'}
+									{
+										'These custom messages will be displayed in the header on the homepage.'
+									}
 								</Text>
 								<Highlight
 									highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
@@ -184,7 +187,10 @@ const MessageSettings = () => {
 					>
 						<FiPlus />
 					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus

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

@@ -157,7 +157,8 @@ const SearchProviderSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
 					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 						Search Providers
 					</Text>
@@ -207,7 +208,10 @@ const SearchProviderSettings = () => {
 					>
 						<FiPlus />
 					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus

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

@@ -115,7 +115,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 					color:
 						theme.borderColor === theme.primaryColor
 							? theme.accentColor
-							: theme.primaryColor,
+							: theme.backgroundColor,
 					zIndex: 3,
 				}}
 			>
@@ -134,7 +134,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 						color:
 							theme.borderColor === theme.primaryColor
 								? theme.accentColor
-								: theme.primaryColor,
+								: theme.backgroundColor,
 						zIndex: 3,
 					}}
 					onClick={(event) => {
@@ -202,7 +202,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 							color:
 								theme.borderColor === theme.primaryColor
 									? theme.accentColor
-									: theme.primaryColor,
+									: theme.backgroundColor,
 							zIndex: 3,
 						}}
 						onClick={() => {
@@ -224,7 +224,7 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
 								color:
 									theme.borderColor === theme.primaryColor
 										? theme.accentColor
-										: theme.primaryColor,
+										: theme.backgroundColor,
 								zIndex: 3,
 							}}
 							onClick={() => {

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

@@ -7,12 +7,13 @@ import {
 	Popover,
 	Stack,
 	Text,
+	TextInput,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
 import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
-import { actionIconClasses, buttonClasses, textClasses } from 'styles';
+import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
 import ThemePlaylistCard from './ThemePlaylistCard';
 import ThemePlaylistModal from './ThemePlaylistModal';
 
@@ -26,7 +27,10 @@ function ThemePlaylists() {
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
-	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
+	const { currentThemePlaylist, setCurrentThemePlaylist, theme, isMobile } =
+		useCommonHooks();
+	const [searchValue, setSearchValue] = useState('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 
 	const handleOpen = (playlist: any) => {
 		setSelectedPlaylist(playlist);
@@ -58,8 +62,8 @@ function ThemePlaylists() {
 				createPlaylist={mutateAsync}
 			/>
 			<Stack h={'100%'} w={'100%'}>
-				<Group w={'100%'} justify='space-between'>
+				<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
-					<Group>
+					<Group w={isMobile ? undefined : '100%'}>
 						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 							Theme Playlists
 						</Text>
@@ -116,6 +120,18 @@ function ThemePlaylists() {
 							<FiPlus />
 						</Button>
 					</Group>
+					<TextInput
+						w={isMobile ? undefined : '35%'}
+						pos={isMobile ? undefined : 'absolute'}
+						className={textInputClasses.settingsItem}
+						classNames={textInputClasses}
+						autoFocus
+						placeholder='Search...'
+						value={searchValue}
+						onInput={(event: any) => {
+							setSearchValue(event.target.value);
+						}}
+					/>
 				</Group>
 				<Group justify='center' align='center' pos={'relative'}>
 					<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -125,6 +141,9 @@ function ThemePlaylists() {
 				<Group justify='center' align='center' pos={'relative'}>
 					{themePlaylists
 						?.filter((playlist: any) => playlist.default === 1)
+						?.filter((a: any) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+						)
 						.map((cardPlaylist: any) => {
 							return (
 								<Group key={cardPlaylist.name} pos={'relative'}>
@@ -141,7 +160,7 @@ function ThemePlaylists() {
 												color:
 													theme.borderColor === theme.primaryColor
 														? theme.accentColor
-														: theme.primaryColor,
+														: theme.backgroundColor,
 											}}
 										/>
 									)}
@@ -166,6 +185,9 @@ function ThemePlaylists() {
 				<Group justify='center' align='center' pos={'relative'}>
 					{themePlaylists
 						?.filter((playlist: any) => playlist.default === 0)
+						?.filter((a: any) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+						)
 						.map((cardPlaylist: any) => {
 							return (
 								<Group key={cardPlaylist.name} pos={'relative'}>

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

@@ -9,14 +9,16 @@ import {
 	Stack,
 	Switch,
 	Text,
+	TextInput,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Modal.css';
-import { actionIconClasses, buttonClasses, textClasses } from 'styles';
+import { FaDice } from 'react-icons/fa';
+import { actionIconClasses, buttonClasses, textClasses, textInputClasses } from 'styles';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 function ThemesSettings() {
@@ -33,7 +35,9 @@ function ThemesSettings() {
 	const [backgroundList, setBackgroundList] = useState<any>(['None']);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
-	const { currentTheme, setCurrentTheme, theme, setCurrentThemePlaylist } =
+	const [searchValue, setSearchValue] = useState('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
+	const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
 		useCommonHooks();
 
 	const handleOpen = (theme: any) => {
@@ -79,8 +83,8 @@ function ThemesSettings() {
 				handleSaveTheme={handleSaveTheme}
 			/>
 			<Stack h={'100%'} w={'100%'}>
-				<Group w={'100%'} justify='space-between'>
+				<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
-					<Group>
+					<Group w={isMobile ? undefined : '100%'}>
 						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 							Themes
 						</Text>
@@ -143,9 +147,30 @@ function ThemesSettings() {
 							<FiPlus />
 						</Button>
 					</Group>
+					<TextInput
+						w={isMobile ? undefined : '35%'}
+						pos={isMobile ? undefined : 'absolute'}
+						className={textInputClasses.settingsItem}
+						classNames={textInputClasses}
+						autoFocus
+						placeholder='Search...'
+						value={searchValue}
+						onInput={(event: any) => {
+							setSearchValue(event.target.value);
+						}}
+					/>
 					<Switch
-						label={<Text c={theme.primaryColor}>Random Theme</Text>}
+						label={
+							isMobile ? (
+								<FaDice size={20} color={theme.primaryColor} />
+							) : (
+								<Text c={theme.primaryColor}>Random Theme</Text>
+							)
+						}
 						labelPosition='left'
+						pos={'absolute'}
+						right={isMobile ? '2rem' : '1rem'}
+						top={isMobile ? '9.5rem' : undefined}
 						checked={currentTheme === 'random'}
 						onChange={(e) => {
 							setCurrentTheme(e.target.checked ? 'random' : theme.name);
@@ -166,7 +191,11 @@ function ThemesSettings() {
 						}}
 						pos={'absolute'}
 					/>
-					{allThemes?.map((cardTheme: any) => (
+					{allThemes
+						?.filter((a: any) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+						)
+						.map((cardTheme: any) => (
 							<Group key={cardTheme.name} pos={'relative'}>
 								{cardTheme.name === currentTheme && (
 									<FiChevronRight
@@ -188,7 +217,9 @@ function ThemesSettings() {
 								<Box
 									style={{
 										zIndex:
-										currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
+											currentTheme === 'random' && cardTheme.name === theme.name
+												? 200
+												: 0,
 									}}
 								>
 									<ThemeCard

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

@@ -145,7 +145,8 @@ const WolClientSettings = () => {
 					</Modal.Body>
 				</Modal.Content>
 			</Modal.Root>
-			<Group align='center'>
+			<Group align='center' justify='center' mt={'1rem'}>
+				<Group w={isMobile ? undefined : '100%'}>
 					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 						WoL Clients
 					</Text>
@@ -193,7 +194,10 @@ const WolClientSettings = () => {
 					>
 						<FiPlus />
 					</Button>
+				</Group>
 				<TextInput
+					w={isMobile ? undefined : '35%'}
+					pos={isMobile ? undefined : 'absolute'}
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus

src/styles/Button.module.css

@@ -63,13 +63,13 @@
 		}
 		width: 2rem;
 		height: 2rem;
-		padding: 0px;
+		padding: 8px;
 		margin: 0px;
-		background-color: var(--color-text-pri);
+		background-color: var(--color-search-background);
 		color: var(--color-text-acc);
 	}
 	&:hover {
-		background-color: var(--color-text-acc) !important;
+		background-color: var(--color-text-pri) !important;
-		color: var(--color-text-pri) !important;
+		color: var(--color-background) !important;
 	}
 }