Give both modes one look: Clinical band, grouped lists, calmer controls

Merged
BI
1mo ago
+855-473

User description

Requested by Josh · project thread

Summary

Before: Work and Clinical read as two different apps. Clinical had a plain white top bar and tab bar, page headings in five sizes, every list item in its own card with a thick blue side bar, red "HIGH" pills on most forms, and some black buttons. Work bands had a dot texture, filter chips wrapped and left one chip alone, and five pages had two ways back.

After: Clinical top bars and tab bars share the mode's soft tint as one band, like a work page's top bar and band. Clinical page headings share one eyebrow, title and description style. Clinical lists group items as divided rows in one hairline card. Priority labels are neutral tags, and red stays for urgent. Buttons take the area colour. Chip rows stay on one line and scroll with an edge fade. The Work band is calmer, and a set of Work polish items is fixed.

The owner approved the seven rules behind this on 11 Oct 2026. They are recorded as decision C8 in docs/design-system/DECISIONS.md.

  • How:
    • Clinical band: the top bar carries data-clinical-band on Clinical pages other than the shared home. mode-band.css tints it and the tab bar. The tab bar stays in the collapse track, so it hides and reveals as before. The Clinical search box and its position are untouched.
    • Shared heading: PageHeader defines the heading style once and exports it for hand-rolled headers.
    • Lists and tags: these were restyled in their own components. Every link, action and word is kept.
    • Chip rows: .work-chips is now one line. A scroll-driven fade appears only where there is more. Browsers without scroll-driven animations get no fade, and no chip is hidden.
    • Work polish: the duplicate back link is removed on Open shifts, First week, Leave wallet, Contract and Job applications. Also fixed: profile statuses aligned, On Call type sizes and grouped People, First week and Leave wallet tidy-ups, the CPD "Demo mode" wording changed to "example", and the Leave and requests gap.

Areas touched: App experience, Clinical reference UI, Personal practice (visual only)

Verification

  • Checks run:
    • vitest related over every changed source and test file: Test Files 269 passed (269), Tests 3116 passed (3116).
    • Tests that read the changed CSS and components by path: Test Files 44 passed (44), Tests 975 passed (975).
    • tsc --noEmit and eslint on the changed files: clean.
    • prettier --check on the changed files: clean.
    • check:design-system-contract: passes.
    • Screens captured at 320, 390, 1280 and 390 dark: no sideways overflow.
    • Browser suites are left to CI.

Risk and rollout

  • Risk: Medium for visuals, low for behaviour. No data, API or clinical wording changes. Visual and layout contracts may need small CI follow-ups.
  • Rollback: Revert this commit.
  • Provider or production effects: None.

Notes

  • Not changed by design: the Clinical bottom search box and its behaviour (owner request), and no title band in Clinical, because it would have moved the tab bar out of the collapse track.
  • Follow-ups: these are left for later, either because they touch shared tokens or components or because they wait on an owner decision.
    • Clinical-wide primary button tokens (three pages use local overrides for now).
    • The Diagnoses count clipped by the grouping toggle at 390 px.
    • Journal club showing twice on My Day, which waits on a decision about the Later action.
    • MyDayReturnLink under the one-way-back rule.

🤖 Generated with Claude Code

https://claude.ai/code/session_01T6yVRM8TyEHCooxU8ke9nA

Generated by Claude Code

Summary by cubic

Unifies Work and Clinical so both modes share one visual language, per the owner-approved design decision C8 from the 11 Oct 2026 review. No data or clinical wording changes.

  • Clinical top bars and tab bars become one tinted band; the tab bar still collapses, and the bottom search box is untouched.
  • Clinical lists group items into divided rows in a single hairline card, now including the Therapy Compass pathway rail and steps; priority labels are neutral tags with red reserved for urgency.
  • Clinical primary buttons take the area colour, falling back to native colours under forced-colour settings, and page headings share one style via PageHeader.
  • Work drops the dot texture and calms the band drawing; chip rows stay on one line and scroll sideways with an edge fade.
  • One way back everywhere: the duplicate back links are removed on First week, CME applications, Open shifts and the admin pages (whose band's Today tab is Admin Today). First Nations pins its olive to its own standard, so its primary buttons stay neutral. Review fixes contain grouped-row focus rings and keep the danger cue red as a tag; Work polish covers profile statuses, On Call type sizes, the now list leading with cover when there is no Emergency group, and CPD wording.

CodeAnt-AI Description

Bring Work and Clinical screens into one clear visual style

What Changed

  • Clinical pages now use a softly tinted header and tab bar, with consistent page headings and area-coloured primary buttons.
  • Lists across both modes use divided rows inside a single card instead of separate cards and coloured side bars.
  • Priority and category labels use neutral styling; red is reserved for urgent states.
  • Filter chips stay on one line and scroll sideways on narrow screens. Pages no longer repeat a Back link already shown in the header.

Impact

✅ Easier-to-scan grouped lists
✅ Filter chips stay on one row on phones
✅ Urgent states stand out from routine priorities

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.