From 7f5bdf1b3b057622adf5e44b17a5f1e714ba7710 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Tue, 24 Mar 2026 11:24:35 +0000
Subject: [PATCH] [#492] Make Trade button stand out as primary CTA on mobile

Trade button gets border-2 + font-bold to visually distinguish it
from Donate/Rate which keep border + regular weight. Active state
also uses border-2 + font-semibold.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/MobileActionBar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MobileActionBar.tsx b/src/components/MobileActionBar.tsx
index 676cb5e5..d58fd69b 100644
--- a/src/components/MobileActionBar.tsx
+++ b/src/components/MobileActionBar.tsx
@@ -57,12 +57,12 @@ export function MobileActionBar({
           <button
             key={key}
             onClick={() => setOpen(open === key ? null : key)}
-            className={`rounded border px-3 py-2 text-xs transition-colors ${
+            className={`rounded px-3 py-2 text-xs transition-colors ${
               open === key
-                ? "border-accent text-accent"
+                ? "border-2 border-accent text-accent font-semibold"
                 : key === "trade"
-                  ? "border-accent text-accent hover:opacity-80"
-                  : "border-[var(--border)] text-muted hover:text-foreground"
+                  ? "border-2 border-accent text-accent font-bold hover:opacity-80"
+                  : "border border-[var(--border)] text-muted hover:text-foreground"
             }`}
           >
             {label}