Merge branch 'design' of http://www.github.com/stratisproject/breeze into design

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

@@ -4,14 +4,11 @@
     <!-- JUMBOTRON-->
     <div class="jumbotron jumbotron-fluid">
       <div class="container">
+        <div class="col-xs-12 text-left">
+          <h5 class="text-capitalize walletName">{{ walletName }}</h5>
+        </div>
         <div class="row d-flex align-items-center">
-          <div class="col-xs-12 col-md-3 text-left">
-            <h5>Active Wallet</h5>
-            <p class="lead">
-              <span class="walletName text-capitalize">{{ walletName }}</span>
-            </p>
-          </div>
-          <div class="col-xs-12 col-md-3 text-left">
+          <div class="col-md-4 text-left">
             <h5>Active balance</h5>
             <p class="lead">
               <!--<strong><span class="h2">29</span>.76500293</strong>-->
@@ -28,7 +25,7 @@
               <small class="text-uppercase">usd</small>
             </p>
           </div>-->
-          <div class="col-xs-12 col-md-3 text-left">
+          <div class="col-md-4 text-left">
             <h5>Unconfirmed balance</h5>
             <p class="lead">
               <strong>{{ (unconfirmedBalance | coinNotation) || (0 | coinNotation) }}</strong>
@@ -36,7 +33,7 @@
             </p>
           </div>
           <!-- /col-->
-          <div class="col-xs-12 col-md-3 text-right">
+          <div class="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>
@@ -58,16 +55,18 @@
           <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-3 text-uppercase align-bottom">{{ transaction.transactionType }}</li>
-                <li class="list-inline-item col-4 amount text-left align-baseline">
+                <li class="list-inline-item hidden-xs-down col-2 text-uppercase align-bottom">{{ transaction.transactionType }}</li>
+                <li class="list-inline-item col-3 amount text-left align-baseline">
                   <span *ngIf="transaction.transactionType == 'received'" class="text-success">+</span>
                   <span *ngIf="transaction.transactionType == 'sent'" class="text-danger">-</span>
                   {{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}
                   <small class="text-uppercase">{{ coinUnit }}</small>
+                </li>
+                <li class="list-inline-item col amount text-left align-baseline">
                   <span *ngIf="transaction.transactionConfirmedInBlock" class="badge badge-success text-capitalize">Confirmed</span>
                   <span *ngIf="!transaction.transactionConfirmedInBlock" class="badge badge-warning text-capitalize">Pending</span>
                 </li>
-                <li class="list-inline-item col text-right align-baseline transactionDate">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
+                <li class="list-inline-item col-3 text-right align-baseline transactionDate">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
               </ul>
             </div>
           </div>

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

@@ -8,28 +8,28 @@
         <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 text-capitalize">{{ transaction.transactionType }}</li>
+          <li class="list-inline-item col-8 blockText text-capitalize">{{ transaction.transactionType }}</li>
         </ul>
         <ul class="list-inline row">
           <li class="list-inline-item col blockLabel">Amount</li>
-          <li *ngIf="transaction.transactionType == 'received'" class="list-inline-item col-9 blockText text-success">{{ transaction.transactionAmount | coinNotation }} {{ coinUnit }}</li>
-          <li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-9 blockText text-danger">-{{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}  {{ coinUnit }}</li>
+          <li *ngIf="transaction.transactionType == 'received'" class="list-inline-item col-8 blockText text-success">{{ transaction.transactionAmount | coinNotation }} {{ coinUnit }}</li>
+          <li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-8 blockText text-danger">-{{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}  {{ coinUnit }}</li>
         </ul>
         <!-- <ul class="list-inline row" *ngIf="transaction.transactionType == 'sent'">
             <li class="list-inline-item col blockLabel">Fee</li>
-            <li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-9 blockText text-danger">{{ transaction.transactionFee | coinNotation }}  {{ coinUnit }}</li>
+            <li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-8 blockText text-danger">{{ transaction.transactionFee | coinNotation }}  {{ coinUnit }}</li>
         </ul> -->
         <ul class="list-inline row">
           <li class="list-inline-item col blockLabel">Date</li>
-          <li class="list-inline-item col-9 blockText">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
+          <li class="list-inline-item col-8 blockText">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
         </ul>
         <ul *ngIf="transaction.transactionConfirmedInBlock" class="list-inline row">
           <li class="list-inline-item col blockLabel">Block</li>
-          <li class="list-inline-item col-9 blockText">#{{ transaction.transactionConfirmedInBlock }}</li>
+          <li class="list-inline-item col-8 blockText">#{{ transaction.transactionConfirmedInBlock }}</li>
         </ul>
         <ul class="list-inline row">
             <li class="list-inline-item col blockLabel">Confirmations</li>
-            <li class="list-inline-item col-9 blockText">{{ confirmations }}</li>
+            <li class="list-inline-item col-8 blockText">{{ confirmations }}</li>
         </ul>
         <ul class="list-inline row">
           <li class="list-inline-item col blockLabel mb-3">Transaction ID</li>

Breeze.UI/src/scss/_custom.scss

@@ -15,8 +15,8 @@ a, button {
 }
 button {
   &:disabled  {
-    background: #EFEFEF !important;
-    border-color: #EFEFEF !important;
+    background: lighten($gray,20%) !important;
+    border-color: lighten($gray,20%) !important;
     &:hover {cursor: not-allowed !important;}
   }
 }
@@ -136,6 +136,14 @@ em {
   h5 {
     font-size: .85em;
     color: $gray-dark;
+    margin-bottom: 0;
+
+    &.walletName {
+      color: $black;
+      font-size: 1em;
+      font-weight: bolder;
+      margin-bottom: 1.5em;
+    }
   }
   p {margin-bottom: 0 !important;}
   .lead {
@@ -144,10 +152,6 @@ em {
     font-weight: 500;
     margin-bottom: 0;
 
-    .walletName {
-      font-size: 0.7em;
-      font-weight: normal;
-    }
     .h2 {
       font-size: 2em;
       font-weight: 600;
@@ -267,6 +271,9 @@ em {
     font-style: italic;
   }
   .btn-link {padding: 0 !important;}
+  .btn-primary {
+    &:disabled {opacity: 1 !important;}
+  }
 }
 #modalReceive {
   .modal-body {padding: 0 3em;}
@@ -277,6 +284,7 @@ em {
     color: $blue;
     text-transform: uppercase;
     font-size: .825em;
+    line-height: 2em;
   }
   .blockText {
     color: $darkgray;

Breeze.UI/src/scss/_jumbotron.scss

@@ -5,7 +5,7 @@
   @include border-radius($border-radius-lg);
 
   @include media-breakpoint-up(sm) {
-    padding: ($jumbotron-padding * 2) $jumbotron-padding;
+    padding: $jumbotron-padding $jumbotron-padding;
   }
 }
 

Breeze.UI/src/styles.css

@@ -17,8 +17,8 @@ a:hover, button:hover {
 }
 
 button:disabled {
-  background: #EFEFEF !important;
-  border-color: #EFEFEF !important;
+  background: #d3d7de !important;
+  border-color: #d3d7de !important;
 }
 
 button:disabled:hover {
@@ -161,6 +161,14 @@ em.display-4 {
 .jumbotron h5 {
   font-size: .85em;
   color: #878685;
+  margin-bottom: 0;
+}
+
+.jumbotron h5.walletName {
+  color: #444;
+  font-size: 1em;
+  font-weight: bolder;
+  margin-bottom: 1.5em;
 }
 
 .jumbotron p {
@@ -174,11 +182,6 @@ em.display-4 {
   margin-bottom: 0;
 }
 
-.jumbotron .lead .walletName {
-  font-size: 0.7em;
-  font-weight: normal;
-}
-
 .jumbotron .lead .h2 {
   font-size: 2em;
   font-weight: 600;
@@ -322,6 +325,10 @@ em.display-4 {
   padding: 0 !important;
 }
 
+#modalSend .btn-primary:disabled {
+  opacity: 1 !important;
+}
+
 #modalReceive .modal-body {
   padding: 0 3em;
 }
@@ -334,6 +341,7 @@ em.display-4 {
   color: #7385A0;
   text-transform: uppercase;
   font-size: .825em;
+  line-height: 2em;
 }
 
 #modalDetail .blockText, #modalCheck .blockText, #modalSettings .blockText {
@@ -3794,7 +3802,7 @@ tbody.collapse.show {
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid rgba(68, 68, 68, 0.15);
-  border-radius: 0.25rem;
+  border-radius: 50px;
 }
 
 .dropdown-divider {
@@ -5315,7 +5323,7 @@ a.badge:focus, a.badge:hover {
 
 @media (min-width: 576px) {
   .jumbotron {
-    padding: 3.5rem 1.75rem;
+    padding: 1.75rem 1.75rem;
   }
 }