Add UI changes (#349)

Add UI changes

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

@@ -18,8 +18,8 @@
             </svg>
           </div>
           <!-- /row-->
-          <div>
-            <em class="display-4 text-center">Loading the future... </em>
+          <div class="loadingText">
+            <em class="display-4 text-center">Loading the future ... </em>
           </div>
           <!-- /row-->
         </div>

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

 <section id="breeze">
   <div class="login d-flex align-items-center text-center">
     <div class="container">
-      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
-      <h3 class="display-5">Welcome</h3>
+      <p class="textback text-left mb-5 col-11 mx-auto">
+        <a (click)="onBackClicked()">
+          <span class="ico-arrow-left2"></span>
+        </a>
+      </p>
+      <h3 class="display-5">Create a new wallet</h3>
       <div class="row d-flex justify-content-center">
-        <form class="col-md-6 col-xs-12 text-left" [formGroup]="createWalletForm">
+        <form class="col-8 mx-auto row text-left" [formGroup]="createWalletForm">
           <!--<div class="form-group has-success">-->
-          <div class="form-group">
-            <label class="col-12 row" for="walletName">Name</label>
+          <div class="form-group col-12">
+            <label class="text-left" 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>
-          <div class="form-group">
+          <div class="form-group col-6">
             <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>
-          <div class="form-group">
+          <div class="form-group col-6">
             <label class="text-left" for="walletPasswordConfirmation">Confirm Password</label>
             <input type="password" class="form-control form-control-success" formControlName="walletPasswordConfirmation" id="walletPasswordConfirmation" placeholder="Enter a password.">
-            <div *ngIf="formErrors.walletPasswordConfirmation" class="form-control-feedback">{{ formErrors.walletPasswordConfirmation }}</div>
+            <div *ngIf="formErrors.walletPasswordConfirmation" class="text-danger mt-2">{{ formErrors.walletPasswordConfirmation }}</div>
+          </div>
+          <div class="col-12">
             <div class="form-control-feedback">Your password will be required to recover your wallet in the future. Keep it safe.</div>
           </div>
-          <div class="form-group">
+          <div class="form-group col-12">
             <label class="text-left" for="walletNetwork">Network</label>
             <select class="form-control custom-select" name="network" formControlName="selectNetwork">
               <!--<option value="main">Main</option>-->

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

 <section id="breeze">
   <div class="login d-flex align-items-center text-center">
     <div class="container">
-      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
-      <h3 class="display-5">Welcome</h3>
+      <p class="textback text-left mb-5 col-11 mx-auto">
+        <a (click)="onBackClicked()">
+          <span class="ico-arrow-left2"></span>
+        </a>
+      </p>
+      <h3 class="display-5 mb-4">Restore a wallet</h3>
       <div class="row d-flex justify-content-center">
-        <form class="col-md-6 col-xs-12 text-left" [formGroup]="recoverWalletForm">
+        <form class="col-8 mx-auto row text-left mt-4" [formGroup]="recoverWalletForm">
           <!--<div class="form-group has-success">-->
-          <div class="form-group">
-            <label class="col-12 row" for="walletName">Name</label>
+          <div class="form-group col-6">
+            <label class="text-left" 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 mt-2">{{ formErrors.walletName }}</div>
           </div>
-          <div class="form-group">
-            <label class="col-12 row" for="creationDate">Earliest Possible Creation Date</label>
+          <div class="form-group col-6">
+            <label class="text-left" for="creationDate">Earliest Possible Creation Date</label>
             <input type="text" class="form-control" bsDatepicker formControlName="walletDate" placeholder="Select the date your wallet was created." [bsConfig]="bsConfig" [maxDate]="maxDate"/>
-            <div *ngIf="formErrors.walletDate" class="form-control-feedback mt-2">{{ formErrors.walletDate }}</div>
+            <div *ngIf="formErrors.walletDate" class="text-danger mt-2">{{ formErrors.walletDate }}</div>
           </div>
-          <div class="form-group">
-            <label class="col-12 row" for="walletMnemonic">Secret Words</label>
+          <div class="col-12 mb-2">
+            <div *ngIf="formErrors.walletName" class="text-danger mt-2">{{ formErrors.walletName }}</div>
+          </div>
+          <div class="form-group col-12">
+            <label class="text-left" for="walletMnemonic">Secret Words</label>
             <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your secret words.">
-            <div *ngIf="formErrors.walletMnemonic" class="form-control-feedback mt-2">{{ formErrors.walletMnemonic }}</div>
+            <div *ngIf="formErrors.walletMnemonic" class="text-danger mt-2">{{ formErrors.walletMnemonic }}</div>
           </div>
-          <div class="form-group">
+          <div class="form-group col-6">
             <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 mt-2">{{ formErrors.walletPassword }}</div>
+            <div *ngIf="formErrors.walletPassword" class="text-danger mt-2">{{ formErrors.walletPassword }}</div>
           </div>
-          <div class="form-group">
+          <div class="form-group col-6">
             <label class="text-left" for="walletNetwork">Network</label>
             <select class="form-control custom-select" name="network" formControlName="selectNetwork">
               <!--<option value="main">Main</option>-->

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

@@ -5,15 +5,19 @@
         <button type="button" class="btn btn-link text-back" (click)="onBackClicked()">Back</button>
       </p>-->
 
-      <p class="textback text-left mb-5 offset-3 row"><a (click)="onBackClicked()">Back</a></p>
+      <p class="textback text-left col-8 mx-auto">
+        <a (click)="onBackClicked()">
+          <span class="ico-arrow-left2"></span>
+        </a>
+      </p>
       <h3 class="display-5">Welcome</h3>
-      <p class="lead my-5">
+      <p class="lead my-4 mb-5">
         If you would like to create a new wallet, please click Create. <br/>
         If you used Breeze before, please click Restore to recover your old wallet.
       </p>
-      <div class="row d-flex justify-content-center">
-        <button type="button" class="btn btn-linkgray btn-lg" (click)="onRecoverClicked()">Restore</button>
-        <button type="button" class="btn btn-darkgray btn-lg" (click)="onCreateClicked()">Create</button>
+      <div class="col-3 mt-4 mx-auto row d-flex justify-content-center">
+        <button type="button" class="btn btn-secondary btn-block btn-lg" (click)="onRecoverClicked()">Restore</button>
+        <button type="button" class="btn btn-darkgray btn-block btn-lg mt-3" (click)="onCreateClicked()">Create</button>
       </div>
     </div>
     <!-- /container-->

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

@@ -3,7 +3,7 @@
   <section id="content" class="bitcoin">
     <!-- JUMBOTRON-->
     <div class="jumbotron jumbotron-fluid">
-      <div class="container">
+      <div class="col-10 mx-auto">
         <div class="col-xs-12 text-left">
           <h5 class="text-capitalize walletName">{{ walletName }}</h5>
         </div>
@@ -48,15 +48,15 @@
     <!-- /JUMBOTRON-->
 
     <!-- TRANSACTIONS -->
-    <section id="transaction" class="container">
+    <section id="transaction" class="col-10 mx-auto">
       <h5>Latest Transactions</h5>
       <div *ngIf="transactionArray; else noTransactions">
         <div *ngFor="let transaction of transactionArray; 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-2 text-uppercase align-bottom">{{ transaction.transactionType }}</li>
-                <li class="list-inline-item col-3 amount text-left align-baseline">
+                <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">
                   <span *ngIf="transaction.transactionType == 'received'" class="text-success">+</span>
                   <span *ngIf="transaction.transactionType == 'sent'" class="text-danger">-</span>
                   {{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}
@@ -66,7 +66,7 @@
                   <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-3 text-right align-baseline transactionDate">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
+                <li class="list-inline-item col text-right align-baseline transactionDate">{{ transaction.transactionTimestamp * 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>Transactions</h5>
+    <section id="transaction" class="col-10 mx-auto">
+      <h5 class="mt-4">Transactions</h5>
       <div *ngIf="transactions; else noTransactions">
         <div *ngFor="let transaction of transactions">
           <div class="card" (click)="openTransactionDetailDialog(transaction)">

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

@@ -2,7 +2,7 @@
   <div class="modal-dialog modalBg" role="document">
     <div>
       <div class="modal-header">
-        <div class="bubble"><i class="icon-download"></i></div>
+        <div class="bubble"><i class="icon-switch"></i></div>
       </div>
       <div class="modal-body">
         <h5 class="modal-title text-uppercase" id="modalReceive">Log out</h5>
@@ -11,8 +11,8 @@
             <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>
-            <button type="button" class="btn btn-link" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button>
+            <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">Cancel</button>
+            <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Logout" (click)="onLogout()">Yes</button>
           </div>
           <br>
         </form>

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

@@ -7,18 +7,18 @@
         <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---Tumbling---V2-after-review" transform="translate(-9.000000, -30.000000)">
-            <g id="wallet" transform="translate(-5.000000, -10.000000)">
+        <g id="Breeze-Wallet---V2" 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, 10.000000)">
+                    <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="#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>
+                                    <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use>
+                                    <path d="M28.274994,20.6150151 C27.5661248,20.0811297 26.556326,19.867595 26.556326,19.867595 C26.556326,19.867595 27.4108533,19.3721633 27.7600442,18.8772172 C28.1096236,18.3820769 28.2843161,17.6149444 28.3135449,17.2169095 C28.3425794,16.8186803 28.4106502,15.1489534 27.1095353,14.1879015 C26.1031352,13.4442685 24.9498146,13.1490681 23.4010809,13.0530309 L23.4010809,9.68328014 L21.3234143,9.68328014 L21.3234143,13.0132177 C20.8598332,13.0132177 20.3180823,13.0132177 19.740888,13.0132177 L19.740888,9.68328014 L17.6634155,9.68328014 L17.6634155,13.0132177 C15.542537,13.0132177 13.576056,13.0132177 13.576056,13.0132177 L13.576056,15.1708021 C13.576056,15.1708021 14.4498102,15.1708021 14.7774437,15.1708021 C15.1049802,15.1708021 15.6875153,15.2072166 15.9350369,15.4842583 C16.1826556,15.7608144 16.2263531,15.9065695 16.2263531,16.445116 C16.2263531,16.9838566 16.2264502,24.8384192 16.2264502,25.0423405 C16.2264502,25.2461647 16.187608,25.4984445 16.0127212,25.6636207 C15.8381258,25.828797 15.6634332,25.8673478 15.245783,25.8673478 C14.8282298,25.8673478 14.0032226,25.8673478 14.0032226,25.8673478 L13.576056,28.3627618 C13.576056,28.3627618 15.6073063,28.3627618 17.6634155,28.3627618 L17.6634155,31.6832801 L19.7409851,31.6832801 L19.7409851,28.3627618 C20.3793558,28.3627618 20.935187,28.3627618 21.3235114,28.3627618 L21.3235114,31.6832801 L23.4011781,31.6832801 L23.4011781,28.3079943 C23.9382679,28.2766293 24.4390403,28.2359421 24.7311333,28.1976826 C25.3234761,28.1201925 26.6631419,27.9648239 27.9158012,27.0909726 C29.1680722,26.2170243 29.4493865,24.8480327 29.4786152,23.4695247 C29.5081352,22.0909197 28.9831835,21.1489975 28.274994,20.6150151 Z M19.740888,15.3627794 C19.740888,15.3627794 20.4010103,15.3046133 21.0515192,15.3141296 C21.7022224,15.3237431 22.2747557,15.3432612 23.1293801,15.6054458 C23.9836161,15.8677274 24.4880785,16.5085258 24.507888,17.2658506 C24.527212,18.0231754 24.1967624,18.5278321 23.6145186,18.8482798 C23.0320805,19.1686305 22.2266885,19.3434201 21.4690724,19.3722604 C20.7119417,19.4014892 19.740888,19.3722604 19.740888,19.3722604 L19.740888,15.3627794 L19.740888,15.3627794 Z M24.3912645,25.2946203 C23.9155452,25.5569019 22.9640096,25.7898577 22.041897,25.8576373 C21.119493,25.9257081 19.740888,25.8965765 19.740888,25.8965765 L19.740888,21.4401194 C19.740888,21.4401194 21.0613269,21.3723399 22.0905468,21.4401194 C23.1195725,21.5083845 23.9836161,21.7702777 24.3717463,21.9647798 C24.7600707,22.1587963 25.4399054,22.5858658 25.4399054,23.6054722 C25.4399054,24.6246903 24.8666924,25.0325329 24.3912645,25.2946203 Z" id="BTC_alt_1_" fill="#189BC5" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(21.527929, 20.683280) rotate(-345.000000) translate(-21.527929, -20.683280) "></path>
                                 </g>
                             </g>
                         </g>

Breeze.UI/src/assets/images/ico_stratis.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>stratis</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---dashboard-&gt;-BTC" transform="translate(-14.000000, -92.000000)">
+        <g id="Breeze-Wallet---V2" 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)">
@@ -13,7 +13,7 @@
                             <g id="icons">
                                 <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>
+                                    <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="#189BC5"></path>
                                 </g>
                             </g>
                         </g>

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/_code.scss

@@ -13,7 +13,6 @@ 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,22 +4,7 @@
 // without modifying source files.
 
 body {overflow-x: hidden;}
-a, button {
-  &:hover {
-    cursor: pointer;
-    -webkit-transform-origin: center bottom;
-    transform-origin: center bottom;
-    -webkit-animation-duration: 2s;
-    animation-duration: 2s;
-  }
-}
-button {
-  &:disabled  {
-    background: lighten($gray,20%) !important;
-    border-color: lighten($gray,20%) !important;
-    &:hover {cursor: not-allowed !important;}
-  }
-}
+a, button {&:hover {cursor: pointer !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 */
@@ -29,12 +14,13 @@ code {color: $spacegray !important;}
 .badge {
   &.badge-default {color: $gray;}
 }
-
-// feedbacks
+// feedback
 .form-control-feedback {
   color: $pink;
-  font-style: italic;
+  margin: .5em 0;
+  text-align: left !important;
   font-size: .85em;
+  font-style: italic;
 }
 
 // loading
@@ -42,18 +28,20 @@ code {color: $spacegray !important;}
   width: 150px;
   height: 150px;
   display:inline-block;
-  fill: $darkgray !important;
+  fill: white !important;
 }
-
-em {
-  &.display-4 {
-    font-size: 1.6em;
-    color: $darkgray;
+.loadingText {
+  .display-4 {
+    font-size: 1rem;
     font-weight: 400;
     padding-right: 5px;
+    border-right: .1em solid $blue;
     white-space: nowrap;
+    -webkit-animation: blink-caret .5s step-end infinite alternate;
+    color: white;
   }
 }
+@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
 
 // datepicker
 .datepicker__input {
@@ -80,7 +68,7 @@ em {
   width: 70px;
   height: 100%;
   overflow-y: auto;
-  background: #122B41;
+  background: $brand-primary;
   .menu {
     li {
       opacity: .3;
@@ -93,10 +81,10 @@ em {
           opacity: 1;
           width: 2px;
           height: 20px;
-          background-color: $brand-primary;
+          background-color: white;
           float: right;
           position: absolute;
-          margin: 11px 6px 0 8px;
+          margin: 11px 6px 0 6px;
         }
       }
       &:hover {
@@ -117,9 +105,9 @@ em {
       text-align: center;
       transition: .1s ease-in;
       a {
-        color: #7385A0;
+        color: rgba($white,.6);
         &:hover {
-          color:lighten(#7385A0, 15%);
+          color:$white;
           text-decoration: none;
         }
       }
@@ -135,7 +123,7 @@ em {
 .jumbotron {
   h5 {
     font-size: .85em;
-    color: $gray-dark;
+    color: $gray;
     margin-bottom: 0;
 
     &.walletName {
@@ -148,7 +136,7 @@ em {
   p {margin-bottom: 0 !important;}
   .lead {
     color: $black;
-    font-size: 1.85em;
+    font-size: 1.65em;
     font-weight: 500;
     margin-bottom: 0;
 
@@ -164,24 +152,7 @@ em {
   }
 }
 
-// transactions
-#transaction {
-  padding-top: 2em;
-  .muted {opacity: .5;}
-  h5 {
-    font-size: .85em;
-    color: $gray-dark;
-  }
-  .card {
-    &:hover {
-      cursor: pointer;
-      text-decoration: none !important;
-    }
-    li {line-height: 2.5em;}
-  }
-}
-
-// badges
+// bagdes
 .badge {
   &.badge-danger {color: $pink;}
   &.badge-warning {color: $yellow;}
@@ -193,7 +164,7 @@ em {
   background: $white;
   width: auto;
   height: 40px;
-  border: 1px solid #DBDBDB;
+  border: 1px solid $teal;
   box-shadow: 0 1px 11px 0 rgba(80,96,120,.2);
   border-radius: 80px;
   position: fixed;
@@ -257,12 +228,27 @@ em {
   }
 }
 #modalSend {
-  label {font-size: .825em;}
+  label {
+    color: $gray;
+    font-size: .825em;
+  }
   .float-right {a {text-decoration: underline; &:hover {text-decoration: none;}}}
   // Fee Buttons
   .radioButtons {
-    .btn {
-      border-radius: 50px;
+    .btn {border-radius: 50px;}
+    .btn-outline-success,
+    .btn-outline-danger,
+    .btn-outline-warning {
+      &:hover {color: white !important;}
+    }
+    .btn-outline-success,
+    .btn-outline-danger,
+    .btn-outline-warning {
+      &.active,
+      .show > &.dropdown-toggle {
+        color: white !important;
+        outline: none;
+      }
     }
   }
   p {
@@ -271,27 +257,31 @@ em {
     font-style: italic;
   }
   .btn-link {padding: 0 !important;}
-  .btn-primary {
-    &:disabled {opacity: 1 !important;}
-  }
+  .form-group {margin-bottom: .5rem;}
 }
 #modalReceive {
+  .myAddress {margin-bottom: 1rem;}
   .modal-body {padding: 0 3em;}
-  label {font-size: .825em;}
+  label {
+    color: $gray;
+    font-size: .825em;
+  }
 }
 #modalDetail, #modalCheck, #modalSettings {
   .blockLabel {
-    color: $blue;
-    text-transform: uppercase;
+    color: $gray;
     font-size: .825em;
-    line-height: 2em;
   }
   .blockText {
     color: $darkgray;
   }
 }
 #modalCheck {
-  .lead, .d-block {animation: 2s ease 0s normal forwards 1 fadein;}
+  .lead {
+    animation: 2s ease 0s normal forwards 1 fadein;
+    font-size: 1em !important;
+  }
+  .card {animation: 3s ease 0s normal forwards 1 fadein;}
   @keyframes fadein {
     0% {opacity:0;}
     66% {opacity:0;}
@@ -456,15 +446,15 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
  .slider .hide{display:none}
  .slider-track{position:absolute;cursor:pointer;background-image: linear-gradient(270deg, #2ECCA9 0%, #F7931A 100%);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);border-radius:4px}
  .slider-selection{position:absolute;background-image: linear-gradient(270deg, #2ECCA9 0%, #F7931A 51%, #FF5B8A 100%);; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}
- .slider-track-low {position:absolute;background-color:#DCE8F1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}
- .slider-track-high {position:absolute;background-color:#DCE8F1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}
+ .slider-track-low {position:absolute;background-color:$gray-lighter;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}
+ .slider-track-high {position:absolute;background-color:$gray-lighter;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:4px}
  .slider-handle:nth-child(1) {position:absolute;top:0;width:14px;height:14px;background-color: $brand-danger !important;}
  .slider-handle:nth-child(2) {position:absolute;top:0;width:14px;height:14px;background-color: $brand-primary !important;}
  .slider-handle:nth-child(3) {position:absolute;top:0;width:14px;height:14px;background-color: $brand-success !important;}
  .slider-handle.round{border-radius:50%}
  .slider-handle.triangle{background:transparent none}
  .slider-handle.custom{background:transparent none}
- .slider-tick{position:absolute;width:14px;height:14px;background-color: $white; border: 2px solid #DCE8F1;}
+ .slider-tick{position:absolute;width:14px;height:14px;background-color: $white; border: 2px solid $gray-lighter;}
  .slider-tick.round{border-radius:50%}
  .slider-tick.triangle{background:transparent none}
  .slider-tick.custom{background:transparent none}
@@ -476,34 +466,45 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
 // LOGIN
 .login {
   height: 100vh;
-  background-image: linear-gradient(-180deg, #FFFFFF 33%, rgba(47,186,255,0.43) 100%);
+  background-image: linear-gradient(0deg, #1488C8 0%, #20B7C1 99%);
   border: 2px solid $white;
+  border-top: none !important;
   box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
 
   .container {
+    .form-control-feedback {
+      color: $white;
+      margin: 1em 0;
+      background-color: rgba($pink, .8);
+      display: inline-block;
+      padding: .3em 1em;
+      border-radius: 40px;
+    }
     label {
-      color: $blue;
-      text-transform: uppercase;
+      color: $gray-lightest;
       font-size: .825em;
       text-align: left !important;
     }
     .display-5 {
       font-family: "Lato-Bold";
       font-size: 1.25em;
-      color: $darkgray;
+      color: $white;
       text-transform: uppercase;
     }
     .lead {
-      font-size: 1.15em;
-      color: $blue;
-      font-weight: 400;
+      font-size: 1em;
+      color: rgba($gray-lighter, .9);
+      font-weight: 300;
       line-height: 1.25em;
-      margin: 0 0 2em 0;
+      margin: 2rem 0 .5rem 0;
+    }
+    .btn-darkgray {
+      font-size: 1em;
     }
-    .btn-darkgray {font-size: 1em;}
     .btn-linkgray {
+      color: $darkgray;
       background-color: transparent !important;
       text-decoration: underline;
       &:hover {
@@ -511,12 +512,16 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
         color: lighten($darkgray,10%);
       }
     }
-    form {margin: 2em 0;}
+    form {margin-bottom: 1em;}
     .textback {
       a {
-        color: #C0BECC;
-        text-decoration: underline;
-        &:hover {text-decoration: none;}
+        font-size: 1.5rem;
+        color: $darkgray;
+        text-decoration: none;
+        &:hover {
+          text-decoration: none;
+          color: lighten($darkgray,20%);
+        }
       }
     }
     .badge {
@@ -534,25 +539,25 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
   padding-top: 4em;
   label {
     font-size: .85em;
-    color: $gray-dark;
+    color: $gray;
   }
   .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;
+    margin-bottom: 2.75em;
+
+    .badge {
+      &.badge-default {
+        padding: 0.6em 1.2em;
+        font-size: 1.1em;
+      }
+  }
 
     .total {
       td {font-weight: bold;}

Breeze.UI/src/scss/_dropdown.scss

@@ -51,7 +51,7 @@
   background-color: $dropdown-bg;
   background-clip: padding-box;
   border: $dropdown-border-width solid $dropdown-border-color;
-  border-radius: 50px;
+  @include border-radius($border-radius);
   @include box-shadow($dropdown-box-shadow);
 }
 

Breeze.UI/src/scss/_forms.scss

@@ -254,7 +254,7 @@ select.form-control-lg {
 .form-control-success,
 .form-control-warning,
 .form-control-danger {
-  padding-left: ($input-padding-x * 4);
+  padding-left: $input-padding-x;
   background-repeat: no-repeat;
   background-position: center left ($input-height / 4);
   background-size: ($input-height / 2) ($input-height / 2);

Breeze.UI/src/scss/_jumbotron.scss

 .jumbotron {
   padding: $jumbotron-padding;
   background-color: $jumbotron-bg;
-  border-bottom: 1px solid $gray-light;
   @include border-radius($border-radius-lg);
 
   @include media-breakpoint-up(sm) {
-    padding: $jumbotron-padding $jumbotron-padding;
+    padding: $jumbotron-padding ($jumbotron-padding / 2) $jumbotron-padding;
   }
 }
 

Breeze.UI/src/scss/_modal.scss

@@ -92,7 +92,7 @@
   text-align: center;
   line-height: $modal-title-line-height;
   margin-bottom: 1em;
-  color: $blue;
+  color: #7385A0;
   font-size: 1em;
 }
 

Breeze.UI/src/scss/_navbar.scss

@@ -22,7 +22,7 @@
   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;
+  border-bottom: 1px solid $teal;
   height: auto;
 }
 

Breeze.UI/src/scss/_variables.scss

@@ -93,13 +93,14 @@
 
 // Start with assigning color names to specific hex values.
 $white:  #fff !default;
-$black:  #444 !default;
+$black:  #2E475C !default;
 $red:    #d9534f !default;
-$orange: #f69d32 !default;
+$orange: #F69D32 !default;
 $yellow: #D1C312 !default;
 $green:  #2ECCA9 !default;
-$blue:   #7385A0 !default;
-$teal:   #DBDBDB !default;
+$blue:   #189BC5 !default;
+$blue-link: #148DC7 !default;
+$teal:   #D7E0ED !default;
 $pink:   #FF5B8A !default;
 $purple: #613d7c !default;
 $spacegray: #99A4B4 !default;
@@ -108,12 +109,12 @@ $darkgray: #1B354B !default;
 // Create grayscale
 $gray-dark:                 #878685 !default;
 $gray:                      #98A3B3 !default;
-$gray-light:                #DDDCDC !default;
-$gray-lighter:              #F3F3F3 !default;
-$gray-lightest:             #f7f7f9 !default;
+$gray-light:                #BAC4D1 !default;
+$gray-lighter:              #DCE8F1 !default;
+$gray-lightest:             #F5F9FC !default;
 
 // Reassign color vars to semantic color scheme
-$brand-primary:             $orange !default;
+$brand-primary:             $blue !default;
 $brand-success:             $green !default;
 $brand-info:                $teal !default;
 $brand-warning:             $yellow !default;
@@ -183,7 +184,7 @@ $sizes: (
 //
 // Settings for the `<body>` element.
 
-$body-bg:       $white !default;
+$body-bg:       #F3F6F8 !default;
 $body-color:    $gray-dark !default;
 $inverse-bg:    $gray-dark !default;
 $inverse-color: $gray-lighter !default;
@@ -193,7 +194,7 @@ $inverse-color: $gray-lighter !default;
 //
 // Style anchor elements.
 
-$link-color:            $brand-primary !default;
+$link-color:            $blue-link !default;
 $link-decoration:       none !default;
 $link-hover-color:      darken($link-color, 15%) !default;
 $link-hover-decoration: underline !default;
@@ -339,7 +340,7 @@ $transition-collapse:    height .35s ease !default;
 //
 // Customizes the `.table` component with basic values, each used across all table variations.
 
-$table-cell-padding:            .5rem .75rem !default;
+$table-cell-padding:            .75rem !default;
 $table-sm-cell-padding:         .3rem !default;
 
 $table-bg:                      transparent !default;
@@ -374,9 +375,9 @@ $btn-primary-color:              $white !default;
 $btn-primary-bg:                 $brand-primary !default;
 $btn-primary-border:             $btn-primary-bg !default;
 
-$btn-secondary-color:            $gray-dark !default;
+$btn-secondary-color:            $gray !default;
 $btn-secondary-bg:               $white !default;
-$btn-secondary-border:           $gray-light !default;
+$btn-secondary-border:           $teal !default;
 
 $btn-info-color:                 $white !default;
 $btn-info-bg:                    $brand-info !default;
@@ -686,8 +687,8 @@ $pagination-disabled-border:           #ddd !default;
 
 // Jumbotron
 
-$jumbotron-padding:              1.75rem !default;
-$jumbotron-bg:                   $gray-lighter !default;
+$jumbotron-padding:              3rem !default;
+$jumbotron-bg:                   transparent !default;
 
 
 // Form states and alerts
@@ -798,8 +799,8 @@ $badge-pill-border-radius:    10rem !default;
 // Padding applied to the modal body
 $modal-inner-padding:         3em !default;
 
-$modal-dialog-margin:         20px !default;
-$modal-dialog-sm-up-margin-y: 20px !default;
+$modal-dialog-margin:         15px !default;
+$modal-dialog-sm-up-margin-y: 15px !default;
 
 $modal-title-line-height:     $line-height-base !default;
 
@@ -953,7 +954,7 @@ $close-text-shadow:           0 1px 0 $white !default;
 
 // Code
 
-$code-font-size:              91% !default;
+$code-font-size:              90% !default;
 $code-padding-x:              .4rem !default;
 $code-padding-y:              .2rem !default;
 $code-color:                  #bd4147 !default;

Breeze.UI/src/scss/bootstrap.scss

@@ -57,5 +57,4 @@
 @import "font";
 
 // Themes
-@import "themes/bitcoin";
-@import "themes/stratis";
+@import "themes/light";

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

@@ -7,18 +7,9 @@
 //
 /////////////////////////////
 
-// links
-$link-color : #D0BF90;
-
 // buttons
 $btn-primary-color: $white !important;
-$btn-primary-bg:                 $brand-primary !default;
-$btn-primary-border:             $btn-primary-bg !default;
-
-$btn-secondary-color:            $gray-dark !default;
-$btn-secondary-bg:               $white !default;
-$btn-secondary-border:           $gray-light !default;
-
+//
 .btn-primary {
   @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
 }
@@ -29,13 +20,38 @@ $btn-secondary-border:           $gray-light !default;
 //    CUSTOM
 //
 /////////////////////////////
+.btn-lg {font-size:1em;}
+.btn-primary {
+    background-color: transparent;
+    background-image: linear-gradient(90deg, #20B7C1 0%, #1387C8 100%) !important;
+    &:hover {
+      background-image: linear-gradient(-90deg, #20B7C1 0%, #1387C8 100%) !important;
+      border-color: transparent !important;
+    }
+  }
+  .btn-secondary {
+    color: $gray !important;
+    &:hover {background-color: $white !important;}
+}
+
+// LOGIN / SETUP
+.login {
+  .text-danger {
+    background-color: rgba(255,255,255,.7);
+    padding: 0.25rem 1rem;
+    border-radius: 50px;
+    display: inline-block;
+    font-size: .7rem;
+  }
+}
+
 
 // NAVBAR
 #navbarBreeze {
   .navbar-nav {
     .nav-item {
       .nav-link {
-        color: $gray-dark;
+        color: $gray;
         font-size: .86rem;
         &:hover {color: lighten($brand-primary,20%);}
         &.is-active {
@@ -62,12 +78,17 @@ $btn-secondary-border:           $gray-light !default;
 
     // TRANSACTIONS
     #transaction {
+      .muted {opacity: .5;}
+      h5 {
+        font-size: .85em;
+        color: $gray;
+      }
       a {color: $link-color;}
       // Cards
       .card {
         border: $card-border-width solid $teal;
-        color: #BFBFBF !important;
-        font-size: .85em;
+        color: #7385A0 !important;
+        font-size: .85em !important;
         .amount {
           color: $black;
           font-weight: 600;
@@ -77,9 +98,15 @@ $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);
+          cursor: pointer;
+          text-decoration: none !important;
+          background: #F5FCFF;
+          border: 1px solid #BCE8FE;
+          box-shadow: 4px 2px 11px 0 rgba(80,96,120,0.10);
+        }
+        li {
+          line-height: 2.5em;
+          &.transactionDate {color: $gray-light;}
         }
       }
     }
@@ -89,11 +116,11 @@ $btn-secondary-border:           $gray-light !default;
       i {
         font-size: 6.5rem;
         &.OFF {
-          -webkit-text-fill-color: #DCE8F1 !important;
-          fill: #DCE8F1 !important;
+          -webkit-text-fill-color: $gray-lighter !important;
+          fill: $gray-lighter !important;
         }
         &.ON {
-          -webkit-text-fill-color:: $brand-primary !important;
+          -webkit-text-fill-color: $brand-primary !important;
           fill: $brand-primary !important;
         }
       }