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.
244 lines
20 KiB
Markdown
244 lines
20 KiB
Markdown
# Implementation Plan: Dashboard Redesign
|
||
|
||
## Overview
|
||
|
||
This plan migrates the STEAM Security Dashboard frontend to the refined design system defined in `docs/design-system-redesign/`. The migration is purely presentational — no behavior, routing, state management, or API changes. Each phase is independently verifiable with `npm run build` in `frontend/`. The 10-phase order ensures tokens and global styles land first, then pages migrate one at a time without breaking unmigrated components.
|
||
|
||
Key references:
|
||
- Design tokens source: `docs/design-system-redesign/colors_and_type.css`
|
||
- UI kit primitives: `docs/design-system-redesign/ui_kits/cve-dashboard/Primitives.jsx`, `AppShell.jsx`
|
||
- Home primitives: `docs/design-system-redesign/ui_kits/home/HomePrimitives.jsx`
|
||
- Reporting primitives: `docs/design-system-redesign/ui_kits/reporting/ReportPrimitives.jsx`
|
||
- Compliance primitives: `docs/design-system-redesign/ui_kits/compliance/CompPrimitives.jsx`
|
||
|
||
## Tasks
|
||
|
||
- [x] 1. Phase 1 — Port design tokens to App.css
|
||
- [x] 1.1 Add all new CSS custom properties to the `:root` block in `frontend/src/App.css`
|
||
- Merge every token from `docs/design-system-redesign/colors_and_type.css` into the existing `:root` block
|
||
- Add surface aliases (`--bg-page`, `--bg-surface`, `--bg-elevated`, `--bg-hover`, `--bg-input`, `--bg-overlay`)
|
||
- Add foreground aliases (`--fg-1`, `--fg-2`, `--fg-muted`, `--fg-disabled`, `--fg-3`, `--fg-on-accent`)
|
||
- Add border tokens (`--border-subtle`, `--border-default`, `--border-strong`, `--border-focus`, `--border-1`, `--border-2`, `--border-3`)
|
||
- Add brand accent variants (`--intel-accent-bright`, `--intel-accent-soft`, `--intel-accent-15`, `--intel-accent-08`, `--accent`, `--accent-bright`, `--accent-soft`, `--accent-wash`, `--accent-hover`)
|
||
- Add severity semantic tokens (`--sev-critical`, `--sev-high`, `--sev-medium`, `--sev-low`), severity text tokens (`--sev-critical-text`, `--sev-high-text`, `--sev-medium-text`, `--sev-low-text`), and severity fill tokens (`--sev-critical-bg`, `--sev-high-bg`, `--sev-medium-bg`, `--sev-low-bg`)
|
||
- Add group badge tokens (`--group-admin`, `--group-standard`, `--group-leadership`, `--group-readonly`)
|
||
- Add font family tokens (`--font-ui`, `--font-mono`)
|
||
- Add type scale tokens (`--fs-display` through `--fs-tiny`), line height tokens (`--lh-tight`, `--lh-normal`, `--lh-loose`), font weight tokens (`--fw-regular` through `--fw-bold`), and letter spacing tokens (`--tracking-wide`, `--tracking-wider`)
|
||
- Add spacing scale tokens (`--sp-1` through `--sp-12`)
|
||
- Add radii tokens (`--r-xs` through `--r-pill`)
|
||
- Add elevation tokens (`--shadow-rest`, `--shadow-card`, `--shadow-card-hover`, `--shadow-popover`, `--shadow-modal`, `--shadow-focus`)
|
||
- Add severity glow tokens (`--glow-danger`, `--glow-warning`, `--glow-info`, `--glow-success`) and heading glow (`--glow-heading`)
|
||
- Add motion tokens (`--ease-out`, `--ease-in-out`, `--dur-fast`, `--dur-med`, `--dur-slow`)
|
||
- Add layout tokens (`--topbar-h`, `--drawer-w`, `--panel-w`, `--content-max`, `--z-topbar`, `--z-drawer`, `--z-modal`, `--z-tooltip`)
|
||
- Preserve all existing CSS custom properties that are not superseded
|
||
- Update the universal selector `*` to use `font-family: var(--font-ui)`
|
||
- _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 1.7, 1.8, 1.9_
|
||
|
||
- [x] 2. Phase 2 — Load fonts via Google Fonts CDN
|
||
- [x] 2.1 Update the Google Fonts `<link>` tag in `frontend/public/index.html`
|
||
- Ensure Outfit loads weights 300, 400, 500, 600, 700, 800
|
||
- Ensure JetBrains Mono loads weights 400, 500, 600, 700
|
||
- Ensure `display=swap` is present to prevent invisible text during font loading
|
||
- _Requirements: 2.1, 2.3_
|
||
|
||
- [x] 3. Phase 3 — Update global CSS classes and animations in App.css
|
||
- [x] 3.1 Update existing component classes to reference new design tokens
|
||
- Update `.intel-card` to use `var(--shadow-card)` and `var(--shadow-card-hover)` elevation tokens, 8px border-radius, and the shimmer sweep on hover over 500ms
|
||
- Update `.status-badge` to use `var(--font-mono)`, 0.75rem size, 700 weight, uppercase, 0.5px letter spacing, 6px border-radius, 2px solid border, and `pulse-glow` animation at 2s interval
|
||
- Update `.intel-button` to use `var(--font-mono)`, 600 weight, uppercase, 0.5px letter spacing, 6px border-radius, and the circular ripple hover effect expanding to 300px
|
||
- Update `.intel-input` to use `var(--bg-input)` background, `var(--border-subtle)` border, 6px border-radius, and on focus apply `var(--border-focus)` border color with `var(--shadow-focus)` ring
|
||
- Update `.stat-card` to use the diagonal gradient, 8px border-radius, 2px top-edge gradient rail, and `var(--shadow-card)` elevation
|
||
- Update `.modal-overlay` to use `var(--bg-overlay)` background and `backdrop-filter: blur(12px)`
|
||
- _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6, 3.7_
|
||
- [x] 3.2 Update keyframe animations to match design token definitions
|
||
- Update `pulse-glow`, `spin`, `fade-in`, and `scan` keyframes to match `colors_and_type.css` definitions
|
||
- _Requirements: 3.8_
|
||
- [x] 3.3 Add semantic type utility classes
|
||
- Add `.t-display`, `.t-h1`, `.t-h2`, `.t-h3`, `.t-body`, `.t-sm`, `.t-meta`, `.t-label`, `.t-mono`, `.t-mono-sm`, `.t-code` classes matching the `colors_and_type.css` definitions
|
||
- _Requirements: 3.9_
|
||
- [x] 3.4 Add `*:focus-visible` rule and update scrollbar styling
|
||
- Add `*:focus-visible` rule applying `var(--border-focus)` border color and `var(--shadow-focus)` box-shadow with no outline
|
||
- Update webkit scrollbar styling to use `var(--intel-dark)` track, `rgba(14,165,233,0.3)` thumb with 4px border-radius, and `rgba(14,165,233,0.5)` on hover
|
||
- _Requirements: 3.10, 16.1, 16.2_
|
||
|
||
- [x] 4. Checkpoint — Verify token migration and global CSS
|
||
- Run `npm run build` in `frontend/` to confirm zero errors
|
||
- Verify all existing pages still render correctly with both old and new token names available
|
||
- Ensure all tests pass, ask the user if questions arise.
|
||
- _Requirements: 13.1_
|
||
|
||
- [x] 5. Phase 4 — Redesign the App Shell
|
||
- [x] 5.1 Update the top bar styles in `frontend/src/App.js`
|
||
- Set top bar to `var(--topbar-h)` height (64px), `var(--bg-surface)` background, `var(--border-subtle)` bottom border, `var(--z-topbar)` z-index
|
||
- Replace the brand mark with a typographic stack: "STEAM" in Outfit 700 at 15px, "SECURITY" in Outfit 500 at 9px with 0.18em letter spacing, Shield icon in `var(--accent)` color — matching `AppShell.jsx` reference
|
||
- Update navigation tabs to Outfit 13px, 500 weight (600 active), active state uses `var(--accent)` text + `var(--accent-soft)` background — matching `NavTab` in `AppShell.jsx`
|
||
- _Requirements: 4.1, 4.2, 4.3, 4.4, 15.1_
|
||
- [x] 5.2 Update `frontend/src/components/NavDrawer.js` inline styles
|
||
- Set drawer to `var(--drawer-w)` width (240px), `var(--bg-surface)` background, `var(--border-subtle)` right border, `var(--z-drawer)` z-index
|
||
- Set overlay to `var(--bg-overlay)` background with `backdrop-filter: blur(4px)` — matching `NavDrawer` in `AppShell.jsx`
|
||
- Update drawer items to match `DrawerItem` pattern: Outfit font, 13px, 500 weight (600 active), active uses `var(--accent)` text + `var(--accent-soft)` background
|
||
- _Requirements: 4.5, 4.6_
|
||
- [x] 5.3 Update `frontend/src/components/UserMenu.js` inline styles
|
||
- Update avatar to circular with initials in `var(--accent)` on `var(--accent-soft)` background — matching `UserMenu` in `AppShell.jsx`
|
||
- Update dropdown to `var(--bg-surface)` background, `var(--border-subtle)` border, `var(--shadow-popover)` elevation, `var(--z-drawer)` z-index
|
||
- Include user name, email, group badge, and menu items in dropdown — matching `AppShell.jsx` reference
|
||
- _Requirements: 4.7, 4.8_
|
||
|
||
- [x] 6. Phase 5 — Redesign the Home Page
|
||
- [x] 6.1 Update stat card styles in `frontend/src/App.js`
|
||
- Apply Card_Surface treatment with 2px top-edge gradient rail
|
||
- Color-code borders: sky for neutral, amber for attention, red for critical
|
||
- Apply `var(--shadow-card)` elevation with severity-tinted glow — matching `StatCard` in `HomePrimitives.jsx`
|
||
- _Requirements: 5.1_
|
||
- [x] 6.2 Update page title and CVE row styles in `frontend/src/App.js`
|
||
- Set page title to JetBrains Mono, 24px, 700 weight, sky-blue, uppercase, 0.1em letter spacing, heading glow text-shadow
|
||
- Update CVE row cards to Card_Surface treatment with 1.5px sky-blue border at 0.12 alpha, 8px border-radius, chevron toggle rotating from -90deg to 0deg — matching `CVERow` in `HomePrimitives.jsx`
|
||
- Update expanded CVE row content: severity badge with pulse-glow dot, vendor count, doc count, status labels
|
||
- Update vendor entry sub-cards to nested Card_Surface gradient — matching `VendorEntry` in `HomePrimitives.jsx`
|
||
- _Requirements: 5.2, 5.3, 5.4_
|
||
- [x] 6.3 Update Quick Lookup section styles in `frontend/src/App.js`
|
||
- Apply Card_Surface with sky-blue identity
|
||
- Update search input with icon, filter controls — matching `HomeInput` in `HomePrimitives.jsx`
|
||
- Update result banners with tone-coded backgrounds (success green, warning amber, error red) — matching `ResultBanner` in `HomePrimitives.jsx`
|
||
- _Requirements: 5.5_
|
||
- [x] 6.4 Update calendar widget and right-rail panel styles in `frontend/src/App.js`
|
||
- Update calendar to JetBrains Mono font, sky-blue current-day highlight, severity-colored dots, navigation buttons with sky-blue borders — matching `CalendarMini` in `HomePrimitives.jsx`
|
||
- Update right-rail panels (Open Tickets, Archer, Ivanti) as Card_Surface containers with left-rail color accents (amber, purple, teal), BigStat centered counts, scrollable MiniTicket lists — matching `HomeCard`, `BigStat`, `MiniTicket` in `HomePrimitives.jsx`
|
||
- _Requirements: 5.6, 5.7_
|
||
- [x] 6.5 Update filter control styles in `frontend/src/App.js`
|
||
- Update inputs and selects to `var(--bg-input)` background, sky-blue focus borders, JetBrains Mono font — matching `HomeInput`, `HomeSelect` in `HomePrimitives.jsx`
|
||
- _Requirements: 5.8_
|
||
|
||
- [x] 7. Checkpoint — Verify App Shell and Home Page
|
||
- Run `npm run build` in `frontend/` to confirm zero errors
|
||
- Ensure all tests pass, ask the user if questions arise.
|
||
- _Requirements: 13.2_
|
||
|
||
- [x] 8. Phase 6 — Redesign the Reporting Page
|
||
- [x] 8.1 Update page header and button styles in `frontend/src/components/pages/ReportingPage.js`
|
||
- Set header to "REPORTING" in JetBrains Mono, 24px, 700 weight, green (#10B981), uppercase, 0.1em letter spacing, green glow text-shadow — matching `PageHeader` in `ReportPrimitives.jsx`
|
||
- Update Sync button to green tinted-fill primary variant — matching `RptButton` primary in `ReportPrimitives.jsx`
|
||
- Update secondary buttons (Atlas, Export, Queue, Column manager) to sky-blue outlined or tinted-fill variants — matching `RptButton` neutral/subtle in `ReportPrimitives.jsx`
|
||
- _Requirements: 6.1, 6.2_
|
||
- [x] 8.2 Update findings table panel and toolbar styles in `frontend/src/components/pages/ReportingPage.js`
|
||
- Apply Card_Surface with sky-blue border at 0.12 alpha — matching `KbCard` in `ReportPrimitives.jsx`
|
||
- Update toolbar with mono uppercase labels, filter chips in amber, pill tabs for Ivanti/Atlas views — matching `ToolbarLabel`, `FilterChip`, `PillTab` in `ReportPrimitives.jsx`
|
||
- _Requirements: 6.3_
|
||
- [x] 8.3 Update table row and cell styles in `frontend/src/components/pages/ReportingPage.js`
|
||
- Update rows with `var(--border-subtle)` bottom borders
|
||
- Update severity dots to 7px diameter with colored glow — matching `SeverityDot` in `ReportPrimitives.jsx`
|
||
- Update SLA pills with pill-radius and tinted backgrounds — matching `SlaPill` in `ReportPrimitives.jsx`
|
||
- Update workflow badges with 4px radius and tinted borders — matching `WorkflowBadge` in `ReportPrimitives.jsx`
|
||
- Apply hover state: `rgba(0,217,255,0.06)` background wash and `0 2px 8px rgba(0,217,255,0.10)` sub-shadow
|
||
- _Requirements: 6.4, 6.5_
|
||
- [x] 8.4 Update chart panels and error banner styles in `frontend/src/components/pages/ReportingPage.js`
|
||
- Update chart panels to Card_Surface with sky-blue borders, mono uppercase title labels — matching `KbCard` in `ReportPrimitives.jsx`
|
||
- Update donut charts to use severity color palette
|
||
- Update error status banner to red-tinted background, red border, AlertCircle icon, mono font — matching `StatusBanner` in `ReportPrimitives.jsx`
|
||
- _Requirements: 6.6, 6.7_
|
||
|
||
- [x] 9. Phase 7 — Redesign the Compliance Page
|
||
- [x] 9.1 Update page header and team tabs in `frontend/src/components/pages/CompliancePage.js`
|
||
- Set header to "AEO COMPLIANCE" in JetBrains Mono, 24px, 700 weight, teal (#14B8A6), uppercase, 0.1em letter spacing, teal glow text-shadow — matching `CompPageHeader` in `CompPrimitives.jsx`
|
||
- Update team tabs (STEAM, ACCESS-ENG) with teal-tinted active state, mono uppercase labels, 6px border-radius — matching `TeamTabs` in `CompPrimitives.jsx`
|
||
- _Requirements: 7.1, 7.2_
|
||
- [x] 9.2 Update metric health cards in `frontend/src/components/pages/CompliancePage.js`
|
||
- Apply Card_Surface with status-colored borders (green for meeting, amber for within 15%, red for below 15%)
|
||
- Add variant pills showing compliance percentages — matching `MetricHealthCard`, `VariantPill` in `CompPrimitives.jsx`
|
||
- Add status ribbon at bottom — matching `StatusRibbon` in `CompPrimitives.jsx`
|
||
- Highlight active card with status-colored background fill at 0.15 alpha and solid border
|
||
- _Requirements: 7.3, 7.4_
|
||
- [x] 9.3 Update device table styles in `frontend/src/components/pages/CompliancePage.js`
|
||
- Apply teal-tinted borders at 0.15 alpha
|
||
- Update column headers to mono uppercase
|
||
- Update hostname/IP to JetBrains Mono
|
||
- Add category-colored metric badges — matching `MetricBadge` in `CompPrimitives.jsx`
|
||
- Add escalating seen-count badges (slate for 1, amber for 2–3, red for 4+) — matching `SeenBadge` in `CompPrimitives.jsx`
|
||
- Add teal-accented search input — matching `CompSearchInput` in `CompPrimitives.jsx`
|
||
- Apply hover state with white-alpha background wash and selected row with 2px teal left border — matching `DeviceRow` in `CompPrimitives.jsx`
|
||
- _Requirements: 7.5, 7.6_
|
||
- [x] 9.4 Update chart cards in `frontend/src/components/pages/CompliancePage.js`
|
||
- Apply teal-tinted borders, mono uppercase titles, Card_Surface gradient background — matching `ChartCard` in `CompPrimitives.jsx`
|
||
- _Requirements: 7.7_
|
||
- [x] 9.5 Update `frontend/src/components/pages/ComplianceUploadModal.js` styles
|
||
- Update modal overlay, card, and buttons to match design system tokens
|
||
- _Requirements: 9.2_
|
||
- [x] 9.6 Update `frontend/src/components/pages/ComplianceDetailPanel.js` styles
|
||
- Update panel chrome and data rows to use design tokens
|
||
- _Requirements: 7.5_
|
||
- [x] 9.7 Update `frontend/src/components/pages/ComplianceChartsPanel.js` styles
|
||
- Update chart card wrappers and teal borders to use design tokens
|
||
- _Requirements: 7.7_
|
||
- [x] 9.8 Update rollback modal in `frontend/src/components/pages/CompliancePage.js`
|
||
- Apply centered modal with red-tinted border, red mono uppercase title, dark recessed file label, danger-styled confirm button — matching `RollbackDialog` in `CompPrimitives.jsx`
|
||
- _Requirements: 7.8_
|
||
|
||
- [x] 10. Checkpoint — Verify Reporting and Compliance Pages
|
||
- Run `npm run build` in `frontend/` to confirm zero errors
|
||
- Ensure all tests pass, ask the user if questions arise.
|
||
|
||
- [x] 11. Phase 8 — Redesign the Knowledge Base Page
|
||
- [x] 11.1 Update `frontend/src/components/pages/KnowledgeBasePage.js` styles
|
||
- Set page header to mono uppercase glow pattern with sky-blue or green identity color
|
||
- Update document list items to recessed Card_Surface treatment with `inset 0 2px 4px rgba(0,0,0,0.3)` shadow, sky-blue borders at 0.20 alpha, hover state increasing border opacity to 0.35
|
||
- Update action buttons (upload, create, view) to redesigned button variants with mono uppercase labels and tinted-fill backgrounds
|
||
- _Requirements: 8.1, 8.2, 8.4_
|
||
- [x] 11.2 Update `frontend/src/components/KnowledgeBaseModal.js` styles
|
||
- Update modal chrome and form inputs to use design tokens
|
||
- Apply `var(--bg-overlay)` overlay, `var(--shadow-modal)` elevation, 12px border-radius
|
||
- _Requirements: 9.2_
|
||
- [x] 11.3 Update `frontend/src/components/KnowledgeBaseViewer.js` styles
|
||
- Update viewer chrome and markdown content area
|
||
- Ensure `.markdown-content` rules in App.css are consistent: h1 sky-blue, h2 emerald, h3 amber, code blocks with dark recessed background, blockquotes with sky-blue left border
|
||
- _Requirements: 8.3_
|
||
|
||
- [x] 12. Phase 9 — Redesign the Exports Page
|
||
- [x] 12.1 Update `frontend/src/components/pages/ExportsPage.js` styles
|
||
- Set page header to mono uppercase glow pattern with appropriate identity color
|
||
- Update export action cards to Card_Surface treatment with sky-blue borders
|
||
- Update buttons to redesigned button variants
|
||
- _Requirements: 10.1, 10.2_
|
||
|
||
- [x] 13. Phase 10 — Redesign Shared Components
|
||
- [x] 13.1 Update `frontend/src/components/LoginForm.js` styles
|
||
- Apply Card_Surface treatment to login form
|
||
- Update input fields to `var(--bg-input)` background with sky-blue focus rings
|
||
- Update primary button to redesigned variant
|
||
- _Requirements: 9.1_
|
||
- [x] 13.2 Update `frontend/src/components/CalendarWidget.js` styles
|
||
- Apply JetBrains Mono font throughout
|
||
- Set sky-blue current-day highlight with 1px border
|
||
- Add severity-colored date markers
|
||
- Update navigation buttons with sky-blue borders — matching `CalendarMini` in `HomePrimitives.jsx`
|
||
- _Requirements: 9.6_
|
||
- [x] 13.3 Update `frontend/src/components/UserManagement.js` styles
|
||
- Apply group badges using token-based group colors (`--group-admin` red, `--group-standard` sky-blue, `--group-leadership` amber, `--group-readonly` grey) with pill-radius and tinted backgrounds — matching `GroupBadge` in `Primitives.jsx`
|
||
- Update table rows and buttons to use design tokens
|
||
- _Requirements: 9.3_
|
||
- [x] 13.4 Update `frontend/src/components/AuditLog.js` styles
|
||
- Apply data-row treatment with `var(--border-subtle)` bottom borders
|
||
- Update timestamps and action types to mono font
|
||
- Apply hover state with sky-blue background wash
|
||
- _Requirements: 9.4_
|
||
- [x] 13.5 Update `frontend/src/components/NvdSyncModal.js` styles
|
||
- Apply Card_Surface treatment with standard modal elevation
|
||
- Update buttons to redesigned variants
|
||
- Apply `var(--bg-overlay)` overlay and `var(--shadow-modal)` elevation
|
||
- _Requirements: 9.5_
|
||
|
||
- [x] 14. Final checkpoint — Verify all pages and shared components
|
||
- Run `npm run build` in `frontend/` to confirm zero errors
|
||
- Verify no new console warnings related to styling
|
||
- Ensure all tests pass, ask the user if questions arise.
|
||
- _Requirements: 11.1, 11.2, 11.3, 11.4, 11.5, 12.1, 12.2, 14.1, 14.2, 14.3, 14.4_
|
||
|
||
## Notes
|
||
|
||
- This is a pure visual redesign. No behavior, routing, state management, or API changes.
|
||
- No new dependencies are added. Fonts load from Google Fonts CDN only.
|
||
- Each phase is independently verifiable — run `npm run build` after each to confirm no breakage.
|
||
- Severity colors are immutable: Critical (#EF4444), High (#F59E0B), Medium (#0EA5E9), Low (#10B981).
|
||
- All existing CSS custom properties are preserved alongside new tokens for backward compatibility.
|
||
- UI kit reference files in `docs/design-system-redesign/ui_kits/` are the visual source of truth for each component's target styling.
|
||
- Property-based testing does not apply to this feature — it is a pure CSS/style migration with no testable pure functions or data transformations.
|