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