feat(ui): UI modernization — sidebar/rows/build, dark-first design system, command center - #212
Open
schronck wants to merge 21 commits into
Open
feat(ui): UI modernization — sidebar/rows/build, dark-first design system, command center#212schronck wants to merge 21 commits into
schronck wants to merge 21 commits into
Conversation
MOCK=true npm run dev (npm run dev:mock) serves the backend REST endpoints from frontend/mocks/*.json, so the UI runs offline without a Canton node or Keycloak. Dev-only (apply: 'serve'), never bundled in production. party_id-aware: <endpoint>__<prefix>.json overrides per party.
Sidebar collapses to a 56px icon rail (state persisted). Build version + date always shown at the sidebar bottom — version injected from the crate version (build.rs APP_VERSION) with a Cargo.toml fallback for dev/mock — and the build-date/swagger click easter egg removed.
Every list row is a uniform 48px (theme MuiTableCell height) regardless of whether it carries a copy button/chip or just text, fixing the shorter Config-peers and DAR-compare rows. Normalized outlier per-cell paddings; collapsible audit-detail rows opt out via height:auto.
Leading/trailing table cells inset content via max(16px, calc((100vw - 1560px)/2)) so content centers to ~1300px on big monitors (180px each side at 1920px, 500px at 2560px), while row rules and zebra fills stay full-bleed (edge to edge).
Rebuilds the MUI theme to the bitsafe-design tokens: dark-default warm-neutral substrate (#0F0E0D/#1E1A17/#2A2420), #D63A0F action accent (the AA-safe tone, not the decorative #FF6633), Space Grotesk + Roboto Mono with mono on every number/address/ID and tracked-out mono eyebrows, card anatomy (1px border, no rest shadow), 6px buttons / 4px chips, accent focus + linear hover (no scale transforms), deep warm dialog/menu shadows. Layouts are unchanged — this is a design-system pass, not a restructure. Preserves the unified 48px rows + large-screen table inset.
Peer connection status renders as a colored dot — connected (green), unreachable (red), handshake-failed (amber), local node (accent). Only a live/connected peer pulses a soft halo (the design system's blessed motion); honors prefers-reduced-motion.
Dark gradient substrate, mono eyebrow, and the restrained node-cluster motif behind an accent Log in button.
A selected nav item has an accent background; its count badge now flips to secondary (white on dark) so it no longer blends into the accent fill (Pending approvals).
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
A color-coded network badge under the logo (mainnet green, testnet amber, devnet blue) from node-config — full pill when expanded, a dot with tooltip when collapsed.
Collapsed nav shows small dot badges instead of clipped number badges, and the theme switcher renders vertically in the collapsed rail (was hidden, leaving an empty bottom). Logout still renders when a session token is present.
Mock mode (`__MOCK__`, set by MOCK=true) stands up a fake, toggleable auth session so the full authenticated UI (logout) and the login screen are previewable offline. Dead-code-eliminated from production builds.
Moves the network badge to the footer above the build version (expanded only — not in the collapsed rail) and centers the network/build/theme-switcher/logout group.
Introduces a --content-pad token (24px base, grows on large monitors) used by tables, the party detail header/sections, config, packages, and the approvals feed — so non-table UI lines up with the table content instead of hugging the edge, while table rows stay full-bleed.
The 3-column default (non-check) package list was content-sized, bunching left with empty space on the right unlike the peer-compare matrix. Fixed-layout column widths now span the inset region so it reads as centered/full and aligns with the toolbar.
schronck
changed the title
This was referenced Jun 22, 2026
schronck
changed the title
schronck
force-pushed
the
feat/ui/bitsafe-design
branch
from
June 22, 2026 15:58
1ce53d4 to
f97cf41
Compare
…eline, compact rows
schronck
force-pushed
the
feat/ui/bitsafe-design
branch
from
June 22, 2026 17:17
39d78cb to
9a1ff9a
Compare
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.
Stacked on #211 (base
fix/ui/bugs) — review/merge after it. Developed against mock mode.Summary
Applies the bitsafe-design system across the whole app — dark by default, faithful to the skill's tokens. Layouts are unchanged; this is a design-system pass, not a restructure.
Theme (the bulk)
#0F0E0D/#1E1A17/#2A2420(not flat gray).#D63A0Faction accent — the AA-safe tone, not the decorative#FF6633.Component polish
prefers-reduced-motionhonored.Notes
@fontsource/roboto-mono. Keeps the unified 48px rows + large-screen table inset.