From 4093cc0cbf5c8ea2000500b029f705ab253e9784 Mon Sep 17 00:00:00 2001
From: nymkappa <vialjoris@hotmail.com>
Date: Sat, 16 Jul 2022 21:37:45 +0200
Subject: [PATCH] Fix graph title & download button on mobile Fix wrong graph
 title on LN channels & capacity chart

---
 .../block-fee-rates-graph.component.html      | 11 ++++++----
 .../block-fees-graph.component.html           | 11 ++++++----
 .../block-prediction-graph.component.html     | 11 ++++++----
 .../block-rewards-graph.component.html        | 11 ++++++----
 .../block-sizes-weights-graph.component.html  | 10 +++++----
 .../hashrate-chart.component.html             | 10 +++++----
 .../hashrate-chart-pools.component.html       | 13 ++++++-----
 .../pool-ranking/pool-ranking.component.html  | 10 +++++----
 .../statistics/statistics.component.html      | 22 ++++++++++---------
 .../nodes-networks-chart.component.html       | 10 +++++----
 .../lightning-statistics-chart.component.html | 10 +++++----
 11 files changed, 78 insertions(+), 51 deletions(-)

diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
index 2dbe4d569..e694f5676 100644
--- a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
+++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html
@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-fee-rates">Block Fee Rates</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-fee-rates">Block Fee Rates</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
index 4aa4eadd3..1d96d43ab 100644
--- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
+++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html
@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-fees">Block Fees</span>
-      <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-fees">Block Fees</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
diff --git a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html
index 64cd32fd1..b98512545 100644
--- a/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html
+++ b/frontend/src/app/components/block-prediction-graph/block-prediction-graph.component.html
@@ -2,10 +2,13 @@
 
 <div class="full-container">
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
-      <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-prediction-accuracy">Block Prediction Accuracy</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 144">
diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
index 1087a811f..b1eb39e67 100644
--- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
+++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html
@@ -3,10 +3,13 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
-  <span i18n="mining.block-rewards">Block Rewards</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-rewards">Block Rewards</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+  
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(statsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 4320">
diff --git a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
index 0429b68c1..ed55fefb1 100644
--- a/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
+++ b/frontend/src/app/components/block-sizes-weights-graph/block-sizes-weights-graph.component.html
@@ -1,10 +1,12 @@
 <div class="full-container">
 
   <div class="card-header mb-0 mb-md-4">
-    <span i18n="mining.block-sizes-weights">Block Sizes and Weights</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.block-sizes-weights">Block Sizes and Weights</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(blockSizesWeightsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
index 285a0d410..b8999a9af 100644
--- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
+++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.html
@@ -23,10 +23,12 @@
   </div>
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
-    <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
diff --git a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
index 1d9e63716..f1b231dd0 100644
--- a/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
+++ b/frontend/src/app/components/hashrates-chart-pools/hashrate-chart-pools.component.html
@@ -2,11 +2,14 @@
 
 <div class="full-container">
 
-  <div class="card-header  mb-0 mb-md-4">
-    <span i18n="mining.pools-dominance">Pools Dominance</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+  <div class="card-header mb-0 mb-md-4">
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.pools-dominance">Pools Dominance</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
+
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(hashrateObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
         <label ngbButtonLabel class="btn-primary btn-sm" *ngIf="stats.blockCount >= 25920">
diff --git a/frontend/src/app/components/pool-ranking/pool-ranking.component.html b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
index cf822ad3c..ae1bb2eb2 100644
--- a/frontend/src/app/components/pool-ranking/pool-ranking.component.html
+++ b/frontend/src/app/components/pool-ranking/pool-ranking.component.html
@@ -32,10 +32,12 @@
   </div>
 
   <div class="card-header" *ngIf="!widget">
-    <span i18n="mining.pools">Pools Ranking</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.pools">Pools Ranking</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
     <form [formGroup]="radioGroupForm" class="formRadioGroup"
       *ngIf="!widget && (miningStatsObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
diff --git a/frontend/src/app/components/statistics/statistics.component.html b/frontend/src/app/components/statistics/statistics.component.html
index ddeda4d80..a685535a7 100644
--- a/frontend/src/app/components/statistics/statistics.component.html
+++ b/frontend/src/app/components/statistics/statistics.component.html
@@ -3,11 +3,12 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i>
-          <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
-          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
-            <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-          </button>
+          <div class="d-flex d-md-block align-items-baseline">
+            <span i18n="statistics.memory-by-vBytes">Mempool by vBytes (sat/vByte)</span>
+            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('mempool')">
+              <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+            </button>
+          </div>  
 
           <form [formGroup]="radioGroupForm" class="formRadioGroup"
             [class]="stateService.env.MINING_DASHBOARD ? 'mining' : ''" (click)="saveGraphPreference()">
@@ -84,11 +85,12 @@
     <div>
       <div class="card mb-3">
         <div class="card-header">
-          <i class="fa fa-area-chart"></i>
-          <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
-          <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
-            <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-          </button>
+          <div class="d-flex d-md-block align-items-baseline">
+            <span i18n="statistics.transaction-vbytes-per-second">Transaction vBytes per second (vB/s)</span>
+            <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart('incoming')">
+              <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+            </button>
+          </div>  
         </div>
 
         <div class="card-body">
diff --git a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
index ca47c159c..259469e9d 100644
--- a/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
+++ b/frontend/src/app/lightning/nodes-networks-chart/nodes-networks-chart.component.html
@@ -1,10 +1,12 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
-    <span i18n="mining.nodes-networks">Nodes count by network</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.nodes-networks">Nodes count by network</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>  
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(nodesNetworkObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
diff --git a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
index 7deb681a0..22774a16f 100644
--- a/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
+++ b/frontend/src/app/lightning/statistics-chart/lightning-statistics-chart.component.html
@@ -1,10 +1,12 @@
 <div [class]="widget === false ? 'full-container' : ''">
 
   <div class="card-header mb-0 mb-md-4" [style]="widget ? 'display:none' : ''">
-    <span i18n="mining.hashrate-difficulty">Hashrate & Difficulty</span>
-    <button class="btn" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
-      <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
-    </button>
+    <div class="d-flex d-md-block align-items-baseline">
+      <span i18n="mining.channels-and-capacity">Channels & Capacity</span>
+      <button class="btn p-0 pl-2" style="margin: 0 0 4px 0px" (click)="onSaveChart()">
+        <fa-icon [icon]="['fas', 'download']" [fixedWidth]="true"></fa-icon>
+      </button>
+    </div>
 
     <form [formGroup]="radioGroupForm" class="formRadioGroup" *ngIf="(capacityObservable$ | async) as stats">
       <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">