refactor(share-modal): tokenize interior palette (cleanup Brief 2) #129

Merged

varutasu merged 1 commit from cleanup-brief-2-share-modal-interior into main

2026-06-04 17:55:39 -04:00

varutasu commented

2026-06-04 17:52:26 -04:00

(Migrated from github.com)

Summary

Brief 2 of cleanup-card-item-list-and-share-modal-palette. Pure interior palette token sweep across components/ShareModal.js. The modal SURFACE was already correct (delegates to <Modal> → <GlassSurface>) and the user-search-dropdown + email-invite-card areas were updated in PR #117 — this brief addresses the residual interior rows.

Same dark-mode-visibility bug class as Brief 1: pre-PR, the interior used bg-gray-50 / bg-white / text-gray-{500,700,900} with no dark: variants, making rows unreadable in dark theme.

Files changed

components/ShareModal.js — interior only. Net diff: +141 / -36.

Major substitutions

Section	Before (Tailwind palette)	After (token)
Public-access outer container	`border rounded-lg` (default 1px gray)	`1px solid var(--border)` + `var(--bg-secondary)` + `rounded-xl`
Public-access icon + heading + sub-text	`text-gray-{400,500,900}`	`var(--text-primary)` / `var(--text-secondary)`
Public-access toggle	`bg-blue-600` (on) / `bg-gray-200` (off)	`var(--accent-ember)` / `var(--bg-tertiary)` + 1px border
Toggle handle	`bg-white`	`rgb(255, 255, 255)` (theme-independent white for contrast)
Add-people input	`border-gray-300` + `focus:ring-blue-500`	`var(--input-border)` + `var(--input-bg)` + ember focus ring
Search icon	`text-gray-400`	`var(--text-secondary)`
Current-user row	`bg-gray-50 rounded-lg`	`var(--bg-secondary)` + `var(--border)` + `rounded-xl`
Current-user avatar	`bg-purple-600`	`linear-gradient(135deg, var(--accent-ember), var(--accent-flame))`
Owner badge	`bg-white rounded border`	`var(--bg-tertiary)` + `var(--text-secondary)` + 1px ember border + `rounded-xl`
Invited-user row	`border rounded-lg`	`var(--border)` + `var(--bg-secondary)` + `rounded-xl`
Invited-user avatar	`bg-gray-400`	`var(--bg-tertiary)` + 1px border
Role badge	`bg-gray-100 rounded`	`var(--bg-tertiary)` + `var(--text-secondary)` + `rounded-xl`
Share-link readonly input	`bg-gray-50 border-gray-300 text-gray-600 rounded-lg`	`var(--input-bg)` + `var(--input-border)` + `var(--text-primary)` + `rounded-xl`
Copy-link button	raw `<button>` w/ `bg-blue-600 ... hover:bg-blue-700`	`<Button variant="primary">` from `components/ui`
Copied! success state	`bg-green-100 text-green-800 border-green-200`	`var(--bg-secondary)` + `var(--accent-flame)` + ember border (as a non-interactive badge)
Social-share icon + label	`text-gray-600`	`var(--text-secondary)`

Notable choices

Avatar gradient

The current-user avatar moves from bg-purple-600 to the same linear-gradient(135deg, var(--accent-ember) 0%, var(--accent-flame) 100%) style used by the TopSearchBar UserMenu chip. Visual continuity across "this is me" surfaces.

`Copy link` button

Replaced the raw <button> with <Button variant="primary"> from components/ui — consistent with the redesign-v2 button surface. The Copied! success state stays as a styled non-interactive badge (you can't re-click "Copied!" anyway).

New import

import { Modal, Button } from './ui' (added Button).

Acceptance criteria

grep -nE 'bg-(palette)-[0-9]|text-(...)|border-(...)' components/ShareModal.js → 0 matches.
npm run lint passes (1 pre-existing unrelated warning).
npm run test:run: 118/118 tests pass.

Test plan (manual — dark mode is critical)

Open a collection you own. Open the Share modal.
Light mode: confirm all rows render with appropriate contrast.
Dark mode: confirm every text label is legible (this is the bug fix); confirm the Public-access toggle reads as ember-on / dim-off; confirm the Copy-link button is on the ember palette; confirm avatar circles render with the gradient.
Click "Copy link"; confirm the success badge reads as flame-on-secondary (not green).
Invite a collaborator; confirm the new row shows up with the same ember-rim treatment.
Try the social share buttons; confirm icon + label colors render correctly in both themes.

Convoy: .convoys/cleanup-card-item-list-and-share-modal-palette.md
Parallel sibling: PR #128 (Brief 1 — CardItem.js list-mode).
PR #117 established the token migration pattern.

Made with Cursor

## Summary Brief 2 of `cleanup-card-item-list-and-share-modal-palette`. Pure interior palette token sweep across `components/ShareModal.js`. The modal SURFACE was already correct (delegates to `<Modal>` → `<GlassSurface>`) and the user-search-dropdown + email-invite-card areas were updated in PR #117 — this brief addresses the residual interior rows. Same dark-mode-visibility bug class as Brief 1: pre-PR, the interior used `bg-gray-50` / `bg-white` / `text-gray-{500,700,900}` with no `dark:` variants, making rows unreadable in dark theme. ## Files changed - `components/ShareModal.js` — interior only. Net diff: **+141 / -36**. ## Major substitutions | Section | Before (Tailwind palette) | After (token) | | - | - | - | | Public-access outer container | `border rounded-lg` (default 1px gray) | `1px solid var(--border)` + `var(--bg-secondary)` + `rounded-xl` | | Public-access icon + heading + sub-text | `text-gray-{400,500,900}` | `var(--text-primary)` / `var(--text-secondary)` | | Public-access toggle | `bg-blue-600` (on) / `bg-gray-200` (off) | `var(--accent-ember)` / `var(--bg-tertiary)` + 1px border | | Toggle handle | `bg-white` | `rgb(255, 255, 255)` (theme-independent white for contrast) | | Add-people input | `border-gray-300` + `focus:ring-blue-500` | `var(--input-border)` + `var(--input-bg)` + ember focus ring | | Search icon | `text-gray-400` | `var(--text-secondary)` | | Current-user row | `bg-gray-50 rounded-lg` | `var(--bg-secondary)` + `var(--border)` + `rounded-xl` | | Current-user avatar | `bg-purple-600` | `linear-gradient(135deg, var(--accent-ember), var(--accent-flame))` | | Owner badge | `bg-white rounded border` | `var(--bg-tertiary)` + `var(--text-secondary)` + 1px ember border + `rounded-xl` | | Invited-user row | `border rounded-lg` | `var(--border)` + `var(--bg-secondary)` + `rounded-xl` | | Invited-user avatar | `bg-gray-400` | `var(--bg-tertiary)` + 1px border | | Role badge | `bg-gray-100 rounded` | `var(--bg-tertiary)` + `var(--text-secondary)` + `rounded-xl` | | Share-link readonly input | `bg-gray-50 border-gray-300 text-gray-600 rounded-lg` | `var(--input-bg)` + `var(--input-border)` + `var(--text-primary)` + `rounded-xl` | | Copy-link button | raw `<button>` w/ `bg-blue-600 ... hover:bg-blue-700` | `<Button variant="primary">` from `components/ui` | | Copied! success state | `bg-green-100 text-green-800 border-green-200` | `var(--bg-secondary)` + `var(--accent-flame)` + ember border (as a non-interactive badge) | | Social-share icon + label | `text-gray-600` | `var(--text-secondary)` | ## Notable choices ### Avatar gradient The current-user avatar moves from `bg-purple-600` to the same `linear-gradient(135deg, var(--accent-ember) 0%, var(--accent-flame) 100%)` style used by the `TopSearchBar` UserMenu chip. Visual continuity across "this is me" surfaces. ### `Copy link` button Replaced the raw `<button>` with `<Button variant="primary">` from `components/ui` — consistent with the redesign-v2 button surface. The `Copied!` success state stays as a styled non-interactive badge (you can't re-click "Copied!" anyway). ### New import `import { Modal, Button } from './ui'` (added `Button`). ## Acceptance criteria - [x] `grep -nE 'bg-(palette)-[0-9]|text-(...)|border-(...)' components/ShareModal.js` → **0 matches**. - [x] `npm run lint` passes (1 pre-existing unrelated warning). - [x] `npm run test:run`: **118/118 tests pass**. ## Test plan (manual — dark mode is critical) - [ ] Open a collection you own. Open the Share modal. - [ ] **Light mode**: confirm all rows render with appropriate contrast. - [ ] **Dark mode**: confirm every text label is legible (this is the bug fix); confirm the Public-access toggle reads as ember-on / dim-off; confirm the Copy-link button is on the ember palette; confirm avatar circles render with the gradient. - [ ] Click "Copy link"; confirm the success badge reads as flame-on-secondary (not green). - [ ] Invite a collaborator; confirm the new row shows up with the same ember-rim treatment. - [ ] Try the social share buttons; confirm icon + label colors render correctly in both themes. ## Related - Convoy: `.convoys/cleanup-card-item-list-and-share-modal-palette.md` - Parallel sibling: PR #128 (Brief 1 — `CardItem.js` list-mode). - PR #117 established the token migration pattern. Made with [Cursor](https://cursor.com)

vercel[bot] commented

2026-06-04 17:52:31 -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 9:52pm

[vc]: #dBEWLkNxykH9pqkzwaKMDenQV40uubPf6el/WNfobAQ=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ0Y2ctdmF1bHQiLCJwcm9qZWN0SWQiOiJwcmpfRjZXOEVvRkd3Y0g3aWVGcnRvRlNlOXdVVkFhNSIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMvdGNnLXZhdWx0L0VlNnZLTTdkaXBCM0V4azhadFBGa1BaNnIxaVkiLCJwcmV2aWV3VXJsIjoidGNnLXZhdWx0LWdpdC1jbGVhbnVwLWJyaWVmLTg2M2Q0OS1yYW5kYWxsLXN0aWxsd2VsbHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ0Y2ctdmF1bHQtZ2l0LWNsZWFudXAtYnJpZWYtODYzZDQ5LXJhbmRhbGwtc3RpbGx3ZWxscy1wcm9qZWN0cy52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XSwicmVxdWVzdFJldmlld1VybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS92ZXJjZWwtYWdlbnQvcmVxdWVzdC1yZXZpZXc/b3duZXI9dmFydXRhc3UmcmVwbz10Y2ctdmF1bHQmcHI9MTI5In0= 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/Ee6vKM7dipB3Exk8ZtPFkPZ6r1iY) | [Preview](https://tcg-vault-git-cleanup-brief-863d49-randall-stillwells-projects.vercel.app), [Comment](https://vercel.live/open-feedback/tcg-vault-git-cleanup-brief-863d49-randall-stillwells-projects.vercel.app?via=pr-comment-feedback-link) | Jun 4, 2026 9:52pm | <a href="https://vercel.com/vercel-agent/request-review?owner=varutasu&repo=tcg-vault&pr=129" 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>