Files

root 27192dd69f WIP: Dashboard redesign — design system overhaul and component updates

Frontend redesign in progress: updated styles, layout, and components
across all pages to align with new design system. Includes Jira API
compliance specs, property tests, and load test script.

2026-04-29 14:20:23 +00:00

2.2 KiB

Raw Permalink Blame History

Home UI Kit

Visual vocabulary for the CVE Dashboard home view (currentPage === 'home' in frontend/src/App.js).

Files

index.html — entry point.
HomePrimitives.jsx — StatCard, HomeCard, CardTitle, HomeButton, SeverityBadge, StatusBadge, HomeInput, HomeSelect, FieldLabel, ResultBanner, BigStat, MiniTicket, CVERow, VendorEntry, CalendarMini, ArchiveSummary, ScrollList, EmptyState, HomeIcon.
HomePage.jsx — full-page assembly (HomePage).
KitDocs.jsx — browseable docs (Overview · Tokens · Components · Assemblies · Reference).

Right-rail identity colors

Each right-side panel owns one color, applied consistently to four surfaces:

Panel	Color	Hex	Used for
Calendar	sky	`#0EA5E9`	left-rail, title glow, today cell, day dots
Open Tickets	amber	`#F59E0B`	left-rail, title glow, big stat, mini badges
Archer Risk	purple	`#8B5CF6`	left-rail, title glow, big stat, mini badges
Ivanti Workflows	teal	`#0D9488`	left-rail, title glow, big stat, mini badges

Layout

Top: 4-up stat strip (sky · neutral · amber · red).
Body: 12-col grid. Left 9 = Quick Lookup → Search/Filter → Results summary → CVE feed. Right 3 = vertical stack of right-rail panels.

Card chrome (matches Reporting + KB)

background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)
border:     1.5px solid rgba(14,165,233,0.12)   /* 0.35 on hover */
left-rail:  3px solid <identity-color>          /* right-rail panels only */
radius:     8px

Page-level rules

Green appears in one place: the page title in the chrome (and as the lone primary CTA when present, e.g. "Scan").
The four StatCard tones (sky/neutral/amber/red) map to (volume / inventory / attention / urgent). Don't reassign.
Severity uses the heavy 2px-border SeverityBadge; ticket statuses use the 1px-border StatusBadge.
Right-rail panels always lead with a BigStat. The number IS the headline.

2.2 KiB Raw Permalink Blame History