From 01048a1c3d4caf856de35753580236c9b6103c7b Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 16:44:57 +0700
Subject: [PATCH] Consistent headings on home: lighter title rules, thick
 section dividers

Wallet and Recent Transactions headings now use border-border-light
for their bottom rule. Thick 2px black horizontal rules separate
wallet sections from each other and from the transactions section,
with generous vertical spacing.
---
 src/popup/index.html    | 15 +++++++++++++--
 src/popup/views/home.js |  5 ++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index c6de379..2e93eab 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -218,8 +218,19 @@
                 <div id="wallet-list"></div>
 
                 <!-- recent transactions across all addresses -->
-                <div class="border-t border-border mt-3 pt-2">
-                    <h3 class="font-bold text-xs mb-1">Recent Transactions</h3>
+                <hr
+                    style="
+                        border: none;
+                        border-top: 2px solid currentColor;
+                        margin: 1rem 0;
+                    "
+                />
+                <div>
+                    <div
+                        class="font-bold border-b border-border-light pb-1 mb-1"
+                    >
+                        Recent Transactions
+                    </div>
                     <div id="home-tx-list">
                         <div class="text-muted text-xs py-1">Loading...</div>
                     </div>
diff --git a/src/popup/views/home.js b/src/popup/views/home.js
index 1992155..8e373a7 100644
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -251,8 +251,11 @@ function render(ctx) {
 
     let html = "";
     state.wallets.forEach((wallet, wi) => {
+        if (wi > 0) {
+            html += `<hr style="border:none;border-top:2px solid currentColor;margin:1rem 0">`;
+        }
         html += `<div class="mb-3">`;
-        html += `<div class="flex justify-between items-center border-b border-border pb-1 mb-1">`;
+        html += `<div class="flex justify-between items-center border-b border-border-light pb-1 mb-1">`;
         html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${wallet.name}</span>`;
         if (wallet.type === "hd") {
             html += `<button class="btn-add-address border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-wallet="${wi}" title="Add another address to this wallet">+</button>`;