Fix statusBar. Spinner. walletDetails header

app-template/config-template.xml

@@ -29,7 +29,7 @@
     <preference name="ShowSplashScreenSpinner" value="false" />
     <preference name="AutoHideSplashScreen" value="false" />
     <preference name="FadeSplashScreen" value="true" />
-    <preference name="FadeSplashScreenDuration" value="300" />
+    <preference name="FadeSplashScreenDuration" value="200" />
     <preference name="SplashMaintainAspectRatio" value="true" />
 
     <!-- Android Version: Marshmallow 6.0 (API Level 23) or higher -->

src/app/app.component.ts

@@ -60,6 +60,7 @@ export class CopayApp {
           ' #' + this.app.info.commitHash);
 
         if (this.platform.is('cordova')) {
+          this.statusBar.overlaysWebView(true);
           this.statusBar.styleLightContent();
           this.splashScreen.hide();
         }

src/pages/wallet-details/wallet-details.html

@@ -1,19 +1,17 @@
-<ion-header no-border [ngStyle]="{'background': wallet.color}">
-  <ion-navbar transparent>
+<ion-header>
+  <ion-navbar>
     <ion-title>{{wallet.name}}</ion-title>
   </ion-navbar>
 </ion-header>
 
-<ion-content fullscreen>
-
-  <ion-refresher (ionRefresh)="doRefresh($event)">
-    <ion-refresher-content></ion-refresher-content>
-  </ion-refresher>
+<ion-content>
 
   <div class="balance-card" [ngStyle]="{'background': wallet.color}">
       <div class="balance-header">
         <div (longPress)="toggleBalance()">
-          <div *ngIf="!updateStatusError && !wallet.balanceHidden && !wallet.scanning && wallet.status">
+          <div
+            (tap)="updateAll(true)"
+            *ngIf="!updateStatusError && !wallet.balanceHidden && !wallet.scanning && wallet.status">
             <div class="balance-str">{{wallet.status.totalBalanceStr}}</div>
             <div class="balance-alt-str" *ngIf="wallet.network != 'testnet'">
               {{wallet.status.totalBalanceAlternative}} {{wallet.status.alternativeIsoCode}}
@@ -148,13 +146,13 @@
         <div class="action" *ngIf="tx.confirmations == 0 && (tx.action == 'sent' || tx.action == 'moved')">{{'Sending' | translate}}</div>
         <div class="action" *ngIf="tx.confirmations == 0 && tx.action == 'received'">{{'Receiving' | translate}}</div>
         <div class="action" *ngIf="tx.confirmations > 0">{{tx.action}}</div>
-        <div class="detail">
+        <ion-note item-end>
           <div class="amount">{{tx.amount | satToUnit: wallet.coin}}</div>
           <div class="date">
             <span *ngIf="tx.time && createdWithinPastDay(tx.time * 1000)">{{tx.time * 1000 | amTimeAgo}}</span>
             <span *ngIf="tx.time && !createdWithinPastDay(tx.time * 1000)">{{tx.time * 1000 | amDateFormat:'MMM D, YYYY'}}</span>
           </div>
-        </div>
+        </ion-note>
       </button>
     </div>
   </ion-list>

src/pages/wallet-details/wallet-details.scss

@@ -1,22 +1,16 @@
 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: 10rem;
+    height: 12.5rem;
     text-align: center;
   }
   .balance-str {
     cursor: pointer;
-    padding-top: 1.5rem;
+    padding-top: 4rem;
     font-size: 35px;
     font-weight: 600;
   }
@@ -25,12 +19,13 @@ page-wallet-details {
     font-weight: 500;
   }
   .balance-hidden {
-    padding-top: 2rem;
+    cursor: pointer;
+    padding-top: 5rem;
     font-size: 20px;
     font-weight: 500;
   }
   .balance-error {
-    padding: 5% 1rem 0 1rem;
+    padding: 10% 1rem 0 1rem;
   }
   .balance-spendable {
     cursor: pointer;
@@ -41,26 +36,15 @@ page-wallet-details {
   }
   .tx-history {
     img {
-      width: 40px;
-    }
-    .label {
-      display: -webkit-inline-box;
+      width: 35px;
     }
     .action {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
-    .detail {
-      position: absolute;
-      right: 16px;
-      text-align: end;
-      .amount {
-      }
-      .date {
-        color: color($colors, grey);
-        font-size: 12.5px;
-      }
+    .amount {
+      color: color($colors, dark);
+    }
+    .date {
+      font-size: 12.5px;
     }
   }
 
@@ -118,7 +102,7 @@ page-wallet-details {
       width: 20px;
       height: 20px;
       margin: 5px 5px 0 0;
-      &.spinner-crescent circle {
+      * {
         stroke: color($colors, light);
       }
     }

src/pages/wallet-details/wallet-details.ts

@@ -220,13 +220,6 @@ export class WalletDetailsPage {
     this.navCtrl.push(WalletAddressesPage, { walletId: this.wallet.credentials.walletId });
   }
 
-  public doRefresh(refresher) {
-    this.updateAll(true);
-    setTimeout(() => {
-      refresher.complete();
-    }, 1000);
-  }
-
   public getDate(txCreated) {
     let date = new Date(txCreated * 1000);
     return date;

src/providers/on-going-process/on-going-process.ts

@@ -75,7 +75,7 @@ export class OnGoingProcessProvider {
     }
     this.loading = this.loadingCtrl.create({
       spinner: 'hide',
-      content: showName
+      content: showName + '...'
     });
     this.loading.present();
   }

src/theme/global.scss

@@ -17,6 +17,9 @@ $global-colors: (
   dark:                            #444,
 );
 
+// Refresh color
+$refresher-icon-color: color($colors, primary);
+
 .bottom-absolute {
   width: 100%;
   position: absolute;
@@ -35,6 +38,9 @@ $global-colors: (
 // Hide border when refresh
 .has-refresher > .scroll-content {
   border-top: none !important;
+  ion-spinner * {
+    stroke: color($colors, light);
+  }
 }
 
 // This style prevents the names of the tabs from disappear