Merge pull request #8269 from gabrielbazan7/fix/ui18

General fixes

src/app/app.component.ts

@@ -94,9 +94,9 @@ export class CopayApp {
 
         }
         this.openLockModal();
+        this.registerIntegrations();
         // Check Profile
         this.profile.loadAndBindProfile().then((profile: any) => {
-          this.registerIntegrations();
           this.emailNotificationsProvider.init(); // Update email subscription if necessary
           if (profile) {
             this.logger.info('Profile exists.');

src/app/app.scss

@@ -328,4 +328,8 @@ ion-note {
   .alert-message {
     color: color($colors, danger);
   }
+}
+
+.alert-md .alert-button {
+  font-size: 12.5px;
 }

src/pages/add/add.html

@@ -24,7 +24,7 @@
     <span translate>Join shared wallet</span>
   </button>
   <button class="list-button" ion-item (click)="goToImportWallet()">
-    <ion-icon item-start>
+    <ion-icon class="import-icon" item-start>
       <img src="assets/img/item-ico-import.svg" class="icon-wallet" />
     </ion-icon>
     <span translate>Import wallet</span>

src/pages/add/add.scss

@@ -12,4 +12,9 @@ page-add {
       padding: 6px;
     }
   }
+  .import-icon {
+    img{
+      padding: 0px;
+    }
+  }
 }

src/pages/add/import-wallet/import-wallet.html

@@ -8,10 +8,10 @@
   <div [attr.padding]="isIOS ? '' : null">
     <ion-segment [(ngModel)]="selectedTab" color="primary" (ionChange)="selectTab(selectedTab)">
       <ion-segment-button value="words">
-        {{ 'Words' | translate }}
+        {{ 'Recovery Phrase' | translate }}
       </ion-segment-button>
       <ion-segment-button value="file">
-        {{ 'File' | translate }}
+        {{ 'File/Text' | translate }}
       </ion-segment-button>
     </ion-segment>
   </div>
@@ -98,4 +98,4 @@
 
 <ion-footer>
   <button ion-button full class="button-footer" (click)="import()" [disabled]="!importForm.valid">Import wallet</button>
-</ion-footer>
+</ion-footer>

src/pages/onboarding/tour/tour.html

@@ -27,7 +27,7 @@
       <h3 class="title" translate>Bitcoin is a currency.</h3>
       <p translate class="top-description">You can trade it for other currencies like US Dollars, Euros, or Pounds.</p>
       <div class="ticker-container">
-        <div class="ticker primary-color">1 BTC = {{localCurrencySymbol}}{{localCurrencyPerBtc}}</div>
+        <div class="ticker">1 BTC = {{localCurrencySymbol}}{{localCurrencyPerBtc}}</div>
       </div>
       <img src='assets/img/app/onboarding/tour-currency.svg' />
       <div class="bottom-absolute">

src/pages/onboarding/tour/tour.scss

@@ -56,6 +56,7 @@ page-tour {
     z-index: 1;
     border-radius: $icon-border-radius;
     position: relative;
+    color: color($colors, blank);    
   }
   .primary-color {
     color: $onboarding-primary-color;

src/pages/send/fee-warning/fee-warning.html

@@ -5,12 +5,9 @@
   <div class="modal-content">
     <div class="modal-heading" translate>Bitcoin miner fees unusually high</div>
     <div class="modal-message" translate>
-      Bitcoin (BTC) miner fees are high due to record demand for limited space on the
-      Bitcoin network. BitPay does not receive and does not control bitcoin miner fees.
+      Bitcoin (BTC) miner fees are high due to record demand for limited space on the Bitcoin network. BitPay does not receive
+      and does not control bitcoin miner fees.
     </div>
+    <button ion-button clear color="danger" class="button-standard" (click)="close()" translate>I understand</button>
   </div>
-</ion-content>
-
-<ion-footer>
-  <button ion-button block class="button-footer" (click)="close()" translate>I understand</button>
-</ion-footer>
+</ion-content>

src/pages/send/fee-warning/fee-warning.scss

@@ -5,7 +5,7 @@ page-fee-warning {
     position: absolute;
     top: 0;
     text-align: center;
-    background-color: color($colors, warning);
+    background-color: color($colors, danger);
     padding: 3rem;
   }
   .modal-content {

src/pages/settings/bitcoin-cash/bitcoin-cash.ts

@@ -99,10 +99,11 @@ export class BitcoinCashPage {
   public openRecoveryToolLink(): void {
     let url = 'https://bitpay.github.io/copay-recovery/';
     let optIn = true;
-    let title = this.translate.instant('Open the recovery tool');
+    let title = null;
+    let message = this.translate.instant('Open the recovery tool');
     let okText = this.translate.instant('Open');
     let cancelText = this.translate.instant('Go Back');
-    this.externalLinkProvider.open(url, optIn, title, null, okText, cancelText);
+    this.externalLinkProvider.open(url, optIn, title, message, okText, cancelText);
   }
 
   public duplicate(wallet: any) {

src/pages/settings/wallet-settings/wallet-settings-advanced/wallet-export/wallet-export.html

@@ -16,7 +16,7 @@
     </ion-segment>
   </div>
   <div [ngSwitch]="segments">
-    <ion-list *ngSwitchCase="'file/text'">
+    <ion-list *ngSwitchCase="'file/text'" margin-top>
       <div *ngIf="!backupWalletPlainText">
         <form [formGroup]="exportWalletForm">
           <ion-item>
@@ -74,7 +74,7 @@
         <ion-textarea rows="12">{{backupWalletPlainText}}</ion-textarea>
       </div>
     </ion-list>
-    <ion-list *ngSwitchCase="'qrCode'">
+    <ion-list *ngSwitchCase="'qr-code'">
       <div class="qrCode" *ngIf="supported">
         <ngx-qrcode qrc-value="{{exportWalletInfo}}" qrc-class="aclass" qrc-errorCorrectionLevel="M"></ngx-qrcode>
         <ion-item-divider text-wrap>

src/pages/settings/wallet-settings/wallet-settings-advanced/wallet-export/wallet-export.ts

@@ -107,7 +107,7 @@ export class WalletExportPage {
 
   public generateQrCode() {
     if (this.exportWalletInfo || !this.isEncrypted) {
-      this.segments = 'qrCode';
+      this.segments = 'qr-code';
     }
 
     this.getPassword().then((password: string) => {
@@ -121,7 +121,7 @@ export class WalletExportPage {
           this.exportWalletInfo = code;
         }
 
-        this.segments = 'qrCode';
+        this.segments = 'qr-code';
       }).catch((err: string) => {
         this.popupProvider.ionicAlert(this.translate.instant('Error'), err);
       });

src/pages/settings/wallet-settings/wallet-settings.scss

@@ -10,8 +10,8 @@ page-wallet-settings {
   }
   .settings-color-block {
     display: inline-block;
-    width: 24px;
-    height: 24px;
+    width: 15px;
+    height: 15px;
     border-radius: 50%;
     float: left; 
     margin: 1rem;

src/pages/tx-details/tx-details.html

@@ -52,7 +52,7 @@
       <a (click)="readMore()" translate>Learn more</a>
     </ion-item>
 
-    <ion-item class="item-fee" *ngIf="btx && btx.feeStr">
+    <ion-item class="item-fee" *ngIf="btx && btx.feeStr && btx.action != 'received'">
       <div class="fee-title" translate>
         {{'Fee:' | translate}}
       </div>
@@ -131,8 +131,6 @@
       <ion-toggle checked="false" *ngIf="!btx.confirmations || btx.confirmations == 0" [(ngModel)]="txNotification.value" (ionChange)="txConfirmNotificationChange()"></ion-toggle>
     </ion-item>
 
-    <button ion-item class="btn-view" (click)="viewOnBlockchain()" translate>View on blockchain</button>
-
     <div *ngIf="actionList && actionList[0]">
       <ion-item-divider>{{'Timeline' | translate}}</ion-item-divider>
       <div class="timeline-item" [ngClass]="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}"
@@ -153,6 +151,9 @@
         </div>
       </div>
     </div>
+
+    <button ion-button full class="button-standard" (click)="viewOnBlockchain()" translate>View on blockchain</button>
+
   </ion-list>
 
 </ion-content>

src/pages/tx-details/tx-details.scss

@@ -164,7 +164,4 @@ page-tx-details {
       }
     }
   }
-  .btn-view {
-    color: color($colors, primary);
-  }
 }

src/pages/txp-details/txp-details.html

@@ -72,9 +72,11 @@
       <div class="payment-proposal-to" copy-to-clipboard="{{tx.toAddress}}">
         <img class="icon-bitcoin" src="assets/img/icon-bitcoin-small.svg" />
         <!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{tx.toAddress}}"></contact>  TODO -->
-        <span *ngIf="tx && !tx.name">{{tx.toAddress}}</span>
-        <span *ngIf="tx && tx.name">{{tx.name}}</span>
-        <span *ngIf="tx && tx.hasMultiplesOutputs" translate>Multiple recipients</span>
+        <div class="ellipsis">
+          <span *ngIf="tx && !tx.name">{{tx.toAddress}}</span>
+          <span *ngIf="tx && tx.name">{{tx.name}}</span>
+          <span *ngIf="tx && tx.hasMultiplesOutputs" translate>Multiple recipients</span>
+        </div>
       </div>
 
       <div *ngIf="tx && tx.hasMultiplesOutputs" (click)="showMultiplesOutputs = !showMultiplesOutputs">
@@ -219,8 +221,8 @@
       <ion-item-divider></ion-item-divider>
     </div>
 
-    <div *ngIf="(tx && !tx.removed) && (tx && tx.canBeRemoved) || (tx && tx.status == 'accepted' && !tx.broadcastedOn)">
-      <button ion-item class="btn-remove" (click)="remove()" [disabled]="loading">
+    <div class="proposal-deletion" *ngIf="(tx && !tx.removed) && (tx && tx.canBeRemoved) || (tx && tx.status == 'accepted' && !tx.broadcastedOn)">
+      <button ion-button outline color="danger" class="button-standard" (click)="remove()" [disabled]="loading">
         <span translate>Delete Payment Proposal</span>
       </button>
       <div class="proposal-deletion-help" *ngIf="!tx.isGlidera && isShared" translate>

src/pages/txp-details/txp-details.scss

@@ -30,14 +30,15 @@ page-txp-details {
     }
   }
 
-  .proposal-deletion-help {
-    text-align: center;
-    color: color($colors, grey);
+  .proposal-deletion {
     background-color: color($colors, blank);
     padding: 2rem;
-    font-size: 12.5px;
+    .proposal-deletion-help {
+      text-align: center;
+      color: color($colors, grey);
+      font-size: 12.5px;
+    }
   }
-
   @mixin row-flex {
     display: flex;
     align-items: center;
@@ -161,9 +162,5 @@ page-txp-details {
       }
     }
   }
-  .btn-remove {
-    font-size: 1.2rem;
-    color: color($colors, danger);
-  }
 }
 

src/theme/variables.scss

@@ -26,7 +26,7 @@ $app-direction: ltr;
 $colors: (
   primary: $color-primary,
   secondary: $color-secondary,
-  warning: #eba133,
+  warning: #ffa500,
   danger: #ef473a,
   success: #09C286,
   light: #f4f4f4,
@@ -101,6 +101,9 @@ $searchbar-ios-padding-vertical: 16px;
 $searchbar-ios-padding-horizontal: 8px;
 
 $note-ios-color: color($colors, light-grey);
+$alert-md-title-font-size: 16px;
+$alert-md-sub-title-font-size: 12.5px;
+$alert-md-message-font-size: 12.5px;
 
 // App Material Design Variables
 // --------------------------------------------------