From 6e8d90fb5f1f58c8f564098b84e3669c1b4d7534 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Sat, 12 Sep 2026 15:27:44 -0400
Subject: [PATCH] style(cuprate-ui): match bitcoin status cards

---
 docker/cuprate-ui/index.html | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/docker/cuprate-ui/index.html b/docker/cuprate-ui/index.html
index 1152248a..4e09fcf2 100644
--- a/docker/cuprate-ui/index.html
+++ b/docker/cuprate-ui/index.html
@@ -61,7 +61,11 @@
         .app-header { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
         .app-header-id { display:flex; align-items:center; gap:1rem; min-width:0; }
         .app-header-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
-        .info-card { background:rgba(0,0,0,.6); backdrop-filter:blur(24px); border-radius:.75rem; padding:.65rem .85rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); }
+        .info-card { display:flex; align-items:center; gap:.75rem; background:rgba(0,0,0,.6); backdrop-filter:blur(24px); border-radius:.75rem; padding:.65rem .85rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.16); min-height:3.25rem; }
+        .info-card .card-icon { width:1.25rem; height:1.25rem; color:rgba(255,255,255,.6); flex:0 0 auto; }
+        .info-card-copy { display:flex; flex-direction:column; gap:.15rem; }
+        .info-card-copy .sub { margin:0; font-size:.6875rem; }
+        .info-card-copy strong { font-size:.8125rem; font-weight:600; color:rgba(255,255,255,.95); white-space:nowrap; }
         .node-mark { width:3.25rem; height:3.25rem; border-radius:.85rem; display:grid; place-items:center; background:#050505; border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.2); }
         .tabbar { display:flex; gap:.35rem; padding:.35rem; margin:1.25rem 0; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.12); border-radius:.85rem; overflow-x:auto; }
         .tab-btn { flex:1 0 auto; border:0; border-radius:.6rem; padding:.65rem 1rem; background:transparent; color:rgba(255,255,255,.55); cursor:pointer; font-size:.8rem; font-weight:600; }
@@ -83,6 +87,9 @@
             background: rgba(255, 255, 255, 0.06);
         }
         .dot { width: 8px; height: 8px; border-radius: 50%; background: #777; }
+        .dot.online { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
+        .dot.syncing { background: #f7931a; box-shadow: 0 0 8px #f7931a; }
+        .dot.offline { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
         .pill.online .dot { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
         .pill.syncing .dot { background: #f7931a; box-shadow: 0 0 8px #f7931a; }
         .pill.offline .dot { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
@@ -146,9 +153,18 @@
                     </div>
                 </div>
                 <div class="app-header-actions">
-                    <div class="info-card"><div class="sub">Status</div><span id="statusPill" class="pill"><span class="dot"></span><span id="statusText">Connecting…</span></span></div>
-                    <div class="info-card"><div class="sub">Network</div><strong id="headerNetwork">—</strong></div>
-                    <div class="info-card"><div class="sub">Height</div><strong id="headerHeight">—</strong></div>
+                    <div class="info-card">
+                        <div class="relative"><span class="dot" id="headerStatusDot"></span><span class="absolute inset-0 dot animate-ping opacity-50"></span></div>
+                        <div class="info-card-copy"><div class="sub">Status</div><strong id="statusText">Connecting…</strong></div>
+                    </div>
+                    <div class="info-card">
+                        <svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg>
+                        <div class="info-card-copy"><div class="sub">Network</div><strong id="headerNetwork">—</strong></div>
+                    </div>
+                    <div class="info-card">
+                        <svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7h16M4 12h16M4 17h16" /></svg>
+                        <div class="info-card-copy"><div class="sub">Height</div><strong id="headerHeight">—</strong></div>
+                    </div>
                 </div>
             </div>
         </header>
@@ -250,9 +266,9 @@
         }
 
         function setStatus(kind, text) {
-            const pill = document.getElementById('statusPill');
-            pill.className = 'pill ' + kind;
             document.getElementById('statusText').textContent = text;
+            const dot = document.getElementById('headerStatusDot');
+            dot.className = 'dot ' + kind;
             document.getElementById('offlineNotice').style.display = (kind === 'offline') ? '' : 'none';
         }