From 08e43144912cfeee985951f5f2c49168c664f922 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Fri, 5 Jan 2018 11:40:21 -0300
Subject: [PATCH] Fix spendable amount, color header (walletDetails)

---
 src/pages/wallet-details/wallet-details.html | 11 +++++------
 src/pages/wallet-details/wallet-details.scss | 17 +++++++++++------
 src/pages/wallet-details/wallet-details.ts   |  3 +++
 3 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/pages/wallet-details/wallet-details.html b/src/pages/wallet-details/wallet-details.html
index dcd5080e6..84c1a54e1 100644
--- a/src/pages/wallet-details/wallet-details.html
+++ b/src/pages/wallet-details/wallet-details.html
@@ -1,10 +1,10 @@
-<ion-header>
-  <ion-navbar>
+<ion-header no-border [ngStyle]="{'background': wallet.color}">
+  <ion-navbar transparent>
     <ion-title>{{wallet.name}}</ion-title>
   </ion-navbar>
 </ion-header>
 
-<ion-content>
+<ion-content fullscreen>
 
   <ion-refresher (ionRefresh)="doRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
@@ -33,15 +33,14 @@
         </div>
 
         <div class="balance-spendable" *ngIf="!wallet.balanceHidden && !wallet.scanning && showBalanceButton && wallet.status">
-          <ion-icon name="checkmark"></ion-icon>
+          <div translate>Spendable</div>
           <strong>
             {{wallet.status.spendableBalanceStr}}
           </strong>
           &nbsp;
           <span>
-            {{wallet.status.spendableBalanceAlternative}} {{wallet.status.alternativeIsoCode}}
+            ({{wallet.status.spendableBalanceAlternative}} {{wallet.status.alternativeIsoCode}})
           </span>
-          <ion-icon name="arrow-round-forward"></ion-icon>
         </div>
 
         <div class="balance-error" *ngIf="updateStatusError" (tap)="updateAll(true)">
diff --git a/src/pages/wallet-details/wallet-details.scss b/src/pages/wallet-details/wallet-details.scss
index fd5b9fa90..cc4bac702 100644
--- a/src/pages/wallet-details/wallet-details.scss
+++ b/src/pages/wallet-details/wallet-details.scss
@@ -1,16 +1,22 @@
 page-wallet-details {
+  ion-header {
+    .toolbar-title, ion-icon {
+      color: color($colors, light);
+    }
+    background: color($colors, primary);
+  }
   .balance-card {
     background: color($colors, primary);
   }
   .balance-header {
     position: relative;
     color: color($colors, light);
-    height: 13rem;
+    height: 10rem;
     text-align: center;
   }
   .balance-str {
     cursor: pointer;
-    padding-top: 4rem;
+    padding-top: 1.5rem;
     font-size: 35px;
     font-weight: 600;
   }
@@ -19,15 +25,14 @@ page-wallet-details {
     font-weight: 500;
   }
   .balance-hidden {
-    padding-top: 5rem;
+    padding-top: 2rem;
     font-size: 20px;
     font-weight: 500;
   }
   .balance-error {
-    padding: 10% 1rem 0 1rem;
+    padding: 5% 1rem 0 1rem;
   }
   .balance-spendable {
-    padding-top: 5rem;
     cursor: pointer;
     ion-icon {
       vertical-align: middle;
@@ -71,7 +76,7 @@ page-wallet-details {
   .wallet-info {
     font-weight: 500;
     color: color($colors, light);
-    height: 35px;
+    height: 30px;
     img {
       float: left;
       margin-right: 4px;
diff --git a/src/pages/wallet-details/wallet-details.ts b/src/pages/wallet-details/wallet-details.ts
index e5b335fe0..bc34a8111 100644
--- a/src/pages/wallet-details/wallet-details.ts
+++ b/src/pages/wallet-details/wallet-details.ts
@@ -36,6 +36,7 @@ export class WalletDetailsPage {
   public updateTxHistoryError: boolean;
   public updatingTxHistoryProgress: number = 0;
   public showNoTransactionsYetMsg: boolean;
+  public showBalanceButton: boolean = false;
   public addressbook: any = {};
   public txps: Array<any> = [];
 
@@ -179,11 +180,13 @@ export class WalletDetailsPage {
     this.updatingStatus = true;
     this.updateStatusError = null;
     this.walletNotRegistered = false;
+    this.showBalanceButton = false;
 
     this.walletProvider.getStatus(this.wallet, { force: !!force }).then((status: any) => {
       this.updatingStatus = false;
       this.setPendingTxps(status.pendingTxps);
       this.wallet.status = status;
+      this.showBalanceButton = (this.wallet.status.totalBalanceSat != this.wallet.status.spendableAmount);
     }).catch((err) => {
       this.updatingStatus = false;
       if (err === 'WALLET_NOT_REGISTERED') {