92 lines
4.6 KiB
Markdown
92 lines
4.6 KiB
Markdown
|
---
|
||
|
|
convoy: unify-glass-panel-surfaces
|
||
|
|
brief_number: 6
|
||
|
|
depends_on: []
|
||
|
|
files:
|
||
|
|
- pages/index.js
|
||
|
|
---
|
||
|
|
|
||
|
|
# Brief 6: Migrate landing nav bar to `.page-header-glass`
|
||
|
|
|
||
|
|
## Goal (1 sentence)
|
||
|
|
|
||
|
|
Replace the handrolled translucent `<nav>` on the public landing page with the canonical `.page-header-glass border-b` className, and drop the malformed `boxShadow: 'inset 0 1px 0 var(--rim-light-inner)'` (the token already contains its own `inset 0 1px 0`; double-wrapping breaks the cascade — documented in `styles/globals.css` L748-761).
|
||
|
|
|
||
|
|
## Files in scope (do not edit anything else)
|
||
|
|
|
||
|
|
- `pages/index.js` — the landing `<nav>` block, currently L61-72 (around the `border-b` declaration with inline `background: 'var(--glass-surface-mid)'` + `backdropFilter` + `boxShadow: 'inset 0 1px 0 var(--rim-light-inner)'`).
|
||
|
|
|
||
|
|
**Out of scope:** everything else on the landing page (the Deck Hearth heading, the Sign In / Get Started buttons inside the nav, the hero section, feature cards, footer, the `if (user) return null;` redirect logic, etc.). The migration is a single `<nav>` element's `className` + `style` swap.
|
||
|
|
|
||
|
|
## Conventions to follow
|
||
|
|
|
||
|
|
- **Verbatim replacement:**
|
||
|
|
```jsx
|
||
|
|
// Before:
|
||
|
|
<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)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
|
||
|
|
// After:
|
||
|
|
<nav
|
||
|
|
className="page-header-glass border-b"
|
||
|
|
style={{
|
||
|
|
borderColor: 'var(--border)',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
```
|
||
|
|
The class provides `background`, `backdrop-filter`, and the
|
||
|
|
correct `box-shadow` (which IS `var(--rim-light-inner), 0 1px 0
|
||
|
|
var(--border)` per its definition in `globals.css` L300-306). The
|
||
|
|
`border-b` Tailwind class needs the `borderColor` style to remain
|
||
|
|
themed; everything else collapses into the class.
|
||
|
|
|
||
|
|
- **The malformed boxShadow is the bug:** `var(--rim-light-inner)` is
|
||
|
|
already a complete `inset 0 1px 0 <color>` declaration. Wrapping
|
||
|
|
it in another `inset 0 1px 0 ...` produces invalid CSS that the
|
||
|
|
browser silently drops. The class's own `box-shadow:
|
||
|
|
var(--rim-light-inner), 0 1px 0 var(--border)` does the right
|
||
|
|
thing. Removing the inline `boxShadow` line is the fix.
|
||
|
|
|
||
|
|
- **Children verbatim:** the `<div className="max-w-7xl mx-auto ...">`
|
||
|
|
inside the `<nav>`, the `<AnimatedFireLogo>`, the heading, and the
|
||
|
|
Sign In / Get Started buttons all stay byte-identical. Do not
|
||
|
|
touch them.
|
||
|
|
|
||
|
|
- **`.page-header-glass` placement check:** the class is defined in
|
||
|
|
`styles/globals.css` L300-306 and is already used by authenticated
|
||
|
|
pages' header strips (dashboard, my-cards, cards, etc.). It's safe
|
||
|
|
to reuse on the public landing page — the class has no auth
|
||
|
|
coupling.
|
||
|
|
|
||
|
|
- **Nested backdrop-filter check** (boot-the-brief risk #6): the
|
||
|
|
landing page has no enclosing Layout (the `pages/index.js` redirect
|
||
|
|
logic returns `null` for authenticated users and renders its own
|
||
|
|
full-page `<div>` for anonymous visitors — no `<Layout>` wrapper).
|
||
|
|
So there's no risk of nested `backdrop-filter` stacking. Verified.
|
||
|
|
|
||
|
|
- **AGENTS.md / no-go zones:** `pages/index.js` is an authored page,
|
||
|
|
not a generated artifact. Allowed.
|
||
|
|
|
||
|
|
## Acceptance criteria
|
||
|
|
|
||
|
|
- [ ] Landing `<nav>` uses `className="page-header-glass border-b"`.
|
||
|
|
- [ ] Inline `style` on the `<nav>` retains only `borderColor: 'var(--border)'` — no `background`, no `backdropFilter`, no `WebkitBackdropFilter`, no `boxShadow`.
|
||
|
|
- [ ] The Deck Hearth heading + Sign In / Get Started buttons inside the nav render identically.
|
||
|
|
- [ ] Manual: open `/` in an incognito window (anonymous user), verify the nav bar renders with a subtle glassy treatment, an `inset 0 1px 0` highlight (the inner rim), and a 1px bottom border. Verify in both light and dark theme via the theme toggle (which appears on the public landing). Attach light + dark screenshots to PR.
|
||
|
|
- [ ] `npm run lint` + `npm run test:run` pass (no test count change expected).
|
||
|
|
- [ ] No edits to other files.
|
||
|
|
|
||
|
|
## Rationale (≤3 sentences)
|
||
|
|
|
||
|
|
The landing nav is the highest-visibility public surface in the app and currently both (a) duplicates `.page-header-glass`'s composition handrolled, and (b) ships a malformed `boxShadow` that silently breaks. Migrating to the canonical class is a one-line cleanup that fixes a latent bug. No corner-light treatment is appropriate here — the nav is full-bleed, so corner radials would land at viewport edges and never read as light sources; `.page-header-glass` (which uses the rim/border-only composition) is the right shape.
|