fix(desktop): use dark text on accent button for readable contrast

[Miyamura80]

Summary

• The sign-in button on the welcome screen used text-white on the bright cyan --accent (#7dfff6), giving a contrast ratio of ~1.2:1 (WCAG minimum is 4.5:1) — the text was nearly invisible
• Changed to text-[var(--bg-base)] (dark text) to match the shared Button component's primary variant
• Also bumped the explanatory text below the button from --text-muted to --text-secondary for better readability

Test plan

• Verify the "Sign in with your browser" button text is clearly readable (dark on cyan) in the desktop app's welcome screen
• Verify the explanatory text below the button is legible
• Confirm Storybook Client2/WelcomeStep stories render correctly

https://claude.ai/code/session_01ShEgHD4LY9DCJgXvnNaasE

---

Generated by Claude Code

---

Summary by cubic

Fix unreadable sign-in button text on the desktop welcome screen by switching to dark text (text-[var(--bg-base)]) on the bright cyan --accent background to meet WCAG contrast guidelines. Also updates the helper text below the button from --text-muted to --text-secondary for better readability.

^{Written for commit 084a96c. Summary will update on new commits.}

[qodo-code-review]

PR Summary by Qodo

Fix welcome screen button contrast by using dark text on accent background

🐞 Bug fix 🕐 Less than 5 minutes

AI Description

• Switch the welcome screen sign-in button text to dark for WCAG-readable contrast.
• Increase the explanatory caption color from muted to secondary for improved legibility.

Diagram

graph TD
  A["WelcomeStep (desktop)"] --> B["Sign-in button styles"] --> C["auth.signInWithBrowser()"]
  A --> D["Caption text styles"]
  B --> E["Theme CSS vars"]
  D --> E

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Use shared primary variant

• ➕ Avoids bespoke styling drift between onboarding and shared button patterns
• ➕ Centralizes accessible contrast decisions in one component/theme mapping
• ➖ May require small refactor of markup/layout (icon spacing, full-width behavior)
• ➖ Potentially more review surface than a targeted classname fix

2. Introduce a dedicated on-accent text token (e.g., --text-on-accent)

• ➕ Makes contrast intent explicit and reusable across the app
• ➕ Reduces coupling to --bg-base semantics for text color
• ➖ Requires design/token work and wider theme changes
• ➖ Overkill for a single isolated instance

Recommendation: The PR’s targeted switch to a dark text color is a good, low-risk fix for the immediate contrast problem. If this screen is expected to remain long-term, consider a follow-up to use the shared Button primary variant (or introduce a --text-on-accent token) to prevent future divergence and keep contrast guarantees centralized.

Files changed (1) +2 / -2

Bug fix (1) +2 / -2

WelcomeStep.tsxFix sign-in button and caption colors for better contrast +2/-2

Fix sign-in button and caption colors for better contrast

• Updates the sign-in button text color from white to a dark theme color to improve readability on the accent background. Also adjusts the explanatory caption color from muted to secondary for better legibility.

packages/desktop/src/renderer/src/components/onboarding/WelcomeStep.tsx

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}

[cubic-dev-ai]

No issues found across 1 file

_{Re-trigger cubic}