-
+
+
@@ -471,13 +518,14 @@
-
+
+
- Bitcoin Node
Detecting implementation…
+
@@ -521,7 +569,7 @@
@@ -813,8 +861,10 @@
-
-
Loading…
+
+
+
Loading…
+
@@ -866,8 +916,10 @@
P2P Details
Let another Bitcoin node peer directly with this one.
-
-
@@ -961,7 +1013,7 @@
-
+
Loading…
+
+
+
Loading…
+
@@ -951,7 +1003,7 @@
-
+
@@ -989,7 +1041,7 @@
Node Settings
- +
@@ -1021,7 +1073,7 @@
Node Logs
- +
Loading logs...
@@ -1164,8 +1216,8 @@
: 'text-yellow-300';
const actions = req.direction === 'incoming' && req.status === 'pending'
? `
-
-
+
+
`
: '';
return `
diff --git a/docker/lnd-ui/Dockerfile b/docker/lnd-ui/Dockerfile
index 5af0261c..13b9401d 100644
--- a/docker/lnd-ui/Dockerfile
+++ b/docker/lnd-ui/Dockerfile
@@ -10,7 +10,10 @@ RUN mkdir -p /usr/share/nginx/html/assets/img/app-icons && \
mkdir -p /usr/share/nginx/html/assets/img
# Copy assets
-COPY lnd.svg /usr/share/nginx/html/assets/img/app-icons/
+# Canonical app icon — the same file the app store / My Apps renders
+# (neode-ui/public/assets/img/app-icons/lnd.png, referenced by the signed
+# catalog as /assets/img/app-icons/lnd.png). Keep these in sync.
+COPY lnd.png /usr/share/nginx/html/assets/img/app-icons/
COPY bg-web5.jpg /usr/share/nginx/html/assets/img/
COPY bg-intro.jpg /usr/share/nginx/html/assets/img/
diff --git a/docker/lnd-ui/index.html b/docker/lnd-ui/index.html
index 9d534588..3c73411c 100644
--- a/docker/lnd-ui/index.html
+++ b/docker/lnd-ui/index.html
@@ -80,6 +80,13 @@
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: all 0.3s ease;
}
.info-card-button > * { position: relative; z-index: 2; }
+ /* Same treatment, sized for a normal inline button rather than a
+ full-width card, so every button on the page reads as one family. */
+ .info-card-button.compact {
+ width: auto; display: inline-flex; align-items: center; justify-content: center;
+ gap: 0.5rem; padding: 0.65rem 1rem; text-align: center;
+ font-size: 0.875rem; font-weight: 500;
+ }
.info-card-button:hover {
transform: translateY(-2px); background: rgba(0,0,0,0.35);
box-shadow: 0 12px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
@@ -108,17 +115,44 @@
}
.gradient-button:active { transform: translateY(1px); }
- /* Logo — LND purple gradient ring */
+ /* Logo — LND purple gradient ring. The app-store icon is a full-bleed
+ square with an opaque white background (not a transparent glyph), so
+ it fills the frame and gets clipped to the inner radius, exactly the
+ way bitcoin-ui frames its icon. */
.logo-gradient-border {
position: relative; border-radius: 16px; padding: 3px;
background: linear-gradient(135deg, rgba(167,139,250,0.85) 0%, rgba(0,0,0,0.8) 100%);
box-shadow: 0 8px 24px rgba(0,0,0,0.5); display: inline-block;
}
- .logo-gradient-border::after { content: ''; position: absolute; inset: 3px; border-radius: 13px; background: #0d0b16; z-index: 0; }
- .logo-gradient-border img { border-radius: 13px; display: block; position: relative; z-index: 1; width: 64px; height: 64px; object-fit: contain; padding: 6px; }
+ .logo-gradient-border::after { content: ''; position: absolute; inset: 3px; border-radius: 13px; background: #fff; z-index: 0; }
+ .logo-gradient-border img { border-radius: 13px; display: block; position: relative; z-index: 1; width: 64px; height: 64px; object-fit: cover; }
.container { max-width: 1400px; margin: 0 auto; padding: 2rem; padding-bottom: 4rem; }
+ /* ── App header ──────────────────────────────────────────────────
+ Three deliberate breakpoints, because the identity block and the
+ controls both need room before they sit side by side:
+ < 768px fully stacked, everything centred
+ < 1024px logo + text on one row, controls stacked underneath
+ (this is the width where the title used to squish
+ against the controls)
+ >= 1024px single row */
+ .app-header { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
+ .app-header-id { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; min-width: 0; }
+ .app-header-text { min-width: 0; width: 100%; text-align: center; }
+ .app-header-title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-bottom: 0.25rem; }
+ .app-header-actions { display: flex; align-items: center; gap: 0.75rem; justify-content: center; width: 100%; flex-wrap: wrap; }
+
+ @media (min-width: 768px) {
+ .app-header-id { flex-direction: row; align-items: center; }
+ .app-header-text { text-align: left; }
+ .app-header-title { justify-content: flex-start; }
+ }
+ @media (min-width: 1024px) {
+ .app-header { flex-direction: row; align-items: center; }
+ .app-header-actions { width: auto; justify-content: flex-end; flex-shrink: 0; }
+ }
+
/* Layout utilities */
.flex { display: flex; } .flex-col { flex-direction: column; }
.items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
@@ -250,7 +284,15 @@
.conn-select:focus { border-color: rgba(255,255,255,0.25); }
.conn-select option { background: #1a1a2e; color: white; }
.conn-layout { display: flex; flex-direction: column; gap: 1.5rem; }
- .qr-box { flex-shrink: 0; width: 100%; max-width: 216px; aspect-ratio: 1; margin: 0 auto; background: white; border-radius: 0.75rem; padding: 0.6rem; display: flex; align-items: center; justify-content: center; }
+ /* The QR plate stays square. It sits inside a glass panel that takes
+ the height of the fields column, so a tall fields list no longer
+ stretches the white plate into a letterboxed rectangle. */
+ .qr-panel {
+ flex-shrink: 0; display: flex; align-items: center; justify-content: center;
+ padding: 1rem; background: rgba(0, 0, 0, 0.45);
+ border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.9rem;
+ }
+ .qr-box { width: 100%; max-width: 200px; aspect-ratio: 1; background: #fff; border-radius: 0.6rem; padding: 0.55rem; display: flex; align-items: center; justify-content: center; }
.qr-box img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.conn-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
@@ -301,7 +343,7 @@
.sm-grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.balance-hero { grid-template-columns: repeat(3, minmax(0,1fr)); }
.conn-layout { flex-direction: row; }
- .qr-box { margin: 0; width: 216px; }
+ .qr-box { width: 200px; }
}
@media (min-width: 768px) {
.md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@@ -342,30 +384,32 @@
-
-
-
- 
+
+
+
+
-
+
+
+ 
+
+
+
+
+
+ LND
+ + + Connecting… + + +Lightning Network Daemon for instant Bitcoin payments
+—
-
-
-
- LND
- - - Connecting… - - -Lightning Network Daemon for instant Bitcoin payments
-—
-
+
-
-
-
Loading…
+
+
+
Loading…
+
@@ -795,8 +841,10 @@
Node ID
Share this so other nodes can open a channel with you.
-
-
—
+
+
+
—
+
@@ -896,7 +944,7 @@
diff --git a/docker/lnd-ui/lnd.png b/docker/lnd-ui/lnd.png
new file mode 100644
index 00000000..d54218ec
Binary files /dev/null and b/docker/lnd-ui/lnd.png differ
Node Logs
- +Open this tab to load logs.