80 lines
4 KiB
Markdown
80 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.
|