style: soften wind unit selector

This commit is contained in:
zv
2026-06-13 19:59:43 +02:00
parent 7ad95550eb
commit 72de545282

View File

@@ -354,17 +354,17 @@ export function SettingsPage() {
<ThemeToggle />
</SettingsRow>
<SettingsRow icon={Wind} title={t("settings.units.wind.title")} description={t("settings.units.wind.description")}>
<div className="surface-control inline-flex rounded-control p-1" role="radiogroup" aria-label={t("settings.units.wind.label")}>
<div className="surface-control inline-flex rounded-full p-1" role="radiogroup" aria-label={t("settings.units.wind.label")}>
{WIND_SPEED_UNITS.map((unit) => (
<button
key={unit}
type="button"
role="radio"
aria-checked={windSpeedUnit === unit}
className={`rounded-[calc(var(--radius-control)-0.25rem)] px-3 py-1.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
className={`min-w-14 rounded-full border px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${
windSpeedUnit === unit
? "bg-accent text-accent-foreground shadow-soft"
: "text-muted hover:text-foreground"
? "border-accent/45 bg-accent/10 text-accent shadow-soft"
: "border-transparent text-muted hover:bg-surface-muted/70 hover:text-foreground"
}`}
onClick={() => setWindSpeedUnit(unit)}
>