Skip to content

fix(ui): stop hardcoding WSL warning icon color, use icon-muted token - #184

Merged
alltomatos merged 1 commit into
devfrom
design/171-servers-providers
Sep 9, 2026
Merged

alltomatos merged 1 commit into
devfrom
design/171-servers-providers

Conversation

@alltomatos

Copy link
Copy Markdown
Owner

Issue for this PR

Relates to #171 (the icon-only clear-search button in `components/settings-v2/servers.tsx`, also in this issue's scope, was already fixed in #182 — not closing #171 here since dialog-server-v2.tsx / dialog-server-qr-code.tsx / providers.tsx / ssh-tunnel + tailscale add-server dialogs were also audited clean and don't need this PR to close it)

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

Audited `components/settings-v2/servers.tsx`, `providers.tsx`, `dialog-server-v2.tsx`, `dialog-server-qr-code.tsx`, and the SSH-tunnel/Tailscale/WSL "add server" dialogs for raw hex colors, ad-hoc shadows, non-token Tailwind classes, and missing `aria-label`s.

Found one real gap: the "WSL not installed" dialog's warning-triangle SVG (`wsl/dialog-add-server.tsx`) hardcoded `fill="#DBDBDB"` — which happens to equal `--v2-grey-400`, but as a literal hex it never adapts to the dark theme like every other icon in this design system does. Switched the SVG to `fill="currentColor"` and set `color: var(--v2-icon-icon-muted)` on its wrapper class (`wsl/dialog-add-wsl-server.css`).

Everything else audited clean.

How did you verify your code works?

  • `bun run typecheck` (packages/app) passes.
  • `--v2-icon-icon-muted` resolves to the same visual weight (grey-600 light / grey-600 dark) the icon already had in light mode, so no visible light-mode regression; in dark mode it now correctly uses the dark-mode icon token instead of staying pinned to a light-mode grey.

Screenshots / recordings

Not captured — this environment can only run the app inside its Electron shell, not a plain browser preview (confirmed in earlier work this session). The change is a one-line color-source swap with an equivalent computed color in light mode, so I'm confident in the fix, but a visual double-check by a maintainer in both themes would be good before merge.

Checklist

  • I have tested my changes locally (typecheck)
  • I have not included unrelated changes in this PR

The "WSL not installed" dialog's warning triangle SVG hardcoded
fill="#DBDBDB" (equal to --v2-grey-400 by coincidence) instead of a
semantic token, so it never adapted to the dark theme. Switched to
fill="currentColor" and set color: var(--v2-icon-icon-muted) on the
wrapper class, matching how every other icon in this design system is
themed.

Part of the dark-mode/Apple-like design pass (opencode#171).

Co-Authored-By: Claude Sonnet 5 <[email protected]>
@github-actions

github-actions Bot commented Sep 9, 2026

Copy link
Copy Markdown

Thanks for your contribution!

This PR doesn't have a linked issue. All PRs must reference an existing issue.

Please:

  1. Open an issue describing the bug/feature (if one doesn't exist)
  2. Add Fixes #<number> or Closes #<number> to this PR description

See CONTRIBUTING.md for details.

@alltomatos
alltomatos merged commit 946fadc into dev Sep 9, 2026
8 of 10 checks passed
@alltomatos
alltomatos deleted the design/171-servers-providers branch September 9, 2026 20:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant