Skip to content

Design-system refresh, dashboard rework and configurable company branding#134

Merged
frousselet merged 1 commit into
mainfrom
feat/design-system-refresh
Jun 18, 2026
Merged

Design-system refresh, dashboard rework and configurable company branding#134
frousselet merged 1 commit into
mainfrom
feat/design-system-refresh

Conversation

@frousselet

@frousselet frousselet commented Jun 18, 2026

Copy link
Copy Markdown
Owner

Refreshes the core screens against the Cairn design system, reworks the dashboard, and adds per-instance company branding. One squashed commit.

Design system (screens)

  • Risk-assessment detail : tokenized ISO 27005 workflow card (hairline rows, circular step numbers) replacing hardcoded hex.
  • Compliance audit : count-chip + full-width-track finding breakdown.
  • Support assets : C / I / A header tooltips.
  • Risk matrices : clean rest state + hover glow in the cell's own severity colour; styling centralized so all three usages match.

Dashboard

  • "Today's actions" is dismissible from a discreet page-header toggle, state persisted per user (User.collapsed_sections + a dashboard/section-toggle/ endpoint).
  • "Compliance by framework" and "Active objectives" side by side, aligned rows, uniform bar heights; segmented framework bars.
  • Removed the Governance / Assets / Compliance stat-card sections and the risk KPI cards; the risk-treatment Sankey and risk matrices are now self-titled cards (labels moved inside, flush with the other panels).
  • Indicators Configure moved into the page header; uniform panel spacing; neutral KPI sparklines now follow the accent colour.
  • Show achieved (100 %) objectives, not just active ones.

Company branding (company settings)

  • app_name overrides the "Cairn" wording in the sidebar and browser tab titles.
  • use_logo_as_app_brand swaps the Cairn mark for the company logo (edge-to-edge; the About dialog always keeps the Cairn logo).
  • accent_color overrides the navy accent app-wide: tokens recomputed via color-mix, lightness clamped per theme (a dark/grey accent goes near-white in dark mode), a luminance-based --accent-contrast keeps text / ticks / switch knobs legible, and Bootstrap's primary button variables are remapped to the accent so no state falls back to #0d6efd. The focus ring is neutral (no blue liseré).
  • Exposed on the settings page, the REST API and the get_company_settings / update_company_settings MCP tools; the company settings singleton is provided to every template via a context processor.

Note: the accent-colour override is an optional per-instance white-label setting; the default remains the navy identity colour, so the brand guideline's "single navy" rule still holds by default.

Also

  • Fix the changelog-dismiss POST (it called an out-of-scope getCsrfToken).

Verification

  • ruff check . clean · makemigrations --check no changes · compilemessages OK · FR translations added (no duplicate msgid) · pytest across accounts / core / mcp / risks / compliance / assets green.
  • Visual check in light + dark mode (incl. a custom accent).

🤖 Generated with Claude Code

@frousselet

Copy link
Copy Markdown
Owner Author

Added: collapsible "Today's actions" card with per-user memory

Following review feedback, the dashboard's Today's actions card is now collapsible, with the state persisted per user in the database (restored across sessions and devices).

  • Model: new User.collapsed_sections JSONField (list of collapsed section keys), mirroring the existing dismissed_helpers / table_preferences UI-preference fields. Migration accounts/0044.
  • Endpoint: SectionCollapseToggleView POST at dashboard/section-toggle/ (section keys allow-listed), mirroring ChangelogDismissView. The dashboard view exposes today_actions_collapsed.
  • UI: Bootstrap collapse on the card body, rotating chevron in the header; state saved on shown/hidden events via the existing getCsrfToken() helper.
  • Tests: collapse/expand round-trip, idempotency, unknown-section rejection, login-required, and the dashboard context flag (6 tests).

Consistent with the existing per-user preferences (table sort, dismissed helpers, changelog), this is UI-chrome state and is intentionally not exposed via the REST API or MCP.

Verification: ruff check . clean · makemigrations --check no changes · FR translations added (no duplicate msgid) · compilemessages OK · targeted pytest 249 passed.

…ding

Brings the core screens in line with the Cairn design system, reworks the
dashboard, and adds per-instance branding (name, logo, accent colour).

Design system (screens):
- Risk-assessment detail: tokenized ISO 27005 workflow card (hairline rows,
  circular step numbers) instead of hardcoded hex.
- Compliance audit: count-chip + full-width-track finding breakdown.
- Support assets: C/I/A header tooltips (already matched otherwise).
- Risk matrices: clean rest state + a hover glow in the cell's own severity
  colour; styling centralized so all three usages match.

Dashboard:
- "Today's actions" is dismissible from a discreet page-header toggle, with the
  collapsed state persisted per user (new User.collapsed_sections + a small
  section-toggle endpoint).
- "Compliance by framework" and "Active objectives" sit side by side with
  aligned rows and uniform bar heights; segmented framework bars.
- Removed the Governance / Assets / Compliance stat-card sections and the risk
  KPI cards; the risk-treatment Sankey and matrices are now self-titled cards
  (labels moved inside, flush with the other panels).
- Indicators "Configure" moved into the page header; uniform panel spacing;
  neutral KPI sparklines now follow the accent colour.
- Show achieved (100%) objectives, not just active ones.

Company branding (company settings):
- app_name overrides the "Cairn" wording in the sidebar and tab titles.
- use_logo_as_app_brand swaps the Cairn mark for the company logo (shown
  edge-to-edge; the About dialog always keeps the Cairn logo).
- accent_color overrides the navy accent app-wide: tokens recomputed via
  color-mix, lightness clamped per theme (a dark/grey accent goes near-white in
  dark mode), a luminance-based --accent-contrast keeps text/ticks/switch knobs
  legible, and Bootstrap's primary button variables are remapped to the accent
  so no state falls back to #0d6efd. Focus ring is now neutral (no blue liseré).
- Exposed on the settings page, the DRF serializer and the get/update_company
  _settings MCP tools; company settings are provided to every template by a
  context processor.

Also: fix the changelog-dismiss POST (used an out-of-scope getCsrfToken).
Adds migrations, FR translations, README/MCP docs and tests; ruff clean.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@frousselet frousselet force-pushed the feat/design-system-refresh branch from a230e1e to 76173ca Compare June 18, 2026 17:31
@frousselet frousselet changed the title Align core screens with the Cairn design system Design-system refresh, dashboard rework and configurable company branding Jun 18, 2026
@frousselet frousselet merged commit 8002791 into main Jun 18, 2026
5 checks passed
@frousselet frousselet deleted the feat/design-system-refresh branch June 18, 2026 17:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants