[chrome] small visual improvements to settings page

Author: velzie

packages/chrome/src/components/BookmarksStrip.tsx

@@ -87,16 +87,6 @@ BookmarksStrip.style = css`
 		gap: 0.5em;
 		background: var(--toolbar);
 		color: var(--toolbar_text);
-		--toolbarbutton-hover-background: color-mix(
-			in srgb,
-			currentColor 17%,
-			transparent
-		);
-		--toolbarbutton-active-background: color-mix(
-			in srgb,
-			currentColor 30%,
-			transparent
-		);
 	}
 
 	button {

packages/chrome/src/pages/SettingsPage.tsx

@@ -65,6 +65,11 @@ export function SettingsPage(
 					/>
 				</div>
 				<div class="settings-content">
+					<h1>
+						{use(this.selected).map(
+							(s) => s.charAt(0).toUpperCase() + s.slice(1)
+						)}
+					</h1>
 					{/* General Tab */}
 					{use(this.selected).map((selected) =>
 						selected === "general" ? (
@@ -390,7 +395,6 @@ export function SettingsPage(
 					{use(this.selected).map((selected) =>
 						selected === "about" ? (
 							<div class="settings-tab">
-								<h3>About</h3>
 								<section class="setting-section">
 									<div class="section-header"></div>
 									<div class="section-content">
@@ -547,8 +551,7 @@ SettingsPage.style = css`
 	}
 
 	.search-container {
-		padding: 1.5rem 2rem;
-		border-bottom: 1px solid var(--ntp-text-15);
+		padding: 1rem 1rem;
 	}
 
 	input {
@@ -615,6 +618,10 @@ SettingsPage.style = css`
 		padding: 1.5rem 2rem 2rem;
 		overflow-y: auto;
 	}
+	.settings-content h1 {
+		margin-bottom: 1.5rem;
+		font-size: 1.75rem;
+	}
 
 	.settings-tab {
 		max-width: 50rem;