Merge pull request #221 from stratisproject/ui

Port over changes

Breeze.UI/main.ts

@@ -32,10 +32,10 @@ function createWindow() {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 1200,
-    height: 700,
+    height: 650,
     frame: true,
     minWidth: 1200,
-    minHeight: 700,
+    minHeight: 650,
     icon: __dirname + "/assets/images/breeze-logo.png",
     title: "Breeze Wallet"
   });

Breeze.UI/package.json

@@ -41,47 +41,50 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.6",
-    "@angular/common": "^4.2.6",
-    "@angular/compiler": "^4.2.6",
-    "@angular/core": "^4.2.6",
-    "@angular/forms": "^4.2.6",
-    "@angular/http": "^4.2.6",
-    "@angular/platform-browser": "^4.2.6",
-    "@angular/platform-browser-dynamic": "^4.2.6",
-    "@angular/platform-server": "^4.2.6",
-    "@angular/router": "^4.2.6",
-    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.27",
+    "@angular/animations": "^4.4.1",
+    "@angular/common": "^4.4.1",
+    "@angular/compiler": "^4.4.1",
+    "@angular/core": "^4.4.1",
+    "@angular/forms": "^4.4.1",
+    "@angular/http": "^4.4.1",
+    "@angular/platform-browser": "^4.4.1",
+    "@angular/platform-browser-dynamic": "^4.4.1",
+    "@angular/platform-server": "^4.4.1",
+    "@angular/router": "^4.4.1",
+    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5",
     "angular2-material-datepicker": "^0.5.0",
-    "core-js": "^2.4.1",
+    "bootstrap": "^4.0.0-beta",
+    "core-js": "^2.5.1",
     "electron-context-menu": "^0.9.1",
-    "ngx-clipboard": "^8.0.3",
-    "rxjs": "5.4.2",
-    "zone.js": "^0.8.12"
+    "ngx-bootstrap": "^1.9.3",
+    "ngx-clipboard": "^8.0.4",
+    "rxjs": "5.4.3",
+    "zone.js": "^0.8.17"
   },
   "devDependencies": {
-    "@angular/cli": "^1.2.0",
-    "@angular/compiler-cli": "^4.2.6",
-    "autoprefixer": "^7.1.2",
-    "codelyzer": "3.1.2",
+    "@angular/cli": "^1.4.2",
+    "@angular/compiler-cli": "^4.4.1",
+    "autoprefixer": "^7.1.4",
+    "codelyzer": "3.2.0",
     "concurrently": "^3.5.0",
     "copyfiles": "1.2.0",
-    "cross-env": "5.0.1",
-    "css-loader": "^0.28.4",
+    "cross-env": "5.0.5",
+    "css-loader": "^0.28.7",
     "cssnano": "^3.10.0",
-    "electron": "^1.7.4",
+    "electron": "^1.7.6",
     "electron-packager": "^8.7.2",
     "electron-reload": "1.2.1",
     "exports-loader": "^0.6.4",
     "extract-zip": "1.6.5",
     "file-loader": "^0.11.2",
-    "html-loader": "0.4.5",
-    "html-webpack-plugin": "2.29.0",
-    "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine-core": "~2.6.4",
-    "jasmine-spec-reporter": "~4.1.1",
-    "json-loader": "^0.5.4",
-    "karma": "~1.7.0",
+    "html-loader": "0.5.1",
+    "html-webpack-plugin": "2.30.1",
+    "istanbul-instrumenter-loader": "^3.0.0",
+    "jasmine-core": "~2.8.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "jquery": "3.2.1",
+    "json-loader": "^0.5.7",
+    "karma": "~1.7.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.3.0",
@@ -98,16 +101,16 @@
     "protractor": "~5.1.2",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.6",
-    "script-loader": "^0.7.0",
+    "script-loader": "^0.7.1",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",
     "stylus-loader": "^3.0.1",
-    "ts-node": "~3.2.0",
-    "tslint": "~5.5.0",
-    "typescript": "2.3.4",
+    "ts-node": "~3.3.0",
+    "tslint": "~5.7.0",
+    "typescript": "2.5.2",
     "url-loader": "^0.5.9",
     "webdriver-manager": "12.0.6",
-    "webpack": "^3.1.0",
-    "webpack-dev-server": "~2.5.1"
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "~2.8.2"
   }
 }

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

@@ -9,7 +9,7 @@
           <div class="form-group">
             <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="text-danger mt-2">{{ formErrors.walletName }}</div>
+            <div *ngIf="formErrors.walletName" class="form-control-feedback mt-2">{{ formErrors.walletName }}</div>
           </div>
           <div class="form-group">
             <label class="col-12 row" for="creationDate">Creation Date (optional)</label>
@@ -18,12 +18,12 @@
           <div class="form-group">
             <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="text-danger mt-2">{{ formErrors.walletMnemonic }}</div>
+            <div *ngIf="formErrors.walletMnemonic" class="form-control-feedback mt-2">{{ formErrors.walletMnemonic }}</div>
           </div>
           <div class="form-group">
             <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="text-danger mt-2">{{ formErrors.walletPassword }}</div>
+            <div *ngIf="formErrors.walletPassword" class="form-control-feedback mt-2">{{ formErrors.walletPassword }}</div>
           </div>
           <div class="form-group">
             <label class="text-left" for="walletNetwork">Network</label>

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

@@ -4,9 +4,10 @@
       <!--<p class="text-back text-left mb-5 col-6 row">
         <button type="button" class="btn btn-link text-back" (click)="onBackClicked()">Back</button>
       </p>-->
-      <p class="text-back text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
+
+      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
       <h3 class="display-5">Welcome</h3>
-      <p class="lead mb-6">
+      <p class="lead my-5">
         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>

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

@@ -12,6 +12,10 @@ export class GlobalService {
     return this.walletPath;
   }
 
+  getNetwork() {
+    return "TestNet";
+  }
+
   setWalletPath(walletPath: string) {
     this.walletPath = walletPath;
   }

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

@@ -6,9 +6,8 @@
       <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>
+            <h5>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>-->
@@ -16,7 +15,7 @@
           </div>
           <!-- /col-->
           <!--<div class="col-xs-12 col-md-4 text-left">
-            <h5 class="text-uppercase">Current value</h5>
+            <h5>Current value</h5>
             <p class="lead">
               <i class="icon-coin-dollar"></i>
               <strong><span class="h2">51,390</span></strong>
@@ -24,9 +23,8 @@
             </p>
           </div>-->
           <div class="col-xs-12 col-md-4 text-left">
-            <h5 class="text-uppercase">Unconfirmed balance</h5>
+            <h5>Unconfirmed balance</h5>
             <p class="lead">
-              <i class="icon-bitcoin"></i>
               <strong>{{unconfirmedBalance | coinNotation }}</strong>
             </p>
           </div>
@@ -47,16 +45,15 @@
 
     <!-- TRANSACTIONS -->
     <section id="transaction" class="container">
-      <h5 class="text-uppercase">Latest Transactions</h5>
+      <h5>Latest Transactions</h5>
       <div *ngIf="transactions; else noTransactions">
         <div *ngFor="let transaction of transactions; let i=index">
           <div class="card" *ngIf="i<3" (click)="openTransactionDetailDialog(transaction)">
             <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 hidden-xs-down col-3 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>
+                <li class="list-inline-item col text-right align-baseline transactionDate">{{ transaction.timestamp * 1000 | date:'medium' }}</li>
               </ul>
             </div>
           </div>

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

@@ -19,8 +19,8 @@
     <!-- /JUMBOTRON-->
 
     <!-- TRANSACTIONS -->
-    <section id="transaction" class="container">
-      <h5 class="text-uppercase">Transactions</h5>
+    <section id="transaction" class="container mt-4">
+      <h5 class="pt-4">Transactions</h5>
       <div *ngIf="transactions; else noTransactions">
         <div *ngFor="let transaction of transactions">
           <div class="card" (click)="openTransactionDetailDialog(transaction)">
@@ -28,8 +28,7 @@
               <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>
+                <li class="list-inline-item col text-right align-baseline transactionDate">{{ transaction.timestamp * 1000 | date:'medium' }}</li>
               </ul>
             </div>
           </div>

Breeze.UI/src/app/wallet/logout-confirmation/logout-confirmation.component.html

@@ -5,10 +5,10 @@
         <div class="bubble"><i class="icon-download"></i></div>
       </div>
       <div class="modal-body">
-        <h5 class="modal-title text-uppercase" id="modalReceive">Logout</h5>
+        <h5 class="modal-title text-uppercase" id="modalReceive">Log out</h5>
         <form>
           <div class="form-group clearfix">
-            <p class="text-muted text-center">Are you sure you want to logout?</p>
+            <p class="text-muted text-center">Are you sure you want to log out?</p>
           </div>
           <div class="text-center">
             <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button>

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

 import { Component } from '@angular/core';
 
-import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-
-import { LogoutConfirmationComponent } from '../logout-confirmation/logout-confirmation.component';
-
 @Component({
   selector: 'app-menu',
   templateUrl: './menu.component.html',
   styleUrls: ['./menu.component.css'],
 })
 export class MenuComponent {
-  constructor(private modalService: NgbModal) {}
-
-  private logOut() {
-    const modalRef = this.modalService.open(LogoutConfirmationComponent);
-  }
+  constructor() {}
 }

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

@@ -12,8 +12,8 @@
             <span class="float-right"><a ngxClipboard [cbContent]="address" (click)="onCopiedClick()">copy</a></span>
           </div>
           <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 class="text-center row" *ngIf="copied">
+            <span class="badge badge-success col">Your address has been copied to your clipboard.</span>
           </div>
         </form>
       </div>

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

 
 <div id="modalCheck" tabindex="-1" role="dialog" aria-labelledby="modal_check" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modalBg" role="document">
     <div>
       <div class="modal-body">
         <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/><path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/></svg>
         <p class="lead text-success text-center">
           <strong>Your transaction has been sent with success !</strong>
-           <small class="text-center">
-            <a class="btn btn-link" (click)="toggleDetails()">Show details</a>
-          </small> 
         </p>
+        <small class="text-center d-block">
+         <a class="btn btn-link" (click)="toggleDetails()">Show details</a>
+       </small>
          <div *ngIf="showDetails" id="collapseExample">
           <div class="card card-block">
             <ul class="list-inline row">
@@ -22,7 +22,7 @@
             </ul>
             <ul class="list-inline row">
               <li class="list-inline-item col blockLabel">Destination</li>
-              <li class="list-inline-item col-9 blockText"><code>{{ transaction.destinationAddress }}</code></li>
+              <li class="list-inline-item col blockText mt-2"><code>{{ transaction.destinationAddress }}</code></li>
             </ul>
             <!-- <ul class="list-inline row">
               <li class="list-inline-item col blockLabel">Date</li>
@@ -34,10 +34,10 @@
             </ul> -->
           </div>
         </div>
-      </div> 
+      </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>
+</div>
\ No newline at end of file

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

@@ -11,8 +11,12 @@
       </li>-->
     </ul>
     <!-- /menu-->
-    <!--<ul class="list-unstyled second">
-      <li><a href="#"><span class="icon-settings"></span></a></li>
-    </ul>-->
+    <ul class="list-unstyled second">
+      <li>
+        <a>
+          <span class="icon-switch" (click)="logOut()"></span>
+        </a>
+      </li>
+    </ul>
   </aside>
   <!-- /sidebar -->

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

 import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { LogoutConfirmationComponent } from '../logout-confirmation/logout-confirmation.component';
 
 @Component({
   selector: 'sidebar',
@@ -7,9 +9,13 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidebarComponent implements OnInit {
 
-  constructor() { }
+  constructor(private modalService: NgbModal) { }
 
   ngOnInit() {
   }
 
+  private logOut() {
+    const modalRef = this.modalService.open(LogoutConfirmationComponent);
+  }
+
 }

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

@@ -27,10 +27,12 @@
           <li class="list-inline-item col-9 blockText">#{{ transaction.confirmedInBlock }}</li>
         </ul>
         <ul class="list-inline row">
-          <li class="list-inline-item col blockLabel my-3">Transaction ID</li>
+          <li class="list-inline-item col blockLabel mb-3">Transaction ID</li>
           <li class="list-inline-item col-10 blockID"><code>{{ transaction.id }}</code></li>
           <span class="float-right"><a ngxClipboard [cbContent]="transaction.id" (click)="onCopiedClick()">copy</a></span>
-          <span class="badge badge-success list-inline-item col" *ngIf="copied">The transaction ID has been copied to your clipboard.</span>
+          <div class="col-12">
+            <span class="badge badge-success list-inline-item col" *ngIf="copied">The transaction ID has been copied to your clipboard.</span>
+          </div>
         </ul>
       </div>
       <div class="modal-footer">

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

 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { ClipboardModule } from 'ngx-clipboard';
 
 import { WalletComponent } from './wallet.component';
 import { MenuComponent } from './menu/menu.component';
@@ -16,8 +18,10 @@ import { TransactionDetailsComponent } from './transaction-details/transaction-d
 @NgModule({
   imports: [
     CommonModule,
+    ClipboardModule,
     FormsModule,
     SharedModule.forRoot(),
+    NgbDropdownModule,
     ReactiveFormsModule,
     WalletRoutingModule
   ],

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

@@ -10,6 +10,7 @@
 <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="&#xe901;" glyph-name="tumblebit" horiz-adv-x="1217" d="M19.010 960h1178.613c10.494 0 19.010-8.515 19.010-18.963v-986.073c0-10.468-8.536-18.963-19.010-18.963h-1178.613c-10.494 0-19.010 8.515-19.010 18.963v986.073c0 10.468 8.536 18.963 19.010 18.963zM474.419 54.483c2.11 8.192 9.543 14.26 18.402 14.26l-18.402-14.26zM154.819 187.226c2.11 8.192 9.543 14.26 18.402 14.26l-18.402-14.26zM285.115 884.147h38.020v-37.946h-38.020v37.946zM190.083 884.147h38.020v-37.946h-38.020v37.946zM95.051 884.147h38.020v-37.946h-38.020v37.946zM1178.613 770.348h-1140.593v-796.44h1140.593v796.44zM38.020 808.293h1140.593v113.761h-1140.593v-113.761zM608.567 726.986c-3.606 0.239-7.21 0.133-10.83-0.318-28.885-3.6-53.333-26.962-71.895-60.189l-37.131-63.185c-2.357-3.587-2.542-8.176-0.482-11.94s6.031-6.090 10.33-6.052c4.299 0.038 8.227 2.435 10.219 6.236l37.176 63.185c0.047 0.090 0.092 0.181 0.137 0.272 16.532 29.685 36.84 46.456 54.513 48.659 17.673 2.208 37.206-7.79 57.107-42.804l54.149-111.345-99.243 29.005c-4.047 1.353-8.511 0.39-11.636-2.51s-4.41-7.272-3.35-11.396c1.060-4.124 4.296-7.34 8.434-8.382l124.634-36.404c2.993-0.864 6.209-0.496 8.928 1.023s4.715 4.060 5.542 7.057l34.583 124.871c1.044 3.595 0.288 7.471-2.031 10.414s-5.915 4.591-9.664 4.429c-5.114-0.213-9.489-3.731-10.784-8.67l-26.392-95.412-52.556 108.122c-0.1 0.215-0.206 0.427-0.319 0.635-19.602 34.487-44.199 53.020-69.438 54.696zM599.011 527.22c-96.526 0-174.233-78.263-174.233-174.257 0-96.029 77.707-174.348 174.233-174.348 96.502 0 175.234 78.235 175.234 174.348-0.016 1.464-0.31 2.912-0.865 4.267-2.423 93.998-79.385 169.99-174.369 169.99zM599.011 503.98c83.92 0 151.936-67.568 151.936-151.016 0-83.486-68.016-151.107-151.936-151.107-83.947 0-150.935 67.535-150.935 151.107 0 83.533 66.988 151.016 150.935 151.016zM374.179 375.069c-0.395 0.005-0.79-0.010-1.183-0.045-0.723-0.054-1.439-0.176-2.139-0.363l-125.726-32.591c-4.193-0.891-7.557-4.008-8.757-8.114s-0.042-8.537 3.014-11.537c3.056-2.999 7.517-4.082 11.613-2.818l96.103 24.92-67.618-99.452c-0.143-0.192-0.279-0.389-0.41-0.59-23.024-39.055-24.714-73.296-7.099-96.502s50.201-32.628 88.459-32.001l73.169-0.545c4.194-0.082 8.108 2.092 10.248 5.691s2.175 8.068 0.092 11.7c-2.083 3.632-5.963 5.866-10.158 5.85l-73.442 0.545c-0.091 0.001-0.182 0.001-0.273 0-34.045-0.558-58.781 8.628-69.529 22.786-10.719 14.121-11.776 35.957 8.509 70.493l69.666 102.539 24.435-100.178c0.984-4.038 4.052-7.246 8.049-8.415s8.316-0.122 11.33 2.746c3.014 2.869 4.265 7.123 3.281 11.161l-30.715 125.824c-1.224 5.076-5.691 8.715-10.921 8.897v0zM846.868 321.779v-0.091c-4.323-0.066-8.255-2.515-10.211-6.361s-1.617-8.457 0.883-11.977l41.499-60.416c0.045-0.076 0.090-0.152 0.137-0.227 19.894-27.556 26.456-53.021 20.932-69.902-5.516-16.856-22.916-30.19-63.022-33.272l-123.997-1.407 68.392 77.074c3.106 3.381 3.929 8.268 2.1 12.475s-5.967 6.949-10.564 6.998c-3.439 0.039-6.72-1.439-8.964-4.040l-86.047-96.956c-2.074-2.325-3.126-5.383-2.921-8.489s1.651-6 4.013-8.033l98.606-84.337c3.116-2.974 7.624-3.987 11.717-2.634s7.103 4.851 7.823 9.092c0.72 4.241-0.968 8.532-4.387 11.154l-75.308 64.501 120.447 1.362c0.243-0.008 0.485-0.008 0.728 0 45.296 3.437 74.444 21.623 83.499 49.295 9.032 27.602-1.736 59.612-23.98 90.51l-0.091 0.227-41.408 60.325c-2.207 3.269-5.924 5.2-9.874 5.129v0zM531.948 316.363v14.425h23.286v97.677h63.469c17.31 0 29.605-5.152 36.886-15.455 4.259-6.045 6.388-13.051 6.388-21.019 0-9.342-2.61-17.035-7.831-23.080-2.748-3.16-6.732-6.045-11.952-8.655 7.556-2.885 13.257-6.113 17.104-9.685 6.594-6.457 9.891-15.386 9.891-26.789 0-9.479-2.954-18.065-8.861-25.759-8.93-11.54-23.148-17.31-42.656-17.31h-62.439v35.65h-23.286zM617.878 297.817c12.364 0 21.156 3.572 26.377 10.716 3.297 4.396 4.946 9.823 4.946 16.279 0 10.716-4.808 17.997-14.425 21.843-5.083 2.061-11.815 3.091-20.195 3.091h-39.771v-18.958h21.637v-14.425h-21.637v-18.546h43.069zM611.284 366.026c8.38 0 14.906 1.168 19.577 3.503 7.419 3.709 11.128 10.372 11.128 19.989s-3.915 16.142-11.746 19.577c-4.396 1.786-10.99 2.679-19.783 2.679h-35.65v-45.747h36.474z" />
 <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" />

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

-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <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 -->
+    <!-- Generator: Sketch 46.2 (44496) - 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="Breeze-Wallet---Stratis-light---Tumbling---V2-after-review" transform="translate(-9.000000, -30.000000)">
+            <g id="wallet" transform="translate(-5.000000, -10.000000)">
                 <g id="content">
-                    <g id="left-nav" transform="translate(0.000000, 24.000000)">
+                    <g id="left-nav" transform="translate(0.000000, 10.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>
+                                    <use id="Mask" fill="#F69D32" 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>

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

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="120px" height="101px" viewBox="0 0 120 101" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.1 (44463) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Breeze-Wallet---Stratis-light---Not-tumbling---V2-after-review" transform="translate(-335.000000, -139.000000)" fill-rule="nonzero" fill="#DCE8F1">
+            <g id="wallet" transform="translate(-5.000000, -24.000000)">
+                <g id="Left" transform="translate(190.000000, 163.000000)">
+                    <g id="illustration" transform="translate(150.000000, 0.000000)">
+                        <path d="M1.8750293,0 L1.92378006,0 L118.124971,0 C119.159987,0 120,0.839811848 120,1.87040501 L120,1.91903554 L120,16.7831441 L120,16.8317747 L120,16.8804052 L120,99.129595 C120,100.162059 119.158112,101 118.124971,101 L118.07622,101 L1.8750293,101 C0.840013125,101 0,100.160188 0,99.129595 L0,99.0809645 L0,16.8804052 L0,16.8317747 L0,16.7831441 L0,1.87040501 C0,0.837941443 0.841888155,0 1.8750293,0 Z M46.7932311,89.3137095 C47.0013594,88.5056945 47.7344959,87.9071649 48.6082595,87.9071649 L46.7932311,89.3137095 Z M15.2702386,76.2208745 C15.4783668,75.4128595 16.2115033,74.8143299 17.085267,74.8143299 L15.2702386,76.2208745 Z M28.1216894,7.48162003 L31.871748,7.48162003 L31.871748,11.2243005 L28.1216894,11.2243005 L28.1216894,7.48162003 Z M18.7484179,7.48162003 L22.4984765,7.48162003 L22.4984765,11.2243005 L18.7484179,11.2243005 L18.7484179,7.48162003 Z M9.37514649,7.48162003 L13.1252051,7.48162003 L13.1252051,11.2243005 L9.37514649,11.2243005 L9.37514649,7.48162003 Z M116.249941,18.7059205 L3.75005859,18.7059205 L3.75005859,97.2610604 L116.249941,97.2610604 L116.249941,18.7059205 Z M3.75005859,14.9632401 L116.249941,14.9632401 L116.249941,3.74268042 L3.75005859,3.74268042 L3.75005859,14.9632401 Z M60.0246728,22.9827782 C59.6690463,22.9591616 59.3135234,22.9696191 58.9564975,23.0141175 C56.1074695,23.3691878 53.696129,25.6734626 51.8652551,28.9506992 L48.202942,35.1827666 C47.9704822,35.5365158 47.9522115,35.9892195 48.1554112,36.3604649 C48.3586109,36.7317102 48.750253,36.961155 49.174259,36.9573602 C49.598265,36.9535654 49.9857171,36.7171477 50.1822065,36.3423252 L53.8490075,30.1102577 C53.8536127,30.1013626 53.858101,30.0924077 53.862471,30.0833953 C55.4930443,27.1554983 57.4961405,25.5012927 59.2392499,25.283987 C60.9823616,25.0662228 62.9089853,26.0523436 64.8718519,29.5058546 L70.2127258,40.4880827 L60.4241159,37.6272413 C60.0249724,37.4938243 59.5846452,37.588803 59.2764174,37.8748003 C58.9681896,38.1607976 58.8414064,38.5920272 58.9459609,38.9987863 C59.0505155,39.4055455 59.3696695,39.7227147 59.7778254,39.8254778 L72.0708117,43.4160802 C72.3660549,43.5012865 72.6832118,43.4649544 72.9514061,43.315203 C73.2196003,43.1654517 73.4164754,42.9147644 73.4980349,42.6191632 L76.9090128,30.3027714 C77.0119439,29.948199 76.9373924,29.5658771 76.7087268,29.2756466 C76.4800612,28.985416 76.1252698,28.8228004 75.755564,28.8387727 C75.2511959,28.8597966 74.8196503,29.2067251 74.6918789,29.6938912 L72.088763,39.1046712 L66.9049751,28.4403144 C66.8951455,28.4191069 66.8846683,28.3982042 66.8735579,28.3776355 C64.9401415,24.9761301 62.5140622,23.1480936 60.0246728,22.9827782 Z M59.0821663,42.6863192 C49.5615769,42.6863192 41.8971208,50.4055935 41.8971206,59.8737516 C41.8971206,69.3453481 49.5616159,77.070141 59.0821663,77.070141 C68.6004072,77.070141 76.3659495,69.3536002 76.3659495,59.8737516 C76.3643515,59.7293653 76.3354196,59.5865803 76.2806759,59.4529097 C76.0416576,50.1816563 68.45067,42.6863192 59.0821663,42.6863192 Z M59.0821663,44.978575 C67.3594076,44.978575 74.0680276,51.6429526 74.0680276,59.8737516 C74.0680276,68.1082182 67.3594466,74.7778863 59.0821663,74.7778863 C50.8022295,74.7778863 44.1950421,68.1166995 44.1950421,59.8737516 C44.1950421,51.6347005 50.8022709,44.978575 59.0821663,44.978575 Z M36.9063213,57.6934231 C36.8673733,57.6929423 36.8284259,57.6944372 36.7896301,57.6979022 C36.7183523,57.7032701 36.6477322,57.7152609 36.578688,57.7337186 L24.1779882,60.948246 C23.7644107,61.0361569 23.4326561,61.3435562 23.3143093,61.7485192 C23.1959625,62.1534822 23.3101498,62.5905621 23.6115806,62.8863983 C23.9130114,63.1822345 24.352971,63.2890165 24.7569568,63.164391 L34.2358848,60.7064865 L27.5665253,70.5157229 C27.5524634,70.5347043 27.5389926,70.5541144 27.5261322,70.5739255 C25.255172,74.4260596 25.0885177,77.8033393 26.8259841,80.0921556 C28.5634505,82.380972 31.7774363,83.3103735 35.5509065,83.2484826 L42.7678177,83.3022085 C43.1814886,83.3102934 43.5675762,83.0959076 43.778643,82.74092 C43.9897098,82.3859324 43.9931618,81.9451619 43.7876808,81.586928 C43.5821998,81.2286941 43.1995172,81.0083172 42.7857702,81.0099538 L35.5419302,80.9562279 C35.5329543,80.956123 35.5239774,80.956123 35.5150015,80.9562279 C32.1570364,81.011242 29.717238,80.1051848 28.6571407,78.7087432 C27.5998635,77.3159693 27.4956705,75.1621599 29.4964208,71.7558694 L36.3677459,61.6421917 L38.7778712,71.5230634 C38.8748801,71.9213388 39.1775227,72.2377344 39.5717965,72.3530671 C39.9660703,72.4683997 40.3920757,72.3651477 40.6893406,72.0822051 C40.9866054,71.7992624 41.1099682,71.3796148 41.0129593,70.9813394 L37.9834722,58.570928 C37.8627646,58.070285 37.4221999,57.7113774 36.9063213,57.6934231 L36.9063213,57.6934231 Z M83.5290043,62.9494921 L83.5290043,62.9584479 C83.1025786,62.9649467 82.7148367,63.2065003 82.5218549,63.5858771 C82.3288731,63.9652539 82.3623988,64.4200427 82.608937,64.767179 L86.7021105,70.726145 C86.7065138,70.7336578 86.7110027,70.7411203 86.7155763,70.7485312 C88.6777903,73.4664576 89.3249724,75.9781086 88.7801144,77.6432047 C88.2361044,79.305777 86.5198876,80.6209352 82.5640563,80.9248882 L70.3339044,81.0636774 L77.0795623,73.4616301 C77.3859379,73.1281787 77.4670843,72.6461799 77.2867124,72.2311863 C77.1063405,71.8161928 76.6981832,71.5458162 76.2447709,71.5409705 C75.9055344,71.5370769 75.5819116,71.6829213 75.3606087,71.9394285 L66.8735579,81.5024287 C66.6689955,81.7317877 66.5652136,82.0334162 66.585461,82.339745 C66.6057084,82.6460737 66.7482928,82.9314984 66.981273,83.1320796 L76.7070485,91.4504565 C77.0143944,91.7437538 77.4590155,91.8437044 77.8627674,91.7102617 C78.2665192,91.5768191 78.5633511,91.2318133 78.6343328,90.8134762 C78.7053145,90.3951392 78.5388339,89.9719078 78.2015939,89.7133561 L70.7737427,83.3514553 L82.6538177,83.2171429 C82.6777486,83.2178892 82.7016969,83.2178892 82.7256278,83.2171429 C87.1933304,82.8781185 90.0682789,81.0844429 90.9613456,78.3550552 C91.8521581,75.6325443 90.7900815,72.4753508 88.5961014,69.4277982 L88.5871258,69.4054143 L84.502928,63.4553996 C84.2852898,63.1329318 83.9186416,62.9424753 83.5290043,62.9494921 L83.5290043,62.9494921 Z M52.4674797,63.4837398 L52.4674797,62.0609756 L54.7642276,62.0609756 L54.7642276,52.4268293 L61.0243902,52.4268293 C62.7317159,52.4268293 63.9444409,52.9349543 64.6626016,53.9512195 C65.0826579,54.5474285 65.2926829,55.2384785 65.2926829,56.0243902 C65.2926829,56.9458041 65.0352329,57.7046041 64.5203252,58.300813 C64.2493211,58.6124677 63.8563711,58.8970177 63.3414634,59.1544715 C64.0867246,59.4390258 64.6490496,59.7574508 65.0284553,60.1097561 C65.678865,60.7466157 66.004065,61.6273657 66.004065,62.7520325 C66.004065,63.6869965 65.71274,64.5338715 65.1300813,65.2926829 C64.2493181,66.4309 62.8468931,67 60.9227642,67 L54.7642276,67 L54.7642276,63.4837398 L52.4674797,63.4837398 Z M60.9430894,65.3130081 C62.1626077,65.3130081 63.0298077,64.9607081 63.5447154,64.2560976 C63.8699203,63.8224911 64.0325203,63.2872661 64.0325203,62.6504065 C64.0325203,61.5934907 63.5582703,60.8753407 62.6097561,60.495935 C62.1083986,60.2926819 61.4444486,60.1910569 60.6178862,60.1910569 L56.695122,60.1910569 L56.695122,62.0609756 L58.8292683,62.0609756 L58.8292683,63.4837398 L56.695122,63.4837398 L56.695122,65.3130081 L60.9430894,65.3130081 Z M60.2926829,58.5853659 C61.1192453,58.5853659 61.7628703,58.4701909 62.2235772,58.2398374 C62.9552882,57.8739819 63.3211382,57.2168069 63.3211382,56.2682927 C63.3211382,55.3197785 62.9349632,54.6761535 62.1626016,54.3373984 C61.7289951,54.1612457 61.0785951,54.0731707 60.2113821,54.0731707 L56.695122,54.0731707 L56.695122,58.5853659 L60.2926829,58.5853659 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

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

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="60px" height="50px" viewBox="0 0 60 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>illustration</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Breeze-Wallet---Stratis-light---welcome" transform="translate(-266.000000, -553.000000)" fill="#F69D32">
+            <g id="software">
+                <g id="logo" transform="translate(266.000000, 553.000000)">
+                    <path d="M37.6306633,38.592449 C34.4689286,37.5710204 31.1051531,34.142449 29.1485204,31.3582653 C27.1918878,28.5740816 24.9393367,22.939898 18.8806633,24.0240816 C13.6857653,24.9536735 11.4066837,31.1077551 6.60413265,31.2516327 C4.77403061,31.3067347 3.37607143,30.575102 2.52862245,29.8358163 C11.8755612,31.1322449 12.3255612,16.4026531 20.8362755,15.4995918 C27.1270918,14.8322449 29.7469898,19.7307143 31.7255612,23.8103061 C35.3622959,31.3082653 38.3852551,38.0291837 48.1536224,37.3531633 C47.0260714,38.1526531 42.1980102,40.0684694 37.6306633,38.592449 M50.0883163,34.8021429 C42.2225,35.9929592 37.650051,30.2827551 35.7852551,25.8796939 C32.6138265,18.3909184 29.9352551,12.7786735 20.475051,13.5332653 C22.1796429,12.7511224 24.5536224,11.7077551 28.5107653,12.0664286 C37.3117857,12.8633673 39.4801531,27.0853061 48.7520918,27.4980612 C54.5362755,27.7552041 57.6561735,25.1720408 58.7077041,19.6194898 C58.7117857,19.5960204 58.7444388,19.5888776 58.7617857,19.5730612 C55.9730102,6.69857143 43.5321939,-1.84632653 30.3980102,0.341428571 C19.8418878,2.09959184 11.9638265,10.2735714 10.0719898,20.2062245 C10.0719898,20.2062245 9.29545918,23.850102 6.35872449,26.7031633 C4.74443878,28.2710204 4.00515306,28.3608163 3.00260204,28.3490816 C1.69392857,28.3342857 5.10204082e-05,27.3169388 5.10204082e-05,27.3169388 C5.10204082e-05,27.3169388 0.510765306,32.8817347 6.3102551,33.2628571 C7.65107143,33.3511224 10.8184184,33.0720408 11.7684184,34.9363265 C16.2510714,45.0531633 27.1434184,51.267449 38.5633163,49.364898 C50.7219898,47.339898 59.3321939,36.8062245 59.3281122,24.8740816 C57.6709694,30.3531633 54.8153571,34.0868367 50.0883163,34.8021429" id="illustration"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

Breeze.UI/src/scss/_buttons.scss

@@ -30,7 +30,7 @@
   &.disabled,
   &:disabled {
     cursor: $cursor-disabled;
-    opacity: .65;
+    opacity: 1;
     @include box-shadow(none);
   }
 

Breeze.UI/src/scss/_code.scss

@@ -13,6 +13,7 @@ code {
   color: $code-color;
   background-color: $code-bg;
   @include border-radius($border-radius);
+  overflow-wrap: break-word;
 
   // Streamline the style when inside anchors to avoid broken underline and more
   a > & {

Breeze.UI/src/scss/_custom.scss

@@ -4,28 +4,37 @@
 // without modifying source files.
 
 body {overflow-x: hidden;}
-a, button {&:hover {cursor: pointer !important;}}
+a, button {
+  &:hover {
+    cursor: pointer;
+    -webkit-transform-origin: center bottom;
+    transform-origin: center bottom;
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+  }
+}
+button {
+  &:disabled  {
+    background: #EFEFEF !important;
+    border-color: #EFEFEF !important;
+    &:hover {cursor: not-allowed !important;}
+  }
+}
 code {color: $spacegray !important;}
 .form-control::-webkit-input-placeholder { color: $input-color-placeholder; }  /* WebKit, Blink, Edge */
 .form-control:-moz-placeholder { color: $input-color-placeholder; }  /* Mozilla Firefox 4 to 18 */
 .form-control:-ms-input-placeholder { color: $input-color-placeholder; }  /* Internet Explorer 10-11 */
 
-// button
-.twitter {
-  border-color: #2FBAFF !important;
-  color: #2FBAFF !important;
-  &:hover {
-    background-color: #2FBAFF !important;
-    color: $white !important;
-  }
+// badge default
+.badge {
+  &.badge-default {color: $gray;}
 }
-.facebook {
-  border-color: #2D1DE7 !important;
-  color: #2D1DE7 !important;
-  &:hover {
-    background-color: #2D1DE7 !important;
-    color: $white !important;
-  }
+
+// feedbacks
+.form-control-feedback {
+  color: $pink;
+  font-style: italic;
+  font-size: .85em;
 }
 
 // loading
@@ -63,7 +72,7 @@ em {
 #content {
     width: 100%;
     position: relative;
-    padding: 0 0 70px 70px;
+    padding: 0 0 65px 70px;
 }
 
 // sidebar
@@ -129,11 +138,10 @@ em {
   h5 {
     font-size: .85em;
     color: $gray-dark;
-    letter-spacing: 0.43px;
   }
   .lead {
     color: $black;
-    font-size: 1.25em;
+    font-size: 1.85em;
     font-weight: 500;
     .h2 {
       font-size: 2em;
@@ -154,18 +162,13 @@ em {
   h5 {
     font-size: .85em;
     color: $gray-dark;
-    letter-spacing: 0.43px;
   }
   .card {
-    li {
-      line-height: 2.5em;
-      a {
-        &:hover {
-          cursor: pointer;
-          text-decoration: underline;
-        }
-      }
+    &:hover {
+      cursor: pointer;
+      text-decoration: none !important;
     }
+    li {line-height: 2.5em;}
   }
 }
 
@@ -253,7 +256,6 @@ em {
   .float-right {a {text-decoration: underline; &:hover {text-decoration: none;}}}
 }
 #modalReceive {
-  .myAddress {margin-bottom: 2em;}
   .modal-body {padding: 0 3em;}
   label {
     color: $blue;
@@ -272,7 +274,7 @@ em {
   }
 }
 #modalCheck {
-  .lead {animation: 2s ease 0s normal forwards 1 fadein;}
+  .lead, .d-block {animation: 2s ease 0s normal forwards 1 fadein;}
   @keyframes fadein {
     0% {opacity:0;}
     66% {opacity:0;}
@@ -474,7 +476,6 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
       font-family: "Lato-Bold";
       font-size: 1.25em;
       color: $darkgray;
-      letter-spacing: 0.64px;
       text-transform: uppercase;
     }
     .lead {
@@ -482,12 +483,9 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
       color: $blue;
       font-weight: 400;
       line-height: 1.25em;
-      margin: 2em 0;
-    }
-    .btn-darkgray {
-      letter-spacing: 1px;
-      font-size: 1em;
+      margin: 0 0 2em 0;
     }
+    .btn-darkgray {font-size: 1em;}
     .btn-linkgray {
       background-color: transparent !important;
       text-decoration: underline;
@@ -496,7 +494,7 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
         color: lighten($darkgray,10%);
       }
     }
-    form {margin-bottom: 4em;}
+    form {margin: 2em 0;}
     .textback {
       a {
         color: #C0BECC;
@@ -514,6 +512,43 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
   }
 }
 
+// Tumblebit
+#Tumblebit {
+  padding-top: 4em;
+  label {
+    font-size: .85em;
+    color: $gray-dark;
+  }
+  .btn-danger {
+    color: $btn-danger-bg !important;
+    background: rgba($btn-danger-bg, .4);
+  }
+  .table {
+    a {
+      color: $brand-primary;
+      &:hover {text-decoration: underline;}
+    }
+    .badge {
+      &.badge-default {font-size: 1em !important;}
+    }
+    font-size: 0.75rem;
+    background: white;
+    border: 1px solid $teal;
+    box-shadow: 0 2px 10px 0 rgba(80,96,120,0.10);
+    margin-bottom: 2em;
+
+    .total {
+      td {font-weight: bold;}
+    }
+    td {color: $gray;}
+    strong, th {
+      margin-right: 1.2em;
+      font-weight: 400;
+      color: #878685;
+    }
+  }
+}
+
  // QUERIES
 @media screen and (max-width: 768px) {
   .jumbotron {

Breeze.UI/src/scss/_font.scss

@@ -42,11 +42,11 @@
 
 @font-face {
   font-family: 'icon';
-  src:  url('./assets/fonts/icon.eot?qz0v16');
-  src:  url('./assets/fonts/icon.eot?qz0v16#iefix') format('embedded-opentype'),
-    url('./assets/fonts/icon.ttf?qz0v16') format('truetype'),
-    url('./assets/fonts/icon.woff?qz0v16') format('woff'),
-    url('./assets/fonts/icon.svg?qz0v16#icomoon') format('svg');
+  src:  url('./assets/fonts/icon.eot?ste27o');
+  src:  url('./assets/fonts/icon.eot?ste27o#iefix') format('embedded-opentype'),
+    url('./assets/fonts/icon.ttf?ste27o') format('truetype'),
+    url('./assets/fonts/icon.woff?ste27o') format('woff'),
+    url('./assets/fonts/icon.svg?ste27o#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -165,6 +165,10 @@
 .icon-block:before {
   content: "\eae8";
 }
+.icon-tumblebit:before {
+  content: "\e901";
+  color: #dce8f1;
+}
 .icon-stratis:before {
   content: "\e900";
 }

Breeze.UI/src/scss/_tables.scss

@@ -11,12 +11,10 @@
   td {
     padding: $table-cell-padding;
     vertical-align: top;
-    border-top: $table-border-width solid $table-border-color;
   }
 
   thead th {
     vertical-align: bottom;
-    border-bottom: (2 * $table-border-width) solid $table-border-color;
   }
 
   tbody + tbody {

Breeze.UI/src/scss/_variables.scss

@@ -95,7 +95,7 @@
 $white:  #fff !default;
 $black:  #444 !default;
 $red:    #d9534f !default;
-$orange: #F69D32 !default;
+$orange: #f69d32 !default;
 $yellow: #D1C312 !default;
 $green:  #2ECCA9 !default;
 $blue:   #7385A0 !default;
@@ -339,7 +339,7 @@ $transition-collapse:    height .35s ease !default;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding:            .75rem !default;
+$table-cell-padding:            .5rem .75rem !default;
 $table-sm-cell-padding:         .3rem !default;
 
 $table-bg:                      transparent !default;
@@ -773,7 +773,7 @@ $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !defau
 
 // Badges
 
-$badge-default-bg:            $gray-light !default;
+$badge-default-bg:            rgba(152,163,179,.15) !default;
 $badge-primary-bg:            $brand-primary !default;
 $badge-success-bg:            rgba(46,204,169,.2) !default;
 $badge-info-bg:               $brand-info !default;
@@ -784,7 +784,7 @@ $badge-color:                 $white !default;
 $badge-link-hover-color:      $white !default;
 $badge-font-size:             .85em !default;
 $badge-font-weight:           $font-weight-base !default;
-$badge-padding-x:             .6em !default;
+$badge-padding-x:             1.2em !default;
 $badge-padding-y:             .6em !default;
 
 $badge-pill-padding-x:        .6em !default;
@@ -953,7 +953,7 @@ $close-text-shadow:           0 1px 0 $white !default;
 
 // Code
 
-$code-font-size:              90% !default;
+$code-font-size:              91% !default;
 $code-padding-x:              .4rem !default;
 $code-padding-y:              .2rem !default;
 $code-color:                  #bd4147 !default;

Breeze.UI/src/scss/themes/_bitcoin.scss

@@ -36,12 +36,13 @@ $btn-secondary-border:           $gray-light !default;
     .nav-item {
       .nav-link {
         color: $gray-dark;
+        font-size: .86rem;
         &:hover {color: lighten($brand-primary,20%);}
         &.is-active {
           border-bottom: 2px solid $brand-primary !important;
           color: $brand-primary !important;
         }
-      }    
+      }
     }
   }
 }
@@ -78,6 +79,36 @@ $btn-secondary-border:           $gray-light !default;
         &:hover {
           border-color: #FCDCB5 !important;
           background-color: #FEFDFA !important;
+          box-shadow: 0 2px 10px 0 rgba(80,96,120,0.10);
+        }
+      }
+    }
+
+    // Tumblebit
+    #Tumblebit {
+      i {
+        font-size: 6.5rem;
+        &.OFF {
+          -webkit-text-fill-color: #DCE8F1 !important;
+          fill: #DCE8F1 !important;
+        }
+        &.ON {
+          -webkit-text-fill-color:: $brand-primary !important;
+          fill: $brand-primary !important;
+        }
+      }
+      .help {
+        color: $gray;
+        font-size: .9em;
+        font-style: italic;
+        line-height: 1.3em;
+        font-weight: 200;
+      }
+      button {.icon-circle-down {color: rgba($gray,.5);}}
+      .dropdown-toggle {
+        // Generate the caret automatically
+        &::after {
+          content: none !important;
         }
       }
     }