style: rework overflow menu to look like menu items, not buttons

- Menu items now use text-xs font-light for smaller, lighter type
  that's clearly distinct from the pushbuttons in the action row
- The ··· button stays visually inverted (bg-fg text-bg) while the
  dropdown menu is open, reverting when closed
- Menu items styled as plain text rows with subtle hover background,
  no borders or button-like appearance
This commit is contained in:
user
2026-02-28 08:39:57 -08:00
parent e6b46ad1d2
commit 082b22328c
2 changed files with 6 additions and 2 deletions

View File

@@ -377,7 +377,7 @@
> >
<button <button
id="btn-export-privkey" id="btn-export-privkey"
class="block w-full text-left px-4 py-1.5 text-sm hover:bg-hover cursor-pointer" class="block w-full text-left px-4 py-1.5 text-xs font-light text-muted hover:bg-hover hover:text-fg cursor-pointer"
> >
Export Private Key Export Private Key
</button> </button>

View File

@@ -273,10 +273,13 @@ function init(_ctx) {
const moreDropdown = $("more-menu-dropdown"); const moreDropdown = $("more-menu-dropdown");
moreBtn.addEventListener("click", (e) => { moreBtn.addEventListener("click", (e) => {
e.stopPropagation(); e.stopPropagation();
moreDropdown.classList.toggle("hidden"); const isOpen = !moreDropdown.classList.toggle("hidden");
moreBtn.classList.toggle("bg-fg", isOpen);
moreBtn.classList.toggle("text-bg", isOpen);
}); });
document.addEventListener("click", () => { document.addEventListener("click", () => {
moreDropdown.classList.add("hidden"); moreDropdown.classList.add("hidden");
moreBtn.classList.remove("bg-fg", "text-bg");
}); });
moreDropdown.addEventListener("click", (e) => { moreDropdown.addEventListener("click", (e) => {
e.stopPropagation(); e.stopPropagation();
@@ -284,6 +287,7 @@ function init(_ctx) {
$("btn-export-privkey").addEventListener("click", () => { $("btn-export-privkey").addEventListener("click", () => {
moreDropdown.classList.add("hidden"); moreDropdown.classList.add("hidden");
moreBtn.classList.remove("bg-fg", "text-bg");
const wallet = state.wallets[state.selectedWallet]; const wallet = state.wallets[state.selectedWallet];
const addr = wallet.addresses[state.selectedAddress]; const addr = wallet.addresses[state.selectedAddress];
const title = addressTitle(addr.address, state.wallets); const title = addressTitle(addr.address, state.wallets);