Style bugfixes

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

@@ -246,7 +246,7 @@ function ThemeModal({
 								<ColorSwatch
 									onClick={() => {
 										closeBackgroundPicker();
-										setColorId('searchBackground');
+										setColorId('searchColor');
 										openPicker();
 										setColorValue(selectedTheme.searchColor);
 									}}
@@ -338,7 +338,7 @@ function ThemeModal({
 															borderColor: colorValue,
 														});
 														break;
-													case 'searchBackground':
+													case 'searchColor':
 														setSelectedTheme({
 															...selectedTheme,
 															searchColor: colorValue,

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

@@ -31,6 +31,14 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 				disabled
 				w={'80%'}
 				classNames={selectClasses}
+				className={selectClasses.searchExample}
+				styles={{
+					input: {
+						color: selectedTheme?.primaryColor,
+						borderBottom: `thin solid ${selectedTheme?.borderColor}`,
+						backgroundColor: `color-mix(in srgb, ${selectedTheme?.searchColor}, transparent 50%)`,
+					},
+				}}
 				data={[
 					{
 						label: 'Google Search',

src/styles/Select.module.css

@@ -144,3 +144,43 @@
 		opacity: 1;
 	}
 }
+
+.searchExample {
+	.wrapper {
+	display: flex;
+	justify-content: center;
+	.input {
+		border: 0;
+		border-bottom: thin solid var(--mantine-color-border-0);
+		background-color: transparent;
+		font-style: italic;
+		font-size: 0.8rem;
+		height: 3.5em;
+		transition: all 0.4s ease;
+		width: 50%;
+		padding-left: 1rem;
+		padding-right: 1rem;
+		text-align: center;
+		&[data-active="true"] {
+			border-color: var(--mantine-color-border-0);
+			outline: none;
+			font-style: normal;
+			font-weight: 500;
+			font-size: 1.2rem;
+			letter-spacing: .2em;
+			width: 100%;
+			border-top-left-radius: .25em;
+			border-top-right-radius: .25em;
+			border-bottom-left-radius: .25em;
+			border-bottom-right-radius: .25em;
+		}
+	}
+	.section {
+		transition: opacity 0.1s 0s ease;
+		color: var(--mantine-color-border-0);
+		width: auto;
+		padding-left: .5rem;
+		opacity: 0;
+	}
+}
+}