Skip to content

fix(web): improve theme contrast and center controls across client views #211

Description

@PeterGuy326

Revision r2 — ready

Shared design contract: bytefolk/design-system#29 (revision r1).

The user refined this ongoing appearance task: all clients must share the existing design language and align content by its role, rather than center all short text. Totoro (@Bindy-lbb) is the requested final reviewer.

Current acceptance (supersedes earlier alignment wording)

  • AC-ALIGN: Start-align page/card/dialog headings, navigation, menus, form labels/values, filenames and prose. End-align comparable numbers and trailing metadata/actions. Center button content, compact badges/tabs and deliberate empty-state compositions. Remove blanket overrides that defeat component intent.
  • AC-EMPTY: One clear empty-state title, concise explanation and an available next step; no duplicated instructions or unsupported actions. RoleWeave specifically improves the unselected local-conversation state.
  • AC-THEME: Preserve previous theme/contrast fixes and consume existing shared tokens/provider/profile APIs. Follow the shared spacing, typography, radius and hierarchy contract.
  • AC-VERIFY: Build and inspect light/dark, desktop/narrow, empty/populated, normal/hover/focus states. Use isolated test data. Keep reproducible evidence, independent preflight and latest-head CI separate from formal human approval.
  • AC-DELIVER: Update the existing unmerged PR with scoped source, changelog and evidence. Show the final local client; request Totoro review once stable. No merge, release or installed-client replacement.

Revision history

r2: semantic alignment and coherent empty states requested by user; append-only requirement decision recorded at 2026-09-16T01:18:12.677003+00:00.

Previous revision retained for scope and evidence history

Revision r1 — ready

The user requested a complete client appearance walkthrough, successful local build, and a pull request. Some subtle/status colors have weak contrast, disabled controls fade excessively, and button/page/dialog labels align inconsistently.

Scope and acceptance criteria

  • AC1: Light/dark themes provide readable foreground/background combinations for buttons, badges, inputs, disabled/loading controls, status and empty-state text.
  • AC2: Control labels, page/dialog titles and short prompts are centered without changing long-form content or code alignment.
  • AC3: Walk through navigation routes, populated detail views and create/edit/relation/delete/confirmation dialogs with local synthetic data. All confirmation actions retain visible localized labels.
  • AC4: Typecheck, lint, unit/theme checks and web production build pass; retain text-only reproducible evidence in the PR.
  • AC5: Preserve data, authorization and API behavior; no new dependencies or real account operations.

Delivery

One scoped web appearance PR, an Unreleased changelog entry, independent preflight review and current-head CI. Merge and release remain separate.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:webWeb applicationevidence:e3-reproducedMaintainer reproduced with deterministic stepsstatus:readyScope and acceptance criteria are ready for developmenttype:bugSomething is broken or behaves incorrectly

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions