Tweaks fee widget

frontend/src/app/components/fees-box/fees-box.component.html

@@ -1,3 +1,11 @@
+<div class="fee-progress-bar" [style.background]="'linear-gradient(to right, ' + startColor + ', ' + endColor + ')'">
+  <span class="fee-label" i18n="fees-box.minimum">Minimum</span>
+  <span class="fee-label" i18n="fees-box.economy">Economy</span>
+  <span class="fee-label" i18n="fees-box.low">Low</span>
+  <span class="fee-label" i18n="fees-box.medium">Medium</span>
+  <span class="fee-label" i18n="fees-box.high">High</span>
+</div>
+
 <div class="fee-estimation-wrapper">
   <div class="fee-estimation-container" *ngIf="(isLoadingWebSocket$ | async) === false && (recommendedFees$ | async) as recommendedFees; else loadingFees">
     <div class="item">
@@ -28,14 +36,6 @@
   </div>
 </div>
 
-<div class="fee-progress-bar" [style.background]="'linear-gradient(to right, ' + startColor + ', ' + endColor + ')'">
-  <span class="fee-label">Minimum</span>
-  <span class="fee-label">Economy</span>
-  <span class="fee-label">Low</span>
-  <span class="fee-label">Medium</span>
-  <span class="fee-label">Priority</span>
-</div>
-
 <ng-template #loadingFees>
   <div class="fee-estimation-container loading-container">
     <div class="item">

frontend/src/app/components/fees-box/fees-box.component.scss

@@ -55,18 +55,17 @@
       border-bottom: 1px solid #ffffff1c;
       width: fit-content;
       margin: auto;
-      line-height: 1.45;
-      padding: 0px 2px;
+      font-size: 20px;
     }
     .fiat {
       display: block;
-      font-size: 14px !important;
+      font-size: 13px !important;
     }
   }
 }
 
 .loading-container{
-  min-height: 76px;
+  height: 50px;
 }
 
 .card-text {
@@ -74,8 +73,8 @@
     width: 100%;
     display: block;
     &:first-child {
-      max-width: 90px;
-      margin: 15px auto 3px;
+      max-width: 70px;
+      margin: 10px auto 3px;
     }
     &:last-child {
       margin: 10px auto 3px;
@@ -86,14 +85,15 @@
 
 .fee-progress-bar {
   width: 100%;
-  height: 20px;
-  margin-top: 15px;
+  height: 22px;
+  margin-bottom: 8px;
   border-radius: 0px 10px 10px 0px;
   display: flex;
   flex-direction: row;
+  transition: background-color 1s;
 }
 
 .fee-label {
-  font-size: 12px;
+  font-size: 14px;
   width: 100px;
 }

frontend/src/app/components/fees-box/fees-box.component.ts

@@ -15,8 +15,8 @@ export class FeesBoxComponent implements OnInit {
   isLoadingWebSocket$: Observable<boolean>;
   recommendedFees$: Observable<Recommendedfees>;
   defaultFee: number;
-  startColor = '#557d00';
-  endColor = '#557d00';
+  startColor = '#2e324e';
+  endColor = '#2e324e';
 
   constructor(
     private stateService: StateService,
@@ -29,6 +29,7 @@ export class FeesBoxComponent implements OnInit {
     this.recommendedFees$ = this.stateService.recommendedFees$
       .pipe(
         tap((fees) => {
+          // For quick testing purpose
           // fees.fastestFee = 400;
           // fees.halfHourFee = 75;
           // fees.hourFee = 50;

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

@@ -5,7 +5,7 @@
       <div class="col card-wrapper" *ngIf="(network$ | async) !== 'liquid' && (network$ | async) !== 'liquidtestnet'">
         <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
         <div class="card">
-          <div class="card-body">
+          <div class="card-body less-padding">
             <app-fees-box class="d-block"></app-fees-box>
           </div>
         </div>
@@ -33,7 +33,7 @@
         <div class="col card-wrapper">
           <div class="main-title" i18n="fees-box.transaction-fees">Transaction Fees</div>
           <div class="card">
-            <div class="card-body">
+            <div class="card-body less-padding">
               <app-fees-box class="d-block"></app-fees-box>
             </div>
           </div>

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

@@ -269,6 +269,9 @@
     justify-content: space-around;
     padding: 22px 20px;
   }
+  .less-padding {
+    padding: 20px 20px;
+  }
 }
 
 .retarget-sign {