Merge pull request #161 from stratisproject/ui

Various UX improvements

Breeze.UI/package.json

@@ -41,28 +41,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.5",
-    "@angular/common": "^4.2.5",
-    "@angular/compiler": "^4.2.5",
-    "@angular/core": "^4.2.5",
-    "@angular/forms": "^4.2.5",
-    "@angular/http": "^4.2.5",
-    "@angular/platform-browser": "^4.2.5",
-    "@angular/platform-browser-dynamic": "^4.2.5",
-    "@angular/platform-server": "^4.2.5",
-    "@angular/router": "^4.2.5",
+    "@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",
     "angular2-material-datepicker": "^0.5.0",
     "core-js": "^2.4.1",
     "electron-context-menu": "^0.9.1",
     "ngx-clipboard": "^8.0.3",
-    "rxjs": "5.4.1",
+    "rxjs": "5.4.2",
     "zone.js": "^0.8.12"
   },
   "devDependencies": {
     "@angular/cli": "^1.2.0",
-    "@angular/compiler-cli": "^4.2.5",
-    "autoprefixer": "^7.1.1",
+    "@angular/compiler-cli": "^4.2.6",
+    "autoprefixer": "^7.1.2",
     "codelyzer": "3.1.2",
     "concurrently": "^3.5.0",
     "copyfiles": "1.2.0",
@@ -89,7 +89,7 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "less-loader": "^4.0.4",
+    "less-loader": "^4.0.5",
     "minimist": "1.2.0",
     "mkdirp": "0.5.1",
     "node-sass": "^4.5.3",
@@ -102,12 +102,12 @@
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.18.2",
     "stylus-loader": "^3.0.1",
-    "ts-node": "~3.1.0",
-    "tslint": "~5.4.3",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.5.0",
     "typescript": "2.3.4",
     "url-loader": "^0.5.9",
     "webdriver-manager": "12.0.6",
-    "webpack": "^3.0.0",
-    "webpack-dev-server": "~2.5.0"
+    "webpack": "^3.1.0",
+    "webpack-dev-server": "~2.5.1"
   }
 }

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

@@ -32,7 +32,7 @@
         <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>
+        <button type="button" class="btn btn-link btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button>
       </div>
     </div>
     <!-- /container-->

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

@@ -50,7 +50,7 @@
       <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" *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>

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

@@ -23,7 +23,7 @@
       <h5 class="text-uppercase">Transactions</h5>
       <div *ngIf="transactions; else noTransactions">
         <div *ngFor="let transaction of transactions">
-          <div class="card">
+          <div class="card" (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>

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

@@ -26,7 +26,7 @@ export class SendComponent {
   private buildSendForm(): void {
     this.sendForm = this.fb.group({
       "address": ["", Validators.required],
-      "amount": ["", Validators.required],
+      "amount": ["", Validators.compose([Validators.required, Validators.pattern(/^[0-9]+(\.[0-9]{0,8})?$/)])],
       "fee": [2, Validators.required],
       "password": ["", Validators.required]
     });
@@ -64,7 +64,8 @@ export class SendComponent {
       'required': 'An address is required.'
     },
     'amount': {
-      'required': 'An amount is required.'
+      'required': 'An amount is required.',
+      'pattern': 'Enter a valid amount. Only positive numbers are allowed.'
     },
     'fee': {
       'required': 'A fee is required.'

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

@@ -30,7 +30,7 @@
           <li class="list-inline-item col blockLabel">Transaction ID</li>
           <li class="list-inline-item col-9 blockText 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 blockLabel" *ngIf="copied">The transaction ID has been copied to your clipboard.</span>
+          <span class="badge badge-success list-inline-item col" *ngIf="copied">The transaction ID has been copied to your clipboard.</span>
         </ul>
       </div>
       <div class="modal-footer">