From 4d53e897b45a6ca0c00bc83e2acb02e8cd2aa25a Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sun, 10 May 2020 21:34:25 +0700
Subject: [PATCH] Network based blockchain colors.

---
 .../app/components/amount/amount.component.html    |  2 +-
 .../src/app/components/amount/amount.component.ts  |  1 +
 .../src/app/components/block/block.component.html  |  4 ++--
 .../blockchain-blocks.component.ts                 | 14 ++++++++++++--
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/components/amount/amount.component.html b/frontend/src/app/components/amount/amount.component.html
index 025ff1f39..c4c575267 100644
--- a/frontend/src/app/components/amount/amount.component.html
+++ b/frontend/src/app/components/amount/amount.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="(viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin">
+<ng-container *ngIf="!noFiat && (viewFiat$ | async) && (conversions$ | async) as conversions; else viewFiatVin">
   <span>{{ conversions.USD * (satoshis / 100000000) | currency:'USD':'symbol':'1.2-2' }}</span>
 </ng-container>
 <ng-template #viewFiatVin>
diff --git a/frontend/src/app/components/amount/amount.component.ts b/frontend/src/app/components/amount/amount.component.ts
index 85785bb68..7958e8a0b 100644
--- a/frontend/src/app/components/amount/amount.component.ts
+++ b/frontend/src/app/components/amount/amount.component.ts
@@ -15,6 +15,7 @@ export class AmountComponent implements OnInit {
 
   @Input() satoshis: number;
   @Input() digitsInfo = '1.8-8';
+  @Input() noFiat = false;
 
   constructor(
     private stateService: StateService,
diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index e8dd0274c..6744f7043 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -45,12 +45,12 @@
               <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
                 <tr>
                   <td>Total fees</td>
-                  <td><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td>
+                  <td><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td>
                 </tr>
                 <tr>
                   <td>Reward + fees:</td>
                   <td>
-                    <app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>)
+                    <app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>)
                   </td>
                 </tr>
               </ng-template>
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
index 12b933637..9a4dabd8f 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
@@ -21,6 +21,12 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
 
   transition = '1s';
 
+  gradientColors = {
+    '': ['#9339f4', '#105fb0'],
+    liquid: ['#116761', '#183550'],
+    testnet: ['#1d486f', '#183550'],
+  };
+
   constructor(
     private stateService: StateService,
     private router: Router,
@@ -103,8 +109,12 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
     const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100;
     return {
       left: 155 * this.blocks.indexOf(block) + 'px',
-      background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
-        #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
+      background: `repeating-linear-gradient(
+        #2d3348,
+        #2d3348 ${greenBackgroundHeight}%,
+        ${this.gradientColors[this.network][0]} ${Math.max(greenBackgroundHeight, 0)}%,
+        ${this.gradientColors[this.network][1]} 100%
+      )`,
     };
   }