sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix tabs: use underline tab style with hover on all tabs
All checks were successful
check / check (push) Successful in 8s
Details

Browse Source 
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.
This commit is contained in:
user
2026-02-28 13:33:23 -08:00
parent d467a0ab4d
commit 87ea45f934
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/popup/index.html
View File

@@ -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>

8
src/popup/views/addWallet.js
View File

@@ -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];
}