Minor fixes on Liquid dashboards

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

@@ -81,7 +81,7 @@
       <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" id="btn-audit">
         <a class="nav-link" [routerLink]="['/audit']" (click)="collapse()"><fa-icon [icon]="['fas', 'scale-balanced']" [fixedWidth]="true" i18n-title="master-page.btc-reserves-audit" title="BTC Reserves Audit"></fa-icon></a>
       </li>
-      <li [hidden]="isMobile" class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
+      <li class="nav-item mr-2" routerLinkActive="active" id="btn-docs">
         <a class="nav-link" [routerLink]="['/docs' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'book']" [fixedWidth]="true" i18n-title="master-page.docs" title="Docs"></fa-icon></a>
       </li>
       <li class="nav-item" routerLinkActive="active" id="btn-about">

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

@@ -23,6 +23,21 @@ li.nav-item {
   margin: auto 10px;
   padding-left: 10px;
   padding-right: 10px;
+  @media (max-width: 992px) {
+    margin: auto 7px;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+  @media (max-width: 429px) {
+    margin: auto 5px;
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+  @media (max-width: 369px) {
+    margin: auto 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
 }
 
 @media (min-width: 992px) {

frontend/src/app/components/liquid-reserves-audit/federation-addresses-list/federation-addresses-list.component.scss

@@ -6,11 +6,14 @@
 
 tr, td, th {
   border: 0px;
-  padding-top: 0.65rem !important;
+  padding-top: 0.65rem;
-  padding-bottom: 0.6rem !important;
+  padding-bottom: 0.6rem;
-  padding-right: 2rem !important;
+  padding-right: 2rem;
-  .widget {
+  .widget &.widget {
-    padding-right: 1rem !important;
+    padding-right: 1rem;
+    @media (max-width: 510px) {
+      padding-right: 0.5rem;
+    }
   }
 }
 

frontend/src/app/components/liquid-reserves-audit/federation-addresses-stats/federation-addresses-stats.component.scss

@@ -1,6 +1,7 @@
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 10px;
   @media (min-width: 376px) {
     flex-direction: row;
   }  

frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.html

@@ -1,5 +1,4 @@
-<div class="container-xl">
+<div [ngClass]="{'container-xl': !widget, 'widget': widget}">
-  <div [ngClass]="{'widget': widget}">
 
   <div *ngIf="!widget">
     <h1 i18n="liquid.recent-pegs">Recent Peg-In / Out's</h1>
@@ -102,7 +101,7 @@
               <span class="skeleton-loader" style="max-width: 300px"></span>
             </td>
             <td class="timestamp text-left">
-                <span class="skeleton-loader" style="max-width: 140px"></span>
+              <span class="skeleton-loader" style="max-width: 240px"></span>
             </td>
             <td class="amount text-right">
               <span class="skeleton-loader" style="max-width: 140px"></span>
@@ -111,7 +110,7 @@
               <span class="skeleton-loader" style="max-width: 300px"></span>
             </td>
             <td class="address text-left">
-                <span class="skeleton-loader" style="max-width: 140px"></span>
+              <span class="skeleton-loader" style="max-width: 240px"></span>
             </td>
           </tr>
         </ng-template>
@@ -129,7 +128,6 @@
     </ng-template>
   </div>
   
-  </div>
 </div>
 
 <br>

frontend/src/app/components/liquid-reserves-audit/recent-pegs-list/recent-pegs-list.component.scss

@@ -6,11 +6,14 @@
 
 tr, td, th {
   border: 0px;
-  padding-top: 0.65rem !important;
+  padding-top: 0.65rem;
-  padding-bottom: 0.6rem !important;
+  padding-bottom: 0.6rem;
-  padding-right: 2rem !important;
+  padding-right: 2rem;
-  .widget {
+  .widget &.widget {
-    padding-right: 1rem !important;
+    padding-right: 1rem;
+    @media (max-width: 510px) {
+      padding-right: 0.5rem;
+    }
   }
 }
 
@@ -93,7 +96,7 @@ tr, td, th {
     display: block;
   }
 
-  @media (max-width: 500px) {
+  @media (max-width: 510px) {
     display: none;
   }
 }

frontend/src/app/components/liquid-reserves-audit/recent-pegs-stats/recent-pegs-stats.component.scss

@@ -1,6 +1,7 @@
 .fee-estimation-container {
   display: flex;
   justify-content: space-between;
+  margin-bottom: 10px;
   @media (min-width: 376px) {
     flex-direction: row;
   }  

frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.html

@@ -17,13 +17,13 @@
           <app-reserves-ratio-stats [fullHistory$]="fullHistory$"></app-reserves-ratio-stats>
         </div>
         <div class="card-body pl-0" style="padding-top: 10px;">
-          <app-reserves-ratio-graph [data]="fullHistory$ | async"></app-reserves-ratio-graph>
+          <app-reserves-ratio-graph [data]="fullHistory$ | async" [height]="pegRatioGraphHeight"></app-reserves-ratio-graph>
         </div>
       </div>
     </div>
 
     <div class="col">
-      <div class="card">
+      <div class="card smaller">
         <div class="card-body">
           <app-recent-pegs-stats [pegsVolume$]="pegsVolume$"></app-recent-pegs-stats>
           <app-recent-pegs-list [recentPegIns$]="recentPegIns$" [recentPegOuts$]="recentPegOuts$"[widget]="true"></app-recent-pegs-list>
@@ -32,7 +32,7 @@
     </div>
 
     <div class="col" style="margin-bottom: 1.47rem">
-      <div class="card">
+      <div class="card smaller">
         <div class="card-body">
           <app-federation-addresses-stats [federationAddresses$]="federationAddresses$" [federationAddressesOneMonthAgo$]="federationAddressesOneMonthAgo$"></app-federation-addresses-stats>
           <app-federation-addresses-list [federationAddresses$]="federationAddresses$" [widget]="true"></app-federation-addresses-list>

frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.scss

@@ -8,6 +8,13 @@
 
 .card {
   background-color: #1d1f31;
+  height: 418px;
+  @media (min-width: 992px) {
+    height: 512px;
+  }
+  &.smaller {
+    height: 408px;
+  }
 }
 
 .card-title {
@@ -121,16 +128,6 @@
   }
 }
 
-.card {
-  height: 385px;
-}
-.list-card {
-  height: 410px;
-  @media (max-width: 767px) {
-    height: auto;
-  }
-}
-
 .mempool-block-wrapper {
   max-height: 380px;
   max-width: 380px;

frontend/src/app/components/liquid-reserves-audit/reserves-audit-dashboard/reserves-audit-dashboard.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, OnInit } from '@angular/core';
 import { SeoService } from '../../../services/seo.service';
 import { WebsocketService } from '../../../services/websocket.service';
 import { StateService } from '../../../services/state.service';
@@ -25,6 +25,7 @@ export class ReservesAuditDashboardComponent implements OnInit {
   federationAddressesOneMonthAgo$: Observable<any>;
   liquidPegsMonth$: Observable<any>;
   liquidReservesMonth$: Observable<any>;
+  pegRatioGraphHeight: number = 320;
   fullHistory$: Observable<any>;
   isLoad: boolean = true;
   private lastPegBlockUpdate: number = 0;
@@ -209,4 +210,15 @@ export class ReservesAuditDashboardComponent implements OnInit {
     this.destroy$.complete();
   }
 
+  @HostListener('window:resize', ['$event'])
+  onResize(): void {
+    if (window.innerWidth >= 992) {
+      this.pegRatioGraphHeight = 320;
+    } else if (window.innerWidth >= 768) {
+      this.pegRatioGraphHeight = 230;
+    } else {
+      this.pegRatioGraphHeight = 220;
+    }
+  }
+
 }

frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio-graph.component.ts

@@ -10,10 +10,10 @@ import { EChartsOption } from '../../../graphs/echarts';
 })
 export class ReservesRatioGraphComponent implements OnInit, OnChanges {
   @Input() data: any;
+  @Input() height: number | string = '320';
   ratioHistoryChartOptions: EChartsOption;
   ratioSeries: number[] = [];
 
-  height: number | string = '200';
   right: number | string = '10';
   top: number | string = '20';
   left: number | string = '50';

frontend/src/app/components/liquid-reserves-audit/reserves-ratio/reserves-ratio.component.ts

@@ -108,14 +108,14 @@ export class ReservesRatioComponent implements OnInit, OnChanges {
             fontFamily: 'inherit',
             fontWeight: 500,
             formatter: function (value) {
-              return (value).toFixed(5);
+              return (value * 100).toFixed(3) + ' %';
             },
             color: 'inherit'
           },
           data: [
             {
               value: parseFloat(currentReserves.amount) / parseFloat(currentPeg.amount),
-              name: 'Peg-O-Meter'
+              name: 'Assets vs Liabilities'
             }
           ]
         }

frontend/src/app/components/liquid-reserves-audit/reserves-supply-stats/reserves-supply-stats.component.html

@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="item">
-        <h5 class="card-title" i18n="dashboard.btc-reserves">BTC Reserves</h5>
+        <h5 class="card-title" i18n="dashboard.btc-holdings">BTC Holdings</h5>
         <div class="card-text">
           <div class="fee-text">{{ (+currentReserves.amount) / 100000000 | number: '1.2-2' }} <span style="color: #b86d12;">BTC</span></div>
           <span class="fiat">

frontend/src/app/dashboard/dashboard.component.html

@@ -284,11 +284,11 @@
 </ng-template>
 
 <ng-template #lbtcPegs let-mempoolInfoData>
-  <div class="mempool-info-data">
+  <div class="mempool-info-data lbtc-pegs-stats">
     <div class="item">
       <h5 class="card-title" i18n="dashboard.lbtc-pegs-in-circulation">L-BTC in circulation</h5>
       <ng-container *ngIf="(currentPeg$ | async) as currentPeg; else loadingTransactions">
-        <p i18n-ngbTooltip="liquid.last-elements-audit-block" [ngbTooltip]="'L-BTC supply last updated at Liquid block ' + (currentPeg.lastBlockUpdate)" placement="top" class="card-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span>L-BTC</span></p>
+        <div i18n-ngbTooltip="liquid.last-elements-audit-block" [ngbTooltip]="'L-BTC supply last updated at Liquid block ' + (currentPeg.lastBlockUpdate)" placement="top" class="card-text">{{ (+currentPeg.amount) / 100000000 | number: '1.2-2' }} <span>L-BTC</span></div>
       </ng-container>
     </div>
     <div class="item">
@@ -296,7 +296,7 @@
         <h5 class="card-title"><ng-container i18n="dashboard.btc-reserves">BTC Reserves</ng-container>&nbsp;<fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true" style="font-size: 13px; color: #4a68b9"></fa-icon></h5>
       </a>
       <ng-container *ngIf="(currentReserves$ | async) as currentReserves; else loadingTransactions">
-        <p i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></p>
+        <div i18n-ngbTooltip="liquid.last-bitcoin-audit-block" [ngbTooltip]="'BTC reserves last updated at Bitcoin block ' + (currentReserves.lastBlockUpdate)" placement="top" class="card-text">{{ +(currentReserves.amount) / 100000000 | number: '1.2-2' }} <span class="bitcoin-color">BTC</span></div>
       </ng-container>
     </div>
   </div>

frontend/src/app/dashboard/dashboard.component.scss

@@ -59,6 +59,10 @@
     display: flex;
     flex-direction: row;
   }
+  &.lbtc-pegs-stats { 
+    display: flex;
+    flex-direction: row;
+  }
   h5 {
     margin-bottom: 10px;
   }