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