From 7bbfbdb1889d1fabfe76dd8db48689bd56ed1079 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Mon, 20 Jul 2020 11:03:53 +0700
Subject: [PATCH] Restoring "fee span" on blocks.

---
 .../blockchain-blocks.component.html          |  4 +++-
 .../blockchain-blocks.component.scss          | 20 +++++++++++--------
 .../mempool-blocks.component.html             |  3 +++
 .../mempool-blocks.component.scss             | 20 +++++++++++--------
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
index 8da403914..7fe866640 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html
@@ -9,9 +9,11 @@
         <div class="fees">
           ~{{ block.medianFee | number:'1.0-0' }} sat/vB
         </div>
+        <div class="fee-span">
+          {{ block.feeRange[0] | number:'1.0-0' }} - {{ block.feeRange[block.feeRange.length - 1] | number:'1.0-0' }} sat/vB
+        </div>
         <div class="block-size">{{ block.size | bytes: 2 }}</div>
         <div class="transaction-count">{{ block.tx_count | number }} transactions</div>
-        <br /><br />
         <div class="time-difference"><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</div>
       </div>
     </div>
diff --git a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
index 15b946d9a..57f5c1d7f 100644
--- a/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
+++ b/frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
@@ -33,21 +33,25 @@
 }
 
 .time-difference {
-  position: absolute;
-  bottom: 10px;
-  text-align: center;
-  width: 100%;
   font-size: 14px;
 }
 
 .fees {
-  font-size: 14px;
-  margin-top: 12px;
-  margin-bottom: 6px;
+  font-size: 12px;
+  margin-top: 10px;
+  margin-bottom: 2px;
+}
+
+.fee-span {
+  font-size: 9px;
+  margin-bottom: 4px;
+  color: #fff000;
 }
 
 .transaction-count {
-  font-size: 12px;
+  font-size: 10px;
+  margin-top: 2px;
+  margin-bottom: 4px;
 }
 
 .block-height {
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
index 00828f356..43cdb9b9f 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.html
@@ -7,6 +7,9 @@
           <div class="fees">
             ~{{ projectedBlock.medianFee | number:'1.0-0' }} sat/vB
           </div>
+          <div class="fee-span">
+            {{ projectedBlock.feeRange[0] | number:'1.0-0' }} - {{ projectedBlock.feeRange[projectedBlock.feeRange.length - 1] | number:'1.0-0' }} sat/vB
+          </div>
           <div class="block-size">{{ projectedBlock.blockSize | bytes: 2 }}</div>
           <div class="transaction-count">{{ projectedBlock.nTx | number }} transactions</div>
           <div class="time-difference" *ngIf="projectedBlock.blockVSize <= 1000000; else mergedBlock">
diff --git a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
index 27fb4ca45..cae95c44b 100644
--- a/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
+++ b/frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
@@ -38,21 +38,25 @@
 }
 
 .time-difference {
-  position: absolute;
-  bottom: 10px;
-  text-align: center;
-  width: 100%;
   font-size: 14px;
 }
 
 .fees {
-  font-size: 14px;
-  margin-top: 12px;
-  margin-bottom: 6px;
+  font-size: 12px;
+  margin-top: 10px;
+  margin-bottom: 2px;
+}
+
+.fee-span {
+  font-size: 9px;
+  margin-bottom: 4px;
+  color: #fff000;
 }
 
 .transaction-count {
-  font-size: 12px;
+  font-size: 10px;
+  margin-top: 2px;
+  margin-bottom: 4px;
 }
 
 .bitcoin-block::after {