Apply refreshed UI design to all frontend pages and widgets#445
Open
AlexITC wants to merge 11 commits into
Open
Apply refreshed UI design to all frontend pages and widgets#445AlexITC wants to merge 11 commits into
AlexITC wants to merge 11 commits into
Conversation
AlexITC
commented
Jun 1, 2026
AlexITC
commented
Contributor
- Rewrites AppBar, Footer, HomePage, AboutPage, DashboardPage, SignInPage, SignUpPage, VerifyEmailPage, UserEditPage, LogList
- Updates AppTheme with new palette (#0E8C6F primary), shape, and component overrides using js.Dynamic.literal to bypass type mismatch
- Removes Paper/Title wrapper from SignUpForm; page shell provides card
- Preserves /img/wiringbits-logo.png in all brand placements
- Rewrites AppBar, Footer, HomePage, AboutPage, DashboardPage, SignInPage, SignUpPage, VerifyEmailPage, UserEditPage, LogList - Updates AppTheme with new palette (#0E8C6F primary), shape, and component overrides using js.Dynamic.literal to bypass type mismatch - Removes Paper/Title wrapper from SignUpForm; page shell provides card - Preserves /img/wiringbits-logo.png in all brand placements Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Add palette.background.default (#F4F7F6), text colors, divider, success/error to AppTheme so CssBaseline applies the page bg (was white-on-white before) - Add h1–h6 typography weights and letterSpacing from the design spec - Add MuiCssBaseline body override as a belt-and-suspenders background fix - AppBar: show logo image only, remove "Wiringbits Web App Template" text Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
MUI's sx prop multiplies numeric spacing values by theme.spacing (8px), so gap=20 → 160px, padding=24 → 192px, marginTop=48 → 384px, etc. Convert every padding/margin/gap numeric value in sx literals to "NNpx" strings, matching the prototype's intended pixel values exactly. Affected: HomePage, Footer, SignInPage, SignUpPage, VerifyEmailPage, AboutPage, DashboardPage, UserEditPage, LogList. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…rlinks - Convert all numeric borderRadius values in sx props to "Npx" strings across AppBar, LogList, HomePage, SignInPage, SignUpPage, AboutPage, UserEditPage — prevents MUI multiplying them by theme.shape.borderRadius (10), which caused pill-shaped cards clipping form content - Replace org.scalajs.dom.window.open onClick handlers with proper <a href> elements on the GitHub repository links in HomePage and AboutPage Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Split AppTheme into light/darkTheme; dark palette uses surface tokens from the prototype (bg #0B100F, paper #141B19, teal accent #2FCFA6) - Add $darkMode: Var[Boolean] to AppContext and initialize it in Main - App.scala subscribes reactively and passes the active theme to ThemeProvider - AppBar reads $darkMode, shows Brightness4/Brightness7 icon toggle, and wraps Toolbar in Container maxWidth="lg" for consistent max-width alignment Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… mode support
All sx props across HomePage, SignInPage, SignUpPage, AboutPage, DashboardPage,
VerifyEmailPage, UserEditPage, and LogList now use semantic theme tokens:
- "#5A6A65" → "text.secondary"
- "#15201D" → "text.primary"
- "#0E8C6F" → "primary.main"
- "#C0392B" → "error.main"
- "#E6ECEA" borderColor → "divider"
- "1px solid #E6ECEA" borders → borderBottom/borderLeft = 1 (MUI sx shorthand
for 1px solid theme.palette.divider, auto-adapts per theme)
- "#F7FAF9" subtle bg → "background.default"
- "#FFFFFF" paper bg → "background.paper"
- hero span inline style converted to mui.Box component("span") with sx
so primary accent color adapts between light (#0E8C6F) and dark (#2FCFA6)
Intentional design-specific colors preserved: mock swagger browser chrome,
code block (#0E1B17 bg / #CFE7DD text), footer (always dark), AppBar (always teal),
method-color badges in swagger endpoint rows.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Hero: AI-first filled badge (AutoAwesome), updated subtitle, tech stack pills, and live-app badge with pulsing dot below CTAs - Feature cards: expanded from 4 to 6 (added Transactional emails and Background tasks), grid changed to 3-column - New AI-friendly section: gradient panel with headline and 4 key points, leads the page as the primary selling pitch - New "What ships" checklist: 12-item grid with check icons so visitors know exactly what is included out of the box - New "Full-stack in one language" section: Server ↔ Shared models ↔ Client diagram with Play/PostgreSQL, Scala.js/React/MUI labels - New "Problems avoided" section: 6 cards describing bug classes the typed structure eliminates at compile time - All new sections use dark-mode-aware alpha values via isDark reactive var - Section order: AI-friendly → What ships → Feature cards → Full-stack → Problems avoided → Swagger → Code sample → Testing/CI Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Slinky KeyAddingStage instances can only be built into a ReactElement once per render. Defining icon-containing elements at object level caused "already been built" errors on re-renders (e.g. dark mode toggle). Moving aiPoints inside the FunctionalComponent lambda ensures fresh icon instances are created on every render. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…HomePage Change `syncArrow` from val to def so each call site gets a fresh KeyAddingStage instance — reusing the same val twice in one render triggered "already been built" at runtime. Add HomePageSpec with three render tests (first render, dark mode re-render, auth state re-render) to catch this class of error before it reaches production. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… styles - Replace PNG logo with SVG (wiringbits-logo-reverse-rgb.svg) at height 34 in AppBar and height 40 in Footer - Add vertical divider + "Web App Template" text next to logo in both AppBar and Footer, matching the design layout exactly - Replace active nav link filled-background style with underline indicator (2px ::after pseudo-element) matching the design - Add &:hover background (rgba(255,255,255,0.12)) to nav buttons - Reorder desktop toolbar: nav links → gap → dark toggle → gap → auth buttons - Update sign-out button: manual border via sx instead of variant="outlined", with hover style matching design Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Fix HomePageSpec: replace deprecated `= _` with `uninitialized` so -Werror doesn't reject the warning in CI. Add responsive gridTemplateColumns to all fixed-width grids in HomePage, matching the design's breakpoints: - AI-friendly points: xs=1fr / sm=1fr 1fr - What ships checklist: xs=1fr / sm=1fr 1fr / md=1fr 1fr 1fr - Feature cards: xs=1fr / sm=1fr 1fr / md=1fr 1fr 1fr - Avoided problems: xs=1fr / sm=1fr 1fr / md=1fr 1fr 1fr - Consistent data loading: xs=1fr / md=1.25fr 1fr - Quality/testing strip: xs=1fr / md=1fr 1fr - Full-stack diagram: flexDirection xs=column / md=row Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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.