Skip to content

Complete design tokens, add AppShell primary nav, and Button/Card primitives (#1313, #1314, #1315, #1316) - #1459

Merged
hman38705 merged 2 commits into
solutions-plug:mainfrom
katefominmoore23:feat/design-system-tokens-appshell-button-card
Sep 1, 2026
Merged

Complete design tokens, add AppShell primary nav, and Button/Card primitives (#1313, #1314, #1315, #1316)#1459
hman38705 merged 2 commits into
solutions-plug:mainfrom
katefominmoore23:feat/design-system-tokens-appshell-button-card

Conversation

@katefominmoore23

Copy link
Copy Markdown

Summary

  • [Design System] Recreate design tokens stylesheet #1313: styles/tokens.css already exists in full (117 lines, dark+light palettes) — nothing was deleted, so there was nothing to "recreate". The real gap: three CSS custom properties were referenced elsewhere in the app only via var(--x, <hardcoded fallback>) (--danger in PlaceBetForm.css, --border-color in OutcomeList.css, --shadow-lg in two account/newsletter pages), bypassing the centralized token system entirely — meaning dark-mode toggling (Event-Driven Frontend Indexing Support #22-23) and contrast-check tooling (Referral System & Affiliate Incentives #21) had nothing to hook into for them. Added --danger/--border-color as aliases of their equivalent existing tokens, a real --shadow-lg value, and the shared @keyframes spin used by the new Button below.
  • [Design System] Build app shell layout (header, nav, footer) #1314: layout.tsx already wraps the entire app today, not just the landing page — but there genuinely was no primary navigation anywhere outside the admin section's own local sub-nav. Added AppShell.tsx (header + primary nav across Markets/Statistics/Create Market, plus a conditional Admin link once an admin session exists, + a minimal footer) and wired it into layout.tsx. It intentionally skips / and /admin/*, since LandingPage.tsx and admin/layout.tsx already each own their own full header/nav — avoiding a duplicate header in both places.
  • [Design System] Build Button primitive #1315: added components/ui/Button.tsx — consistent variant/loading/disabled handling, generalizing the existing admin-only Button in components/admin/Form.tsx for use outside the admin section (bet placement, market creation, resolution).
  • [Design System] Build Card primitive #1316: added components/ui/Card.tsx (Card, CardHeader, CardTitle, CardBody, CardFooter) — a single shared container primitive for market list items (Email Service Integration #57), statistics tiles (Analytics Event Tracking API #49), and admin panels (Create Component Library Documentation with Storybook #89-97) to converge on.

No existing consumers were migrated to Button/Card — out of scope for this PR, which builds the primitives the issues asked for.

Test plan

Closes #1313
Closes #1314
Closes #1315
Closes #1316

…mitives (solutions-plug#1313, solutions-plug#1314, solutions-plug#1315, solutions-plug#1316)

solutions-plug#1313: styles/tokens.css already exists in full (117 lines, dark+light
palettes) — nothing was deleted, so there was nothing to "recreate".
The real gap: three CSS custom properties were referenced elsewhere in
the app only via `var(--x, <hardcoded fallback>)` (--danger in
PlaceBetForm.css, --border-color in OutcomeList.css, --shadow-lg in two
account/newsletter pages), bypassing the centralized token system
entirely — meaning dark-mode toggling (solutions-plug#22-23) and contrast-check
tooling (solutions-plug#21) had nothing to hook into for them. Added --danger and
--border-color as aliases of their equivalent existing tokens
(--destructive, --border), and a real --shadow-lg value, plus the
shared `@keyframes spin` used by the new Button below (previously only
defined in admin.css/LoadingSpinner.css, neither of which layout.tsx
loads globally).

solutions-plug#1314: layout.tsx already wraps the entire app today, not just the
landing page — but there genuinely was no primary navigation anywhere
outside the admin section's own local sub-nav. Added AppShell.tsx
(header + primary nav across Markets/Statistics/Create Market, plus a
conditional Admin link once an admin session exists, + a minimal
footer) and wired it into layout.tsx. It intentionally does not render
on `/` or `/admin/*`, since LandingPage.tsx already owns a full
marketing header/nav/footer and admin/layout.tsx already owns its own
sub-navigation — avoiding a duplicate header in both places.

solutions-plug#1315: added components/ui/Button.tsx — consistent variant/loading/
disabled handling, generalizing the existing admin-only Button in
components/admin/Form.tsx (the closest prior art) for use outside the
admin section (bet placement, market creation, resolution).

solutions-plug#1316: added components/ui/Card.tsx (Card, CardHeader, CardTitle,
CardBody, CardFooter) — a single shared container primitive for market
list items (solutions-plug#57), statistics tiles (solutions-plug#49), and admin panels (solutions-plug#89-97) to
converge on instead of each reinventing padding/border/shadow rules.

No existing consumers were migrated to Button/Card — out of scope for
this PR, which builds the primitives the issues asked for.

Closes solutions-plug#1313
Closes solutions-plug#1314
Closes solutions-plug#1315
Closes solutions-plug#1316

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014jDDop7frnew1xcCJDSKEw
@drips-wave

drips-wave Bot commented Aug 29, 2026

Copy link
Copy Markdown

@katefominmoore23 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@hman38705
hman38705 merged commit 4626cec into solutions-plug:main Sep 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants