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 /> <ThemeToggle />
</SettingsRow> </SettingsRow>
<SettingsRow icon={Wind} title={t("settings.units.wind.title")} description={t("settings.units.wind.description")}> <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) => ( {WIND_SPEED_UNITS.map((unit) => (
<button <button
key={unit} key={unit}
type="button" type="button"
role="radio" role="radio"
aria-checked={windSpeedUnit === unit} 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 windSpeedUnit === unit
? "bg-accent text-accent-foreground shadow-soft" ? "border-accent/45 bg-accent/10 text-accent shadow-soft"
: "text-muted hover:text-foreground" : "border-transparent text-muted hover:bg-surface-muted/70 hover:text-foreground"
}`} }`}
onClick={() => setWindSpeedUnit(unit)} onClick={() => setWindSpeedUnit(unit)}
> >