Skip to content

feat: theme toggle + quest UI polish#286

Merged
zxxma merged 1 commit intomainfrom
feat/v4.1-quest-theme-polish
Apr 9, 2026
Merged

feat: theme toggle + quest UI polish#286
zxxma merged 1 commit intomainfrom
feat/v4.1-quest-theme-polish

Conversation

@zxxma
Copy link
Copy Markdown
Contributor

@zxxma zxxma commented Apr 9, 2026

Summary

  • Theme Toggle — ☀️/🌙 icon button in TopBar for instant theme switching + Dark/Light pill toggle in Mobile More sheet
  • Quest UI Polish — Fix 15 design quality issues: light theme compliance, typography hierarchy, spacing consistency, accessibility

Theme Toggle

  • TopBar: single-click ☀️/🌙 icon between network selector and notification bell
  • Mobile: Dark/Light pill toggle in the More bottom sheet
  • Syncs with external changes via MutationObserver (Settings page, Cmd+K both stay in sync)
  • Settings page tip updated to mention TopBar icon

Quest UI Fixes

Fix Before After
Progress ring text 8px (illegible) 11px
Quest card title 12px/500 13px/600
Quest description 10px mono, truncated 12px sans-serif
Hero description 11px JetBrains Mono 12px system-ui
Grid gap 6px (cramped) 12px
Card padding 10px 12px
Locked state opacity 0.6 opacity 0.7 + grayscale(0.3)
Difficulty colors Hardcoded hex Design tokens
Locked status Text only 🔒 + text
Leaderboard "You" 0.75rem 0.875rem + bold
XP counter No tabular nums tabular-nums
Toast position Fixed px safe-area-inset
CandidatureUnlock bar #555→#888 hardcoded CSS variables
Quest card backgrounds rgba(255,255,255,0.06) var(--color-bg-hover)

Test plan

  • TypeScript: 0 errors
  • Build: passes
  • Lint: 0 errors
  • Tests: 1,587/1,588 (1 pre-existing flaky timeout on main)
  • Visual: verify theme toggle works in TopBar (desktop) and More sheet (mobile)
  • Visual: verify quest cards in both light/dark themes
  • Visual: verify CandidatureUnlock component in both themes
  • Visual: verify leaderboard "You" indicator visibility

Theme Toggle:
- Add ☀️/🌙 toggle button to TopBar (always visible, single click)
- Add Dark/Light pill toggle to Mobile More sheet
- Sync with MutationObserver for external theme changes (Settings, Cmd+K)
- Update Settings page hint to mention TopBar icon

Quest UI Polish:
- Fix CandidatureUnlock progress bar for light theme (hardcoded grays → vars)
- Fix progress ring text from 8px → 11px (was illegible)
- Fix difficulty colors to use design tokens (--color-success/info/warning/danger)
- Fix locked state: opacity 0.7 + grayscale instead of opacity 0.6 (WCAG)
- Fix quest card title: 12px/500 → 13px/600 for consistency
- Fix quest description: 10px mono → 12px sans-serif for readability
- Fix hero description: mono → sans-serif for body text
- Standardize quest grid gap to 12px (was 6px vs 16px mismatch)
- Standardize quest card padding to 12px
- Add tabular-nums to XP display for counter alignment
- Replace rgba(255,255,255,...) backgrounds with theme-adaptive variables
- Add 🔒 icon to locked quest status
- Increase Leaderboard "You" indicator: 0.75rem → 0.875rem + bold
- Add safe-area-inset to quest toast for iPhone notch

1,587/1,588 tests pass (1 pre-existing flaky timeout on main).
0 TS errors, 0 lint errors.
@netlify
Copy link
Copy Markdown

netlify bot commented Apr 9, 2026

Deploy Preview for memba-multisig ready!

Name Link
🔨 Latest commit e1b1d90
🔍 Latest deploy log https://app.netlify.com/projects/memba-multisig/deploys/69d76b8a95a08a000800194e
😎 Deploy Preview https://deploy-preview-286--memba-multisig.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 59 (no change from production)
Accessibility: 97 (no change from production)
Best Practices: 83 (no change from production)
SEO: 77 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 9, 2026

The latest Buf updates on your PR. Results from workflow CI / proto (pull_request).

BuildFormatLintBreakingUpdated (UTC)
✅ passed✅ passed✅ passed✅ passedApr 9, 2026, 9:04 AM

@zxxma zxxma merged commit 66d0d11 into main Apr 9, 2026
9 checks passed
@zxxma zxxma deleted the feat/v4.1-quest-theme-polish branch April 9, 2026 09:22
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