style(viewswitcher): unify the ViewSwitcher trigger with the FilterSelect pill
The user prefers FilterSelect's rounded-full glass pill over the ViewSwitcher's squarer rounded-lg trigger. Give the ViewSwitcher trigger the same look — glass-card/glass-hover, rounded-full, px-3 py-1, open→border-accent, and a 16px label (was text-sm) — so the two read as one control family. Applies to every ViewSwitcher consumer (feed, channel manager, Plex playlists). Native <select>s, the Combobox input box, and playlist/list cards are a different control class (form fields / variable-height inputs / cards) and keep their own shape.
This commit is contained in:
@@ -65,12 +65,14 @@ export default function ViewSwitcher<T extends string>({
|
||||
// nicety for wide windows, not the accessible name.
|
||||
aria-label={`${label}: ${current.label}`}
|
||||
title={`${label}: ${current.label}`}
|
||||
className="shrink-0 inline-flex items-center gap-1 pl-2 pr-1 py-1.5 rounded-lg border border-border bg-card text-fg hover:border-accent hover:text-accent active:translate-y-px transition"
|
||||
className={`shrink-0 glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-base transition ${
|
||||
open ? "border-accent" : "border-border"
|
||||
}`}
|
||||
>
|
||||
<CurrentIcon className="w-4 h-4 shrink-0" />
|
||||
<span className={clsx("text-sm whitespace-nowrap", labelClassName)}>{current.label}</span>
|
||||
<span className={clsx("whitespace-nowrap", labelClassName)}>{current.label}</span>
|
||||
<ChevronDown
|
||||
className={`w-3 h-3 shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
|
||||
className={`h-3.5 w-3.5 shrink-0 text-muted transition-transform ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
</button>
|
||||
<PopoverSurface
|
||||
|
||||
Reference in New Issue
Block a user