jramos/cve-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
27192dd69f431b26d97f13eaf9a3d07911c2bebf
cve-dashboard/.kiro/specs/dashboard-redesign/tasks.md
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

20 KiB
Raw Blame History

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

  • 1. Phase 1 — Port design tokens to App.css

    • 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

  • 2. Phase 2 — Load fonts via Google Fonts CDN

    • 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

  • 3. Phase 3 — Update global CSS classes and animations in App.css

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

  • 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

  • 5. Phase 4 — Redesign the App Shell

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

  • 6. Phase 5 — Redesign the Home Page

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

  • 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

  • 8. Phase 6 — Redesign the Reporting Page

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

  • 9. Phase 7 — Redesign the Compliance Page

    • 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
    • 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
    • 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
    • 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
    • 9.5 Update frontend/src/components/pages/ComplianceUploadModal.js styles
      • Update modal overlay, card, and buttons to match design system tokens
      • Requirements: 9.2
    • 9.6 Update frontend/src/components/pages/ComplianceDetailPanel.js styles
      • Update panel chrome and data rows to use design tokens
      • Requirements: 7.5
    • 9.7 Update frontend/src/components/pages/ComplianceChartsPanel.js styles
      • Update chart card wrappers and teal borders to use design tokens
      • Requirements: 7.7
    • 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

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

  • 11. Phase 8 — Redesign the Knowledge Base Page

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

  • 12. Phase 9 — Redesign the Exports Page

    • 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

  • 13. Phase 10 — Redesign Shared Components

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

  • 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.
Reference in New Issue View Git Blame Copy Permalink