From b2e0edb919a204c569f75685dbcd7b9bce969504 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Tue, 22 Sep 2020 06:55:45 +0700
Subject: [PATCH] Menu design updates.

---
 frontend/src/app/app.module.ts                |  3 ++-
 .../master-page/master-page.component.html    |  3 +--
 .../master-page/master-page.component.scss    | 21 +++++++++++--------
 .../search-form/search-form.component.html    |  4 ++--
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index b4562bde8..00b9282b6 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -43,7 +43,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
-import { faChartArea, faCube, faDatabase, faInfo, faInfoCircle, faList, faQuestion, faQuestionCircle, faTachometerAlt, faThList, faTv } from '@fortawesome/free-solid-svg-icons';
+import { faChartArea, faCube, faDatabase, faInfo, faInfoCircle, faList, faQuestion, faQuestionCircle, faSearch, faTachometerAlt, faThList, faTv } from '@fortawesome/free-solid-svg-icons';
 
 @NgModule({
   declarations: [
@@ -106,5 +106,6 @@ export class AppModule {
     library.addIcons(faList);
     library.addIcons(faTachometerAlt);
     library.addIcons(faDatabase);
+    library.addIcons(faSearch);
   }
 }
diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index b57271a17..5b7cd3818 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -9,8 +9,7 @@
     </ng-container>
   </a>
 
-
-  <div ngbDropdown display="dynamic" style="margin-right: 16px;" *ngIf="env.TESTNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
+  <div ngbDropdown display="dynamic" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
     <button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
       <img src="./resources/{{ network.val === '' ? 'bitcoin' : network.val }}-logo.png" style="width: 25px; height: 25px;" class="mr-1">
     </button>
diff --git a/frontend/src/app/components/master-page/master-page.component.scss b/frontend/src/app/components/master-page/master-page.component.scss
index 422f59979..0f3b1be58 100644
--- a/frontend/src/app/components/master-page/master-page.component.scss
+++ b/frontend/src/app/components/master-page/master-page.component.scss
@@ -2,10 +2,6 @@ li.nav-item.active {
   background-color: #653b9c;
 }
 
-li.nav-item {
-  padding: 10px;
-}
-
 fa-icon {
   font-size: 1.5em;
 }
@@ -14,17 +10,24 @@ fa-icon {
   z-index: 100;
 }
 
+li.nav-item {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
 @media (min-width: 768px) {
   .navbar {
-    padding: 0rem 1rem;
+    padding: 0rem 2rem;
   }
   fa-icon {
     font-size: 1.2em;
   }
-}
-
-.logo {
-  margin-left: 30px;
+  .dropdown-container {
+    margin-right: 16px;
+  }
+  li.nav-item {
+    padding: 10px;
+  }
 }
 
 li.nav-item a {
diff --git a/frontend/src/app/components/search-form/search-form.component.html b/frontend/src/app/components/search-form/search-form.component.html
index 024b80744..1ba9f3d8a 100644
--- a/frontend/src/app/components/search-form/search-form.component.html
+++ b/frontend/src/app/components/search-form/search-form.component.html
@@ -1,10 +1,10 @@
 <form [formGroup]="searchForm" (submit)="searchForm.valid && search()" novalidate>
   <div class="d-flex">
     <div class="search-box-container mr-2">
-      <input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearch" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" placeholder="Transaction, block height, hash or address">
+      <input #instance="ngbTypeahead" [ngbTypeahead]="typeaheadSearch" (selectItem)="itemSelected()" (focus)="focus$.next($any($event).target.value)" (click)="click$.next($any($event).target.value)" formControlName="searchText" type="text" class="form-control" placeholder="Tx id, block height, hash or address">
     </div>
     <div>
-      <button type="submit" class="btn btn-block btn-primary">Search</button>
+      <button type="submit" class="btn btn-block btn-primary"><fa-icon [icon]="['fas', 'search']" [fixedWidth]="true" title="Search"></fa-icon></button>
     </div>
   </div>
 </form>
\ No newline at end of file