66a4d7b721
* docs(convoys): seed unify-glass-panel-surfaces + cleanup-card-item-list-and-share-modal-palette Two convoy seeds opened as follow-ups to the 2026-06-04 design pass (#116 corner-border-light → #117 site-wide sweep → #118 card vibrancy reduction). Both were called out in #117's PR body as deferred and are now formally tracked. ## unify-glass-panel-surfaces Migrates remaining panel-shaped surfaces to the gradient-border corner-light treatment so the app shares one surface vocabulary. The audit's key insight: `<GlassSurface>` (`components/ui/GlassSurface.js`) predates the corner-light pattern. Because `<Modal>`, `<StatCard>`, and the landing-page feature/collection cards all delegate to it, upgrading the primitive cascades to ~10 visible surfaces at once. 7 briefs, multitask-parallel after Brief 1 lands: 1. `<GlassSurface>` primitive upgrade — BLOCKING for 3, 4 2. Auth form cards (login.js, signup.js) 3. Floating popovers (mobile drawer, sidebar profile dropdown, UserMenu dropdown) 4. BulkSelectionToolbar (currently `bg-white border-gray-200` — invisible in dark mode) 5. `.card`-class consumers (4 pages); decision to ratify whether to retire `.card` entirely or keep as documented opaque fallback 6. Landing nav bar — wrong pattern; should use existing `.page-header-glass` class 7. `forbidden-bespoke-glass-surface` CI grep gate — prevents regression after the migration ships ## cleanup-card-item-list-and-share-modal-palette Targeted palette cleanup for two files whose interiors weren't addressed in #117: 1. `CardItem.js` list-mode (L183–284) — entirely hardcoded Tailwind palette (`bg-purple-50`, `border-gray-200`, `text-gray-{500-900}`, `bg-blue-100 text-blue-800` etc.); unreadable / off-brand in dark mode. 2. `ShareModal.js` interior rows — purple avatar circles, gray-50 permission row (invisible in dark mode), blue-600 Copy-link button, gray text labels. Token-only swap. 2 parallel briefs, no architect / IA / UX needed (no design decisions — palette to design tokens). ## Sequencing note The two convoys are independent and can run in parallel. The audit agent's recommended sequencing (Brief 1 of `unify-glass-panel-surfaces` first) is encoded in the multitask `slice_dependencies` blocks. Co-authored-by: Cursor <cursoragent@cursor.com> * docs(convoys): architect plan + 7 briefs for unify-glass-panel-surfaces Appends the ## Architecture section to .convoys/unify-glass-panel-surfaces.md ratifying the 4 open Decisions, and writes 7 implementer-brief files under .convoys/unify-glass-panel-surfaces/. Decisions ratified: D1. <GlassSurface> grows a cornerLights='subtle'|'chrome'|'none' prop, default 'subtle' (4-layer gradient-border per PR #118 recipe). D2. Retire .card entirely; migrate all 8 consumers to .glass-panel. D3. Mobile drawer uses subtle tier (.glass-panel-strong). D4. CI gate scopes to JSX inline-style usage only; 3-entry allowlist for documented chrome exceptions. Briefs (1-7, all <100 LOC each, disjoint files): 1. Upgrade <GlassSurface> primitive (no deps, blocks 3+4) 2. Migrate auth form cards (parallel-safe) 3. Migrate floating popovers (sidebar dropdown, mobile drawer, TopSearchBar UserMenu) 4. Migrate BulkSelectionToolbar + interior token sweep 5. Retire .card class; migrate 8 consumers 6. Migrate landing nav bar to .page-header-glass 7. forbidden-bespoke-glass-surface CI gate (runs LAST) Boot-the-brief check: all 4-layer recipes verified against post-PR-#118 styles/globals.css; all box-shadow preservation chains verified against current Layout.js + TopSearchBar.js; .card deletion verified clean (single rule at L729-733); CI gate shape modeled on existing forbidden-modal-shell-without-primitive job. Architecture is read-only output — no application code touched. Awaiting human gate 1 (plan approval) before implementers run. Co-authored-by: Cursor <cursoragent@cursor.com> * docs(convoys): fix Brief 3 TopSearchBar UserMenu elevation token Self-review recheck against current TopSearchBar.js (L211-222) found that the UserMenu dropdown uses var(--elevation-pronounced), not var(--elevation-ambient) as Brief 3's initial sample showed. Brief 3 now documents the verbatim shape (pronounced + role="menu" + aria-label + overflow-hidden) and the convoy's risk-list note is updated to reflect all three popovers' verbatim chains. No semantic change to the plan; just an accuracy fix the implementer of Brief 3 needs to ship the right code on the first try. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
79 lines
4 KiB
Markdown
79 lines
4 KiB
Markdown
---
|
|
convoy: unify-glass-panel-surfaces
|
|
brief_number: 2
|
|
depends_on: []
|
|
files:
|
|
- pages/login.js
|
|
- pages/signup.js
|
|
---
|
|
|
|
# Brief 2: Migrate auth form cards to `.glass-panel-strong`
|
|
|
|
## Goal (1 sentence)
|
|
|
|
Replace the handrolled `rgba(var(--bg-secondary-rgb), 0.85)` + `backdrop-blur-sm` glass imitation on the login + signup form cards with the canonical `.glass-panel-strong rounded-2xl p-8` className so the auth flow shares the rest of the app's surface treatment (corner catch-lights, system blur tier, gradient border).
|
|
|
|
## Files in scope (do not edit anything else)
|
|
|
|
- `pages/login.js` — replace the form-card container `<div>` (currently L82-88, look for the `className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm border border-opacity-20"` + inline `backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.85)'`).
|
|
- `pages/signup.js` — same migration on the form-card container (currently L227-232 in the symmetric `<div className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm ...">` block).
|
|
|
|
**Out of scope:** the surrounding layout/header on either page, the `<Input>` / `<Button>` children, error/success banners, any of the legend/divider/social-button styling below the form. Do not touch them.
|
|
|
|
## Conventions to follow
|
|
|
|
- **Verbatim replacement** for each card container:
|
|
```jsx
|
|
// Before:
|
|
<div
|
|
className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm border border-opacity-20"
|
|
style={{
|
|
backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.85)',
|
|
borderColor: 'var(--border)',
|
|
}}
|
|
>
|
|
|
|
// After:
|
|
<div className="glass-panel-strong rounded-2xl p-8">
|
|
```
|
|
The `style={{}}` block is removed entirely. `.glass-panel-strong`
|
|
already composes the background, blur, rim, elevation, and the
|
|
gradient-border treatment.
|
|
- **No new imports.** This brief does NOT use `<GlassSurface>`
|
|
directly — the className path is correct because (a) it's an HTML
|
|
div with no compositional requirements, (b) the existing
|
|
`.glass-panel-strong` class is the documented canonical shape per
|
|
the design audit, and (c) using the class keeps the diff minimal.
|
|
- **Preserve children verbatim.** The `<form>`, every `<Input>`, every
|
|
`<Button>`, the error banner, the social-sign-in divider, the
|
|
"Don't have an account?" footer link — all stay byte-identical.
|
|
- **Do not adjust the surrounding header block** (Deck Hearth logo +
|
|
greeting text); only the form-card `<div>` itself migrates.
|
|
- **Tailwind safelist note:** `.glass-panel-strong` is defined in
|
|
`styles/globals.css` as a plain CSS class (not a Tailwind
|
|
utility). It's already used in `<Layout>` and elsewhere, so the
|
|
build picks it up via the `@layer` block. No `tailwind.config.js`
|
|
edit needed.
|
|
|
|
## Acceptance criteria
|
|
|
|
- [ ] `pages/login.js` form-card `<div>` uses
|
|
`className="glass-panel-strong rounded-2xl p-8"` and carries
|
|
no inline `backgroundColor` / `borderColor` style.
|
|
- [ ] `pages/signup.js` form-card `<div>` uses
|
|
`className="glass-panel-strong rounded-2xl p-8"` and carries
|
|
no inline `backgroundColor` / `borderColor` style.
|
|
- [ ] All form fields, labels, buttons, error banners, and footer
|
|
links render identically post-migration (manual smoke;
|
|
`tests/smoke/auth.spec.js` continues to pass without edits).
|
|
- [ ] No edits to other files (e.g. no token additions in
|
|
`styles/globals.css`, no new components in `components/ui/`).
|
|
- [ ] `npm run lint` passes; `npm run test:run` is unchanged
|
|
(no test additions needed for a pure className swap).
|
|
- [ ] Dark mode: card remains legible against the body background
|
|
gradient (verify manually; before-shot vs after-shot screenshot
|
|
attached to the PR description).
|
|
|
|
## Rationale (≤3 sentences)
|
|
|
|
These two cards are the first surfaces a new user sees and they predate the `.glass-panel-strong` system; aligning them is both a correctness fix (the `rgba(--bg-secondary-rgb, 0.85)` shape doesn't compose corner lights) and a consistency win. The migration is a pure className swap with zero behavioral change — the lowest-risk brief in the convoy.
|