Search box text updated.

BTC ticker fix.
Dropdown color fix.
Miner button tooltip.

frontend/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbButtonsModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbButtonsModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -98,6 +98,7 @@ import { MinerComponent } from './pipes/miner/miner.component';
     ReactiveFormsModule,
     BrowserAnimationsModule,
     NgbButtonsModule,
+    NgbTooltipModule,
     InfiniteScrollModule,
   ],
   providers: [

frontend/src/app/components/amount/amount.component.html

@@ -6,7 +6,9 @@
     Confidential
   </ng-template>
   <ng-template #default>
-    {{ satoshis / 100000000 | number : digitsInfo }} <ng-template [ngIf]="network === 'liquid'">L-BTC</ng-template>
+    {{ satoshis / 100000000 | number : digitsInfo }}
+    <ng-template [ngIf]="network === 'liquid'">L-BTC</ng-template>
     <ng-template [ngIf]="network === 'testnet'">tBTC</ng-template>
+    <ng-template [ngIf]="network === ''">BTC</ng-template>
   </ng-template>
 </ng-template>

frontend/src/app/components/block/block.component.html

@@ -16,7 +16,7 @@
                 <td><a [routerLink]="['/block/' | relativeUrl, block.id]" title="{{ block.id }}">{{ block.id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="block.id"></app-clipboard></td>
               </tr>
               <tr>
-                <td class="td-width">Timestamp</td>
+                <td>Timestamp</td>
                 <td>
                   {{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
                   <div class="lg-inline">
@@ -39,7 +39,7 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr *ngIf="block.medianFee !== undefined">
-                <td>Median fee</td>
+                <td class="td-width">Median fee</td>
                 <td>~{{ block.medianFee | number:'1.0-0' }} sat/vB (<app-fiat [value]="block.medianFee * 250" digitsInfo="1.2-2"></app-fiat>)</td>
               </tr>
               <ng-template [ngIf]="fees !== undefined" [ngIfElse]="loadingFees">
@@ -57,7 +57,7 @@
               <ng-template #loadingFees>
                 <tr>
                   <td>Total fees</td>
-                  <td><span class="skeleton-loader"></span></td>
+                  <td style="width: 75%;"><span class="skeleton-loader"></span></td>
                 </tr>
                 <tr>
                   <td>Reward + fees:</td>

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

@@ -11,9 +11,9 @@
       <span class="sr-only">Toggle Dropdown</span>
     </button>
     <div class="dropdown-menu" [class.d-block]="!networkDropdownHidden">
-      <a class="dropdown-item" routerLink="/">Mainnet</a>
-      <a class="dropdown-item" routerLink="/liquid">Liquid</a>
-      <a class="dropdown-item" routerLink="/testnet">Testnet</a>
+      <a class="dropdown-item" [class.active]="network === ''" routerLink="/">Mainnet</a>
+      <a class="dropdown-item" [class.active]="network === 'liquid'" routerLink="/liquid">Liquid</a>
+      <a class="dropdown-item" [class.active]="network === 'testnet'" routerLink="/testnet">Testnet</a>
       </div>
   </div>
 

frontend/src/app/components/search-form/search-form.component.html

@@ -1,7 +1,7 @@
 <form [formGroup]="searchForm" (submit)="searchForm.valid && search()" class="mr-4" novalidate>
   <div class="form-row">
     <div style="width: 350px;" class="mr-2">
-      <input formControlName="searchText" type="text" class="form-control" placeholder="Transaction, address, block hash...">
+      <input formControlName="searchText" type="text" class="form-control" placeholder="Transaction, block height, hash or address">
     </div>
     <div>
       <button type="submit" class="btn btn-block btn-primary">Search</button>

frontend/src/app/pipes/miner/miner.component.html

@@ -4,7 +4,7 @@
 
 <ng-template #done>
   <ng-template [ngIf]="miner" [ngIfElse]="unknownMiner">
-    <a [title]="title" [href]="url" target="_blank" class="badge badge-primary">{{ miner }}</a>
+    <a placement="bottom" [ngbTooltip]="title" [href]="url" target="_blank" class="badge badge-primary">{{ miner }}</a>
   </ng-template>
   <ng-template #unknownMiner>
     <span class="badge badge-secondary">Unknown</span>

frontend/src/app/pipes/miner/miner.component.ts

@@ -47,7 +47,7 @@ export class MinerComponent implements OnChanges {
             const coinbaseAscii = this.hex2ascii(this.coinbaseTransaction.vin[0].scriptsig);
             if (coinbaseAscii.indexOf(tag) > -1) {
               this.miner = pools.coinbase_tags[tag].name;
-              this.title = 'Identified by coinbase tag: ' + tag;
+              this.title = 'Identified by coinbase tag: \'' + tag + '\'';
               this.url = pools.coinbase_tags[tag].link;
               break;
             }

frontend/src/styles.scss

@@ -15,6 +15,15 @@ $link-decoration:           none !default;
 $link-hover-color:          darken($link-color, 15%) !default;
 $link-hover-decoration:     underline !default;
 
+$dropdown-bg: #1d1f31;
+$dropdown-link-color: #fff;
+
+$dropdown-link-hover-color: #fff;
+$dropdown-link-hover-bg: #11131f;
+
+$dropdown-link-active-color: #fff;
+$dropdown-link-active-bg: #11131f;
+
 @import "~bootstrap/scss/bootstrap";
 @import '~tlite/tlite.css';