From 87ea45f9340ed92355a8cc10518292f0c80eab29 Mon Sep 17 00:00:00 2001
From: user <user@Mac.lan guest wan>
Date: Sat, 28 Feb 2026 13:33:23 -0800
Subject: [PATCH] fix tabs: use underline tab style with hover on all tabs

Tabs are not buttons (they change UI state, not application state).
All tabs now use underline style with identical hover behavior:
- Active: bold text + solid bottom border
- Inactive: muted text + transparent bottom border
- Hover (all tabs): text brightens to fg + bottom border appears
This ensures all tabs clearly indicate clickability on hover,
including the currently active one.
---
 src/popup/index.html         | 11 +++++++----
 src/popup/views/addWallet.js |  8 ++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 12798ee..dcbe97f 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -58,22 +58,25 @@
                 <h2 class="font-bold mb-2">Add Wallet</h2>
 
                 <!-- Mode selector tabs -->
-                <div class="flex gap-1 mb-3" id="add-wallet-tabs">
+                <div
+                    class="flex border-b border-border mb-3"
+                    id="add-wallet-tabs"
+                >
                     <button
                         id="tab-mnemonic"
-                        class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg bg-fg text-bg"
+                        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"
                     >
                         From Phrase
                     </button>
                     <button
                         id="tab-privkey"
-                        class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
+                        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"
                     >
                         From Key
                     </button>
                     <button
                         id="tab-xprv"
-                        class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
+                        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"
                     >
                         From xprv
                     </button>
diff --git a/src/popup/views/addWallet.js b/src/popup/views/addWallet.js
index 55b545c..4cfec60 100644
--- a/src/popup/views/addWallet.js
+++ b/src/popup/views/addWallet.js
@@ -29,8 +29,12 @@ function switchMode(mode) {
         $("add-wallet-section-" + m).classList.toggle("hidden", m !== mode);
         const tab = $("tab-" + m);
         const isActive = m === mode;
-        tab.classList.toggle("bg-fg", isActive);
-        tab.classList.toggle("text-bg", isActive);
+        // Active: bold + solid underline
+        tab.classList.toggle("font-bold", isActive);
+        tab.classList.toggle("border-b-fg", isActive);
+        // Inactive: muted text + transparent underline
+        tab.classList.toggle("text-muted", !isActive);
+        tab.classList.toggle("border-b-transparent", !isActive);
     }
     $("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];
 }