Theme modal changes

src/pages/settings/components/ThemeModal.tsx

@@ -39,14 +39,23 @@ function ThemeModal({
 	const filtered = backgroundList.filter((item: any) =>
 		item.toLowerCase().includes(query.toLowerCase()),
 	);
+	const re = /(?:\.([^.]+))?$/;
 	const items = filtered.map((item: any, index: any) => (
 		<UnstyledButton
 			data-list-item
 			key={item}
-			display='block'
+			style={{
-			bg={index === hovered ? `no-repeat center url(/backgrounds/${item})` : `no-repeat center url(/backgrounds/${item})`}
+				width: '100%',
-			p={50}
+				height: '75px',
-			w={'90%'}
+				background:
+					index === hovered
+						? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(/backgrounds/${item})`
+						: `no-repeat center url(/backgrounds/${item})`,
+				backgroundSize: 'cover',
+				backgroundColor: item === 'None' ? '#00000088' : undefined,
+				paddingLeft: 8,
+				alignItems: 'center',
+			}}
 			onClick={() =>
 				setSelectedTheme({
 					...selectedTheme,
@@ -54,13 +63,43 @@ function ThemeModal({
 				})
 			}
 		>
-			{item}
+			<Group h={'100%'} w={'100%'} justify='space-between'>
+				<Text
+					style={{
+						width: 'min-content',
+						height: 'min-content',
+						backdropFilter: 'blur(10px) brightness(.25)',
+						padding: 8,
+						borderRadius: 4,
+					}}
+				>
+					{item.replace(/\.[^/.]+$/, '')}
+				</Text>
+				{item !== 'None' && (
+					<Text
+						style={{
+							width: 'min-content',
+							backdropFilter: 'blur(10px) brightness(.25)',
+							padding: 8,
+							marginTop: 34,
+							borderTopLeftRadius: 4,
+							color: theme.accentColor,
+						}}
+					>
+						{re.exec(item.toUpperCase())?.[1]}
+					</Text>
+				)}
+			</Group>
 		</UnstyledButton>
 	));
 
 	useEffect(() => {
 		if (selectedTheme) {
-			setQuery(selectedTheme?.backgroundImage || '');
+			if (selectedTheme?.backgroundImage === 'none') {
+				setQuery('');
+			} else {
+				setQuery(selectedTheme?.backgroundImage || '');
+			}
 		}
 	}, [selectedTheme]);
 
@@ -273,44 +312,65 @@ function ThemeModal({
 							)}
 						</Stack>
 						<Stack h={'100%'} w={'50%'} align='center' justify='center'>
-							<TextInput
+							<Group gap={0}>
-								className={textInputClasses.default}
+								<Text mr={8}>Search:</Text>
-								classNames={textInputClasses}
+								<TextInput
-								value={query}
+									className={textInputClasses.default}
-								onChange={(event) => {
+									classNames={textInputClasses}
-									setQuery(event.currentTarget.value);
+									value={query.replace(/\.[^/.]+$/, '')}
-									setHovered(-1);
+									rightSection={
-								}}
+										<FiX
-								onKeyDown={(event) => {
+											style={{
-									if (event.key === 'ArrowDown') {
+												cursor: 'pointer',
-										event.preventDefault();
+												margin: '4px',
-										setHovered((current) => {
+											}}
-											const nextIndex =
+											onClick={() => {
-												current + 1 >= filtered.length ? current : current + 1;
+												setQuery('');
-											viewportRef.current
+											}}
-												?.querySelectorAll('[data-list-item]')
+										/>
-												?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
-											return nextIndex;
-										});
 									}
+									onChange={(event) => {
+										setQuery(event.currentTarget.value);
+										setHovered(-1);
+									}}
+									onKeyDown={(event) => {
+										if (event.key === 'ArrowDown') {
+											event.preventDefault();
+											setHovered((current) => {
+												const nextIndex =
+													current + 1 >= filtered.length ? current : current + 1;
+												viewportRef.current
+													?.querySelectorAll('[data-list-item]')
+													?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+												return nextIndex;
+											});
+										}
 
-									if (event.key === 'ArrowUp') {
+										if (event.key === 'ArrowUp') {
-										event.preventDefault();
+											event.preventDefault();
-										setHovered((current) => {
+											setHovered((current) => {
-											const nextIndex = current - 1 < 0 ? current : current - 1;
+												const nextIndex = current - 1 < 0 ? current : current - 1;
-											viewportRef.current
+												viewportRef.current
-												?.querySelectorAll('[data-list-item]')
+													?.querySelectorAll('[data-list-item]')
-												?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
+													?.[nextIndex]?.scrollIntoView({ block: 'nearest' });
-											return nextIndex;
+												return nextIndex;
-										});
+											});
-									}
+										}
+									}}
+								/>
+							</Group>
+							<ScrollArea.Autosize
+								viewportRef={viewportRef}
+								style={{
+									height: 150,
+									width: '90%',
+									borderRadius: 8,
 								}}
-							/>
+							>
-							<ScrollArea viewportRef={viewportRef} h={150} w={'100%'}>
+								<Stack gap={0} align='center' display={'block'}>
-								<Stack gap={0} align='center'>
 									{items}
 								</Stack>
-							</ScrollArea>
+							</ScrollArea.Autosize>
 						</Stack>
 					</Group>
 					<Divider color='black' my='sm' />