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'
-			bg={index === hovered ? `no-repeat center url(/backgrounds/${item})` : `no-repeat center url(/backgrounds/${item})`}
-			p={50}
-			w={'90%'}
+			style={{
+				width: '100%',
+				height: '75px',
+				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,14 +63,44 @@ 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) {
+			if (selectedTheme?.backgroundImage === 'none') {
+				setQuery('');
+			} else {
 				setQuery(selectedTheme?.backgroundImage || '');
 			}
+		}
 	}, [selectedTheme]);
 
 	return (
@@ -273,10 +312,23 @@ function ThemeModal({
 							)}
 						</Stack>
 						<Stack h={'100%'} w={'50%'} align='center' justify='center'>
+							<Group gap={0}>
+								<Text mr={8}>Search:</Text>
 								<TextInput
 									className={textInputClasses.default}
 									classNames={textInputClasses}
-								value={query}
+									value={query.replace(/\.[^/.]+$/, '')}
+									rightSection={
+										<FiX
+											style={{
+												cursor: 'pointer',
+												margin: '4px',
+											}}
+											onClick={() => {
+												setQuery('');
+											}}
+										/>
+									}
 									onChange={(event) => {
 										setQuery(event.currentTarget.value);
 										setHovered(-1);
@@ -306,11 +358,19 @@ function ThemeModal({
 										}
 									}}
 								/>
-							<ScrollArea viewportRef={viewportRef} h={150} w={'100%'}>
-								<Stack gap={0} align='center'>
+							</Group>
+							<ScrollArea.Autosize
+								viewportRef={viewportRef}
+								style={{
+									height: 150,
+									width: '90%',
+									borderRadius: 8,
+								}}
+							>
+								<Stack gap={0} align='center' display={'block'}>
 									{items}
 								</Stack>
-							</ScrollArea>
+							</ScrollArea.Autosize>
 						</Stack>
 					</Group>
 					<Divider color='black' my='sm' />