Feat/frontend redesign - #1490
Merged
Merged
Conversation
Adds ui.css for the hover/focus-visible/active states the ui/ primitives' classNames (ui-btn, ui-card, ui-field, ...) already emitted but no CSS ever defined. Adds a generic Badge primitive and refactors MarketStatusBadge onto it instead of its own bespoke pill CSS. Adds a ui/ barrel export. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016f3phkChoqfM1Ui1VzUQk9
AppShell's header/nav had no CSS at all (fully inline-styled) and no narrow-viewport handling, unlike every other section of the app; it's the persistent chrome for Markets/Statistics/Create/account/tx pages so this was the single biggest responsive gap. Also give the statistics category/volume tables horizontal scroll below 640px, matching the pattern admin's tables already use. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016f3phkChoqfM1Ui1VzUQk9
…ages Bet history was completely unstyled (bare table, no CSS at all). GDPR delete/export and newsletter-unsubscribe used large inline style objects with token values but no hover/focus-visible states and no responsive handling. Converted all four to page-scoped CSS files with classNames only — no JSX structure, logic, or aria attribute changes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016f3phkChoqfM1Ui1VzUQk9
The landing nav-menu collapsed to display:none below 860px with no way to reopen it - Features/How It Works/About/Contact were unreachable on mobile except by scrolling. Adds a hamburger toggle (aria-expanded, Escape-to-close, 44px touch target) that turns the menu into a dropdown panel, and updates e2e/mobile.spec.ts (which had pre-written, feature-detected tests waiting for exactly this - issue #12) to exercise the real open-menu-then-navigate flow instead of skipping. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016f3phkChoqfM1Ui1VzUQk9
…from generic-AI-SaaS look The cinematic dark/gold-purple pass (gradient-clip headlines, ambient glow blobs, glassmorphism pills, gradient CTA buttons) read as a generic AI-generated SaaS template rather than a professional trading product. Reworks the foundation instead: - tokens.css: sharper radii (was 8/14/22px, now 4/6/10px), a new --font-mono (self-hosted JetBrains Mono) for tabular numeric data, shadow-glow-* reduced from big ambient halos to flat 1px rings, --grad-brand and --surface-glass removed (no longer used anywhere). - Landing hero rebuilt as two columns: copy/CTAs left, a new LiveMarketsTicker (real fetched market data, not decoration) right. Gradient-clip headline/eyebrow/CTA/step-number treatments replaced with solid color + flat borders across landing.css, Statistics.css, admin.css, and markets/create/page.css. - Flattened remaining --surface-glass usage (markets, statistics, bets, VolumeChart, ExportButton, AssetBadge) to solid --surface. Fixed two things the ticker's new mount-time fetch broke: a crash when a test's global.fetch mock returns a non-array shape (defensive Array.isArray guard), and several LandingPage tests whose fetch-count or mockResolvedValueOnce assumptions didn't anticipate a second concurrent fetch call - stubbed api.getFeaturedMarkets alongside the existing getStatistics stub, matching that file's own established pattern for exactly this class of problem. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016f3phkChoqfM1Ui1VzUQk9
…ng them app's CSP sends style-src 'self' with no unsafe-inline and no nonce, so AppShell's inline style props on header/logo/nav/main/footer were being silently dropped by the browser instead of applied. Moved them into ui.css classes. Also scope landing.css's header/footer selectors to .landing-page so they stop leaking into AppShell's chrome on every other route. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T9ph1fy2XQ3wQwtDYzyNZ8
admin.css's sticky header kept the blur(12px) glass treatment the trading-terminal pivot (bfe4ae3) already removed from AppShell's header, and TransactionStatusView's card still had a decorative diagonal surface gradient. Neither was caught by that pass. Flatten both to match the rest of the app. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T9ph1fy2XQ3wQwtDYzyNZ8
The app's CSP (style-src 'self', no unsafe-inline, no style nonce) silently drops any inline style="" attribute. Beyond AppShell (fixed separately), this affected the entire ui/ design-system primitives (Button, Card, Modal, Select, TextInput, Textarea), their live admin/Form.tsx and admin/Modal.tsx duplicates, all five admin pages, the admin auth-gate form, ErrorBoundary's action buttons, and OutcomeList's (dead/unused) probability bar. - ui.css: resting styles for the ui/ primitives moved from inline style props to classNames, plus a small fixed utility layer (u-flex/u-gap-*/u-text-*/u-color-*/u-grid-2/...) standing in for the one-off flex/spacing/color wrappers that used to litter admin pages. - admin.css: same treatment for admin/Form.tsx's Form/FormField/Input/ Textarea/Select/Button/StatusAlert and admin/Modal.tsx, plus the admin header brand/exit-link and the AdminAuthGate form (previously had zero CSS at all - rendered as bare unstyled HTML). - Each of the 5 admin pages (audit, blockchain replay, content, email analytics, email preview) gets its own page-scoped CSS file for styling that isn't reusable elsewhere. - OutcomeList: dropped the inline custom-property (also CSP-blocked and unconsumed by any CSS rule) in favor of static classes; added the label/odds styling it never had. - ErrorBoundary: action-button row moved to accessibility.css. Verified via build + full test suite (12 pre-existing failures, unrelated to these files, reproduce identically on the prior commit) and Playwright screenshots of all five admin pages plus the auth gate. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01T9ph1fy2XQ3wQwtDYzyNZ8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Type of Change
Testing Done
Bundle Size
Checklist
docs/architecture.mdRelated Issues
Closes #