Merge pull request #7759 from cmgustavo/v4-36

[v4] Fix spendable amount, color header (walletDetails)

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)">

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;

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') {