From 3da76892d5bd64ddc414b0906c8c8da34eae0389 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 31 Aug 2022 22:49:59 +0000
Subject: [PATCH] Restyle ln preview titles to match main pages

---
 .../channel/channel-preview.component.html    |  8 ++---
 .../channel/channel-preview.component.scss    | 23 +++++++++++---
 .../node/node-preview.component.html          |  8 ++---
 .../node/node-preview.component.scss          | 30 ++++++++++++++-----
 4 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/lightning/channel/channel-preview.component.html b/frontend/src/app/lightning/channel/channel-preview.component.html
index a847975c2..364e8c9fe 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.html
+++ b/frontend/src/app/lightning/channel/channel-preview.component.html
@@ -1,9 +1,9 @@
 <div class="box preview-box" *ngIf="(channel$ | async) as channel">
   <div class="row d-flex justify-content-between full-width-row">
-    <h1 class="title">
-      <span i18n="lightning.channel">Channel</span>: 
-      <a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]"> {{ channel.short_id }}</a>
-    </h1>
+    <div class="title-container mb-0" *ngIf="!error">
+      <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
+      <h1 class="mb-0 text-truncate">{{ channel.short_id }}</h1>
+    </div>
     <div class="badges mb-2">
       <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0">Inactive</span>
       <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1">Active</span>
diff --git a/frontend/src/app/lightning/channel/channel-preview.component.scss b/frontend/src/app/lightning/channel/channel-preview.component.scss
index e89733ff3..e8e08d5e2 100644
--- a/frontend/src/app/lightning/channel/channel-preview.component.scss
+++ b/frontend/src/app/lightning/channel/channel-preview.component.scss
@@ -1,11 +1,24 @@
-.title {
-  font-size: 52px;
-  margin: 0;
+.title-container {
+  width: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+
+  h5 {
+    font-size: 28px;
+    margin-top: -4px;
+  }
+
+  h1 {
+    font-size: 52px;
+    margin-bottom: 0;
+    margin-top: -8px;
+  }
 }
 
 .table {
+  margin-top: 14px;
   font-size: 32px;
-  margin-top: 36px;
 }
 
 .badges {
@@ -23,6 +36,7 @@
 .full-width-row {
   padding-left: 15px;
   padding-right: 15px;
+  flex-wrap: nowrap;
 
   &:nth-child(even) {
     background: #181b2d;
@@ -33,6 +47,7 @@
 .nodes {
   font-size: 36px;
   align-items: center;
+  margin-top: 0px;
 }
 
 .between-arrow {
diff --git a/frontend/src/app/lightning/node/node-preview.component.html b/frontend/src/app/lightning/node/node-preview.component.html
index a94882161..22a8095b1 100644
--- a/frontend/src/app/lightning/node/node-preview.component.html
+++ b/frontend/src/app/lightning/node/node-preview.component.html
@@ -1,9 +1,9 @@
 <div class="box preview-box" *ngIf="(node$ | async) as node">
   <div class="row d-flex justify-content-between full-width-row">
-    <h1 class="title">
-      <span i18n="lightning.node">Node</span>:
-      <a [routerLink]="['/lightning/node' | relativeUrl, node.id]"> {{ node.alias }}</a>
-    </h1>
+    <div class="title-container mb-0" *ngIf="!error">
+      <h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
+      <h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
+    </div>
     <div class="badges mb-2">
       <span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
     </div>
diff --git a/frontend/src/app/lightning/node/node-preview.component.scss b/frontend/src/app/lightning/node/node-preview.component.scss
index c6b2ea9d7..b629bbcae 100644
--- a/frontend/src/app/lightning/node/node-preview.component.scss
+++ b/frontend/src/app/lightning/node/node-preview.component.scss
@@ -1,10 +1,23 @@
-.title {
-  font-size: 52px;
-  margin-bottom: 0;
+.title-container {
+  width: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: hidden;
+
+  h5 {
+    font-size: 28px;
+    margin-top: -4px;
+  }
+
+  h1 {
+    font-size: 52px;
+    margin-bottom: 0;
+    margin-top: -8px;
+  }
 }
 
 .table {
-  margin-top: 48px;
+  margin-top: 26px;
   font-size: 32px;
 }
 
@@ -20,14 +33,14 @@
   flex-grow: 0;
   flex-shrink: 0;
   width: 470px;
-  height: 390px;
+  height: 386px;
   min-width: 470px;
-  min-height: 390px;
-  max-height: 390px;
+  min-height: 386px;
+  max-height: 386px;
   padding: 0;
   background: #181b2d;
   overflow: hidden;
-  margin-top: 18px;
+  margin-top: 0;
 }
 
 .row {
@@ -36,6 +49,7 @@
 
 .full-width-row {
   padding-left: 15px;
+  flex-wrap: nowrap;
 }
 
 ::ng-deep .symbol {