style: header design improvements

src/components/FeedbackPrompt.tsx

@@ -1,6 +1,10 @@
 import { useState } from "react";
+import {
+	MdOutlineThumbUp,
+	MdOutlineThumbDown,
+	MdCheckCircleOutline,
+} from "react-icons/md";
 import { Turnstile } from "@marsidev/react-turnstile";
-import { MdOutlineThumbUp, MdOutlineThumbDown } from "react-icons/md";
 import { track } from "~/util/zaraz";
 
 type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
@@ -30,26 +34,28 @@ function Buttons({
 	setOption: SetState<"yes" | "no" | undefined>;
 }) {
 	return (
-		<>
+		<div className="mt-3 flex gap-2">
 			<button
 				onClick={() => {
 					setTitle("What did you like?");
 					setOption("yes");
 				}}
-				className="cursor-pointer bg-transparent"
+				className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-[var(--sl-color-bg-nav)] px-3 text-[13px] font-medium text-[var(--sl-color-text)] shadow-none ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] dark:hover:bg-[var(--color-cl1-gray-2)]"
 			>
-				<MdOutlineThumbUp className="text-sl hover:text-accent text-2xl" />
+				<MdOutlineThumbUp size={18} className="opacity-70" />
+				<span>Yes</span>
 			</button>
 			<button
 				onClick={() => {
 					setTitle("What went wrong?");
 					setOption("no");
 				}}
-				className="cursor-pointer bg-transparent"
+				className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-[var(--sl-color-bg-nav)] px-3 text-[13px] font-medium text-[var(--sl-color-text)] shadow-none ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] dark:hover:bg-[var(--color-cl1-gray-2)]"
 			>
-				<MdOutlineThumbDown className="text-sl hover:text-accent text-2xl" />
+				<MdOutlineThumbDown size={18} className="opacity-70" />
+				<span>No</span>
 			</button>
-		</>
+		</div>
 	);
 }
 
@@ -89,51 +95,84 @@ function Form({
 	}
 
 	return (
-		<form action={submit}>
-			{questions[option].map(([label, value]) => (
-				<label key={value} className="mb-2 block text-xs">
-					<input
-						type="radio"
-						name="reason"
-						value={value}
-						onChange={() => setSelectedReason(true)}
-						className="mr-2 align-middle"
-					/>
-					{label}
-				</label>
-			))}
+		<form action={submit} className="mt-3 flex flex-col gap-2">
+			<fieldset className="m-0 border-0 p-0">
+				<legend className="sr-only">
+					{option === "yes" ? "What did you like?" : "What went wrong?"}
+				</legend>
+				<div className="flex flex-col gap-1.5">
+					{questions[option].map(([label, value]) => (
+						<label
+							key={value}
+							className="relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13px] text-[var(--sl-color-text)] ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 select-none hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] has-[:checked]:ring-[var(--sl-color-text-accent)] has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--sl-color-text-accent)] has-[:focus-visible]:outline-none dark:hover:bg-[var(--color-cl1-gray-2)]"
+						>
+							<input
+								type="radio"
+								name="reason"
+								value={value}
+								onChange={() => setSelectedReason(true)}
+								className="peer absolute top-0 left-0 h-full w-full cursor-pointer opacity-0"
+							/>
+							{/* Outer ring — becomes accent-colored when checked or focused */}
+							<span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full ring-1 ring-[var(--sl-color-gray-3)] transition-all duration-150 peer-checked:ring-2 peer-checked:ring-[var(--sl-color-text-accent)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--sl-color-text-accent)]">
+								{/* Inner dot — visible when checked or focused */}
+								<span className="h-2 w-2 scale-0 rounded-full bg-[var(--sl-color-text-accent)] transition-transform duration-150 [label:has(:checked)_&]:scale-100 [label:has(:focus-visible)_&]:scale-100" />
+							</span>
+							<span className="leading-tight">{label}</span>
+						</label>
+					))}
+				</div>
+			</fieldset>
 			<textarea
 				name="info"
+				rows={2}
 				placeholder="Tell us more about your experience."
-				className="mb-2 block resize-none text-xs"
+				className="mt-1 w-full resize-none rounded-lg border-0 bg-white px-3 py-2 text-[13px] text-[var(--sl-color-text)] ring-1 ring-[var(--sl-color-hairline)] transition-all duration-150 outline-none placeholder:text-[var(--sl-color-gray-3)] focus:ring-2 focus:ring-[var(--sl-color-text-accent)] dark:bg-[var(--sl-color-bg-nav)]"
 			/>
 			<Turnstile
 				siteKey="0x4AAAAAAA645TGhxiBMQ7Gu"
 				options={{ size: "compact" }}
 				onSuccess={() => setPassedTurnstile(true)}
 			/>
-			<input
+			<button
 				type="submit"
-				value="Submit"
 				disabled={!selectedReason || !passedTurnstile}
-				className="mt-2"
-			/>
+				className="mt-1 inline-flex h-8 w-max cursor-pointer items-center justify-center rounded-lg border-0 bg-[var(--sl-color-text-accent)] px-4 text-[13px] font-medium text-white shadow-none transition-colors duration-150 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+			>
+				Submit
+			</button>
 		</form>
 	);
 }
 
+function SuccessState() {
+	return (
+		<div className="mt-3 flex items-center gap-2 rounded-lg bg-[var(--color-cl1-green-9)] px-3 py-2.5 text-[13px] text-[var(--color-cl1-green-5)] dark:bg-[var(--color-cl1-green-0)] dark:text-[var(--color-cl1-green-7)]">
+			<MdCheckCircleOutline size={16} />
+			<span>Thank you for your feedback!</span>
+		</div>
+	);
+}
+
 export default function FeedbackPrompt() {
 	const [title, setTitle] = useState("Was this helpful?");
 	const [option, setOption] = useState<"yes" | "no">();
 	const [submitted, setSubmitted] = useState(false);
 
 	return (
 		<div id="feedback-form">
-			<h2>{title}</h2>
-			{!option && <Buttons setTitle={setTitle} setOption={setOption} />}
+			{!submitted && (
+				<p className="m-0 text-[11px] font-semibold tracking-widest text-[var(--sl-color-gray-3)] uppercase">
+					{title}
+				</p>
+			)}
+			{!option && !submitted && (
+				<Buttons setTitle={setTitle} setOption={setOption} />
+			)}
 			{!submitted && (
 				<Form setTitle={setTitle} setSubmitted={setSubmitted} option={option} />
 			)}
+			{submitted && <SuccessState />}
 		</div>
 	);
 }

src/components/HeaderDropdowns.tsx

@@ -34,7 +34,7 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
 	const { refs, floatingStyles, context } = useFloating({
 		open: isOpen,
 		onOpenChange: setIsOpen,
-		middleware: [shift(), offset(5)],
+		middleware: [shift(), offset(8)],
 		whileElementsMounted: autoUpdate,
 	});
 
@@ -51,23 +51,23 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
 			<button
 				ref={refs.setReference}
 				{...getReferenceProps()}
-				className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent p-2 font-medium hover:shadow-md"
+				className="flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-transparent px-3 text-sm font-medium text-[var(--color-header-text)] transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
 			>
 				{label}
-				<PiCaretDownBold />
+				<PiCaretDownBold className="size-2.5 text-[var(--color-header-text-subtle)]" />
 			</button>
 			{isOpen && (
 				<ul
 					ref={refs.setFloating}
 					style={floatingStyles}
 					{...getFloatingProps()}
-					className="border-cl1-gray-8 bg-cl1-white dark:border-cl1-gray-1 dark:bg-cl1-gray-0 max-w-80 min-w-60 list-none rounded-sm border pl-0 shadow-md"
+					className="max-w-64 min-w-44 list-none rounded-lg border border-[var(--color-header-overlay-line)] bg-[var(--color-header-overlay-bg)] p-1 shadow-[0_4px_16px_var(--color-header-overlay-shadow)]"
 				>
 					{pages.map((page) => (
-						<li key={page.href}>
+						<li key={page.href} className="list-none">
 							<a
 								href={page.href}
-								className="8 hover:bg-cl1-gray-9 dark:hover:bg-cl1-gray-1 block p-3 text-black no-underline"
+								className="block rounded-md px-2.5 py-1.5 text-sm text-[var(--color-header-text)] no-underline transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
 								target={page.href.startsWith("https") ? "_blank" : undefined}
 							>
 								{page.label}
@@ -82,12 +82,12 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
 
 export default function HeaderDropdownsComponent() {
 	return (
-		<div className="flex gap-2 leading-6 text-nowrap">
+		<div className="flex items-center gap-0.5 text-nowrap">
 			{links.map(({ label, href }) => (
 				<a
 					key={href}
 					href={href}
-					className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex items-center justify-center rounded-sm p-2 font-medium text-black no-underline hover:shadow-md"
+					className="flex h-9 items-center justify-center rounded-lg px-3 text-sm font-medium text-[var(--color-header-text)] no-underline transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
 				>
 					{label}
 				</a>

src/components/changelog/Header.astro

@@ -19,7 +19,8 @@ const products = directory.filter(
 );
 
 const filteredGroups = groups.filter((group) => {
-	const groupProducts = directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
+	const groupProducts =
+		directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
 	return groupProducts.some((p) => changelogProductIds.includes(p.id));
 });
 
@@ -43,16 +44,18 @@ const currentPath = Astro.url.pathname;
 				icon="right-caret"
 			/>
 		</div>
-		{showProductSelect && (
-			<div class="not-content">
-				<ProductSelect
-					client:load
-					products={products}
-					groups={filteredGroups}
-					currentPath={currentPath}
-				/>
-			</div>
-		)}
+		{
+			showProductSelect && (
+				<div class="not-content">
+					<ProductSelect
+						client:load
+						products={products}
+						groups={filteredGroups}
+						currentPath={currentPath}
+					/>
+				</div>
+			)
+		}
 	</div>
 	<Image
 		src={HeroImage}

src/components/overrides/Footer.astro

@@ -165,14 +165,6 @@ if (
 	.feedback-prompt {
 		padding-top: 2rem;
 		margin-bottom: 2rem;
-
-		h2 {
-			color: var(--sl-color-white);
-			font-size: var(--sl-text-h5);
-			font-weight: 600;
-			line-height: var(--sl-line-height-headings);
-			margin-bottom: 0.5rem;
-		}
 	}
 
 	.starlight-footer-section {