Add network to preview headers & inc font size

frontend/src/app/components/address/address-preview.component.html

@@ -1,5 +1,7 @@
 <div class="box preview-box" *ngIf="address && !error">
-  <h2 class="preview-header" i18n="shared.address">Address</h2>
+  <app-preview-title>
+    <span i18n="shared.address">Address</span>
+  </app-preview-title>
   <div class="row">
     <div class="col-md">
       <div class="row d-flex justify-content-between">

frontend/src/app/components/block/block-preview.component.html

@@ -1,5 +1,7 @@
 <div class="box preview-box" *ngIf="!error">
-  <h2 class="preview-header" i18n="shared.block-title">Block</h2>
+  <app-preview-title>
+    <span i18n="shared.block-title">Block</span>
+  </app-preview-title>
   <div class="row">
     <div class="col-sm">
       <div class="row d-flex justify-content-between">

frontend/src/app/components/master-page-preview/master-page-preview.component.html

@@ -10,8 +10,8 @@
       <span *ngSwitchCase="'signet'" class="network signet"><app-svg-images name="signet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Signet</span>
       <span *ngSwitchCase="'testnet'" class="network testnet"><app-svg-images name="testnet" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Testnet</span>
       <span *ngSwitchCase="'bisq'" class="network bisq"><app-svg-images name="bisq" width="35" height="35" viewBox="0 0 75 75" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Bisq</span>
-      <span *ngSwitchCase="'liquid'" class="network liquid"><app-svg-images name="liquid" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid</span>
+      <span *ngSwitchCase="'liquid'" class="network liquid"><app-svg-images name="liquid" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Mainnet</span>
-      <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><app-svg-images name="liquidtestnet" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Liquid Testnet</span>
+      <span *ngSwitchCase="'liquidtestnet'" class="network liquidtestnet"><app-svg-images name="liquidtestnet" width="35" height="35" viewBox="0 0 125 125" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Testnet</span>
       <span *ngSwitchDefault class="network mainnet"><app-svg-images name="bitcoin" width="35" height="35" viewBox="0 0 65 65" style="width: 40px; height: 48px;" class="mainnet mr-1"></app-svg-images> Mainnet</span>
     </div>
   </header>

frontend/src/app/components/master-page-preview/master-page-preview.component.scss

@@ -47,6 +47,7 @@
     z-index: 101;
     line-height: 80px;
     text-transform: capitalize;
+    font-size: 2.4rem;
   }
 
   ::ng-deep .title {

frontend/src/app/components/master-page-preview/preview-title.component.html

@@ -0,0 +1,11 @@
+<h2 class="preview-header">
+  <ng-container *ngIf="{ val: network$ | async } as network">
+    <ng-container [ngSwitch]="network.val">
+      <span *ngSwitchCase="'bisq'">Bisq </span>
+      <span *ngSwitchCase="'liquid'">Liquid </span>
+      <span *ngSwitchCase="'liquidtestnet'">Liquid </span>
+      <span *ngSwitchDefault>Bitcoin </span>
+    </ng-container>
+  </ng-container>
+  <ng-content></ng-content>
+</h2>

frontend/src/app/components/master-page-preview/preview-title.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { StateService } from '../../services/state.service';
+import { Observable, merge, of } from 'rxjs';
+
+@Component({
+  selector: 'app-preview-title',
+  templateUrl: './preview-title.component.html',
+  styleUrls: [],
+})
+export class PreviewTitleComponent implements OnInit {
+  network$: Observable<string>;
+
+  constructor(
+    public stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.network$ = merge(of(''), this.stateService.networkChanged$);
+  }
+}

frontend/src/app/components/transaction/transaction-preview.component.html

@@ -1,5 +1,7 @@
 <div class="box preview-box" *ngIf="tx && !error">
-  <h2 class="preview-header" i18n="shared.transaction">Transaction</h2>
+  <app-preview-title>
+    <span i18n="shared.transaction">Transaction</span>
+  </app-preview-title>
   <div class="row d-flex justify-content-between full-width-row">
     <div class="title-wrapper">
       <h1 class="title truncated"><span class="first">{{txId.slice(0,-4)}}</span><span class="last-four">{{txId.slice(-4)}}</span></h1>

frontend/src/app/lightning/channel/channel-preview.component.html

@@ -1,5 +1,7 @@
 <div class="box preview-box" *ngIf="(channel$ | async) as channel">
-  <h2 class="preview-header" i18n="lightning.channel">lightning channel</h2>
+  <app-preview-title>
+    <span i18n="lightning.channel">lightning channel</span>
+  </app-preview-title>
   <div class="row d-flex justify-content-between full-width-row">
     <div class="title-wrapper">
       <h1 class="title">{{ channel.short_id }}</h1>

frontend/src/app/lightning/node/node-preview.component.html

@@ -1,5 +1,7 @@
 <div class="box preview-box" *ngIf="(node$ | async) as node">
-  <h2 class="preview-header" i18n="lightning.node">lightning node</h2>
+  <app-preview-title>
+    <span i18n="lightning.node">lightning node</span>
+  </app-preview-title>
   <div class="row d-flex justify-content-between full-width-row">
     <h1 class="title"></h1>
     <div class="title-wrapper">

frontend/src/app/shared/shared.module.ts

@@ -8,6 +8,7 @@ import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, fa
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { MasterPageComponent } from '../components/master-page/master-page.component';
 import { MasterPagePreviewComponent } from '../components/master-page-preview/master-page-preview.component';
+import { PreviewTitleComponent } from '../components/master-page-preview/preview-title.component';
 import { BisqMasterPageComponent } from '../components/bisq-master-page/bisq-master-page.component';
 import { LiquidMasterPageComponent } from '../components/liquid-master-page/liquid-master-page.component';
 import { AboutComponent } from '../components/about/about.component';
@@ -117,6 +118,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     AboutComponent,
     MasterPageComponent,
     MasterPagePreviewComponent,
+    PreviewTitleComponent,
     BisqMasterPageComponent,
     LiquidMasterPageComponent,
     StartComponent,
@@ -267,6 +269,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     TimestampComponent,
     ToggleComponent,
     GeolocationComponent,
+    PreviewTitleComponent,
   ]
 })
 export class SharedModule {