dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ask pill joins the glass; Aero hovers light the pane, not move it

Browse source 
The Ask button (and the two phone icon pills sharing its styling) was a
hand-styled bg-[var(--surface-strong)] pill that never picked up the
frosted recipe - it showed the sharp wallpaper through a flat tint while
everything around it showed the blurred one. It carries a glass-pill
class and is part of the same recipe now.

Hover feedback: a transform or filter on a pane with a viewport-fixed
backdrop re-anchors the glass, so the deck card's hover lift made the
card flash a wrong crop of the wallpaper (and filter: brightness() on
the buttons, plus the mobile :active scale foundation, would have done
the same). Aero's feedback no longer moves or filters the glass: the
pane lights up with an inner glow, a white rim and a deeper shadow over
170ms, and the pressed state shades inward.

Contrast: 0 below-minimum findings, 0 axe violations. Version 0.3.3,
SW -> freezmo-v64.
This commit is contained in:
Martin Dvořák 2026-10-13 12:11:23 +00:00
commit 70ddc5e753
5 changed files with 75 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/LibraryScreen.tsx
View file

@ -203,7 +203,7 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
{/* Desktop keeps Import above the tabs; phones get a small icon
button in the tab row instead. */}
<div className="hidden flex-wrap items-center gap-2 sm:flex">
<Link href="/chat" className="touch-target inline-flex items-center gap-2 rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] px-4 py-2.5 text-sm font-semibold text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]">
<Link href="/chat" className="glass-pill touch-target inline-flex items-center gap-2 rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] px-4 py-2.5 text-sm font-semibold text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]">
<ChatIcon className="size-4" />
{t("chat.ask")}
</Link>
@ -254,7 +254,7 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
href="/chat"
aria-label={t("chat.ask")}
title={t("chat.ask")}
className="touch-target grid size-11 shrink-0 place-items-center rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] sm:hidden"
className="glass-pill touch-target grid size-11 shrink-0 place-items-center rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] sm:hidden"
>
<ChatIcon className="size-5" />
</Link>
@ -263,7 +263,7 @@ export function LibraryScreen({ initialTab = "decks" }: { initialTab?: "decks" |
onClick={() => setSheetOpen(true)}
aria-label={t("library.moreActions")}
title={t("library.moreActions")}
className="touch-target grid size-11 shrink-0 place-items-center rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] sm:hidden"
className="glass-pill touch-target grid size-11 shrink-0 place-items-center rounded-2xl border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] sm:hidden"
>
<EllipsisIcon className="size-5" />
</button>