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

fix tab affordance: use standard button style with border + hover invert

Browse Source 
Per README clickable affordance policy: all tabs now use visible
border, padding, and hover:bg-fg hover:text-bg (invert to
white-on-black). Active tab is inverted (bg-fg text-bg). All
three tabs behave identically on hover regardless of active state.
This commit is contained in:
user
2026-02-28 13:24:55 -08:00
parent 9246959777
commit 9476724284
2 changed files with 9 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/popup/index.html
View File

@@ -58,27 +58,24 @@
<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 <div class="flex gap-1 mb-3" id="add-wallet-tabs">
class="flex border-b border-border mb-3"
id="add-wallet-tabs"
>
<button <button
id="tab-mnemonic" id="tab-mnemonic"
class="tab-btn tab-active px-3 py-1.5 cursor-pointer text-xs font-bold border-b-2 border-b-fg -mb-px" class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg bg-fg text-bg"
> >
From Recovery Phrase From Phrase
</button> </button>
<button <button
id="tab-privkey" id="tab-privkey"
class="tab-btn tab-inactive 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-muted" class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
> >
From Private Key From Key
</button> </button>
<button <button
id="tab-xprv" id="tab-xprv"
class="tab-btn tab-inactive 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-muted" class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
> >
From Extended Key (xprv) From xprv
</button> </button>
</div> </div>

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

@@ -29,11 +29,8 @@ 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;
// Active tab: bold text + solid bottom border indicator tab.classList.toggle("bg-fg", isActive);
tab.classList.toggle("font-bold", isActive); tab.classList.toggle("text-bg", isActive);
tab.classList.toggle("border-b-fg", isActive);
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];
} }