From b195395b825b17501889bb80f29da833c4f8cacb Mon Sep 17 00:00:00 2001 From: Randall Stillwell Date: Thu, 4 Jun 2026 13:27:12 -0500 Subject: [PATCH 1/3] docs(convoys): seed unify-glass-panel-surfaces + cleanup-card-item-list-and-share-modal-palette MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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: `` (`components/ui/GlassSurface.js`) predates the corner-light pattern. Because ``, ``, 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. `` 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 --- ...-card-item-list-and-share-modal-palette.md | 205 ++++++++++ .convoys/unify-glass-panel-surfaces.md | 363 ++++++++++++++++++ 2 files changed, 568 insertions(+) create mode 100644 .convoys/cleanup-card-item-list-and-share-modal-palette.md create mode 100644 .convoys/unify-glass-panel-surfaces.md diff --git a/.convoys/cleanup-card-item-list-and-share-modal-palette.md b/.convoys/cleanup-card-item-list-and-share-modal-palette.md new file mode 100644 index 0000000..173da42 --- /dev/null +++ b/.convoys/cleanup-card-item-list-and-share-modal-palette.md @@ -0,0 +1,205 @@ +--- +name: cleanup-card-item-list-and-share-modal-palette +classification: feature +success_metric: | + No hardcoded Tailwind palette classes (`bg-purple-*`, `bg-blue-*`, + `bg-gray-*` 100-900 range, `text-gray-{500,600,700,900}`, + `bg-white`, `border-gray-200`, etc.) remain in the interior of + `components/CardItem.js` list-mode or `components/ShareModal.js`. + Both render correctly in dark theme. Verified by visual diff and + a targeted lint sweep. +skip: + - ia + - ux + - arch +status: open +created: 2026-06-04 +depends_on: + - design-sweep-pass # PR #117 — established the token migration pattern +--- + +# Convoy: cleanup-card-item-list-and-share-modal-palette + +Targeted palette cleanup. Parallel companion to +`unify-glass-panel-surfaces` — that convoy migrates panel *surfaces*; +this one cleans up the *interior content* (rows, badges, text, +buttons) of two specific files whose interiors were not addressed +by PR #117 because they're not panel surfaces — they're nested +content inside surfaces that were already on the system. + +## Why + +Two files left over after the 2026-06-04 design sweep: + +1. **`components/CardItem.js` list-mode** (L183–284) — the + list-view layout (when `viewMode === 'list'`) is entirely + hardcoded Tailwind palette. The grid-mode (L290+) was already + migrated; list-mode wasn't. `border-gray-200`, `bg-purple-50`, + `text-gray-900`, `text-gray-600`, `text-green-600`, + `bg-blue-100 text-blue-800` — none of these have dark-mode + variants. In dark theme, the list view renders unreadable + (light text on light backgrounds) or off-brand (purple/blue + badges in an ember palette app). + +2. **`components/ShareModal.js`** interior — the modal SURFACE is + correct (delegates to `` → ``), and the + user-search dropdown + email-invite card were updated in PR + #117. But the interior rows still have: + - `bg-purple-600` avatar circles for current user (L194, L240). + - `bg-gray-50` current-user permission row (L238) — invisible + in dark mode. + - `bg-gray-100 rounded` permission badge (L272) — light-only. + - `bg-gray-50 border-gray-300 text-gray-600` share-link input + (L287) — invisible in dark mode. + - `bg-blue-600 hover:bg-blue-700` Copy-link button (L294) — + off-palette (should be ember). + - `text-gray-{500,700,900}` text colors throughout — light-only. + + Note ShareModal is the primary collaboration entry point; the + permission rows and Copy-link button are visited every time a + user invites a collaborator. + +Both files are token-only swaps. No structural changes, no +component swaps, no glass-panel migration. + +## Scope + +### In scope + +#### Brief 1 — `CardItem.js` list-mode token sweep + +Replace every hardcoded color in lines ~183–284 with the +appropriate `var(--*)` token via inline style. Categories: + +- Background fills: `bg-purple-50` (selected row), `bg-white` → + `var(--bg-secondary)` or `var(--bg-tertiary)` per role; selected + state uses `var(--accent-ember)` + low alpha as background. +- Borders: `border-gray-200` / `border-gray-300` → + `var(--border)`. Selected state border `border-purple-600` → + `var(--accent-ember)`. +- Text: `text-gray-900` → `var(--text-primary)`, + `text-gray-600` / `text-gray-500` → `var(--text-secondary)`, + `text-green-600` (positive value indicators) → + `var(--accent-flame)` or keep `#16a34a` if semantic green + matters more than brand. +- Badges (`bg-blue-100 text-blue-800` etc.): convert to + `var(--bg-tertiary)` + `var(--text-primary)` or + `var(--accent-ember)` per badge role (game, rarity, type). +- Buttons / icons: `text-purple-600` (selection indicator) → + `var(--accent-ember)`. + +Acceptance: visually inspect `CardItem` list-mode in BOTH themes. +All text must be legible, all interactive states (hover, selected) +must have a visible delta against the row background. + +**Files:** `components/CardItem.js`. +**Risk:** LOW — purely cosmetic token swaps; no layout changes. + +#### Brief 2 — `ShareModal.js` interior token sweep + +Lines roughly 230–310. Targets: + +- **Avatar circles** (L194, L240): `bg-purple-600` → + `linear-gradient(135deg, var(--accent-ember), var(--accent-flame))` + (matches the UserMenu avatar gradient style from + `components/ui/TopSearchBar.js`). +- **Current-user row container** (L238): `bg-gray-50 rounded-lg` + → `var(--bg-secondary)` + `rounded-xl`, or + `var(--bg-tertiary)` for slightly more contrast. +- **Permission badge** (L272): `bg-gray-100 rounded` → + `var(--bg-tertiary)` + `rounded-xl` + `var(--text-secondary)`. +- **Share-link readonly input** (L283–288): `bg-gray-50 + border-gray-300 text-gray-600` → tokenize against + `var(--bg-secondary)`, `var(--border)`, `var(--text-primary)`; + alternatively use the `.input-field` class (already in + `globals.css`). +- **Copy-link button** (L290–298): `bg-blue-600 text-white + hover:bg-blue-700` → replace with the `