style: soften wind unit selector
This commit is contained in:
@@ -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)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user