fix(web/default/wallet): make recharge preset selection visible in dark mode

[xinnyu]

Summary

On the recharge page (web/default/src/features/wallet/components/recharge-form-card.tsx), the selected preset-amount button is nearly indistinguishable from unselected buttons in dark mode — users cannot tell which amount they have chosen.

Root cause

The selected-state override only sets light-mode utilities:

selectedPreset === preset.value
  ? 'border-foreground bg-foreground/5'   // <-- no dark: variants
  : 'border-muted'

while <Button variant='outline'> (web/default/src/components/ui/button.tsx) sets dark-only utilities in its base style:

outline:
  'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50'

tailwind-merge keeps both border-foreground (no variant) and dark:border-input (dark variant) because they belong to different variant groups. At runtime, CSS specificity decides: .dark .border-input (compound selector, specificity 0,2,0) wins over .border-foreground (single class, specificity 0,1,0). Same story for bg-foreground/5 vs dark:bg-input/30.

Result in dark mode: selected = unselected, both rendered with the variant's dark:border-input border and dark:bg-input/30 background.

Fix

Add dark: variants to the override so tailwind-merge resolves the dark-variant conflict in favor of the override:

-  ? 'border-foreground bg-foreground/5'
+  ? 'border-foreground bg-foreground/5 dark:border-foreground dark:bg-foreground/10'

After this, in dark mode the selected preset shows a bright --foreground border and a 10% foreground-tint background — clearly visible against the card surface. Light mode behavior is unchanged.

The bump from /5 to /10 for the dark-mode background offsets the fact that --foreground in dark mode is near-white and a 5% tint is too subtle against the dark card.

Test plan

• cd web/default && bun run typecheck passes
• cd web/default && bun run build succeeds (via the project's scripts/dev-build.sh)
• Open /topup in dark mode → click a preset amount → verify bright border + visible tinted background on the selected card, and that the difference vs. unselected is clearly distinguishable
• Same page in light mode → confirm visual is unchanged from before

Summary by CodeRabbit

• Style
  • Improved dark mode styling for preset amount buttons in the recharge form when selected.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c2a7a028-89a8-4f98-94a5-b5bc46ea3341

📥 Commits

Reviewing files that changed from the base of the PR and between 18282e6 and ddf7a07.

📒 Files selected for processing (1)

• web/default/src/features/wallet/components/recharge-form-card.tsx

---

Walkthrough

The RechargeFormCard component's preset-amount button styling is updated to include dark-mode classes when a preset is selected. The selected state now applies dark:border-foreground and dark:bg-foreground/10 alongside the existing light-mode styling classes.

Preset Button Dark Mode Styling

Layer / File(s)	Summary
Selected preset button dark-mode classes web/default/src/features/wallet/components/recharge-form-card.tsx	The conditional className for the selected preset button now includes dark-mode styling classes (dark:border-foreground and dark:bg-foreground/10) to maintain consistent visual state appearance in both light and dark themes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

• seefs001

Poem

A button glows with midnight hue, ✨
Dark theme styling, crisp and true,
Border and background dance in night,
Preset presets now look right! 🌙

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding dark-mode visibility to the recharge preset selection button styling in the wallet component.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}