#996 Small changes to colors and style to new UI Pull request opened by javuto Restore the rail circuit background, enlarge the nav identity, separate data surfaces Three visual corrections, all frontend-only. No behaviour, API or data changes. 1. Restored the circuit background on the side nav The rail's circuit-trace texture had been reimplemented as a

mask-image

at

opacity: 0.055

, which renders as very nearly nothing. Restored the

v0.5.7

block verbatim:

.sidenav-circuit

with the tiled inline-SVG

background-image

in brand teal —

#2bc4be

at 0.08 in dark,

#0a8a85

at 0.10 in light, alphas tuned per theme so both read at similar perceived density — layered under the teal sheen gradient at the top of the rail.

SideNav.tsx

references the release class name (

sidenav-circuit

) again; the `isolation`/`z-index` scaffolding the mask version needed is gone with it, since

background-image

composes directly. 2. Bigger, centered product identity in the nav The mark and wordmark were a 24px logo beside 15px text, left-aligned. They're now stacked and centered: 44px logo over a 20px wordmark. Stacking is what allows both to grow without widening the rail. Collapsed mode centers a 28px mark with the wordmark hidden, as before. 3. Data surfaces now sit a tone above the page Root cause: `AppShell`'s main content area gained

bg-[color:var(--bg-1)]

at some point after

v0.5.7

, where it had been transparent over the shell's

--bg-0

. Every panel is also

--bg-1

, so panels ended up on a same-toned page with only their borders separating them — the flat look this fixes. Rather than reverting the page background (which would undo the newer rounded-card shell treatment), the data surfaces move up a tone. Applied in two passes, in this order, so nothing collided: 1. Existing

--bg-2

elements inside those files →

--bg-3

. These are table header rows, badges and hover states; left alone they would have disappeared into the newly-

--bg-2

panels around them. 2. Container panels (

border

+

--bg-1

) →

--bg-2

. Scope: 33 files across

src/features/**

plus

components/data/StatCard.tsx

. Deliberately excluded: • Chrome and controls —

DropdownMenu

,

Pagination

,

EnvSwitcher

,

SideNavPreview

stay at

--bg-1

. A floating menu should read as elevated above the page, not sunk into it. •

LoginPage

— the sweep initially caught it and the result was wrong. It's a standalone screen with its own cyber-grid and card-glow treatment, not a data surface on the app shell. Reverted. Changes •

frontend/src/styles/base.css

—

.sidenav-circuit

restored from

v0.5.7

•

frontend/src/components/chrome/SideNav.tsx

— class name, stacked/centered identity at 44px + 20px • 33 files across

src/features/**

and

components/data/StatCard.tsx

— panel tone shift Testing • Full suite green: 292 tests,

tsc

clean. •

StatCard.test.tsx

pinned the card surface to

--bg-1

. The test's actual intent is "flat surface, no decorative gradient", so the no-gradient assertion is untouched and only the token moved, with a comment recording why data surfaces sit above the page. Note for reviewers Worth an eyeball in the browser before merging. The step is

#171717 → #1b1b1b

in dark and

#ffffff → #fcfcfc

in light — intentionally gentle, but the light-theme delta is very subtle. If it reads as no change there, the fix is nudging the light

--bg-2

token a shade rather than revisiting 33 files. jmpsec/osctrl