Default Search Provider support; Style updates

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

@@ -19,7 +19,7 @@ import { useCommonHooks } from 'hooks';
 import { useEffect, useRef, useState } from 'react';
 import { FiImage, FiSave, FiX } from 'react-icons/fi';
 import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles';
-import type { Theme } from 'types';
+import { BackgroundProperties, type Theme } from 'types';
 import { ThemeModalContent } from './ThemeModalContent';
 
 export function ThemeModal({
@@ -304,7 +304,8 @@ export function ThemeModal({
 												: undefined,
 										}}
 									>
-										Change {colorId}
+										Change{' '}
+										{BackgroundProperties[colorId as keyof typeof BackgroundProperties]}
 									</Text>
 									{colorId === 'backgroundColor' && (
 										<ColorPicker
@@ -556,7 +557,13 @@ export function ThemeModal({
 																		gap={0}
 																		key={key}
 																	>
-																		<Text key={key}>{key}</Text>
+																		<Text key={key}>
+																			{
+																				BackgroundProperties[
+																					key as keyof typeof BackgroundProperties
+																				]
+																			}
+																		</Text>
 																		{key === 'name' && (
 																			<Group w={'100%'} justify='center'>
 																				<Text>{defaultTheme[key as keyof Theme]}</Text>
@@ -568,14 +575,18 @@ export function ThemeModal({
 																			<Group w={'100%'} justify='center'>
 																				<Image
 																					w={'40%'}
-																					src={`../../api/backgroundImages/thumbs/${defaultTheme[key as keyof Theme] as string}`}
-																					alt='None'
+																					src={
+																						(
+																							defaultTheme[key as keyof Theme] as string
+																						).toLocaleLowerCase() === 'none'
+																							? 'https://placehold.co/540x360?text=None'
+																							: `../../api/backgroundImages/thumbs/${defaultTheme[key as keyof Theme] as string}`
+																					}
 																				/>
 																				<Text>→</Text>
 																				<Image
 																					w={'40%'}
 																					src={`../../api/backgroundImages/thumbs/${designerTheme[key as keyof Theme] as string}`}
-																					alt='None'
 																				/>
 																			</Group>
 																		)}
@@ -621,6 +632,7 @@ export function ThemeModal({
 										onClick={() => {
 											setSelectedTheme({ ...defaultTheme });
 										}}
+										mih={'36px'}
 									>
 										Reset Changes
 									</Button>

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

@@ -85,10 +85,6 @@ export function Themes() {
 		});
 	};
 
-	const handleBackgroundModalClose = () => {
-		closeBackgroundModal();
-	};
-
 	const handleSaveTheme = () => {
 		mutateAsync({
 			method: selectedTheme?.id === undefined ? 'POST' : 'PATCH',
@@ -154,7 +150,7 @@ export function Themes() {
 			/>
 			<BackgroundModal
 				backgroundModalOpened={backgroundModalOpened}
-				handleBackgroundModalClose={handleBackgroundModalClose}
+				closeModal={closeBackgroundModal}
 				backgroundList={backgroundList}
 				inUseBackgrounds={inUseBackgrounds}
 			/>