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

Selected preset buttons looked identical to unselected in dark mode: the
override classes `border-foreground bg-foreground/5` carry no `dark:`
variant, while the Button `outline` variant base contains
`dark:border-input dark:bg-input/30`. tailwind-merge keeps both (different
variants → no conflict), and in dark mode CSS specificity makes
`.dark .border-input` win over `.border-foreground`, so the override is
silently overridden and the bright-border/tinted-bg selection state never
applies.

Add explicit `dark:border-foreground dark:bg-foreground/10` to the
override so tailwind-merge resolves the dark-variant conflict in favor
of the override and the selected state is clearly distinguishable on
both light and dark backgrounds.

Co-authored-by: xinnyu <xinnyu@users.noreply.github.com>
This commit is contained in:
panxinyu 2026-05-19 16:14:56 +08:00 committed by GitHub
parent cb9270ed23
commit 8db32213e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -240,7 +240,7 @@ export function RechargeFormCard({
className={cn(
'hover:border-foreground flex min-h-16 flex-col items-start rounded-lg px-3 py-2.5 text-left whitespace-normal sm:min-h-[72px] sm:p-4',
selectedPreset === preset.value
? 'border-foreground bg-foreground/5'
? 'border-foreground bg-foreground/5 dark:border-foreground dark:bg-foreground/10'
: 'border-muted'
)}
onClick={() => onSelectPreset(preset)}