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