From 21ef5054bf9d2d5db5fdcc0846b0927b4b163e5c Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Sat, 26 Sep 2020 23:40:26 +0700
Subject: [PATCH] Moving fee box into a regular box.

---
 .../fees-box/fees-box.component.html          | 52 +++++++++++++------
 .../fees-box/fees-box.component.scss          | 10 +---
 .../mempool-graph/mempool-graph.component.ts  |  2 +-
 .../app/dashboard/dashboard.component.html    | 26 +++++++---
 4 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/frontend/src/app/components/fees-box/fees-box.component.html b/frontend/src/app/components/fees-box/fees-box.component.html
index 7d208b205..a317e3783 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.html
+++ b/frontend/src/app/components/fees-box/fees-box.component.html
@@ -1,19 +1,39 @@
-<table class="table mx-auto text-center" style="max-width: 550px">
-  <tr>
-    <td class="d-none d-md-table-cell border-top-0">Low priority</td>
-    <td class="border-top-0">Medium priority</td>
-    <td class="border-top-0">High priority</td>
-  </tr>
+<table style="width: 100%;">
   <tr *ngIf="(isLoadingWebSocket$ | async) === false && (feeEstimations$ | async) as feeEstimations; else loadingFees">
-    <td class="d-none d-md-table-cell">{{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)</td>
-    <td>{{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)</td>
-    <td>{{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)</td>
+    <td class="d-none d-md-block">
+      <h5 class="card-title">Low priority</h5>
+      <p class="card-text">
+        {{ feeEstimations.hourFee }} sat/vB (<app-fiat [value]="feeEstimations.hourFee * 250"></app-fiat>)
+      </p>
+    </td>
+    <td>
+      <h5 class="card-title">Medium priority</h5>
+      <p class="card-text">
+        {{ feeEstimations.halfHourFee }} sat/vB (<app-fiat [value]="feeEstimations.halfHourFee * 250"></app-fiat>)
+      </p>
+    </td>
+    <td>
+      <h5 class="card-title">High priority</h5>
+      <p class="card-text">
+        {{ feeEstimations.fastestFee }} sat/vB (<app-fiat [value]="feeEstimations.fastestFee * 250"></app-fiat>)
+      </p>
+    </td>
   </tr>
-  <ng-template #loadingFees>
-    <tr>
-      <td class="d-none d-md-table-cell"><span class="skeleton-loader"></span></td>
-      <td><span class="skeleton-loader"></span></td>
-      <td><span class="skeleton-loader"></span></td>
-    </tr>
-  </ng-template>
 </table>
+
+<ng-template #loadingFees>
+  <tr>
+    <td class="d-none d-md-block">
+      <h5 class="card-title">Low priority</h5>
+      <p class="card-text"><span class="skeleton-loader"></span></p>
+    </td>
+    <td>
+      <h5 class="card-title">Medium priority</h5>
+      <p class="card-text"><span class="skeleton-loader"></span></p>
+    </td>
+    <td>
+      <h5 class="card-title">High priority</h5>
+      <p class="card-text"><span class="skeleton-loader"></span></p>
+    </td>
+  </tr>
+</ng-template>
diff --git a/frontend/src/app/components/fees-box/fees-box.component.scss b/frontend/src/app/components/fees-box/fees-box.component.scss
index ab8257f06..d715af64d 100644
--- a/frontend/src/app/components/fees-box/fees-box.component.scss
+++ b/frontend/src/app/components/fees-box/fees-box.component.scss
@@ -1,9 +1,3 @@
-td {
-  width: 33%;
-}
-
-@media (max-width: 767.98px) {
-  td {
-    width: 50%;
-  }
+.card-title {
+  color: #4a68b9;
 }
diff --git a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
index 59faa9bff..650e5ac10 100644
--- a/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
+++ b/frontend/src/app/components/mempool-graph/mempool-graph.component.ts
@@ -64,7 +64,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         labelInterpolationFnc: (value: number): any => {
           return this.vbytesPipe.transform(value, 2);
         },
-        offset: showLegend ? 160 : 60,
+        offset: showLegend ? 160 : 80,
       },
       plugins: [
         Chartist.plugins.ctTargetLine({
diff --git a/frontend/src/app/dashboard/dashboard.component.html b/frontend/src/app/dashboard/dashboard.component.html
index 154a11661..c0f1eeeab 100644
--- a/frontend/src/app/dashboard/dashboard.component.html
+++ b/frontend/src/app/dashboard/dashboard.component.html
@@ -1,21 +1,33 @@
-<app-fees-box *ngIf="(network$ | async) === ''" class="d-block mr-2 ml-2 mb-5"></app-fees-box>
 
-<div class="container-xl">
+<div class="container-xl mt-2">
 
   <div class="row row-cols-1 row-cols-md-2" *ngIf="{ value: (mempoolInfoData$ | async) } as mempoolInfoData">
     <div class="col mb-4">
       <div class="card text-center">
         <div class="card-body">
-          <h5 class="card-title">Mempool size</h5>
-          <p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</p>
+          <app-fees-box *ngIf="(network$ | async) === ''" class="d-block mr-2 ml-2"></app-fees-box>
         </div>
       </div>
     </div>
     <div class="col mb-4">
       <div class="card text-center">
         <div class="card-body">
-          <h5 class="card-title unconfirmedTx">Unconfirmed transactions</h5>
-          <p class="card-text" *ngIf="mempoolInfoData.value; else loading">{{ mempoolInfoData.value.memPoolInfo.size | number }}</p>
+          <table style="width: 100%;">
+            <tr>
+              <td>
+                <h5 class="card-title">Mempool size</h5>
+                <p class="card-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData; else loading">
+                  {{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)
+                </p>
+              </td>
+              <td>
+                <h5 class="card-title">Unconfirmed</h5>
+                <p class="card-text" *ngIf="mempoolInfoData.value; else loading">
+                  {{ mempoolInfoData.value.memPoolInfo.size | number }}
+                </p>
+              </td>
+            </tr>
+          </table>
         </div>
       </div>
     </div>
@@ -51,7 +63,7 @@
 
     <div class="col mb-4">
       <div class="card text-center">
-        <div class="card-body">
+        <div class="card-body pl-0">
           <div style="height: 250px;" *ngIf="(mempoolStats$ | async) as mempoolStats">
             <app-mempool-graph [data]="mempoolStats.mempool" [showLegend]="false" [offsetX]="10"></app-mempool-graph>
           </div>