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:
parent
cb9270ed23
commit
8db32213e7
@ -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)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user