refactor(landing): use .page-header-glass for the nav bar (Brief 6) #120

Merged

varutasu merged 1 commit from brief-6-landing-nav-page-header-glass into main

2026-06-04 16:30:23 -04:00

varutasu commented

2026-06-04 15:11:35 -04:00

(Migrated from github.com)

Summary

Brief 6 of unify-glass-panel-surfaces. Migrates the landing <nav> bar from handrolled inline glass styles + a malformed boxShadow to the canonical .page-header-glass border-b className.

Files changed

pages/index.js — <nav> className/style swap. Net diff: -7 / +1.

What changed

- <nav
-   className="border-b"
-   style={{
-     background: 'var(--glass-surface-mid)',
-     backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
-     WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
-     borderColor: 'var(--border)',
-     boxShadow: 'inset 0 1px 0 var(--rim-light-inner)',
-   }}
- >
+ <nav
+   className="page-header-glass border-b"
+   style={{ borderColor: 'var(--border)' }}
+ >

The malformed boxShadow was a real (silent) bug: var(--rim-light-inner) is a complete inset 0 1px 0 <color> declaration; wrapping it in another inset 0 1px 0 ... produces invalid CSS that the browser drops entirely. The .page-header-glass class's own box-shadow: var(--rim-light-inner), 0 1px 0 var(--border) is the correct shape.

Acceptance criteria

<nav> uses className="page-header-glass border-b"
Inline style retains only borderColor: 'var(--border)' — no background, backdropFilter, WebkitBackdropFilter, boxShadow
Children (AnimatedFireLogo, Deck Hearth heading, Sign In / Get Started buttons) unchanged
npm run lint passes (one pre-existing warning in components/CollectionsPageView.js, unrelated)

Test plan

Open / in an incognito window (anonymous user). Verify the nav bar renders with a subtle glass treatment, an inset 1px top highlight, and a 1px bottom border.
Toggle theme (the public landing has a theme toggle). Verify both light + dark render correctly.
Click Sign In and Get Started — both should route normally.

Convoy: .convoys/unify-glass-panel-surfaces.md
Brief: .convoys/unify-glass-panel-surfaces/brief-6-landing-nav-bar.md
Architect plan: PR #119 (merged)

Made with Cursor

## Summary Brief 6 of `unify-glass-panel-surfaces`. Migrates the landing `<nav>` bar from handrolled inline glass styles + a malformed `boxShadow` to the canonical `.page-header-glass border-b` className. ## Files changed - `pages/index.js` — `<nav>` className/style swap. Net diff: **-7 / +1**. ## What changed ```diff - <nav - className="border-b" - style={{ - background: 'var(--glass-surface-mid)', - backdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))', - WebkitBackdropFilter: 'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))', - borderColor: 'var(--border)', - boxShadow: 'inset 0 1px 0 var(--rim-light-inner)', - }} - > + <nav + className="page-header-glass border-b" + style={{ borderColor: 'var(--border)' }} + > ``` The malformed `boxShadow` was a real (silent) bug: `var(--rim-light-inner)` is a complete `inset 0 1px 0 <color>` declaration; wrapping it in another `inset 0 1px 0 ...` produces invalid CSS that the browser drops entirely. The `.page-header-glass` class's own `box-shadow: var(--rim-light-inner), 0 1px 0 var(--border)` is the correct shape. ## Acceptance criteria - [x] `<nav>` uses `className="page-header-glass border-b"` - [x] Inline `style` retains only `borderColor: 'var(--border)'` — no background, backdropFilter, WebkitBackdropFilter, boxShadow - [x] Children (`AnimatedFireLogo`, Deck Hearth heading, Sign In / Get Started buttons) unchanged - [x] `npm run lint` passes (one pre-existing warning in `components/CollectionsPageView.js`, unrelated) ## Test plan - [ ] Open `/` in an incognito window (anonymous user). Verify the nav bar renders with a subtle glass treatment, an inset 1px top highlight, and a 1px bottom border. - [ ] Toggle theme (the public landing has a theme toggle). Verify both light + dark render correctly. - [ ] Click Sign In and Get Started — both should route normally. ## Related - Convoy: `.convoys/unify-glass-panel-surfaces.md` - Brief: `.convoys/unify-glass-panel-surfaces/brief-6-landing-nav-bar.md` - Architect plan: PR #119 (merged) Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 15:11:38 -04:00

(Migrated from github.com)

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tcg-vault	Ready	Preview, Comment	Jun 4, 2026 7:11pm

[vc]: #qxMlawp0HnmiZEMXu+QL/7JNN858X2DY4dKhpFBOepg=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWJyaWVmLTYtbGFuZGluLTIyNWUwZC1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vcmFuZGFsbC1zdGlsbHdlbGxzLXByb2plY3RzL3RjZy12YXVsdC8zVVU3a2I3RFdwcU4zQ1o0MVNHWHZ0QldoU3FMIiwicHJldmlld1VybCI6InRjZy12YXVsdC1naXQtYnJpZWYtNi1sYW5kaW4tMjI1ZTBkLXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIn1dLCJyZXF1ZXN0UmV2aWV3VXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3ZlcmNlbC1hZ2VudC9yZXF1ZXN0LXJldmlldz9vd25lcj12YXJ1dGFzdSZyZXBvPXRjZy12YXVsdCZwcj0xMjAifQ== The latest updates on your projects. Learn more about [Vercel for GitHub](https://vercel.link/github-learn-more). | Project | Deployment | Actions | Updated (UTC) | | :--- | :----- | :------ | :------ | | [tcg-vault](https://vercel.com/randall-stillwells-projects/tcg-vault) | ![Ready](https://vercel.com/static/status/ready.svg) [Ready](https://vercel.com/randall-stillwells-projects/tcg-vault/3UU7kb7DWpqN3CZ41SGXvtBWhSqL) | [Preview](https://tcg-vault-git-brief-6-landin-225e0d-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-brief-6-landin-225e0d-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 7:11pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=120" rel="noreferrer"><picture><source media="(prefers-color-scheme: dark)" srcset="https://agents-vade-review.vercel.sh/request-review-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://agents-vade-review.vercel.sh/request-review-light.svg"><img src="https://agents-vade-review.vercel.sh/request-review-light.svg" alt="Request Review"></picture></a>

github-actions[bot] commented

2026-06-04 15:11:47 -04:00

(Migrated from github.com)

Pipeline Health

Build + CI gates

Gate	Status
Vercel build (Preview)	✅ pass
CI: Lint	✅ pass
CI: Schema map fresh	❌ skipped
Preview smoke	✅ pass
Visual diff	✅ pass

Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build).

Role reports

Role	Status
Reviewer report	⏳ pending
A11y audit	⏳ pending
Design system audit	⏳ pending

See individual comments above for details. This rollup updates automatically.

## Pipeline Health ### Build + CI gates | Gate | Status | | --- | --- | | Vercel build (Preview) | ✅ pass | | CI: Lint | ✅ pass | | CI: Schema map fresh | ❌ skipped | | Preview smoke | ✅ pass | | Visual diff | ✅ pass | _Build runs on Vercel; this CI runs lint and schema-map drift only (no duplicate build)._ ### Role reports | Role | Status | | --- | --- | | Reviewer report | ⏳ pending | | A11y audit | ⏳ pending | | Design system audit | ⏳ pending | See individual comments above for details. This rollup updates automatically.

github-actions[bot] commented

2026-06-04 15:13:05 -04:00

(Migrated from github.com)

Visual Diff

Screenshots and diffs uploaded as artifacts: view run

If intentional changes: update snapshots locally with npx playwright test --project=visual --update-snapshots and commit.

## Visual Diff Screenshots and diffs uploaded as artifacts: [view run](https://github.com/varutasu/tcg-vault/actions/runs/26973681814) If intentional changes: update snapshots locally with `npx playwright test --project=visual --update-snapshots` and commit.