Skip to content

feat(app): consistent visual design for the pilot UI #52

Closed
#53
Closed
feat(app): consistent visual design for the pilot UI#52
#53
Assignees
Fluory
Labels
featureNew capability

Description

@Fluory
Fluory
opened on Sep 23, 2026

Ziel

The pilot UI looks like an unstyled prototype. Clerks and admins should get a calm, consistent, professional interface (shared header and navigation, clear status pills, readable tables, visible primary/danger actions) without any change to flows, texts that tests rely on, or permissions.

Akzeptanzkriterien

  • Every page shares one app shell: brand, navigation (Anfragen; Benutzer for admins), company, role and „Abmelden" when signed in; only the brand when signed out.
  • Colours, spacing, radii and typography are defined once as design tokens (CSS custom properties) in globals.css; no new dependency, no external font download (system font stack).
  • Request status (list and detail) and field status are shown as pills with text – status is never shown by colour alone; all text/background pairs meet WCAG AA contrast.
  • Primary actions (upload, approve), secondary actions and destructive actions (reject, reject as duplicate, deactivate) are visually distinct.
  • Tables stay readable at narrow width (horizontal scroll inside the table container, no page overflow).
  • Keyboard operation and the visible focus outline are unchanged; labels, roles, data-testids and the existing E2E smoke flows pass without changes to the specs.

Nicht Teil dieser Aufgabe

  • Dark mode, a component library or CSS framework, icons/illustrations.
  • Any change to flows, permissions, server actions or API.

Betroffene Bereiche

  • src/app/globals.css, src/app/layout.tsx, src/app/_components/, pages under src/app/**/page.tsx (markup classes only)

Testplan

Kriterium Prüfart
App shell, tokens, pills, actions, tables manual proof of check with screenshots (styling gets a proof of check, not an artificial test)
Contrast AA manual check of the token pairs (documented in the PR)
Keyboard, focus, labels, flows unchanged both Playwright smoke specs unchanged and green; pnpm verify

Security/Privacy betroffen?

Nein – no external font or asset loading (no third-party requests from the browser).

Activity

  1. Fluory
    added
    featureNew capability
    on Sep 23, 2026
  2. Fluory
    self-assigned this
    on Sep 23, 2026

  3. Fluory commented on Sep 23, 2026

    @Fluory
    Fluory
    on Sep 23, 2026 – with Claude
    OwnerAuthor

    Claimed by @Fluory (Claude Code session) on branch claude/feat-ui-design-52 – requested by the orchestrator ("Mach schön"). Draft PR follows.

    Generated by Claude Code

  4. Fluory
    added 10 commits that reference this issue on Sep 23, 2026

    fix(app): keep hidden table labels inside the scroll container; wider…

    15d58a7

    fix(app): duplicate reason field no longer overlaps its button; chang…

    3537b44

    fix(app): one session lookup per page shared by header and page; head…

    f119940

    refactor(app): split the stylesheet – tables, status and review style…

    7cf7365

    fix(app): review findings – scroll padding under the sticky header, c…

    e514448

    feat(app): quieter, more professional design – neutral palette, dark …

    2cea3ee

    feat(app): calmer status display – field status as muted text, tinted…

    7a47534

    chore(deps): self-hosted IBM Plex Sans/Mono (@fontsource 5.3.0, OFL-1…

    b30413e

    feat(app): implement design prototype A – warm neutral palette, IBM P…

    a54fde8

    fix(app): 44 px nav targets on phones; changelog for design prototype…

    99fd523

  5. Fluory commented on Sep 24, 2026

    @Fluory
    Fluory
    on Sep 24, 2026 – with Claude
    OwnerAuthor

    Scope update: design prototype "RequestFlow A"

    On the orchestrator's request, PR #53 now implements the Claude Design prototype "RequestFlow A" (provided as a bundled HTML file).

    Changed acceptance criteria

    • Criterion 2 ("no new dependency, system fonts") is replaced: the prototype uses IBM Plex Sans/Mono.
      • The fonts are self-hosted via @fontsource/ibm-plex-sans and @fontsource/ibm-plex-mono 5.3.0 (OFL-1.1).
      • Only the Latin weights the design uses are imported.
      • The browser still makes no third-party requests. No Google Fonts and no next/font/google, because that fetches at build time.
    • Criterion 6 is unchanged: both E2E smoke specs pass without changes. To keep them passing, header-field correction stays in the table row. The prototype moves it into the side panel. Line-item correction lives in the side panel, as in the prototype.

    Prototype-only demo features, deliberately not built

    • The role/start-page switcher.
    • The "open link as invited person" shortcut.
    • The company/role preview on the sign-up page, which would need a new public invitation lookup.

    Other deviations

    • The prototype's example domain hartmann-maschinenbau.de is replaced by example.com, because the repository is public and all data is synthetic.
    • Input borders are darker than in the prototype (#8e8a80, 3.4:1), to meet WCAG 1.4.11.

    Generated by Claude Code

  6. Fluory
    added a commit that references this issue on Sep 24, 2026

    fix(app): review findings – anchor to the source panel on phones, ari…

    82d2dc0
  7. Fluory
    closed this as completedin #53on Sep 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

featureNew capability

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions