From e56e15e34cd048ba8cbe2f92d8d302225a9ecd98 Mon Sep 17 00:00:00 2001
From: user <user@Mac.lan guest wan>
Date: Sat, 28 Feb 2026 14:36:51 -0800
Subject: [PATCH] style: tabby tab styling with dashed inactive borders and
 hover invert

- Active tab: solid border on top/sides, bottom border matches background
  (connects to content area), bold text
- Inactive tabs: dashed borders in border-light color, muted text,
  transparent bottom border
- Inactive hover: invert (bg-fg text-bg) for clear clickability signal
- All three tabs behave identically on hover
---
 src/popup/index.html         |  6 +++---
 src/popup/views/addWallet.js | 11 ++++++++---
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index bbccd8d..5485b66 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -64,19 +64,19 @@
                 >
                     <button
                         id="tab-mnemonic"
-                        class="px-3 py-1.5 cursor-pointer text-xs font-bold border-b-2 border-b-fg -mb-px hover:text-fg hover:border-b-fg"
+                        class="px-3 py-1.5 cursor-pointer text-xs font-bold border border-border border-b-bg bg-bg -mb-px"
                     >
                         From Phrase
                     </button>
                     <button
                         id="tab-privkey"
-                        class="px-3 py-1.5 cursor-pointer text-xs text-muted border-b-2 border-b-transparent -mb-px hover:text-fg hover:border-b-fg"
+                        class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg"
                     >
                         From Key
                     </button>
                     <button
                         id="tab-xprv"
-                        class="px-3 py-1.5 cursor-pointer text-xs text-muted border-b-2 border-b-transparent -mb-px hover:text-fg hover:border-b-fg"
+                        class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg"
                     >
                         From xprv
                     </button>
diff --git a/src/popup/views/addWallet.js b/src/popup/views/addWallet.js
index 4cfec60..0a35b1c 100644
--- a/src/popup/views/addWallet.js
+++ b/src/popup/views/addWallet.js
@@ -29,11 +29,16 @@ function switchMode(mode) {
         $("add-wallet-section-" + m).classList.toggle("hidden", m !== mode);
         const tab = $("tab-" + m);
         const isActive = m === mode;
-        // Active: bold + solid underline
+        // Active: bold, solid border on top/sides, no bottom border (connects to content)
         tab.classList.toggle("font-bold", isActive);
-        tab.classList.toggle("border-b-fg", isActive);
-        // Inactive: muted text + transparent underline
+        tab.classList.toggle("border-solid", isActive);
+        tab.classList.toggle("border-border", isActive);
+        tab.classList.toggle("border-b-bg", isActive);
+        tab.classList.toggle("bg-bg", isActive);
+        // Inactive: muted text, dashed border on top/sides, transparent bottom
         tab.classList.toggle("text-muted", !isActive);
+        tab.classList.toggle("border-dashed", !isActive);
+        tab.classList.toggle("border-border-light", !isActive);
         tab.classList.toggle("border-b-transparent", !isActive);
     }
     $("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];