style(type): raise the too-small toolbar and filter text toward the view-switcher size
The view-switcher's 16px reads comfortably; the toolbar and filter controls sat at 12px. Bring the marked controls up to match, and lift the general scale on the shared filter surfaces. - Toolbar (feed + channel + Plex, via the shared components): FilterSelect and SortControl trigger pills text-xs → text-base (16px, the view-switcher size); the result count → text-sm; the active-filter chips → text-sm with the "FILTERED BY" label text-2xs → text-xs. - Filterbar: the Combobox picker input → text-base (matching the toolbar pills) + its chips → text-sm; the panel/widget headers (SidePanel collapsed-rail + panel title, PanelGroup widget titles) up one step. Channel info and the manager tables were already at 14–16px (readable), so they were left as-is.
This commit is contained in:
@@ -21,7 +21,7 @@ export default function ActiveFilterChips({
|
||||
className="flex flex-wrap items-center gap-1.5 pb-3"
|
||||
aria-label={t("feed.chips.label")}
|
||||
>
|
||||
<span className="text-2xs uppercase tracking-wider text-muted mr-0.5">
|
||||
<span className="text-xs uppercase tracking-wider text-muted mr-0.5">
|
||||
{t("feed.chips.label")}
|
||||
</span>
|
||||
{filters.map((f) => (
|
||||
@@ -32,7 +32,7 @@ export default function ActiveFilterChips({
|
||||
onClick={f.remove}
|
||||
title={t("feed.chips.remove", { name: f.label })}
|
||||
aria-label={t("feed.chips.remove", { name: f.label })}
|
||||
className="chip group pl-2.5 pr-1.5 py-1 text-xs hover:border-accent hover:bg-accent/20 transition"
|
||||
className="chip group pl-2.5 pr-1.5 py-1 text-sm hover:border-accent hover:bg-accent/20 transition"
|
||||
>
|
||||
<span className="max-w-56 truncate">{f.label}</span>
|
||||
<X className="w-3 h-3 shrink-0 opacity-60 group-hover:opacity-100" />
|
||||
@@ -42,7 +42,7 @@ export default function ActiveFilterChips({
|
||||
<button
|
||||
data-testid="active-filter-clear-all"
|
||||
onClick={onClearAll}
|
||||
className="ml-0.5 text-xs text-muted hover:text-fg underline underline-offset-2 transition"
|
||||
className="ml-0.5 text-sm text-muted hover:text-fg underline underline-offset-2 transition"
|
||||
>
|
||||
{t("sidebar.clearAll")}
|
||||
</button>
|
||||
|
||||
@@ -154,7 +154,7 @@ export default function Combobox({
|
||||
className="glass-card flex min-h-9 w-full cursor-text flex-wrap items-center gap-1 rounded-lg border border-border px-1.5 py-1 transition focus-within:border-accent focus-within:ring-2 focus-within:ring-accent/30"
|
||||
>
|
||||
{selected.map((v) => (
|
||||
<span key={v} className="chip inline-flex items-center gap-1 px-2 py-0.5 text-xs">
|
||||
<span key={v} className="chip inline-flex items-center gap-1 px-2 py-0.5 text-sm">
|
||||
<span className="max-w-36 truncate">{labelFor(v)}</span>
|
||||
<button
|
||||
type="button"
|
||||
@@ -197,7 +197,7 @@ export default function Combobox({
|
||||
? (placeholder ?? t("common.search", { defaultValue: "Search" }))
|
||||
: ""
|
||||
}
|
||||
className="min-w-16 flex-1 bg-transparent px-1 py-0.5 text-sm outline-hidden placeholder:text-muted/60"
|
||||
className="min-w-16 flex-1 bg-transparent px-1 py-0.5 text-base outline-hidden placeholder:text-muted/60"
|
||||
/>
|
||||
<ChevronDown className="pointer-events-none mr-0.5 h-3.5 w-3.5 shrink-0 text-muted" />
|
||||
</div>
|
||||
|
||||
@@ -617,7 +617,7 @@ export default function Feed({
|
||||
</>
|
||||
)}
|
||||
<span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
|
||||
<span data-testid="feed-result-count" className="text-xs text-muted whitespace-nowrap">
|
||||
<span data-testid="feed-result-count" className="text-sm text-muted whitespace-nowrap">
|
||||
{summaryQuery.data
|
||||
? t("feed.videoCount", {
|
||||
count: summaryQuery.data.count,
|
||||
|
||||
@@ -82,7 +82,7 @@ export default function FilterSelect({
|
||||
{...pop.getReferenceProps()}
|
||||
data-testid={testId}
|
||||
aria-label={label}
|
||||
className={`glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition ${
|
||||
className={`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"
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -56,7 +56,7 @@ export default function PanelGroup({
|
||||
<button
|
||||
onClick={editing ? undefined : onToggleCollapse}
|
||||
disabled={editing}
|
||||
className="flex-1 min-w-0 flex items-center text-left select-none text-xs uppercase tracking-wide text-muted enabled:hover:text-fg transition"
|
||||
className="flex-1 min-w-0 flex items-center text-left select-none text-sm uppercase tracking-wide text-muted enabled:hover:text-fg transition"
|
||||
>
|
||||
<span className="truncate">{title}</span>
|
||||
</button>
|
||||
|
||||
@@ -74,7 +74,7 @@ export default function SidePanel({
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className="text-2xs font-semibold uppercase tracking-[0.18em] text-muted"
|
||||
className="text-xs font-semibold uppercase tracking-[0.18em] text-muted"
|
||||
style={{ writingMode: "vertical-rl", transform: "rotate(180deg)" }}
|
||||
>
|
||||
{title}
|
||||
@@ -98,7 +98,7 @@ export default function SidePanel({
|
||||
{pinned ? <PinOff className="w-4 h-4" /> : <Pin className="w-4 h-4" />}
|
||||
</button>
|
||||
<span className="shrink-0 flex text-accent">{icon}</span>
|
||||
<span className="flex-1 min-w-0 truncate text-xs font-bold uppercase tracking-[0.12em]">
|
||||
<span className="flex-1 min-w-0 truncate text-sm font-bold uppercase tracking-[0.12em]">
|
||||
{title}
|
||||
</span>
|
||||
{count > 0 && (
|
||||
|
||||
@@ -68,7 +68,7 @@ export default function SortControl({
|
||||
ref={pop.refs.setReference}
|
||||
{...pop.getReferenceProps()}
|
||||
aria-label={label}
|
||||
className={`glass-card glass-hover inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition ${
|
||||
className={`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"
|
||||
}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user