deckhearth/components
Randall Stillwell 14148ad5dc refactor(share-modal): tokenize interior palette (Brief 2)
Brief 2 of cleanup-card-item-list-and-share-modal-palette convoy.
Pure palette token sweep across the interior of
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.

Migrations:

Public Access section (L139-167):
- Outer container: `border` (default Tailwind 1px) → tokenized border:
  '1px solid var(--border)' + backgroundColor: 'var(--bg-secondary)'.
  rounded-lg → rounded-xl.
- Link icon: `text-gray-400` → `var(--text-secondary)`.
- Heading: `text-gray-900` → `var(--text-primary)`.
- Sub-text: `text-gray-500` → `var(--text-secondary)`.
- Toggle: `bg-blue-600` (on) / `bg-gray-200` (off) →
  `var(--accent-ember)` / `var(--bg-tertiary)` + 1px border for
  visible delta when off.
- Inner span (handle): `bg-white` → kept literal `rgb(255, 255, 255)`
  for theme-independent white contrast on the ember toggle.

Add People input (L172-183):
- `border-gray-300` + `focus:ring-blue-500` → `var(--input-border)`
  + `var(--input-bg)` + `--tw-ring-color: var(--accent-ember)`.
- Search icon: `text-gray-400` → `var(--text-secondary)`.
- rounded-lg → rounded-xl.

Current Permissions section (L253-340):
- Section paragraph: `text-gray-700` → `var(--text-secondary)`.
- Current-user row: `bg-gray-50 rounded-lg` → `var(--bg-secondary)` +
  `var(--border)` + `rounded-xl`.
- Current-user avatar circle: `bg-purple-600` →
  `linear-gradient(135deg, var(--accent-ember), var(--accent-flame))`
  (matches the UserMenu avatar gradient from TopSearchBar).
- 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 ember border + `var(--text-primary)` for the letter.
- Role badge: `bg-gray-100 rounded` → `var(--bg-tertiary)` +
  `var(--text-secondary)` + rounded-xl.
- All `text-gray-{500,700,900}` → `var(--text-primary)` /
  `var(--text-secondary)` per role.

Share Link section (L305-340):
- 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: replaced raw <button> with <Button
  variant="primary"> from components/ui (consistent with the rest
  of the redesign-v2 button surface).
- Copied! success state: `bg-green-100 text-green-800 border
  border-green-200` → `var(--bg-secondary)` + `var(--accent-flame)`
  + `var(--accent-ember)` border. Renders as a non-interactive
  badge instead of a styled button — same UX (you can't re-click
  "Copied!" anyway, the original was disabled-by-state).
- New Button import added at top: `import { Modal, Button } from
  './ui'`.

Social Share section (L327-365):
- Icon container: `text-gray-600` → `var(--text-secondary)`.
- Label: `text-xs text-gray-600` → `var(--text-secondary)`.

Verification:
- `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.

Acceptance criteria from
.convoys/cleanup-card-item-list-and-share-modal-palette.md
all met for the in-scope sites. No edits outside ShareModal.js.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-04 16:51:57 -05:00
..
ui refactor(layout): migrate 3 floating popovers to .glass-panel-strong (#124) 2026-06-04 16:25:14 -05:00
AdminProtected.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
AnimatedFireLogo.js fix(lint): clear ESLint baseline in components/ (#61) 2026-06-02 01:03:36 -05:00
AuthLayout.js fix(lint): clear ESLint baseline in components/ (#61) 2026-06-02 01:03:36 -05:00
BulkSelectionToolbar.js refactor(bulk-toolbar): migrate to .glass-panel-strong + token sweep (#125) 2026-06-04 16:25:17 -05:00
CameraScanner.js refactor(scanner): extract CameraScannerView presentational component (#73) 2026-06-02 16:04:02 -05:00
CameraScannerView.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardDetailDeckModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CardDetailQuantityModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CardDetailView.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardEditorForm.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardEditorPreview.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardEditorSearchPanel.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardEditorView.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
CardItem.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
CardsPageView.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
CollaboratorFacepile.js fix(lint): clear ESLint baseline in components/ (#61) 2026-06-02 01:03:36 -05:00
CollectionDeleteModal.js feat(design-system): Liquid Glass redesign portfolio — foundation + primitives + Layout (#95) 2026-06-03 20:12:33 -05:00
CollectionEditModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CollectionPageView.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
CollectionsCreateModal.js feat(design-system): Liquid Glass redesign portfolio — foundation + primitives + Layout (#95) 2026-06-03 20:12:33 -05:00
CollectionsEditModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CollectionSelectionModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CollectionsPageView.js refactor(styles): retire .card; migrate 7 consumers to .glass-panel (#122) 2026-06-04 15:30:29 -05:00
CollectionsSuccessModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
CollectionsThumbnail.js refactor(collections): useCollectionsPage + view (Brief 3) (#87) 2026-06-03 17:10:17 -05:00
DailyEmberWidget.js feat(design-system): redesign v2 #2 + #5 — sidebar pill, wordmark, Daily Ember (#103) 2026-06-04 10:59:44 -05:00
DashboardCardSpotlight.js feat(design-system): redesign v2 #7 + #8 — dashboard rebuild + right-rail Card Spotlight (#107) 2026-06-04 11:21:58 -05:00
DashboardFeaturedCollection.js feat(design-system): redesign v2 #7 + #8 — dashboard rebuild + right-rail Card Spotlight (#107) 2026-06-04 11:21:58 -05:00
DashboardRecentActivity.js feat(design-system): redesign v2 #7 + #8 — dashboard rebuild + right-rail Card Spotlight (#107) 2026-06-04 11:21:58 -05:00
DeckBuilderCardBrowser.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
DeckBuilderDeckList.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
DeckBuilderStatsBar.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
DeckBuilderView.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
Layout.js refactor(layout): migrate 3 floating popovers to .glass-panel-strong (#124) 2026-06-04 16:25:14 -05:00
Layout.js.backup 🚀 Implement Mobile-First Navigation System 2025-08-01 18:18:21 -05:00
LoginCTA.js Align UI copy: My Collection vs Lists (#54) 2026-05-29 09:53:40 -05:00
ManaSymbols.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
ManaSymbolSettings.js refactor(design): site-wide sweep — broken Tailwind tokens, rounded corners, SearchBar primitive (#117) (#117) 2026-06-04 14:06:22 -05:00
MobileNavigation.js feat(design-system): Liquid Glass redesign portfolio — foundation + primitives + Layout (#95) 2026-06-03 20:12:33 -05:00
OCRSettings.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00
PermissionIndicator.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ProtectedRoute.js Major Scanner Improvements 2025-07-29 14:19:48 -05:00
PublicCardsView.js Extract PublicCardsView from pages/cards.js (Brief 2). (#78) 2026-06-03 12:06:24 -05:00
ScanDisambiguationDialog.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ScannedCardItem.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ScannerDestinationPicker.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ScannerPageView.js feat(design-system): sweep authenticated body-content panels to glass (#97) 2026-06-03 21:28:52 -05:00
ShareModal.js refactor(share-modal): tokenize interior palette (Brief 2) 2026-06-04 16:51:57 -05:00
UploadImageModal.js feat(design-system): finish Liquid Glass — close all remaining sub-convoys (#96) 2026-06-03 20:34:06 -05:00