Merge pull request #128 from stratisproject/ui

New UI, add status bar and sidebar, improve error handling

Breeze.UI/main.ts

@@ -28,7 +28,14 @@ let mainWindow = null;
 function createWindow() {
 
   // Create the browser window.
-  mainWindow = new BrowserWindow({width: 1200, height: 700, frame: true, minWidth: 1200, minHeight: 700, icon: "./assets/images/stratis-tray.png"});
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 700,
+    frame: true,
+    minWidth: 1200,
+    minHeight: 700,
+    icon: __dirname + "/assets/images/stratis128x128.png"
+  });
 
    // and load the index.html of the app.
   mainWindow.loadURL(url.format({

Breeze.UI/src/app/app.module.ts

@@ -18,6 +18,7 @@ import { GlobalService } from './shared/services/global.service';
 
 import { SendComponent } from './wallet/send/send.component';
 import { ReceiveComponent } from './wallet/receive/receive.component';
+import { TransactionDetailsComponent } from './wallet/transaction-details/transaction-details.component';
 
 
 @NgModule({
@@ -36,11 +37,13 @@ import { ReceiveComponent } from './wallet/receive/receive.component';
     AppComponent,
     LoginComponent,
     SendComponent,
-    ReceiveComponent
+    ReceiveComponent,
+    TransactionDetailsComponent
   ],
   entryComponents: [
     SendComponent,
-    ReceiveComponent
+    ReceiveComponent,
+    TransactionDetailsComponent
   ],
   providers: [ ApiService, GlobalService ],
   bootstrap: [ AppComponent ]

Breeze.UI/src/app/login/login.component.html

-<div class="container col-md-8 offset-md-2">
-  <div class="row">
-    <div class="col">
-      <h1>Welcome to Breeze</h1>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col">
-      <form *ngIf="hasWallet" [formGroup]="openWalletForm" (ngSubmit)="onDecryptClicked()">
+<section id="breeze">
+  <div class="login d-flex align-items-center text-center">
+    <div class="container">
+      <h3 class="display-5">Welcome to Breeze</h3>
+      <div *ngIf="hasWallet">
+        <p class="lead">Please choose the wallet you would like to open</p>
+        <div class="row d-flex justify-content-center">
+          <form class="col-md-8 col-xs-12 text-left" [formGroup]="openWalletForm">
             <div class="form-group">
-          <label>Select wallet name to open</label>
-          <select class="form-control" formControlName="selectWallet">
-            <option *ngFor="let wallet of wallets" [value]="wallet">{{wallet}}</option>
+              <label class="col-12 row" for="Select">Wallet</label>
+              <select class="form-control custom-select col-12" formControlName="selectWallet">
+                <option *ngFor="let wallet of wallets" [value]="wallet">{{ wallet }}</option>
               </select>
             </div>
             <div class="form-group">
-          <label>Please enter your password to decrypt your wallet</label>
-          <input class="form-control" type="password" formControlName="password" placeholder="Enter password here">
-          <div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
-        </div>
-        <div class="form-group">
-          <button type="submit" [disabled]="!openWalletForm.valid" class="btn">Decrypt</button>
+              <label class="text-left" for="Password">Password</label>
+              <input type="password" class="form-control" id="Password" formControlName="password" placeholder="Enter your password.">
+              <div *ngIf="formErrors.password" class="form-control-feedback">{{ formErrors.password }}</div>
             </div>
           </form>
         </div>
+        <!-- /row-->
+        <div class="row d-flex justify-content-center">
+          <button type="submit" class="btn btn-darkgray btn-lg" [disabled]="!openWalletForm.valid" (click)="onDecryptClicked()">Decrypt</button>
         </div>
-  <div class="row">
-    <div class="col" *ngIf="hasWallet;else no_wallet">
-      If you like to create or restore a wallet please click the button below.
       </div>
+      <!-- /row-->
+      <div class="row d-flex justify-content-center" *ngIf="hasWallet;else no_wallet">
+        <p class="lead">If you would like to create or restore a wallet please click the button below.</p>
       </div>
-  <div class="row">
-    <div class="col">
       <ng-template #no_wallet>
-        <p> Looks like you're new here. Please create or restore a wallet.</p>
+        <p class="lead">Looks like you're new here. <br />Please create or restore a wallet.</p>
       </ng-template>
+      <div class="row d-flex justify-content-center">
+        <button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button>
       </div>
     </div>
-  <div class="row">
-    <div class="col">
-      <button type="button" (click)="onCreateClicked()" class="btn">Create or restore wallet</button>
+    <!-- /container-->
   </div>
-  </div>
-</div>
-
-
-
+  <!-- /login-->
+</section>
+<!-- /breeze-->
 

Breeze.UI/src/app/setup/create/create.component.css

-#mnemonic {
-  margin-top: 30px;
-}

Breeze.UI/src/app/setup/create/create.component.html

-<div class="container col-md-8 offset-md-2">
-  <div class="row">
-    <div class="col">
-      <h1>Please create a new wallet</h1>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col">
-      <form [formGroup]="createWalletForm" (ngSubmit)="onCreateClicked()">
+<section id="breeze">
+  <div class="login d-flex align-items-center text-center">
+    <div class="container">
+      <p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
+      <h3 class="display-5">Welcome</h3>
+      <div class="row d-flex justify-content-center">
+        <form class="col-md-8 col-xs-12 text-left" [formGroup]="createWalletForm">
+          <!--<div class="form-group has-success">-->
           <div class="form-group">
-          <label>Name:</label>
-          <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
-          <div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
+            <label class="col-12 row" for="walletName">Name</label>
+            <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
+            <div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
           </div>
           <div class="form-group">
-          <label>Password:</label>
-          <input class="form-control" formControlName="walletPassword" type="password" placeholder="Enter a password for your wallet.">
-          <div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
+            <label class="text-left" for="walletPassword">Password</label>
+            <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
+            <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
           </div>
           <div class="form-group">
-          <label>Network:</label>
-          <select name="network" formControlName="selectNetwork">
+            <label class="text-left" for="walletNetwork">Network</label>
+            <select class="form-control custom-select" name="network" formControlName="selectNetwork">
               <!--<option value="main">Main</option>-->
               <option value="test">Testnet</option>
               <!--<option value="stratistest">StratisTest</option>-->
             </select>
           </div>
-        <div class="form-group">
-          <button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button>
-          <button type="submit" [disabled]="!createWalletForm.valid" class="btn">Create Wallet</button>
-        </div>
         </form>
       </div>
+      <!-- /row-->
+      <div class="row d-flex justify-content-center">
+        <button type="button" class="btn btn-darkgray btn-lg" [disabled]="!createWalletForm.valid" (click)="onCreateClicked()">Create</button>
       </div>
-  <div class="row">
-    <div class="col" id="mnemonic">
-      <label>Mnemonic:</label>
-      <label>{{ mnemonic }}</label>
+      <!-- /row-->
     </div>
+    <!-- /container-->
   </div>
-</div>
+  <!-- /login-->
+</section>
+<!-- /breeze-->

Breeze.UI/src/app/setup/create/create.component.ts

@@ -93,11 +93,12 @@ export class CreateComponent {
         response => {
           if (response.status >= 200 && response.status < 400){
             this.mnemonic = response.json();
-            alert("Your wallet has been created. Please write down your 12 word passphrase: \n" + this.mnemonic + "\nYou will be redirected to the decryption page.");
+            alert("Your wallet has been created.\n\nPlease write down your 12 word passphrase: \n" + this.mnemonic + "\n\nYou will be redirected to the decryption page.");
             this.router.navigate(['']);
           }
         },
         error => {
+          console.log(error);
           if (error.status === 0) {
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {

Breeze.UI/src/app/setup/recover/recover.component.css

-#buttons {
-  margin-top: 30px;
-}

Breeze.UI/src/app/setup/recover/recover.component.html

-<div class="container col-md-8 offset-md-2">
-  <div class="row">
-    <div class="col">
-      <h1>Recover your wallet</h1>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col">
-      <p>Welcome, please complete the form below to recover your wallet.</p>
-    </div>
+<section id="breeze">
+  <div class="login d-flex align-items-center text-center">
+    <div class="container">
+      <p class="textback text-left mb-5 col-6 row"><a (click)="onBackClicked()">Back</a></p>
+      <h3 class="display-5">Welcome</h3>
+      <div class="row d-flex justify-content-center">
+        <form class="col-md-8 col-xs-12 text-left" [formGroup]="recoverWalletForm">
+          <div class="form-group">
+            <label class="col-12 row" for="creationDate">Creation Date (optional)</label>
+            <material-datepicker class="form-control" [(date)]="creationDate"></material-datepicker>
           </div>
-  <div class="row">
-    <div class="col">
-      <form [formGroup]="recoverWalletForm" (ngSubmit)="onRecoverClicked()">
           <div class="form-group">
-          <label>Mnemonic:</label>
-          <input class="form-control" formControlName="walletMnemonic" type="text" placeholder="Enter your saved mnemonic.">
-          <div *ngIf="formErrors.walletMnemonic" class="alert alert-danger">{{formErrors.walletMnemonic}}</div>
+            <label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
+            <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words.">
+            <div *ngIf="formErrors.walletMnemonic" class="form-control-feedback">{{ formErrors.walletMnemonic }}</div>
           </div>
           <div class="form-group">
-          <label>Wallet password: </label>
-          <input class="form-control" type="password" formControlName="walletPassword" placeholder="Enter password here.">
-          <div *ngIf="formErrors.walletPassword" class="alert alert-danger">{{formErrors.walletPassword}}</div>
+            <label class="text-left" for="walletPassword">Password</label>
+            <input type="password" class="form-control form-control-success" formControlName="walletPassword" id="walletPassword" placeholder="Enter a password.">
+            <div *ngIf="formErrors.walletPassword" class="form-control-feedback">{{ formErrors.walletPassword }}</div>
           </div>
+          <!--<div class="form-group has-success">-->
           <div class="form-group">
-          <label>Name:</label>
-          <input class="form-control" formControlName="walletName" type="text" placeholder="Enter a name for your wallet.">
-          <div *ngIf="formErrors.walletName" class="alert alert-danger">{{formErrors.walletName}}</div>
+            <label class="col-12 row" for="walletName">Name</label>
+            <input type="text" class="form-control form-control-success" formControlName="walletName" id="walletName" placeholder="Enter a wallet name.">
+            <div *ngIf="formErrors.walletName" class="form-control-feedback">{{ formErrors.walletName }}</div>
           </div>
           <div class="form-group">
-          <label>Network:</label>
-          <select name="network" formControlName="selectNetwork">
+            <label class="text-left" for="walletNetwork">Network</label>
+            <select class="form-control custom-select" name="network" formControlName="selectNetwork">
               <!--<option value="main">Main</option>-->
               <option value="test">Testnet</option>
               <!--<option value="stratistest">StratisTest</option>-->
             </select>
           </div>
-        <div class="form-group">
-          <label>Creation date:</label>
-          <material-datepicker [(date)]="creationDate"></material-datepicker>
+        </form>
       </div>
-        <div class="form-group" id="buttons">
-          <button type="button" class="btn btn-outline-secondary" (click)="onBackClicked()">Back</button>
-          <button type="submit" [disabled]="!recoverWalletForm.valid" class="btn ml-2">Recover Wallet</button>
+      <!-- /row-->
+      <div class="row d-flex justify-content-center">
+        <button type="button" class="btn btn-darkgray btn-lg" [disabled]="!recoverWalletForm.valid" (click)="onRecoverClicked()">Recover</button>
       </div>
-      </form>
+      <!-- /row-->
     </div>
+    <!-- /container-->
   </div>
-</div>
+  <!-- /login-->
+</section>
+<!-- /breeze-->

Breeze.UI/src/app/setup/recover/recover.component.ts

@@ -112,6 +112,7 @@ export class RecoverComponent implements OnInit {
           }
         },
         error => {
+          console.log(error);
           if (error.status === 0) {
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {

Breeze.UI/src/app/setup/setup.component.css

-#backButton {
-  margin-top: 50px;
-  margin-bottom: 100px;
-}

Breeze.UI/src/app/setup/setup.component.html

-<div class="container col-md-8 offset-md-2">
-  <div class="row">
-    <div class="col">
-      <h1>Welcome to Breeze</h1>
-    </div>
-  </div>
-  <div class="row">
-    <div vlass="col">
-      <p>
-        If you haven't used Breeze before, please create a new wallet.
-      <br>
-      <button (click)="onCreateClicked()" class="btn">Create</button>
-      </p>
-      <p style="margin-top: 30px;">
-        Users who have previously used Breeze, can choose to recover their wallet.
-      <br>
-      <button (click)="onRecoverClicked()" class="btn">Recover</button>
+<section id="breeze">
+  <div class="login d-flex align-items-center text-center">
+    <div class="container">
+      <h3 class="display-5">Welcome</h3>
+      <p class="lead">
+        If you would like to create a new wallet, please click Create. <br/>
+        When you have used Breeze before, you can click Restore to recover your wallet.
       </p>
+      <div class="row d-flex justify-content-center">
+        <button type="button" class="btn btn-darkgray btn-lg" (click)="onBackClicked()">Back</button>
+        <button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
+        <button type="button" class="btn btn-darkgray btn-lg" (click)="onRecoverClicked()">Restore</button>
       </div>
     </div>
-  <div class="row">
-    <div class="col">
-      <button (click)="onBackClicked()" class="btn btn-outline-secondary" id="backButton">Back</button>
-    </div>
-    <!--<div class="col">
-      <button (click)="onCreateClicked()" class="btn">Create</button>
-    </div>
-    <div class="col">
-      <button (click)="onRecoverClicked()" class="btn">Recover</button>
-    </div>-->
+    <!-- /container-->
   </div>
-</div>
-
-
+  <!-- /login-->
+</section>
+<!-- /breeze-->

Breeze.UI/src/app/shared/services/api.service.ts

@@ -72,6 +72,20 @@ export class ApiService {
         .map((response: Response) => response);
     }
 
+    /**
+     * Get general wallet info from the API.
+     */
+    getGeneralInfo(data: WalletInfo): Observable<any> {
+      let params: URLSearchParams = new URLSearchParams();
+      params.set('Name', data.walletName);
+
+      return Observable
+        .interval(this.pollingInterval)
+        .startWith(0)
+        .switchMap(() => this.http.get(this.webApiUrl + '/wallet/general-info', new RequestOptions({headers: this.headers, search: params})))
+        .map((response: Response) => response);
+    }
+
     /**
      * Get wallet balance info from the API.
      */

Breeze.UI/src/app/wallet/dashboard/dashboard.component.css

-.container {
-  width: 100%;
-}
-
-#dashboard {
-  /*padding-top: 50px !important;*/
-  padding-left: 100px !important;
-  padding-right: 100px !important;
-  border: 2px solid;
-  border-color: #D5E3F0;
-  background-color: #DAE6F2;
-  height: 200px;
-  width:100%;
-}
-
-#sendButton {
-  width: 100px;
-  font-family: "Lato Black";
-  color: #A1B0C3;
-  background-color: white;
-  border-radius: 25px;
-}
-
-#receiveButton {
-  width: 100px;
-  font-family: "Lato Black";
-  color: white;
-  background-color: #20B9FF;
-  border-radius: 25px;
-}
-
-#transactions {
-  padding-left: 100px !important;
-  margin-top: 10px;
-}
-
-.transactionsTable {
-  border-collapse: separate;
-  border-spacing: 10px;
-}
-
-.transactionsTable tr {
-  border: 1px solid #D5E3F0;
-  text-align: left;
-  border-spacing: 10px;
-}
-
-.transactionsTable th {
-  text-align: left;
-  border-spacing: 10px;
-}
-
-.transactionsTable td {
-  height: 50px;
-  vertical-align: center;
-}

Breeze.UI/src/app/wallet/dashboard/dashboard.component.html

-<div class="container nopadding">
-  <div class="d-flex flex-row align-items-center nopadding" id="dashboard">
-    <div class="d-flex flex-column">
-      <div class="p">Active Balance</div>
-      <div class="p">Balance: {{confirmedBalance | coinNotation }}</div>
-      <div class="p">Unconfirmed Balance: {{unconfirmedBalance | coinNotation }}</div>
-    </div>
-    <div class="d-flex flex-column">
-    </div>
-    <div class="d-flex flex-column ml-auto">
-      <div>
-        <button (click)="openSendDialog()" class="btn" id="sendButton">Send</button>
-        <button (click)="openReceiveDialog()" class="btn ml-2" id="receiveButton">Receive</button>
-      </div>
-    </div>
-  </div>
-  <div class="row" id="transactions">
-    <div class="col">
-      <div>Transactions</div>
-      <table cellspacing="5px" cellpadding="5px" class="transactionsTable" *ngIf="transactions; else noTransactions">
-        <thead>
-          <th>Type</th>
-          <th>Amount</th>
-          <th>Transaction ID</th>
-          <th>Confirmed in block</th>
-          <th>Timestamp</th>
-        </thead>
-        <tr *ngFor="let transaction of transactions; let i=index">
-          <td *ngIf="i<5">{{ transaction.type }}</td>
-          <td *ngIf="i<5">{{ transaction.amount | coinNotation }}</td>
-          <td *ngIf="i<5">{{ transaction.id }}</td>
-          <td *ngIf="i<5">{{ transaction.confirmedInBlock }}</td>
-          <td *ngIf="i<5">{{ transaction.timestamp * 1000 | date:'medium' }}</td>
-        </tr>
-      </table>
-      <ng-template #noTransactions>Looks like you haven't made any transactions yet</ng-template>
+ <section id="breeze">
+  <!-- CONTENT -->
+  <section id="content" class="bitcoin">
+    <!-- JUMBOTRON-->
+    <div class="jumbotron jumbotron-fluid">
+      <div class="container">
+        <div class="row d-flex align-items-center">
+          <div class="col-xs-12 col-md-4 text-left">
+            <h5 class="text-uppercase">Active balance</h5>
+            <p class="lead">
+              <i class="icon-bitcoin"></i>
+              <!--<strong><span class="h2">29</span>.76500293</strong>-->
+              <strong>{{confirmedBalance | coinNotation }}</strong>
+              <!--<small class="text-uppercase">btc</small>-->
+            </p>
+          </div>
+          <!-- /col-->
+          <!--<div class="col-xs-12 col-md-4 text-left">
+            <h5 class="text-uppercase">Current value</h5>
+            <p class="lead">
+              <i class="icon-coin-dollar"></i>
+              <strong><span class="h2">51,390</span></strong>
+              <small class="text-uppercase">usd</small>
+            </p>
+          </div>-->
+          <div class="col-xs-12 col-md-4 text-left">
+            <h5 class="text-uppercase">Unconfirmed balance</h5>
+            <p class="lead">
+              <i class="icon-bitcoin"></i>
+              <strong>{{unconfirmedBalance | coinNotation }}</strong>
+            </p>
+          </div>
+          <!-- /col-->
+          <div class="col-xs-12 col-md-4 text-right">
+            <p>
+              <a class="btn btn-secondary" data-toggle="modal" data-target="#modalReceive" role="button" (click)="openReceiveDialog()">Receive</a>
+              <a class="btn btn-primary ml-2" data-toggle="modal" data-target="#modalSend" role="button" (click)="openSendDialog()">Send</a>
+            </p>
+          </div>
+          <!-- /col-->
+        </div>
+        <!-- /row-->
       </div>
+      <!-- /container-->
     </div>
-</div>
+    <!-- /JUMBOTRON-->
+
+    <!-- TRANSACTIONS -->
+    <section id="transaction" class="container">
+      <h5 class="text-uppercase">Latest Transactions</h5>
+      <div *ngIf="transactions; else noTransactions">
+        <div *ngFor="let transaction of transactions; let i=index">
+          <div class="card" *ngIf="i<3">
+            <div class="card-block text-nowrap">
+              <ul class="list-inline row">
+                <li class="list-inline-item hidden-xs-down col text-uppercase align-bottom">{{ transaction.type }}</li>
+                <li class="list-inline-item col-4 amount text-left align-baseline"><!--<span class="text-success">+</span>--> {{ transaction.amount | coinNotation }} <!--<small class="text-uppercase">btc</small> <span class="badge badge-danger text-capitalize">unconfirmed</span>--></li>
+                <li class="list-inline-item hidden-sm-down col text-center align-baseline">{{ transaction.timestamp * 1000 | date:'medium' }}</li>
+                <li class="list-inline-item col text-right align-baseline"><a data-toggle="modal" data-target="#modalDetail" (click)="openTransactionDetailDialog(transaction)">details</a></li>
+              </ul>
+            </div>
+          </div>
+          <!-- /card-->
+        </div>
+      </div>
+      <ng-template #noTransactions>Looks like you haven't made any transactions yet</ng-template>
+    </section>
+    <!-- /TRANSACTIONS -->
+    <status-bar></status-bar>
+  </section>
+  <!-- /CONTENT-->
+</section>
+<!-- /breeze-->

Breeze.UI/src/app/wallet/dashboard/dashboard.component.ts

@@ -7,10 +7,10 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
 
 import { SendComponent } from '../send/send.component';
 import { ReceiveComponent } from '../receive/receive.component';
+import { TransactionDetailsComponent } from '../transaction-details/transaction-details.component';
 
 import { Observable } from 'rxjs/Rx';
 import { Subscription } from 'rxjs/Subscription';
-import 'rxjs/add/operator/first';
 
 @Component({
   selector: 'dashboard-component',
@@ -18,7 +18,7 @@ import 'rxjs/add/operator/first';
   styleUrls: ['./dashboard.component.css']
 })
 
-export class DashboardComponent {
+export class DashboardComponent implements OnInit {
   constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
 
   private confirmedBalance: number;
@@ -45,6 +45,11 @@ export class DashboardComponent {
     const modalRef = this.modalService.open(ReceiveComponent);
   };
 
+  private openTransactionDetailDialog(transaction: any) {
+    const modalRef = this.modalService.open(TransactionDetailsComponent);
+    modalRef.componentInstance.transaction = transaction;
+  }
+
   private getWalletBalance() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
     this.walletBalanceSubscription = this.apiService.getWalletBalance(walletInfo)
@@ -57,6 +62,7 @@ export class DashboardComponent {
           }
         },
         error => {
+          console.log(error);
           if (error.status === 0) {
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
@@ -64,7 +70,7 @@ export class DashboardComponent {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              alert(error.json().errors[0].description);
             }
           }
         }
@@ -84,6 +90,7 @@ export class DashboardComponent {
           }
         },
         error => {
+          console.log(error);
           if (error.status === 0) {
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
@@ -91,7 +98,7 @@ export class DashboardComponent {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              alert(error.json().errors[0].description);
             }
           }
         }

Breeze.UI/src/app/wallet/history/history.component.css

-#transactions {
-  margin-top: 10px;
-}
-
-.transactionsTable {
-  border-collapse: separate;
-  border-spacing: 10px;
-}
-
-.transactionsTable tr {
-  border: 1px solid #D5E3F0;
-  text-align: left;
-  border-spacing: 10px;
-}
-
-.transactionsTable th {
-  text-align: left;
-  border-spacing: 10px;
-}
-
-.transactionsTable td {
-  height: 50px;
-  vertical-align: center;
-}

Breeze.UI/src/app/wallet/history/history.component.html

-<div class="container">
-  <div class="row" id="transactions">
-    <div class="col">
-      <table class="transactionsTable" *ngIf="transactions; else noTransactions">
-        <thead>
-          <th>Type</th>
-          <th>Amount</th>
-          <th>Transaction ID</th>
-          <th>Confirmed in block</th>
-          <th>Timestamp</th>
-        </thead>
-        <tr *ngFor="let transaction of transactions">
-          <!--<td *ngIf="{{ transaction.amount }} < 0; else received">SENT</td>
-          <td #received>RECEIVED</td>-->
-          <td>{{ transaction.type }}</td>
-          <td>{{ transaction.amount | coinNotation }}</td>
-          <td>{{ transaction.id }}</td>
-          <td>{{ transaction.confirmedInBlock }}</td>
-          <td>{{ transaction.timestamp * 1000 | date:'medium' }}</td>
-        </tr>
-      </table>
-    </div>
+<section id="breeze">
+  <!-- CONTENT -->
+  <section id="content" class="bitcoin">
+    <!-- JUMBOTRON-->
+    <!--<div class="jumbotron jumbotron-fluid">
+      <div class="container">
         <div class="row">
-      <div class="col">
-        <ng-template #noTransactions>Looks like you haven't made any transactions yet.</ng-template>
+          <div class="col d-flex justify-content-center">
+            <form class="col-md-6 col-xs-12">
+              <h5 class="text-uppercase text-center">Search for a transaction</h5>
+              <div class="form-group">
+                <input type="email" class="form-control mt-3" id="searchEmail" aria-describedby="emailHelp" placeholder="tax ID, amount, block number, ...">
+              </div>
+            </form>
+          </div>
+        </div>
       </div>
+    </div>-->
+    <!-- /JUMBOTRON-->
+
+    <!-- TRANSACTIONS -->
+    <section id="transaction" class="container">
+      <h5 class="text-uppercase">Transactions</h5>
+      <div *ngIf="transactions; else noTransactions">
+        <div *ngFor="let transaction of transactions">
+          <div class="card">
+            <div class="card-block text-nowrap">
+              <ul class="list-inline row">
+                <li class="list-inline-item hidden-xs-down col text-uppercase align-bottom">{{ transaction.type }}</li>
+                <li class="list-inline-item col-4 amount text-left align-baseline"><!--<span class="text-success">+</span>--> {{ transaction.amount | coinNotation }} <!--<small class="text-uppercase">btc</small> <span class="badge badge-danger text-capitalize">unconfirmed</span>--></li>
+                <li class="list-inline-item hidden-sm-down col text-center align-baseline">{{ transaction.timestamp * 1000 | date:'medium' }}</li>
+                <li class="list-inline-item col text-right align-baseline"><a data-toggle="modal" data-target="#modalDetail" (click)="openTransactionDetailDialog(transaction)">details</a></li>
+              </ul>
             </div>
           </div>
-</div>
+        </div>
+      </div>
+      <!-- /card-->
+      <div>
+        <ng-template #noTransactions>Looks like you haven't made any transactions yet.</ng-template>
+      </div>
+    </section>
+    <!-- /TRANSACTIONS -->
+  </section>
+  <!-- /CONTENT-->
+</section>
+<!-- /breeze-->

Breeze.UI/src/app/wallet/history/history.component.ts

 import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
@@ -8,6 +9,8 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
 import { Observable } from 'rxjs/Rx';
 import { Subscription } from 'rxjs/Subscription';
 
+import { TransactionDetailsComponent } from '../transaction-details/transaction-details.component';
+
 @Component({
   selector: 'history-component',
   templateUrl: './history.component.html',
@@ -15,7 +18,7 @@ import { Subscription } from 'rxjs/Subscription';
 })
 
 export class HistoryComponent {
-  constructor(private apiService: ApiService, private globalService: GlobalService) {}
+  constructor(private apiService: ApiService, private globalService: GlobalService, private modalService: NgbModal) {}
 
   private transactions: any;
   private errorMessage: string;
@@ -29,6 +32,11 @@ export class HistoryComponent {
     this.walletHistorySubscription.unsubscribe();
   }
 
+  private openTransactionDetailDialog(transaction: any) {
+    const modalRef = this.modalService.open(TransactionDetailsComponent);
+    modalRef.componentInstance.transaction = transaction;
+  }
+
   private getHistory() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
     this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo)
@@ -41,6 +49,7 @@ export class HistoryComponent {
           }
         },
         error => {
+          console.log(error);
           if (error.status === 0) {
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
@@ -48,7 +57,7 @@ export class HistoryComponent {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              alert(error.json().errors[0].description);
             }
           }
         }

Breeze.UI/src/app/wallet/menu/menu.component.css

-.navbar {
-  height: 60px;
-  width: 100%;
-  padding-left: 85px;
-}
-
-.nav-link {
-  margin: 0 auto;
-  text-align: center;
-  width: 120px;
-  background-color: white;
-  color: black;
-  border: none;
-}
-
-.is-active {
-  background-color: white;
-  color: #FF9900;
-  border-bottom: 2px solid;
-  border-color: #FF9900;
-  padding-bottom:25px;
-}

Breeze.UI/src/app/wallet/menu/menu.component.html

-<nav class="navbar navbar-toggleable-sm navbar-fixed-top">
-  <div class="container">
-    <ul class="navbar-nav mr-auto" routerLinkActive="active">
-      <li class="nav-item"><a class="nav-link" routerLink="dashboard" [routerLinkActive]="['is-active']">Dashboard</a></li>
-      <li class="nav-item"><a class="nav-link" routerLink="history" [routerLinkActive]="['is-active']">History</a></li>
-      <li class="nav-item"><a class="nav-link" (click)="logOut()">Logout</a></li>
+<section id="content" class="bitcoin">
+  <nav class="navbar fixed-top navbar-toggleable-xl navbar-inverse">
+    <div class="collapse navbar-collapse" id="navbarBreeze">
+      <ul class="navbar-nav mr-auto ml-5" routerLinkActive="active">
+        <li class="nav-item">
+          <a class="nav-link" routerLink="dashboard" [routerLinkActive]="['is-active']">Dashboard</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" routerLink="history" [routerLinkActive]="['is-active']">History</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" (click)="logOut()">Logout</a>
+        </li>
       </ul>
-    <div class="navbar-brand">Breeze</div>
+      <!-- /ul-->
     </div>
-</nav>
+    <!-- /navbar-collapse-->
+  </nav>
+  <!-- /nav-->
+</section>

Breeze.UI/src/app/wallet/receive/receive.component.css

-#receiveForm {
-  padding: 10px;
-}

Breeze.UI/src/app/wallet/receive/receive.component.html

-<div class="container" id="receiveForm">
-  <div class="row">
-    <div class="col">
-      <h1>Receive</h1>
+<div id="modalReceive" tabindex="-1" role="dialog" aria-labelledby="modal_receive" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <div class="bubble"><i class="icon-download"></i></div>
       </div>
+      <div class="modal-body">
+        <h5 class="modal-title text-uppercase" id="modalReceive">Receive</h5>
+        <form>
+          <div class="form-group clearfix">
+            <label class="float-left" for="yourAddress">Your address</label>
+            <span class="float-right"><a ngxClipboard [cbContent]="address" (click)="onCopiedClick()">copy</a></span>
           </div>
-  <div class="row">
-    <div class="col">
-      <table *ngIf="address">
-        <thead>
-          <th>Receive address: </th>
-        </thead>
-        <tr>
-          <td>{{ address }}</td>
-          <td><button class="btn btn-outline-primary" type="button" ngxClipboard [cbContent]="address" (cbOnSuccess)="isCopied1=true" [class.btn-outline-primary]="isCopied1">Copy</button>
-        </tr>
-      </table>
+          <div class="myAddress"><code>{{ address }}</code></div>
+          <div class="text-center" *ngIf="copied">
+            <span class="badge badge-success">Your address has been copied to your clipboard.</span>
           </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">OK</button>
       </div>
-  <div class="row">
-    <div class="col">
-      <button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
     </div>
   </div>
 </div>

Breeze.UI/src/app/wallet/receive/receive.component.ts

@@ -5,7 +5,7 @@ import { GlobalService } from '../../shared/services/global.service';
 
 import { WalletInfo } from '../../shared/classes/wallet-info';
 
-import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'receive-component',
@@ -17,12 +17,17 @@ export class ReceiveComponent {
   constructor(private apiService: ApiService, private globalService: GlobalService, public activeModal: NgbActiveModal) {}
 
   private address: any = "";
+  private copied: boolean = false;
   private errorMessage: string;
 
   ngOnInit() {
     this.getUnusedReceiveAddresses();
   }
 
+  private onCopiedClick() {
+    this.copied = true;
+  }
+
   private getUnusedReceiveAddresses() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
     this.apiService.getUnusedReceiveAddress(walletInfo)
@@ -33,6 +38,7 @@ export class ReceiveComponent {
           }
         },
         error => {
+          console.log(error);
           if (error.status === 0) {
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
@@ -40,7 +46,7 @@ export class ReceiveComponent {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              alert(error.json().errors[0].description);
             }
           }
         }

Breeze.UI/src/app/wallet/send/send.component.css

-#sendForm {
-  padding: 10px;
-}
-
-#feeSlider {
-  width: 200px;
-}

Breeze.UI/src/app/wallet/send/send.component.html

-<div class="container" id="sendForm">
-  <div class="row">
-    <div class="col">
-      <h1>Send</h1>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col">
+<div id="modalSend" tabindex="-1" role="dialog" aria-labelledby="modal_send" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <div class="bubble"><i class="icon-upload"></i></div>
+      </div>
+      <div class="modal-body">
+        <h5 class="modal-title text-uppercase" id="modalSend">Send</h5>
         <form [formGroup]="sendForm" (ngSubmit)="send()">
-        <div class="form-group">
-          <label>Pay To</label>
-          <input class="form-control" formControlName="address" type="text" placeholder="Please enter the recipients address.">
-          <div *ngIf="formErrors.address" class="alert alert-danger">{{formErrors.address}}</div>
-        </div>
-        <div class="form-group">
-          <label>Amount</label>
-          <input class="form-control" formControlName="amount" type="text" placeholder="Please enter the amount you want to send.">
-          <div *ngIf="formErrors.amount" class="alert alert-danger">{{formErrors.amount}}</div>
-        </div>
-        <div class="form-group">
-          <label>Fee</label>
-          <input class="form-control" id="feeSlider" formControlName="fee" type="range" min="1" max="3" value="2">
-        </div>
-        <div class="form-group">
-          <label>Wallet Password</label>
-          <input class="form-control" formControlName="password" type="password" placeholder="Please enter your wallet password.">
-          <div *ngIf="formErrors.password" class="alert alert-danger">{{formErrors.password}}</div>
-        </div>
-        <button type="submit" [disabled]="!sendForm.valid" class="btn">Send</button>
-        <button type="button" class="btn" (click)="activeModal.close('Close click')">Close</button>
+          <!--<div class="form-group has-danger clearfix">-->
+            <div class="form-group clearfix">
+            <label class="float-left" for="yourAddress">Amount</label>
+            <!--<span class="float-right"><a href="#">max</a></span>-->
+            <input type="text" class="form-control form-control-danger" formControlName="amount" id="Amount" placeholder="0.00 BTC">
+            <div *ngIf="formErrors.amount" class="form-control-feedback">{{ formErrors.amount }}</div>
+          </div>
+          <!--<div class="form-group has-success">-->
+          <div class="form-group clearfix">
+            <label for="destinationAddress">Destination address</label>
+            <input type="text" class="form-control form-control-success" formControlName="address" id="destinationAddress" placeholder="Please enter the destination address here.">
+            <div *ngIf="formErrors.address" class="form-control-feedback">{{ formErrors.address }}</div>
+          </div>
+          <!--<div class="form-group">
+            <label for="Fees">Fees</label>
+            <div class="col feeSlider text-center">
+              <input class="form-control" id="dataSlider" type="text"
+                data-provide="slider"
+                data-slider-ticks="[1, 2, 3]"
+                data-slider-ticks-labels='["Low", "Medium", "High"]'
+                data-slider-min="1"
+                data-slider-max="3"
+                data-slider-step="1"
+                data-slider-value="2"
+                data-slider-tooltip="hide">
+              </div>
+              <p class="text-muted text-center">
+                <em>A higher fee helps expedite your transaction.
+                <br>You are sending <strong>1 BTC</strong> with an included <strong>Medium</strong> fee of <strong>0.0001</strong>.</em>
+              </p>
+          </div>-->
+          <div class="form-group clearfix">
+            <label for="feeSlider">Fee</label>
+            <input class="form-control col text-center" formControlName="fee" id="feeSlider" type="range" min="1" max="3" value="2">
+          </div>
+            <div class="form-group clearfix">
+            <label for="walletPassword">Wallet Password</label>
+            <input type="password" class="form-control form-control-success" formControlName="password" id="walletPassword" placeholder="Please enter your wallet password.">
+            <div *ngIf="formErrors.password" class="form-control-feedback">{{formErrors.password}}</div>
+          </div>
         </form>
+        <!-- /form-->
+      </div>
+      <div class="modal-footer">
+        <button type="submit" class="btn btn-lg btn-primary" [disabled]="!sendForm.valid" (click)="send()">Send</button>
+        <button type="button" class="btn btn-lg btn-primary" (click)="activeModal.close('Close click')">Close</button>
+      </div>
     </div>
   </div>
 </div>

Breeze.UI/src/app/wallet/send/send.component.ts

@@ -132,6 +132,7 @@ export class SendComponent {
           }
         },
         error => {
+          console.log(error);
           if (error.status === 0) {
             alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
@@ -139,7 +140,7 @@ export class SendComponent {
               console.log(error);
             }
             else {
-              alert(error.json().errors[0].message);
+              alert(error.json().errors[0].description);
             }
           }
         }

Breeze.UI/src/app/wallet/sidebar/sidebar.component.html

+<!-- SIDEBAR -->
+  <aside id="sidebar">
+    <ul class="list-unstyled menu">
+      <li class="active">
+        <!--<a href="#">--><img src="../../../assets/images/ico_bitcoin.svg" alt="Bitcoin"><!--</a>-->
+        <span class="bar"></span>
+      </li>
+      <!--<li>
+        <a href="#"><img src="../../../assets/images/ico_stratis.svg" alt="Stratis"></a>
+        <span class="bar"></span>
+      </li>-->
+    </ul>
+    <!-- /menu-->
+    <!--<ul class="list-unstyled second">
+      <li><a href="#"><span class="icon-settings"></span></a></li>
+    </ul>-->
+  </aside>
+  <!-- /sidebar -->

Breeze.UI/src/app/wallet/sidebar/sidebar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

Breeze.UI/src/app/wallet/sidebar/sidebar.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

Breeze.UI/src/app/wallet/status-bar/status-bar.component.html

+<div class="status">
+  <ul class="list-inline align-self-center row" title="Total blocks: {{ chainTip }}&#013;Last block received: {{ lastBlockSyncedHeight }}&#013;Connections: {{ connectedNodes }}">
+    <li class="list-inline-item pending"><i class="icon-syncr text-success"></i></li>
+    <li class="list-inline-item">{{ percentSynced }}%</li>
+    <li class="list-inline-item"><i class="icon-earth text-success"></i></li>
+    <li class="list-inline-item">{{ connectedNodes }}</li>
+  </ul>
+</div>

Breeze.UI/src/app/wallet/status-bar/status-bar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatusBarComponent } from './status-bar.component';
+
+describe('StatusBarComponent', () => {
+  let component: StatusBarComponent;
+  let fixture: ComponentFixture<StatusBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StatusBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatusBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

Breeze.UI/src/app/wallet/status-bar/status-bar.component.ts

+import { Component, OnInit, OnDestroy } from '@angular/core';
+
+import { ApiService } from '../../shared/services/api.service';
+import { GlobalService } from '../../shared/services/global.service';
+import { WalletInfo } from '../../shared/classes/wallet-info';
+
+import { Observable } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
+
+@Component({
+  selector: 'status-bar',
+  templateUrl: './status-bar.component.html',
+  styleUrls: ['./status-bar.component.scss']
+})
+export class StatusBarComponent implements OnInit {
+
+  private generalWalletInfoSubscription: Subscription;
+  private lastBlockSyncedHeight: number;
+  private chainTip: number;
+  private connectedNodes: number = 0;
+  private percentSyncedNumber: number = 0;
+  private percentSynced: string;
+
+  constructor(private apiService: ApiService, private globalService: GlobalService) { }
+
+  ngOnInit() {
+    this.getGeneralWalletInfo()
+  }
+
+  ngOnDestroy() {
+    this.generalWalletInfoSubscription.unsubscribe();
+  }
+
+  getGeneralWalletInfo() {
+    let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
+    this.generalWalletInfoSubscription = this.apiService.getGeneralInfo(walletInfo)
+      .subscribe(
+        response =>  {
+          if (response.status >= 200 && response.status < 400) {
+            let generalWalletInfoResponse = response.json();
+            this.lastBlockSyncedHeight = generalWalletInfoResponse.lastBlockSyncedHeight;
+            this.chainTip = generalWalletInfoResponse.chainTip;
+            this.connectedNodes = generalWalletInfoResponse.connectedNodes;
+
+            if (this.chainTip === 0) {
+              this.chainTip = 1;
+            }
+
+            this.percentSyncedNumber = ((this.lastBlockSyncedHeight / this.chainTip) * 100);
+
+            if (this.percentSyncedNumber.toFixed(0) === "100" && this.lastBlockSyncedHeight != this.chainTip) {
+              this.percentSyncedNumber = 99;
+            }
+
+            this.percentSynced = this.percentSyncedNumber.toFixed(0);
+          }
+        },
+        error => {
+          console.log(error);
+          if (error.status === 0) {
+            alert("Something went wrong while connecting to the API. Please restart the application.");
+          } else if (error.status >= 400) {
+            if (!error.json().errors[0]) {
+              console.log(error);
+            }
+            else {
+              alert(error.json().errors[0].description);
+            }
+          }
+        }
+      )
+    ;
+  }
+
+}

Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.html

+ <div id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modal_detail" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <div class="bubble"><i class="icon-settings"></i></div>
+      </div>
+      <div class="modal-body">
+        <h5 class="modal-title text-uppercase" id="modalDetail">Transaction Details</h5>
+        <ul class="list-inline row">
+          <li class="list-inline-item col blockLabel">Type</li>
+          <li class="list-inline-item col-9 blockText">{{ transaction.type }}</li>
+        </ul>
+        <ul class="list-inline row">
+          <li class="list-inline-item col blockLabel">Amount</li>
+          <li class="list-inline-item col-9 blockText"><strong class="text-success">{{transaction.amount | coinNotation }}</strong></li>
+        </ul>
+        <!--<ul class="list-inline row">
+          <li class="list-inline-item col blockLabel">From</li>
+          <li class="list-inline-item col-9 blockText"><code>n4kVJQarwwdmsXDdgNnJHgBSpZ8MhSkNBx</code></li>
+        </ul>-->
+        <ul class="list-inline row">
+          <li class="list-inline-item col blockLabel">Date</li>
+          <li class="list-inline-item col-9 blockText"><small>{{ transaction.timestamp * 1000 | date:'medium' }}</small></li>
+        </ul>
+        <ul class="list-inline row">
+          <li class="list-inline-item col blockLabel">Block</li>
+          <li class="list-inline-item col-9 blockText">#{{ transaction.confirmedInBlock }}</li>
+        </ul>
+        <ul class="list-inline row">
+          <li class="list-inline-item col blockLabel">Transaction ID</li>
+          <li class="list-inline-item col-9 blockText blockID"><code>{{ transaction.id }}</code></li>
+        </ul>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">OK</button>
+      </div>
+    </div>
+  </div>
+</div>

Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransactionDetailsComponent } from './transaction-details.component';
+
+describe('TransactionDetailsComponent', () => {
+  let component: TransactionDetailsComponent;
+  let fixture: ComponentFixture<TransactionDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TransactionDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TransactionDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

Breeze.UI/src/app/wallet/transaction-details/transaction-details.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'transaction-details',
+  templateUrl: './transaction-details.component.html',
+  styleUrls: ['./transaction-details.component.scss']
+})
+export class TransactionDetailsComponent implements OnInit {
+
+  @Input() transaction;
+
+  constructor(public activeModal: NgbActiveModal) {
+
+  }
+
+  ngOnInit() {
+  }
+
+}

Breeze.UI/src/app/wallet/wallet.component.html

-<div id="container">
-  <div id="navigation">
-    <app-menu></app-menu>
-  </div>
-  <div id="content">
-    <router-outlet></router-outlet>
-  </div>
-</div>
+<sidebar></sidebar>
+<app-menu></app-menu>
+<router-outlet></router-outlet>

Breeze.UI/src/app/wallet/wallet.module.ts

@@ -9,6 +9,9 @@ import { HistoryComponent } from './history/history.component';
 
 import {SharedModule} from '../shared/shared.module';
 import { WalletRoutingModule } from './wallet-routing.module';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { StatusBarComponent } from './status-bar/status-bar.component';
+import { TransactionDetailsComponent } from './transaction-details/transaction-details.component';
 
 @NgModule({
   imports: [
@@ -22,7 +25,9 @@ import { WalletRoutingModule } from './wallet-routing.module';
     WalletComponent,
     MenuComponent,
     DashboardComponent,
-    HistoryComponent
+    HistoryComponent,
+    SidebarComponent,
+    StatusBarComponent
   ],
   exports: []
 })

Breeze.UI/src/assets/fonts/OFL.txt

+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

Breeze.UI/src/assets/fonts/icon.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe1;" glyph-name="syncr" d="M512 192c-103.821 0-193.207 61.802-233.377 150.626l105.377 105.374h-256v-255.994l56.079 56.078c67.446-110.397 189.078-184.084 327.921-184.084 190.273 0 348.224 138.388 378.691 320h-130.756c-28.42-110.416-128.65-192-247.935-192zM512-64c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM768 448h128v255.994l-56.079-56.078c-67.446 110.397-189.078 184.084-327.921 184.084-190.273 0-348.224-138.388-378.691-320h130.756c28.42 110.416 128.65 192 247.935 192 103.821 0 193.207-61.802 233.377-150.626l-105.377-105.374h128z" />
+<glyph unicode="&#xe2;" glyph-name="bitcoin" d="M826.241 450.414c-32.963 24.826-79.919 34.755-79.919 34.755s39.736 23.038 55.974 46.053c16.256 23.024 24.379 58.696 25.738 77.205 1.35 18.518 4.515 96.161-55.987 140.85-46.798 34.579-100.428 48.306-172.445 52.772v156.695h-96.613v-154.844c-21.557 0-46.748 0-73.588 0v154.844h-96.604v-154.844c-98.622 0-190.064 0-190.064 0v-100.329c0 0 40.63 0 55.865 0 15.231 0 42.319-1.693 53.829-14.576 11.514-12.86 13.546-19.638 13.546-44.68 0-25.052 0.005-390.293 0.005-399.775 0-9.478-1.806-21.209-9.939-28.89-8.119-7.681-16.242-9.473-35.663-9.473-19.416 0-57.78 0-57.78 0l-19.863-116.038c0 0 94.454 0 190.064 0v-154.406h96.608v154.406c29.685 0 55.531 0 73.588 0v-154.406h96.613v156.952c24.975 1.458 48.261 3.35 61.844 5.13 27.544 3.603 89.839 10.828 148.089 51.463 58.231 40.639 71.312 104.298 72.672 168.399 1.373 64.106-23.038 107.906-55.969 132.736zM429.401 694.645c0 0 30.696 2.705 60.945 2.262 30.258-0.447 56.881-1.355 96.622-13.546 39.722-12.196 63.18-41.994 64.101-77.21 0.899-35.216-14.467-58.683-41.542-73.584-27.084-14.896-64.535-23.024-99.764-24.365-35.207-1.359-80.361 0-80.361 0v186.443zM645.646 232.81c-22.121-12.196-66.368-23.029-109.247-26.181-42.892-3.165-106.998-1.811-106.998-1.811v207.228c0 0 61.401 3.152 109.26 0 47.85-3.174 88.029-15.353 106.077-24.397 18.057-9.022 49.67-28.881 49.67-76.293 0-47.394-26.655-66.359-48.762-78.546z" />
+<glyph unicode="&#xe900;" glyph-name="stratis" horiz-adv-x="1195" d="M57.422 610.871l531.941-297.667c0.353-0.222 0.797-0.222 1.15 0l531.824 297.661c0.673 0.425 0.679 1.398 0.007 1.829l-531.922 297.713c-0.359 0.222-0.817 0.222-1.169-0.007l-531.843-297.713c-0.66-0.431-0.653-1.398 0.013-1.816zM569.6-57.86l-563.583 315.621c-0.503 0.32-0.647 0.987-0.327 1.49l24.376 37.815c0.32 0.503 0.993 0.64 1.49 0.32l557.696-312.27c0.353-0.229 0.81-0.235 1.163 0l522.677 292.571c12.838 7.193 19.28 21.821 19.28 36.489v79.433c0 0.856-0.941 1.372-1.659 0.915l-520.756-291.572c-14.354-8.036-25.696-8.141-40.213-0.026l-526.649 294.708c-27.12 17.215-42.964 46.674-42.964 78.799l-0.131 138.795c0 20.084 10.401 26.473 25.611 34.999l543.316 304.201c13.335 7.442 28.603 7.448 42.010-0.098l551.613-308.826c11.362-6.364 17.333-19.809 17.333-33.333 0-12.766-7.232-27.068-17.333-32.726l-552.783-309.493c-14.145-7.899-25.722-7.899-39.886 0.013l-521.272 291.853c-0.725 0.451-1.659-0.065-1.659-0.915l0.137-84.47c0-15.85 7.984-30.38 21.358-38.874l520.815-291.676c0.353-0.222 0.804-0.222 1.156 0l530.844 297.295c13.753 8.761 33.392 9.173 46.132-2.143 8.134-7.232 12.492-17.823 12.492-28.701l-0.013-97.798c-0.091-30.236-17.32-63.067-41.598-76.656l-528.446-295.858c-14.38-8.049-25.546-8.049-40.226 0.118v0z" />
+<glyph unicode="&#xe93b;" glyph-name="coin-dollar" d="M480 896c-265.096 0-480-214.904-480-480 0-265.098 214.904-480 480-480 265.098 0 480 214.902 480 480 0 265.096-214.902 480-480 480zM480 32c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384zM512 448v128h128v64h-128v64h-64v-64h-128v-256h128v-128h-128v-64h128v-64h64v64h128.002l-0.002 256h-128zM448 448h-64v128h64v-128zM576.002 256h-64.002v128h64.002v-128z" />
+<glyph unicode="&#xe93c;" glyph-name="coin-euro" d="M480 896c-265.096 0-480-214.904-480-480s214.904-480 480-480c265.098 0 480 214.902 480 480s-214.902 480-480 480zM480 32c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.076 0 384-171.922 384-384s-171.924-384-384-384zM670.824 315.66c-15.27 8.884-34.862 3.708-43.75-11.57-17.256-29.662-49.088-48.090-83.074-48.090h-128c-41.716 0-77.286 26.754-90.496 64h154.496c17.672 0 32 14.326 32 32s-14.328 32-32 32h-160v64h160c17.672 0 32 14.328 32 32s-14.328 32-32 32h-154.496c13.21 37.246 48.78 64 90.496 64h128c33.986 0 65.818-18.426 83.074-48.090 8.888-15.276 28.478-20.456 43.752-11.568 15.276 8.888 20.456 28.476 11.568 43.752-28.672 49.288-81.702 79.906-138.394 79.906h-128c-77.268 0-141.914-55.056-156.78-128h-35.22c-17.672 0-32-14.328-32-32s14.328-32 32-32h32v-64h-32c-17.672 0-32-14.326-32-32s14.328-32 32-32h35.22c14.866-72.944 79.512-128 156.78-128h128c56.692 0 109.72 30.62 138.394 79.91 8.888 15.276 3.708 34.864-11.57 43.75z" />
+<glyph unicode="&#xe93d;" glyph-name="coin-pound" d="M480 896c-265.096 0-480-214.904-480-480s214.904-480 480-480c265.098 0 480 214.902 480 480s-214.902 480-480 480zM480 32c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.074 0 384-171.922 384-384s-171.926-384-384-384zM608 256h-224v128h96c17.672 0 32 14.326 32 32s-14.328 32-32 32h-96v32c0 52.934 43.066 96 96 96 34.17 0 66.042-18.404 83.18-48.030 8.85-15.298 28.426-20.526 43.722-11.676 15.296 8.848 20.526 28.424 11.676 43.722-28.538 49.336-81.638 79.984-138.578 79.984-88.224 0-160-71.776-160-160v-32h-32c-17.672 0-32-14.326-32-32s14.328-32 32-32h32v-192h288c17.674 0 32 14.326 32 32s-14.326 32-32 32z" />
+<glyph unicode="&#xe93e;" glyph-name="coin-yen" d="M480 896c-265.096 0-480-214.904-480-480s214.904-480 480-480c265.098 0 480 214.902 480 480s-214.902 480-480 480zM480 32c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.076 0 384-171.922 384-384s-171.924-384-384-384zM608 384c17.674 0 32 14.326 32 32s-14.326 32-32 32h-68.208l94.832 142.25c9.804 14.704 5.83 34.572-8.876 44.376-14.704 9.802-34.572 5.83-44.376-8.876l-101.372-152.062-101.374 152.062c-9.804 14.706-29.672 18.68-44.376 8.876-14.706-9.804-18.678-29.672-8.876-44.376l94.834-142.25h-68.208c-17.672 0-32-14.326-32-32s14.328-32 32-32h96v-64h-96c-17.672 0-32-14.326-32-32s14.328-32 32-32h96v-96c0-17.674 14.328-32 32-32s32 14.326 32 32v96h96c17.674 0 32 14.326 32 32s-14.326 32-32 32h-96v64h96z" />
+<glyph unicode="&#xe951;" glyph-name="bell" d="M1025.5 160c0 288-256 224-256 448 0 18.56-1.788 34.42-5.048 47.928-16.83 113.018-92.156 203.72-189.772 231.36 0.866 3.948 1.32 8.032 1.32 12.21 0 33.278-28.8 60.502-64 60.502s-64-27.224-64-60.5c0-4.18 0.456-8.264 1.32-12.21-109.47-30.998-190.914-141.298-193.254-273.442-0.040-1.92-0.066-3.864-0.066-5.846 0-224.002-256-160.002-256-448.002 0-76.226 170.59-139.996 398.97-156.080 21.524-40.404 64.056-67.92 113.030-67.92s91.508 27.516 113.030 67.92c228.38 16.084 398.97 79.854 398.97 156.080 0 0.228-0.026 0.456-0.028 0.682l1.528-0.682zM826.246 105.904c-54.23-14.47-118.158-24.876-186.768-30.648-5.704 65.418-60.582 116.744-127.478 116.744s-121.774-51.326-127.478-116.744c-68.608 5.772-132.538 16.178-186.768 30.648-74.63 19.914-110.31 42.19-123.368 54.096 13.058 11.906 48.738 34.182 123.368 54.096 86.772 23.152 198.372 35.904 314.246 35.904s227.474-12.752 314.246-35.904c74.63-19.914 110.31-42.19 123.368-54.096-13.058-11.906-48.738-34.182-123.368-54.096z" />
+<glyph unicode="&#xe960;" glyph-name="download" d="M512 384l256 256h-192v256h-128v-256h-192zM744.726 488.728l-71.74-71.742 260.080-96.986-421.066-157.018-421.066 157.018 260.080 96.986-71.742 71.742-279.272-104.728v-256l512-192 512 192v256z" />
+<glyph unicode="&#xe961;" glyph-name="upload" d="M448 384h128v256h192l-256 256-256-256h192zM640 528v-98.712l293.066-109.288-421.066-157.018-421.066 157.018 293.066 109.288v98.712l-384-144v-256l512-192 512 192v256z" />
+<glyph unicode="&#xe964;" glyph-name="coin" d="M512 960c-282.77 0-512-71.634-512-160v-128c0-88.366 229.23-160 512-160s512 71.634 512 160v128c0 88.366-229.23 160-512 160zM512 416c-282.77 0-512 71.634-512 160v-192c0-88.366 229.23-160 512-160s512 71.634 512 160v192c0-88.366-229.23-160-512-160zM512 128c-282.77 0-512 71.634-512 160v-192c0-88.366 229.23-160 512-160s512 71.634 512 160v192c0-88.366-229.23-160-512-160z" />
+<glyph unicode="&#xe98f;" glyph-name="lock" d="M592 512h-16v192c0 105.87-86.13 192-192 192h-128c-105.87 0-192-86.13-192-192v-192h-16c-26.4 0-48-21.6-48-48v-480c0-26.4 21.6-48 48-48h544c26.4 0 48 21.6 48 48v480c0 26.4-21.6 48-48 48zM192 704c0 35.29 28.71 64 64 64h128c35.29 0 64-28.71 64-64v-192h-256v192z" />
+<glyph unicode="&#xe990;" glyph-name="unlocked" d="M768 896c105.87 0 192-86.13 192-192v-192h-128v192c0 35.29-28.71 64-64 64h-128c-35.29 0-64-28.71-64-64v-192h16c26.4 0 48-21.6 48-48v-480c0-26.4-21.6-48-48-48h-544c-26.4 0-48 21.6-48 48v480c0 26.4 21.6 48 48 48h400v192c0 105.87 86.13 192 192 192h128z" />
+<glyph unicode="&#xe994;" glyph-name="cog" d="M933.79 349.75c-53.726 93.054-21.416 212.304 72.152 266.488l-100.626 174.292c-28.75-16.854-62.176-26.518-97.846-26.518-107.536 0-194.708 87.746-194.708 195.99h-201.258c0.266-33.41-8.074-67.282-25.958-98.252-53.724-93.056-173.156-124.702-266.862-70.758l-100.624-174.292c28.97-16.472 54.050-40.588 71.886-71.478 53.638-92.908 21.512-211.92-71.708-266.224l100.626-174.292c28.65 16.696 61.916 26.254 97.4 26.254 107.196 0 194.144-87.192 194.7-194.958h201.254c-0.086 33.074 8.272 66.57 25.966 97.218 53.636 92.906 172.776 124.594 266.414 71.012l100.626 174.29c-28.78 16.466-53.692 40.498-71.434 71.228zM512 240.668c-114.508 0-207.336 92.824-207.336 207.334 0 114.508 92.826 207.334 207.336 207.334 114.508 0 207.332-92.826 207.332-207.334-0.002-114.51-92.824-207.334-207.332-207.334z" />
+<glyph unicode="&#xe9ac;" glyph-name="bin" d="M128 640v-640c0-35.2 28.8-64 64-64h576c35.2 0 64 28.8 64 64v640h-704zM320 64h-64v448h64v-448zM448 64h-64v448h64v-448zM576 64h-64v448h64v-448zM704 64h-64v448h64v-448zM848 832h-208v80c0 26.4-21.6 48-48 48h-224c-26.4 0-48-21.6-48-48v-80h-208c-26.4 0-48-21.6-48-48v-80h832v80c0 26.4-21.6 48-48 48zM576 832h-192v63.198h192v-63.198z" />
+<glyph unicode="&#xe9b6;" glyph-name="switch" d="M640 813.412v-135.958c36.206-15.804 69.5-38.408 98.274-67.18 60.442-60.44 93.726-140.8 93.726-226.274s-33.286-165.834-93.726-226.274c-60.44-60.44-140.798-93.726-226.274-93.726s-165.834 33.286-226.274 93.726c-60.44 60.44-93.726 140.8-93.726 226.274s33.286 165.834 93.726 226.274c28.774 28.774 62.068 51.378 98.274 67.182v135.956c-185.048-55.080-320-226.472-320-429.412 0-247.424 200.578-448 448-448 247.424 0 448 200.576 448 448 0 202.94-134.95 374.332-320 429.412zM448 960h128v-512h-128z" />
+<glyph unicode="&#xe9c1;" glyph-name="cloud" d="M1024 302.458c0 82.090-56.678 150.9-132.996 169.48-3.242 128.7-108.458 232.062-237.862 232.062-75.792 0-143.266-35.494-186.854-90.732-24.442 31.598-62.69 51.96-105.708 51.96-73.81 0-133.642-59.874-133.642-133.722 0-6.436 0.48-12.76 1.364-18.954-11.222 2.024-22.766 3.138-34.57 3.138-106.998 0.002-193.732-86.786-193.732-193.842 0-107.062 86.734-193.848 193.73-193.848l656.262 0.012c96.138 0.184 174.008 78.212 174.008 174.446z" />
+<glyph unicode="&#xe9c2;" glyph-name="cloud-download" d="M891.004 599.94c-3.242 128.698-108.458 232.060-237.862 232.060-75.792 0-143.266-35.494-186.854-90.732-24.442 31.598-62.69 51.96-105.708 51.96-73.81 0-133.642-59.876-133.642-133.722 0-6.436 0.48-12.76 1.364-18.954-11.222 2.024-22.766 3.138-34.57 3.138-106.998 0.002-193.732-86.786-193.732-193.842 0-107.062 86.734-193.848 193.73-193.848h91.76l226.51-234.51 226.51 234.51 111.482 0.012c96.138 0.184 174.008 78.21 174.008 174.446 0 82.090-56.678 150.9-132.996 169.482zM512 128l-192 192h128v192h128v-192h128l-192-192z" />
+<glyph unicode="&#xe9c3;" glyph-name="cloud-upload" d="M892.268 573.51c2.444 11.11 3.732 22.648 3.732 34.49 0 88.366-71.634 160-160 160-14.222 0-28.014-1.868-41.132-5.352-24.798 77.352-97.29 133.352-182.868 133.352-87.348 0-161.054-58.336-184.326-138.17-22.742 6.622-46.792 10.17-71.674 10.17-141.384 0-256-114.616-256-256 0-141.388 114.616-256 256-256h128v-192h256v192h224c88.366 0 160 71.632 160 160 0 78.72-56.854 144.162-131.732 157.51zM576 320v-192h-128v192h-160l224 224 224-224h-160z" />
+<glyph unicode="&#xe9c4;" glyph-name="cloud-check" d="M892.268 445.51c2.442 11.108 3.732 22.646 3.732 34.49 0 88.366-71.634 160-160 160-14.224 0-28.014-1.868-41.134-5.352-24.796 77.352-97.288 133.352-182.866 133.352-87.348 0-161.054-58.336-184.326-138.17-22.742 6.62-46.792 10.17-71.674 10.17-141.384 0-256-114.616-256-256 0-141.382 114.616-256 256-256h608c88.366 0 160 71.632 160 160 0 78.718-56.854 144.16-131.732 157.51zM416 192l-160 160 64 64 96-96 224 224 64-64-288-288z" />
+<glyph unicode="&#xe9c5;" glyph-name="download2" d="M896 448h-160l-224-224-224 224h-160l-128-256v-64h1024v64l-128 256zM0 64h1024v-64h-1024v64zM576 640v256h-128v-256h-224l288-288 288 288h-224z" />
+<glyph unicode="&#xe9c6;" glyph-name="upload2" d="M0 64h1024v-64h-1024zM1024 192v-64h-1024v64l128 256h256v-128h256v128h256zM224 640l288 288 288-288h-224v-256h-128v256z" />
+<glyph unicode="&#xe9c7;" glyph-name="download3" d="M736 512l-256-256-256 256h160v384h192v-384zM480 256h-480v-256h960v256h-480zM896 128h-128v64h128v-64z" />
+<glyph unicode="&#xe9c8;" glyph-name="upload3" d="M480 256h-480v-256h960v256h-480zM896 128h-128v64h128v-64zM224 640l256 256 256-256h-160v-320h-192v320z" />
+<glyph unicode="&#xe9c9;" glyph-name="sphere" d="M480 896c-265.096 0-480-214.904-480-480 0-265.098 214.904-480 480-480 265.098 0 480 214.902 480 480 0 265.096-214.902 480-480 480zM751.59 256c8.58 40.454 13.996 83.392 15.758 128h127.446c-3.336-44.196-13.624-87.114-30.68-128h-112.524zM208.41 576c-8.58-40.454-13.996-83.392-15.758-128h-127.444c3.336 44.194 13.622 87.114 30.678 128h112.524zM686.036 576c9.614-40.962 15.398-83.854 17.28-128h-191.316v128h174.036zM512 640v187.338c14.59-4.246 29.044-11.37 43.228-21.37 26.582-18.74 52.012-47.608 73.54-83.486 14.882-24.802 27.752-52.416 38.496-82.484h-155.264zM331.232 722.484c21.528 35.878 46.956 64.748 73.54 83.486 14.182 10 28.638 17.124 43.228 21.37v-187.34h-155.264c10.746 30.066 23.616 57.68 38.496 82.484zM448 576v-128h-191.314c1.88 44.146 7.666 87.038 17.278 128h174.036zM95.888 256c-17.056 40.886-27.342 83.804-30.678 128h127.444c1.762-44.608 7.178-87.546 15.758-128h-112.524zM256.686 384h191.314v-128h-174.036c-9.612 40.96-15.398 83.854-17.278 128zM448 192v-187.34c-14.588 4.246-29.044 11.372-43.228 21.37-26.584 18.74-52.014 47.61-73.54 83.486-14.882 24.804-27.75 52.418-38.498 82.484h155.266zM628.768 109.516c-21.528-35.876-46.958-64.746-73.54-83.486-14.184-9.998-28.638-17.124-43.228-21.37v187.34h155.266c-10.746-30.066-23.616-57.68-38.498-82.484zM512 256v128h191.314c-1.88-44.146-7.666-87.040-17.28-128h-174.034zM767.348 448c-1.762 44.608-7.178 87.546-15.758 128h112.524c17.056-40.886 27.344-83.806 30.68-128h-127.446zM830.658 640h-95.9c-18.638 58.762-44.376 110.294-75.316 151.428 42.536-20.34 81.058-47.616 114.714-81.272 21.48-21.478 40.362-44.938 56.502-70.156zM185.844 710.156c33.658 33.658 72.18 60.932 114.714 81.272-30.942-41.134-56.676-92.666-75.316-151.428h-95.898c16.138 25.218 35.022 48.678 56.5 70.156zM129.344 192h95.898c18.64-58.762 44.376-110.294 75.318-151.43-42.536 20.34-81.058 47.616-114.714 81.274-21.48 21.478-40.364 44.938-56.502 70.156zM774.156 121.844c-33.656-33.658-72.18-60.934-114.714-81.274 30.942 41.134 56.678 92.668 75.316 151.43h95.9c-16.14-25.218-35.022-48.678-56.502-70.156z" />
+<glyph unicode="&#xe9ca;" glyph-name="earth" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512-0.002c-62.958 0-122.872 13.012-177.23 36.452l233.148 262.29c5.206 5.858 8.082 13.422 8.082 21.26v96c0 17.674-14.326 32-32 32-112.99 0-232.204 117.462-233.374 118.626-6 6.002-14.14 9.374-22.626 9.374h-128c-17.672 0-32-14.328-32-32v-192c0-12.122 6.848-23.202 17.69-28.622l110.31-55.156v-187.886c-116.052 80.956-192 215.432-192 367.664 0 68.714 15.49 133.806 43.138 192h116.862c8.488 0 16.626 3.372 22.628 9.372l128 128c6 6.002 9.372 14.14 9.372 22.628v77.412c40.562 12.074 83.518 18.588 128 18.588 70.406 0 137.004-16.26 196.282-45.2-4.144-3.502-8.176-7.164-12.046-11.036-36.266-36.264-56.236-84.478-56.236-135.764s19.97-99.5 56.236-135.764c36.434-36.432 85.218-56.264 135.634-56.26 3.166 0 6.342 0.080 9.518 0.236 13.814-51.802 38.752-186.656-8.404-372.334-0.444-1.744-0.696-3.488-0.842-5.224-81.324-83.080-194.7-134.656-320.142-134.656z" />
+<glyph unicode="&#xe9cb;" glyph-name="link" d="M440.236 324.234c-13.31 0-26.616 5.076-36.77 15.23-95.134 95.136-95.134 249.934 0 345.070l192 192c46.088 46.086 107.36 71.466 172.534 71.466s126.448-25.38 172.536-71.464c95.132-95.136 95.132-249.934 0-345.070l-87.766-87.766c-20.308-20.308-53.23-20.308-73.54 0-20.306 20.306-20.306 53.232 0 73.54l87.766 87.766c54.584 54.586 54.584 143.404 0 197.99-26.442 26.442-61.6 41.004-98.996 41.004s-72.552-14.562-98.996-41.006l-192-191.998c-54.586-54.586-54.586-143.406 0-197.992 20.308-20.306 20.306-53.232 0-73.54-10.15-10.152-23.462-15.23-36.768-15.23zM256-52c-65.176 0-126.45 25.38-172.534 71.464-95.134 95.136-95.134 249.934 0 345.070l87.764 87.764c20.308 20.306 53.234 20.306 73.54 0 20.308-20.306 20.308-53.232 0-73.54l-87.764-87.764c-54.586-54.586-54.586-143.406 0-197.992 26.44-26.44 61.598-41.002 98.994-41.002s72.552 14.562 98.998 41.006l192 191.998c54.584 54.586 54.584 143.406 0 197.992-20.308 20.308-20.306 53.232 0 73.54 20.306 20.306 53.232 20.306 73.54-0.002 95.132-95.134 95.132-249.932 0.002-345.068l-192.002-192c-46.090-46.088-107.364-71.466-172.538-71.466z" />
+<glyph unicode="&#xea41;" glyph-name="circle-up" d="M0 448c0-282.77 229.23-512 512-512s512 229.23 512 512-229.23 512-512 512-512-229.23-512-512zM928 448c0-229.75-186.25-416-416-416s-416 186.25-416 416 186.25 416 416 416 416-186.25 416-416zM706.744 290.744l90.512 90.512-285.256 285.254-285.254-285.256 90.508-90.508 194.746 194.744z" />
+<glyph unicode="&#xea42;" glyph-name="circle-right" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416 416s186.25 416 416 416 416-186.25 416-416-186.25-416-416-416zM354.744 253.256l90.512-90.512 285.254 285.256-285.256 285.254-90.508-90.508 194.744-194.746z" />
+<glyph unicode="&#xea43;" glyph-name="circle-down" d="M1024 448c0 282.77-229.23 512-512 512s-512-229.23-512-512 229.23-512 512-512 512 229.23 512 512zM96 448c0 229.75 186.25 416 416 416s416-186.25 416-416-186.25-416-416-416-416 186.25-416 416zM317.256 605.256l-90.512-90.512 285.256-285.254 285.254 285.256-90.508 90.508-194.746-194.744z" />
+<glyph unicode="&#xea44;" glyph-name="circle-left" d="M512-64c282.77 0 512 229.23 512 512s-229.23 512-512 512-512-229.23-512-512 229.23-512 512-512zM512 864c229.75 0 416-186.25 416-416s-186.25-416-416-416-416 186.25-416 416 186.25 416 416 416zM669.256 642.744l-90.512 90.512-285.254-285.256 285.256-285.254 90.508 90.508-194.744 194.746z" />
+<glyph unicode="&#xea52;" glyph-name="checkbox-checked" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM448 165.49l-237.254 237.256 90.51 90.508 146.744-146.744 306.746 306.746 90.508-90.51-397.254-397.256z" />
+<glyph unicode="&#xea53;" glyph-name="checkbox-unchecked" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-768v768h768v-768z" />
+<glyph unicode="&#xea54;" glyph-name="radio-checked" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 64c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384zM320 448c0 106.039 85.961 192 192 192s192-85.961 192-192c0-106.039-85.961-192-192-192s-192 85.961-192 192z" />
+<glyph unicode="&#xea56;" glyph-name="radio-unchecked" d="M512 960c-282.77 0-512-229.23-512-512s229.23-512 512-512 512 229.23 512 512-229.23 512-512 512zM512 64c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384z" />
+<glyph unicode="&#xeae8;" glyph-name="block" d="M945.75 591.958l-448 298.666c-10.748 7.166-24.752 7.166-35.5 0l-448-298.666c-8.902-5.934-14.25-15.926-14.25-26.624v-298.666c0-10.7 5.348-20.692 14.25-26.624l448-298.666c5.374-3.584 11.562-5.376 17.75-5.376s12.376 1.792 17.75 5.376l448 298.666c8.902 5.934 14.25 15.926 14.25 26.624v298.666c0 10.698-5.348 20.69-14.25 26.624zM480 305.124l-166.312 110.876 166.312 110.874 166.312-110.874-166.312-110.876zM512 582.458v221.75l358.31-238.876-166.31-110.874-192 128zM448 582.458l-192-128-166.312 110.874 358.312 238.876v-221.75zM198.312 416l-134.312-89.542v179.082l134.312-89.54zM256 377.542l192-128v-221.748l-358.312 238.872 166.312 110.876zM512 249.542l192 128 166.312-110.876-358.312-238.874v221.75zM761.688 416l134.312 89.54v-179.084l-134.312 89.544z" />
+</font></defs></svg>
\ No newline at end of file

Breeze.UI/src/assets/images/check.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>check</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Breeze-Wallet---dashboard-&gt;-Send-&gt;-BTC" transform="translate(-471.000000, -283.000000)" stroke="#2ECCA9" stroke-width="2">
+            <g id="popup-+-wallet" transform="translate(-455.000000, -265.000000)">
+                <g id="popup" transform="translate(820.000000, 317.000000)">
+                    <g id="Amount" transform="translate(90.000000, 195.000000)">
+                        <g id="check" transform="translate(17.000000, 37.000000)">
+                            <circle id="Oval" stroke-opacity="0.200775589" cx="8" cy="8" r="8"></circle>
+                            <polyline id="Shape" points="3.73333333 8 6.4 10.6666667 12.2666667 4.8"></polyline>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

Breeze.UI/src/assets/images/cross.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>cross</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="Breeze-Wallet---dashboard-&gt;-Send-&gt;-BTC" transform="translate(-471.000000, -376.000000)" stroke="#FF5B8A" stroke-width="2">
+            <g id="popup-+-wallet" transform="translate(-455.000000, -265.000000)">
+                <g id="popup" transform="translate(820.000000, 317.000000)">
+                    <g id="Send-to" transform="translate(90.000000, 288.000000)">
+                        <g id="cross" transform="translate(17.000000, 37.000000)">
+                            <circle id="Oval" stroke-opacity="0.2" cx="8" cy="8" r="8"></circle>
+                            <path d="M4.8,4.8 L11.2,11.2" id="Shape"></path>
+                            <path d="M11.2,4.8 L4.8,11.2" id="Shape"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

Breeze.UI/src/assets/images/ico_bitcoin.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45 (43475) - http://www.bohemiancoding.com/sketch -->
+    <title>Bitcoin (active)</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="42" height="42" rx="8"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Breeze-Wallet---Stratis-light---dashboard-&gt;-BTC" transform="translate(-14.000000, -30.000000)">
+            <g id="wallet" transform="translate(0.000000, -24.000000)">
+                <g id="content">
+                    <g id="left-nav" transform="translate(0.000000, 24.000000)">
+                        <g id="content" transform="translate(14.000000, 30.000000)">
+                            <g id="icons">
+                                <g id="Bitcoin-(active)">
+                                    <mask id="mask-2" fill="white">
+                                        <use xlink:href="#path-1"></use>
+                                    </mask>
+                                    <use id="Mask" fill="#F7931A" xlink:href="#path-1"></use>
+                                    <path d="M27.274994,20.6150151 C26.5661248,20.0811297 25.556326,19.867595 25.556326,19.867595 C25.556326,19.867595 26.4108533,19.3721633 26.7600442,18.8772172 C27.1096236,18.3820769 27.2843161,17.6149444 27.3135449,17.2169095 C27.3425794,16.8186803 27.4106502,15.1489534 26.1095353,14.1879015 C25.1031352,13.4442685 23.9498146,13.1490681 22.4010809,13.0530309 L22.4010809,9.68328014 L20.3234143,9.68328014 L20.3234143,13.0132177 C19.8598332,13.0132177 19.3180823,13.0132177 18.740888,13.0132177 L18.740888,9.68328014 L16.6634155,9.68328014 L16.6634155,13.0132177 C14.542537,13.0132177 12.576056,13.0132177 12.576056,13.0132177 L12.576056,15.1708021 C12.576056,15.1708021 13.4498102,15.1708021 13.7774437,15.1708021 C14.1049802,15.1708021 14.6875153,15.2072166 14.9350369,15.4842583 C15.1826556,15.7608144 15.2263531,15.9065695 15.2263531,16.445116 C15.2263531,16.9838566 15.2264502,24.8384192 15.2264502,25.0423405 C15.2264502,25.2461647 15.187608,25.4984445 15.0127212,25.6636207 C14.8381258,25.828797 14.6634332,25.8673478 14.245783,25.8673478 C13.8282298,25.8673478 13.0032226,25.8673478 13.0032226,25.8673478 L12.576056,28.3627618 C12.576056,28.3627618 14.6073063,28.3627618 16.6634155,28.3627618 L16.6634155,31.6832801 L18.7409851,31.6832801 L18.7409851,28.3627618 C19.3793558,28.3627618 19.935187,28.3627618 20.3235114,28.3627618 L20.3235114,31.6832801 L22.4011781,31.6832801 L22.4011781,28.3079943 C22.9382679,28.2766293 23.4390403,28.2359421 23.7311333,28.1976826 C24.3234761,28.1201925 25.6631419,27.9648239 26.9158012,27.0909726 C28.1680722,26.2170243 28.4493865,24.8480327 28.4786152,23.4695247 C28.5081352,22.0909197 27.9831835,21.1489975 27.274994,20.6150151 Z M18.740888,15.3627794 C18.740888,15.3627794 19.4010103,15.3046133 20.0515192,15.3141296 C20.7022224,15.3237431 21.2747557,15.3432612 22.1293801,15.6054458 C22.9836161,15.8677274 23.4880785,16.5085258 23.507888,17.2658506 C23.527212,18.0231754 23.1967624,18.5278321 22.6145186,18.8482798 C22.0320805,19.1686305 21.2266885,19.3434201 20.4690724,19.3722604 C19.7119417,19.4014892 18.740888,19.3722604 18.740888,19.3722604 L18.740888,15.3627794 L18.740888,15.3627794 Z M23.3912645,25.2946203 C22.9155452,25.5569019 21.9640096,25.7898577 21.041897,25.8576373 C20.119493,25.9257081 18.740888,25.8965765 18.740888,25.8965765 L18.740888,21.4401194 C18.740888,21.4401194 20.0613269,21.3723399 21.0905468,21.4401194 C22.1195725,21.5083845 22.9836161,21.7702777 23.3717463,21.9647798 C23.7600707,22.1587963 24.4399054,22.5858658 24.4399054,23.6054722 C24.4399054,24.6246903 23.8666924,25.0325329 23.3912645,25.2946203 Z" id="BTC_alt_1_" fill="#FFFFFF" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(20.527929, 20.683280) rotate(-345.000000) translate(-20.527929, -20.683280) "></path>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

Breeze.UI/src/assets/images/ico_stratis.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
+    <title>stratis</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="0 0 70 0 70 115.835938 70 700 0 700"></polygon>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Breeze-Wallet---Stratis-light---dashboard-&gt;-BTC" transform="translate(-14.000000, -92.000000)">
+            <g id="wallet" transform="translate(0.000000, -24.000000)">
+                <g id="content">
+                    <g id="left-nav" transform="translate(0.000000, 24.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <g id="Mask">
+                            <use fill="#122B41" fill-rule="evenodd" xlink:href="#path-1"></use>
+                            <path stroke="#192D3F" stroke-width="1" d="M-0.5,-0.5 L70.5,-0.5 L70.5,700.5 L-0.5,700.5 L-0.5,-0.5 Z"></path>
+                        </g>
+                        <g id="content" mask="url(#mask-2)">
+                            <g transform="translate(14.000000, 30.000000)" id="icons">
+                                <g>
+                                    <g id="stratis" transform="translate(0.000000, 62.000000)">
+                                        <rect id="Rectangle-3-Copy" fill="#FFFFFF" x="0" y="0" width="42" height="42" rx="8"></rect>
+                                        <path d="M7.46002337,16.8770481 L20.9852984,24.4456138 C20.9942689,24.4512619 21.005565,24.4512619 21.0145354,24.4456138 L34.5368204,16.8772142 C34.5539307,16.8664164 34.5540968,16.8416646 34.5369865,16.8307007 L21.0122098,9.26097213 C21.0030732,9.25532407 20.9914449,9.25532407 20.9824744,9.26113825 L7.45969113,16.8308669 C7.44291307,16.8418307 7.44307919,16.8664164 7.46002337,16.8770481 Z M20.4827873,33.8803649 L6.15299596,25.855303 C6.14020477,25.8471632 6.13655014,25.830219 6.14468999,25.8174278 L6.76448146,24.8559287 C6.77262131,24.8431376 6.78973161,24.839649 6.80235668,24.8477889 L20.9824744,32.7876315 C20.9914449,32.7934457 21.0030732,32.7936118 21.0120437,32.7876315 L34.3017614,25.3486389 C34.628186,25.1657414 34.7919798,24.7938001 34.7919798,24.4208621 L34.7919798,22.4011824 C34.7919798,22.3794208 34.7680586,22.3662974 34.7497854,22.3779257 L21.5089068,29.7915021 C21.1439425,29.995829 20.8555592,29.9984869 20.4864419,29.7921666 L7.09572353,22.2988529 C6.40616192,21.8611283 6.00332239,21.1120959 6.00332239,20.2952869 L6,16.7662464 C6,16.2555954 6.26446208,16.0931306 6.65118803,15.8763448 L20.465677,8.14165965 C20.8047267,7.95244965 21.1929477,7.95228353 21.5338247,8.14415144 L35.5592852,15.9964491 C35.8481669,16.1582494 36,16.5001232 36,16.8439903 C36,17.1685876 35.8161058,17.532223 35.5592852,17.6760824 L21.5040893,25.5453242 C21.1444408,25.7461626 20.8500772,25.7461626 20.4899304,25.544992 L7.2359283,18.1242725 C7.21748905,18.1128102 7.19373398,18.1259337 7.19373398,18.1475292 L7.19722248,20.2952869 C7.19722248,20.6982925 7.40022039,21.0677421 7.74026679,21.2836973 L20.9826405,28.6999316 C20.991611,28.7055796 21.0030732,28.7055796 21.0120437,28.6999316 L34.5094107,21.1408346 C34.859092,20.9180685 35.3584469,20.907603 35.6823797,21.1953217 C35.8891984,21.3792159 36,21.6484955 36,21.9250843 L35.9996678,24.4117255 C35.9973421,25.180526 35.5592852,26.015276 34.9419856,26.3608044 L21.5055844,33.8833551 C21.1399556,34.0880142 20.8560575,34.0880142 20.4827873,33.8803649 L20.4827873,33.8803649 Z" id="logo" fill="#2FBAFF"></path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

Breeze.UI/src/index.html

@@ -3,9 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>Breeze</title>
-  <base href="">
-  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 </head>
 <body>
   <app-root>Loading...</app-root>

Breeze.UI/src/styles.scss

-/* You can add global styles to this file, and also import other style files */
-html, body {
-  margin: 0;
-  padding: 0;
-
-  height: 100%;
-}
-
-