Skip to content

fix: restore dark mode contrast in Cloud settings#1410

Merged
jcllobet merged 1 commit into
devfrom
task/cloud-dark-mode-buttons
Apr 9, 2026
Merged

fix: restore dark mode contrast in Cloud settings#1410
jcllobet merged 1 commit into
devfrom
task/cloud-dark-mode-buttons

Conversation

@jcllobet
Copy link
Copy Markdown
Collaborator

@jcllobet jcllobet commented Apr 9, 2026

Summary

  • Replace the hard-coded light fills in DenSettingsPanel badges, pills, notices, and quiet controls with design-language tokens so the Cloud tab stays readable in dark mode.
  • Keep the change surgical to Settings > Cloud only.
  • Add before/after screenshots under apps/app/pr/ and embed them below for review.

Verification

  • Started the Docker dev stack with packaging/docker/dev-up.sh.
  • Used Chrome MCP against the running app to open Settings > Cloud in dark mode, seeded a mocked signed-in Cloud state in-browser to reproduce the signed-in/no-org UI deterministically, and captured before/after screenshots.
  • Sent smoke: hello from chrome mcp in the running app and got Hello! Connection received. How can I help you today?.
  • docker compose -p openwork-dev-6aaca973 -f packaging/docker/docker-compose.dev.yml exec -T web sh -lc 'pnpm --filter @openwork/app typecheck'
  • docker compose -p openwork-dev-6aaca973 -f packaging/docker/docker-compose.dev.yml exec -T web sh -lc 'pnpm --filter @openwork/app build'
  • docker compose -p openwork-dev-6aaca973 -f packaging/docker/docker-compose.dev.yml exec -T web sh -lc 'pnpm --filter @openwork/app test:health' (fails in the dev container because opencode is not on PATH: spawn opencode ENOENT)

Screenshots

Before

CleanShot 2026-04-08 at 23 26 42@2x

After

CleanShot 2026-04-08 at 23 27 11@2x

Replace hard-coded light fills in the Cloud settings panel with design-system tokens so badges, pills, and outline controls keep readable contrast in dark mode.
@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented Apr 9, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
openwork-app Ready Ready Preview, Comment Apr 9, 2026 5:59am
openwork-den Ready Ready Preview, Comment Apr 9, 2026 5:59am
openwork-den-worker-proxy Ready Ready Preview, Comment Apr 9, 2026 5:59am
openwork-landing Ready Ready Preview, Comment, Open in v0 Apr 9, 2026 5:59am
openwork-share Ready Ready Preview, Comment Apr 9, 2026 5:59am

@jcllobet
Copy link
Copy Markdown
Collaborator Author

jcllobet commented Apr 9, 2026

Fix note: the unreadable controls were coming from hard-coded light backgrounds in apps/app/src/app/components/den-settings-panel.tsx. This PR swaps those badges, pills, notices, and quiet controls to the existing design-language surface and border tokens so dark mode inherits the same contrast rules as the rest of settings without changing behavior outside the Cloud tab.

@jcllobet jcllobet merged commit 5a99485 into dev Apr 9, 2026
16 checks passed
benjaminshafii pushed a commit that referenced this pull request May 15, 2026
Replace hard-coded light fills in the Cloud settings panel with design-system tokens so badges, pills, and outline controls keep readable contrast in dark mode.
benjaminshafii pushed a commit that referenced this pull request May 15, 2026
Replace hard-coded light fills in the Cloud settings panel with design-system tokens so badges, pills, and outline controls keep readable contrast in dark mode.
@benjaminshafii benjaminshafii deleted the task/cloud-dark-mode-buttons branch May 15, 2026 17:38
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.

1 participant