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

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 9476724284
commit cc69ce39ed
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> <h2 class="font-bold mb-2">Add Wallet</h2>
<!-- Mode selector tabs --> <!-- 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 <button
id="tab-mnemonic" 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 From Phrase
</button> </button>
<button <button
id="tab-privkey" 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 From Key
</button> </button>
<button <button
id="tab-xprv" 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 From xprv
</button> </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); $("add-wallet-section-" + m).classList.toggle("hidden", m !== mode);
const tab = $("tab-" + m); const tab = $("tab-" + m);
const isActive = m === mode; const isActive = m === mode;
tab.classList.toggle("bg-fg", isActive); // Active: bold + solid underline
tab.classList.toggle("text-bg", isActive); 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]; $("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];
} }