Merge pull request #7773 from cmgustavo/v4-38

[v4] Mobile: StatusBar. Color Header (walletDetails)

app-template/bitpay/sass/overrides.scss

@@ -22,3 +22,4 @@ $colors: (
 );
 
 $icon-border-radius: 50%;
+$toolbar-background: #1e3186;

app-template/config-template.xml

@@ -18,11 +18,11 @@
     <preference name="DisallowOverscroll" value="true"/>
     <preference name="HideKeyboardFormAccessoryBar" value="true"/>
 
-    <preference name="StatusBarBackgroundColor" value="*THEMECOLOR*" />
     <preference name="BackupWebStorage" value="none"/>
     <preference name="Orientation" value="default" />
     <preference name="cordova-custom-config-stoponerror" value="true" />
 
+    <preference name="StatusBarBackgroundColor" value="*THEMECOLOR*" />
     <preference name="StatusBarOverlaysWebView" value="true" />
     <preference name="StatusBarStyle" value="lightcontent" />
 

app-template/copay/sass/overrides.scss

@@ -22,3 +22,4 @@ $colors: (
 );
 
 $icon-border-radius: 3px;
+$toolbar-background: #192c3a;

src/app/app.component.ts

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

src/pages/home/home.html

@@ -1,6 +1,8 @@
 <ion-header>
   <ion-navbar>
-    <ion-title>{{'Home' | translate}}</ion-title>
+    <ion-title>
+      <img class="home-logo" src="assets/img/app/logo-negative.svg">
+    </ion-title>
   </ion-navbar>
 </ion-header>
 

src/pages/home/home.scss

@@ -1,4 +1,12 @@
 page-home {
+  .home-logo {
+    height: 26px;
+    position: relative;
+    top: 3px;
+  }
+  .toolbar-title-ios {
+    text-align: center;
+  }
   .check{
     text-align: center;
     .title {

src/pages/onboarding/backup-request/backup-request.scss

@@ -1,7 +1,12 @@
 page-backup-request {
   text-align: center;
-  .toolbar-background{
-    background-color: transparent;
+  ion-header {
+    .toolbar-title, ion-icon {
+      color: color($colors, primary);
+    }
+    .toolbar-background {
+      background-color: transparent;
+    }
   }
   p {
     line-height: 1.6;

src/pages/onboarding/collect-email/collect-email.html

@@ -2,7 +2,7 @@
 
   <ion-navbar hideBackButton="true">
     <ion-buttons end>
-      <button ion-button icon-only (click)="skip()" translate>Skip</button>
+      <button ion-button color="primary" (click)="skip()" translate>Skip</button>
     </ion-buttons>
   </ion-navbar>
 
@@ -22,7 +22,7 @@
           <ion-input type="email" formControlName="email" placeholder="Email Input"></ion-input>
         </ion-item>
 
-        <ion-item no-lines>
+        <ion-item no-lines text-wrap>
           <ion-label translate>Get news and updates from BitPay</ion-label>
           <ion-checkbox formControlName="accept" checked="true"></ion-checkbox>
         </ion-item>
@@ -48,4 +48,4 @@
       </div>
     </div>
   </div>
-</ion-content>
+</ion-content>

src/pages/onboarding/collect-email/collect-email.scss

@@ -1,8 +1,13 @@
 page-collect-email {
-  text-align: center;
-  .toolbar-background{
-    background-color: transparent;
+  ion-header {
+    .toolbar-title, ion-icon {
+      color: color($colors, primary);
+    }
+    .toolbar-background {
+      background-color: transparent;
+    }
   }
+  text-align: center;
   p {
     line-height: 1.6;
     font-size: 18px;

src/pages/onboarding/disclaimer/disclaimer.html

@@ -5,7 +5,7 @@
   <h1 *ngIf="resume" translate>Quick review!</h1>
   <h1 *ngIf="!resume" translate>Almost done! Let's review.</h1>
   <p translate>Bitcoin is different &ndash; it cannot be safely held with a bank or web service.</p>
-  <ion-list text-wrap>
+  <ion-list no-lines text-wrap>
     <ion-item>
       <ion-label>I understand that my funds are held securely on this device, not by a company.</ion-label>
       <ion-checkbox [(ngModel)]="accepted.first"></ion-checkbox>
@@ -17,7 +17,7 @@
   </ion-list>
   <div class="bottom-absolute" *ngIf="accepted.first && accepted.second">
     <a class="link" (click)="openDisclaimer()" translate>Terms of Use</a>
-    <ion-item no-lines>
+    <ion-item no-lines text-wrap>
       <ion-label>
         <span translate>I have read, understood, and agree to the </span>
       </ion-label>

src/pages/onboarding/disclaimer/disclaimer.scss

@@ -1,7 +1,12 @@
 page-disclaimer {
   text-align: center;
-  .toolbar-background{
-    background-color: transparent;
+  ion-header {
+    .toolbar-title, ion-icon {
+      color: color($colors, primary);
+    }
+    .toolbar-background {
+      background-color: transparent;
+    }
   }
   .link {
     font-size: 2vh;

src/pages/onboarding/tour/tour.html

@@ -2,7 +2,7 @@
 
   <ion-navbar>
     <ion-buttons end>
-      <button ion-button icon-only (click)="createDefaultWallet()" *ngIf="currentIndex == 0" translate>
+      <button ion-button color="primary" (click)="createDefaultWallet()" *ngIf="currentIndex == 0" translate>
         Skip
       </button>
     </ion-buttons>

src/pages/onboarding/tour/tour.scss

@@ -1,6 +1,11 @@
 page-tour {
-  .toolbar-background{
-    background-color: transparent;
+  ion-header {
+    .toolbar-title, ion-icon {
+      color: color($colors, primary);
+    }
+    .toolbar-background {
+      background-color: transparent;
+    }
   }
   .bottom-absolute {
     padding: 15px 15px 5vh 15px;

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

@@ -1,5 +1,5 @@
-<ion-header>
-  <ion-navbar>
+<ion-header no-border [ngStyle]="{'background-color': wallet.color}">
+  <ion-navbar transparent>
     <ion-title>{{wallet.name}}</ion-title>
   </ion-navbar>
 </ion-header>

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: color($colors, primary);
+  }
   .balance-card {
     background: color($colors, primary);
   }
   .balance-header {
     position: relative;
     color: color($colors, light);
-    height: 14rem;
+    height: 10rem;
     text-align: center;
   }
   .balance-str {
     cursor: pointer;
-    padding-top: 5rem;
+    padding-top: 1rem;
     font-size: 35px;
     font-weight: 600;
   }
@@ -20,12 +26,12 @@ page-wallet-details {
   }
   .balance-hidden {
     cursor: pointer;
-    padding-top: 5rem;
+    padding-top: 1rem;
     font-size: 20px;
     font-weight: 500;
   }
   .balance-error {
-    padding: 10% 1rem 0 1rem;
+    padding: 5% 1rem 0 1rem;
   }
   .balance-spendable {
     cursor: pointer;
@@ -35,7 +41,7 @@ page-wallet-details {
     }
   }
   .balance-scanning {
-    padding-top: 6rem;
+    padding-top: 1rem;
   }
   .tx-history {
     img {