Minor style updates

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

@@ -244,6 +244,13 @@ export function ThemeEditor({
 							}}
 							pos={'absolute'}
 							right={0}
+							style={{
+								color: selectedTheme.backgroundColor,
+								backgroundColor: selectedTheme.primaryColor,
+								borderRadius: 0,
+								borderBottomLeftRadius: 10,
+								borderTopRightRadius: 10,
+							}}
 						>
 							<FiImage size={20} />
 						</ActionIcon>
@@ -273,7 +280,7 @@ export function ThemeEditor({
 								Change{' '}
 								{BackgroundProperties[colorId as keyof typeof BackgroundProperties]}
 							</Text>
-							{colorId === 'backgroundColor' && (
+							{(colorId === 'backgroundColor' || colorId === 'searchColor') && (
 								<ColorPicker
 									value={colorValue}
 									onChange={(e) => {
@@ -283,12 +290,11 @@ export function ThemeEditor({
 											backgroundColor: e,
 										});
 									}}
-									format={'hex'}
+									format={'hexa'}
 									w={'90%'}
-									mb={'1.5rem'}
 								/>
 							)}
-							{colorId !== 'backgroundColor' && (
+							{colorId !== 'backgroundColor' && colorId !== 'searchColor' && (
 								<ColorPicker
 									value={colorValue}
 									onChange={(e) => {
@@ -298,8 +304,9 @@ export function ThemeEditor({
 											[colorId]: e,
 										});
 									}}
-									format={'hexa'}
+									format={'hex'}
 									w={'90%'}
+									mb={'1.5rem'}
 								/>
 							)}
 							<TextInput
@@ -528,7 +535,7 @@ export function ThemeEditor({
 																	</Group>
 																)}
 																{key === 'backgroundImage' && (
-																	<Group w={'100%'} justify='center'>
+																	<Group w={'100%'} justify='center' gap={4}>
 																		<Image
 																			w={'40%'}
 																			src={