From 59eb02a0224adef005aa99e25d209ed94be42e1e Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Thu, 26 Feb 2026 16:53:10 +0700
Subject: [PATCH] Darker section header background to visually delimit sections

Add --color-section (#dddddd) distinct from --color-well (#f5f5f5).
Section headers on the home screen use bg-section so they stand out
as visual dividers rather than blending with the price well.
---
 src/popup/index.html      | 2 +-
 src/popup/styles/main.css | 1 +
 src/popup/views/home.js   | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/popup/index.html b/src/popup/index.html
index 36841cb..7a8da85 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -220,7 +220,7 @@
                 <!-- recent transactions across all addresses -->
                 <div>
                     <div
-                        class="font-bold bg-well py-1 px-2 mb-1"
+                        class="font-bold bg-section py-1 px-2 mb-1"
                         style="margin-left: -0.5rem; margin-right: -0.5rem"
                     >
                         Recent Transactions
diff --git a/src/popup/styles/main.css b/src/popup/styles/main.css
index 89443a7..8c909ba 100644
--- a/src/popup/styles/main.css
+++ b/src/popup/styles/main.css
@@ -11,6 +11,7 @@
     --color-border-light: #cccccc;
     --color-hover: #eeeeee;
     --color-well: #f5f5f5;
+    --color-section: #dddddd;
 }
 
 body {
diff --git a/src/popup/views/home.js b/src/popup/views/home.js
index b3613b4..d558445 100644
--- a/src/popup/views/home.js
+++ b/src/popup/views/home.js
@@ -252,7 +252,7 @@ function render(ctx) {
     let html = "";
     state.wallets.forEach((wallet, wi) => {
         html += `<div class="mb-3">`;
-        html += `<div class="flex justify-between items-center bg-well py-1 px-2" style="margin:0 -0.5rem">`;
+        html += `<div class="flex justify-between items-center bg-section py-1 px-2" style="margin:0 -0.5rem">`;
         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>`;