Style consistency

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>
+				<Group w={'100%'} justify='center' align='center' mt={'1rem'}>
+					<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'}>