27192dd69f
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.
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.