From 8db32213e71481ec679a81930cccbe1ac973f305 Mon Sep 17 00:00:00 2001 From: panxinyu Date: Tue, 19 May 2026 16:14:56 +0800 Subject: [PATCH] fix(web/default/wallet): make recharge preset selection visible in dark mode (#4897) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../src/features/wallet/components/recharge-form-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/default/src/features/wallet/components/recharge-form-card.tsx b/web/default/src/features/wallet/components/recharge-form-card.tsx index aa76428f..ad147dd4 100644 --- a/web/default/src/features/wallet/components/recharge-form-card.tsx +++ b/web/default/src/features/wallet/components/recharge-form-card.tsx @@ -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)}