Style consistency

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>
+				<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
+					<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,39 +191,45 @@ function ThemesSettings() {
 						}}
 						pos={'absolute'}
 					/>
-					{allThemes?.map((cardTheme: any) => (
-						<Group key={cardTheme.name} pos={'relative'}>
-							{cardTheme.name === currentTheme && (
-								<FiChevronRight
+					{allThemes
+						?.filter((a: any) =>
+							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+						)
+						.map((cardTheme: any) => (
+							<Group key={cardTheme.name} pos={'relative'}>
+								{cardTheme.name === currentTheme && (
+									<FiChevronRight
+										style={{
+											position: 'absolute',
+											left: -14,
+											zIndex: 1,
+											fontSize: '2em',
+											fontWeight: 'bold',
+											borderRadius: '50%',
+											backgroundColor: cardTheme.borderColor,
+											color:
+												cardTheme.borderColor === cardTheme.primaryColor
+													? cardTheme.accentColor
+													: cardTheme.primaryColor,
+										}}
+									/>
+								)}
+								<Box
 									style={{
-										position: 'absolute',
-										left: -14,
-										zIndex: 1,
-										fontSize: '2em',
-										fontWeight: 'bold',
-										borderRadius: '50%',
-										backgroundColor: cardTheme.borderColor,
-										color:
-											cardTheme.borderColor === cardTheme.primaryColor
-												? cardTheme.accentColor
-												: cardTheme.primaryColor,
+										zIndex:
+											currentTheme === 'random' && cardTheme.name === theme.name
+												? 200
+												: 0,
 									}}
-								/>
-							)}
-							<Box
-								style={{
-									zIndex:
-										currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
-								}}
-							>
-								<ThemeCard
-									allThemes={allThemes}
-									cardTheme={cardTheme}
-									handleOpen={handleOpen}
-								/>
-							</Box>
-						</Group>
-					))}
+								>
+									<ThemeCard
+										allThemes={allThemes}
+										cardTheme={cardTheme}
+										handleOpen={handleOpen}
+									/>
+								</Box>
+							</Group>
+						))}
 				</Group>
 			</Stack>
 		</>