fix navbar & modal transaction details

Breeze.UI/package.json

@@ -69,7 +69,7 @@
     "cross-env": "5.0.1",
     "css-loader": "^0.28.4",
     "cssnano": "^3.10.0",
-    "electron": "^1.6.11",
+    "electron": "^1.7.4",
     "electron-packager": "^8.7.2",
     "electron-reload": "1.2.1",
     "exports-loader": "^0.6.4",
@@ -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

@@ -5,7 +5,7 @@
       <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">
+          <form class="col-md-6 col-xs-12 text-left" [formGroup]="openWalletForm">
             <div class="form-group">
               <label class="col-12 row" for="Select">Wallet</label>
               <select class="form-control custom-select col-12" formControlName="selectWallet">
@@ -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-linkgray btn-lg" (click)="onCreateClicked()">Create or restore a wallet</button>
       </div>
     </div>
     <!-- /container-->
@@ -40,4 +40,3 @@
   <!-- /login-->
 </section>
 <!-- /breeze-->
-

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

@@ -8,11 +8,11 @@
         <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>
+          <li class="list-inline-item col-9 blockText text-capitalize">{{ 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>
+          <li class="list-inline-item col-9 blockText text-success">{{transaction.amount | coinNotation }}</li>
         </ul>
         <!--<ul class="list-inline row">
           <li class="list-inline-item col blockLabel">From</li>
@@ -20,17 +20,17 @@
         </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>
+          <li class="list-inline-item col-9 blockText">{{ transaction.timestamp * 1000 | date:'medium' }}</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>
+          <li class="list-inline-item col blockLabel my-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 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">

Breeze.UI/src/scss/_custom.scss

@@ -34,7 +34,7 @@ code {color: $spacegray !important;}
 #content {
     width: 100%;
     position: relative;
-    padding: 63px 0 70px 70px;
+    padding: 0 0 70px 70px;
 }
 
 // sidebar
@@ -120,6 +120,7 @@ code {color: $spacegray !important;}
 
 // transactions
 #transaction {
+  padding-top: 2em;
   h5 {
     font-size: .85em;
     color: $gray-dark;

Breeze.UI/src/scss/_jumbotron.scss

 .jumbotron {
   padding: $jumbotron-padding;
-  margin-bottom: $jumbotron-padding;
   background-color: $jumbotron-bg;
-  border-top: 1px solid $gray-light;
   border-bottom: 1px solid $gray-light;
   @include border-radius($border-radius-lg);
 

Breeze.UI/src/scss/_navbar.scss

@@ -19,10 +19,11 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: $navbar-padding-y $navbar-padding-x 0 70px;
+  padding: 0 $navbar-padding-x 0 70px;
   box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.08);
   background: $white;
   border-bottom: 1px solid $gray-light;
+  height: auto;
 }
 
 
@@ -62,7 +63,7 @@
     font-size: .96rem;
     letter-spacing: 0.53px;
     font-weight: 500;
-    padding-bottom: 1.25rem;
+    padding: 1.5rem 0 1.25rem;
   }
 }
 

Breeze.UI/src/scss/_variables.scss

@@ -223,7 +223,7 @@ $container-max-widths: (
   sm: 540px,
   md: 720px,
   lg: 960px,
-  xl: 1140px
+  xl: 1080px
 ) !default;
 @include _assert-ascending($container-max-widths, "$container-max-widths");