Bootstrap version update and progressbar fix.

Yellow fee text is now white.

frontend/package.json

@@ -41,7 +41,7 @@
     "@angular/router": "~9.1.0",
     "@ng-bootstrap/ng-bootstrap": "^5.3.0",
     "@types/qrcode": "^1.3.4",
-    "bootstrap": "^4.4.1",
+    "bootstrap": "4.5.0",
     "chartist": "^0.11.4",
     "clipboard": "^2.0.4",
     "ngx-infinite-scroll": "^8.0.1",
@@ -72,4 +72,4 @@
     "tslint": "~6.1.0",
     "typescript": "~3.6.4"
   }
-}
+}

frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.html

@@ -7,7 +7,7 @@
       </div>
       <div class="block-body">
         <div class="fees">
-          <span class="yellow-color">~{{ block.medianFee | number:'1.0-0' }} sat/vB</span>
+          ~{{ block.medianFee | 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>

frontend/src/app/components/latest-blocks/latest-blocks.component.scss

@@ -2,12 +2,6 @@
   background-color: #2d3348;
 }
 
-.progress-text {
-  position: absolute;
-  width: 100%;
-  text-align: center;
-}
-
 @media (min-width: 768px) {
   .d-md-block {
       display: table-cell !important;

frontend/src/app/components/mempool-block/mempool-block.component.scss

@@ -2,12 +2,6 @@
   background-color: #2d3348;
 }
 
-.progress-text {
-  position: absolute;
-  width: 100%;
-  text-align: center;
-}
-
 .title-block {
   color: #FFF;
   padding-top: 20px;

frontend/src/app/components/mempool-blocks/mempool-blocks.component.html

@@ -5,7 +5,7 @@
         <a [routerLink]="['/mempool-block/' | relativeUrl, i]" class="blockLink">&nbsp;</a>
         <div class="block-body" *ngIf="mempoolBlocks?.length">
           <div class="fees">
-            <span class="yellow-color">~{{ projectedBlock.medianFee | number:'1.0-0' }} sat/vB</span>
+            ~{{ projectedBlock.medianFee | 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>

frontend/src/styles.scss

@@ -373,6 +373,13 @@ h1, h2, h3 {
   font-size: 14px;
 }
 
+.progress-text {
+  position: absolute;
+  top: 8px;
+  width: 100%;
+  text-align: center;
+}
+
 .progress-mempool {
   background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
 }
@@ -391,4 +398,4 @@ h1, h2, h3 {
 
 .tooltip-inner {
   max-width: inherit;
-}
+}