Merge pull request #1 from bcProFoundation/fb-takyoon-fix-feedback-15…

…042022 fix feedback of abcpay 2.2 ( 1->5, 9 , 12 -> 14)
bcProFoundation · Apr 15, 2022 · fd841fe · fd841fe
2 parents 8179a8a + 7ab823b
commit fd841fe
Show file tree

Hide file tree

Showing 31 changed files with 191 additions and 52 deletions.
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -511,7 +511,10 @@ ion-header ion-toolbar {
     line-height: 24px;
     letter-spacing: 0.5px;
 }
-
+// Custom header class when scroll
+.add-box-shadow-scroll{
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 2px 6px 2px rgba(0, 0, 0, 0.08);
+}
 // Buttons
 // --------------------------------------------------
 .bottom-absolute {

diff --git a/src/app/components/info-sheet/info-sheet.html b/src/app/components/info-sheet/info-sheet.html
@@ -125,10 +125,10 @@
       <span sheet-fourth-button-text translate>I understand</span>
     </info-sheet-template>
 
-    <info-sheet-template *ngSwitchCase="'copy-to-clipboard'" type="success">
+    <info-sheet-template *ngSwitchCase="'copy-to-clipboard'" type="success" sheetSecondBtnGroup="true">
       <span sheet-title-text translate>Copied to Clipboard</span>
       <span sheet-text>{{params?.msg}}</span>
-      <span sheet-button-text translate>GOT IT</span>
+      <span sheet-fourth-button-text translate>GOT IT</span>
     </info-sheet-template>
 
     <info-sheet-template *ngSwitchCase="'delete-contact'" sheetSecondBtnGroup={{params?.secondBtnGroup}} type="danger">

diff --git a/src/app/pages/add/copayers/copayers.scss b/src/app/pages/add/copayers/copayers.scss
@@ -13,6 +13,7 @@ page-copayers {
     color: #edeff0 !important;
   }
   .close-container {
+    text-transform: capitalize;
     span {
       color: #edeff0 !important;
     }

diff --git a/src/app/pages/add/create-wallet/create-wallet.html b/src/app/pages/add/create-wallet/create-wallet.html
@@ -4,7 +4,8 @@
     'bg-xec': coin == 'xec',
     'bg-xpi': coin == 'xpi',
     'bg-doge': coin == 'doge',
-    'bg-ltc': coin == 'ltc'
+    'bg-ltc': coin == 'ltc',
+    'add-box-shadow-scroll': isScroll
     }">
     <ion-buttons slot="start">
       <ion-back-button icon="chevron-back-outline" defaultHref="/">
@@ -13,17 +14,17 @@
 
     <ion-title class="toolbar-title">
       <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
-        {{ 'Create {coinLabel} Wallet' | translate: {coinLabel: coin.toUpperCase()} }}
+        {{ 'Create {coinLabel} Account' | translate: {coinLabel: coin.toUpperCase()} }}
       </div>
     </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content [forceOverscroll]="true" scrollEvents="true" #scrollArea>
+<ion-content [forceOverscroll]="true" scrollEvents="true" #scrollArea (ionScroll)="handleScrolling($event)">
   <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
     <ion-toolbar class="wide-header__title" tappable>
-      <expandable-header-primary>
-        {{ 'Create {coinLabel} Wallet' | translate: {coinLabel: coin.toUpperCase()} }}
+      <expandable-header-primary class="custom-expandable-header-primary">
+        {{ 'Create {coinLabel} Account' | translate: {coinLabel: coin.toUpperCase()} }}
       </expandable-header-primary>
     </ion-toolbar>
   </expandable-header>
@@ -99,20 +100,27 @@
       </ng-template>
     </ion-button>
 
-    <ion-item lines="none" *ngIf="showAdvOpts &&  coin === 'ltc' && createForm.value.selectedSeed == 'new'">
-      <ion-label>Segwit</ion-label>
-      <ion-toggle formControlName="useNativeSegwit"></ion-toggle>
-    </ion-item>
+
     <div class="line-divider" *ngIf="showAdvOpts"></div>
 
+
+
     <div *ngIf="showAdvOpts" class="show-advance-option ion-padding-bottom">
+
+      <ion-item lines="none" *ngIf="showAdvOpts &&  coin === 'ltc' && createForm.value.selectedSeed == 'new'">
+        <ion-label>Segwit</ion-label>
+        <ion-toggle formControlName="useNativeSegwit"></ion-toggle>
+      </ion-item>
+
+      <div *ngIf="showAdvOpts &&  coin === 'ltc' && createForm.value.selectedSeed == 'new'" class="line-divider"></div>
+
       <mat-form-field class="wallet-service-url-mat-form-field" appearance="outline">
         <mat-label>{{'Account Service URL' | translate}}</mat-label>
         <input matInput type="text" formControlName="bwsURL" [placeholder]="'Account Service URL'" translate>
       </mat-form-field>
 
       <div class="line-divider"></div>
-
+      
       <ion-item class="wallet-key-ion-item" *ngIf="!keyId"
         [ngClass]="{'set-padding-bottom': createForm.value.selectedSeed == 'set' && !keyId}">
         <ion-label position="stacked">{{'Account key' | translate}}</ion-label>

diff --git a/src/app/pages/add/create-wallet/create-wallet.scss b/src/app/pages/add/create-wallet/create-wallet.scss
@@ -1,4 +1,8 @@
 page-create-wallet {
+  .custom-expandable-header-primary{
+    top: 1rem;
+    position: relative;
+  }
   .line-divider {
     margin: 0 !important;
     border: none !important;

diff --git a/src/app/pages/add/create-wallet/create-wallet.ts b/src/app/pages/add/create-wallet/create-wallet.ts
@@ -82,7 +82,7 @@ export class CreateWalletPage implements OnInit {
   public isOpenSelector: boolean;
   public isSlpToken: boolean;
   navParamsData;
-
+  public isScroll = false;
   constructor(
     private actionSheetProvider: ActionSheetProvider,
     private currencyProvider: CurrencyProvider,
@@ -168,6 +168,15 @@ export class CreateWalletPage implements OnInit {
     }
   }
 
+  async handleScrolling(event) {
+    if (event.detail.currentY > 0) {
+      this.isScroll = true;
+    }
+    else {
+      this.isScroll = false;
+    }
+  }
+
   public setTotalCopayers(n: number): void {
     this.createForm.controls['totalCopayers'].setValue(n);
   }

diff --git a/src/app/pages/add/import-wallet/import-wallet.scss b/src/app/pages/add/import-wallet/import-wallet.scss
@@ -22,6 +22,9 @@ page-import-wallet {
       margin: 0;
       --background: transparent !important;
     }
+    mat-form-field{
+      margin-top: 2rem;
+    }
   }
   .final-list-custom{
     border-radius: 24px;
@@ -125,6 +128,9 @@ page-import-wallet {
         &::part(native){
           color: #001E2E;
         }
+        &::part(indicator-background){
+          background: #00658D;
+        }
       }
     }
   }
@@ -169,7 +175,7 @@ page-import-wallet {
     width: 92%;
     top: 0;
     left: 0;
-    margin: 20px 4%;
+    margin: 2rem 4%;
     // height: $upload-box-height - 40px;
     color: #999;
     font-weight: bold;

diff --git a/src/app/pages/add/join-wallet/join-wallet.html b/src/app/pages/add/join-wallet/join-wallet.html
@@ -4,7 +4,8 @@
     'bg-xec': coin == 'xec',
     'bg-xpi': coin == 'xpi',
     'bg-doge': coin == 'doge',
-    'bg-ltc': coin == 'ltc'
+    'bg-ltc': coin == 'ltc',
+    'add-box-shadow-scroll': isScroll
     }">
     <ion-buttons slot="start">
       <ion-back-button icon="chevron-back-outline" defaultHref="/">
@@ -19,7 +20,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [forceOverscroll]="true" scrollEvents="true" #scrollArea>
+<ion-content [forceOverscroll]="true" scrollEvents="true" #scrollArea (ionScroll)="handleScrolling($event)">
   <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
     <ion-toolbar class="wide-header__title" tappable>
       <expandable-header-primary>

diff --git a/src/app/pages/add/join-wallet/join-wallet.ts b/src/app/pages/add/join-wallet/join-wallet.ts
@@ -48,7 +48,7 @@ export class JoinWalletPage {
   public isOpenSelector: boolean;
   public pairedWallet;
   public currentTheme: string;
-
+  public isScroll = false;
   private derivationPathByDefault: string;
   private derivationPathForTestnet: string;
   private regex: RegExp;
@@ -123,6 +123,15 @@ export class JoinWalletPage {
     this.events.subscribe('Local/JoinScan', this.updateCodeHandler);
   }
 
+  async handleScrolling(event) {
+    if (event.detail.currentY > 0) {
+      this.isScroll = true;
+    }
+    else {
+      this.isScroll = false;
+    }
+  }
+
   ngOnInit() {
     this.logger.info('Loaded: JoinWalletPage');
   }

diff --git a/src/app/pages/home/home.html b/src/app/pages/home/home.html
@@ -5,7 +5,7 @@
       <img src="../../../assets/img/abcpay-text.svg" alt="">
     </div>
   </ion-toolbar>
-  <ion-toolbar class="toolbar-icon-view-mobile">
+  <ion-toolbar class="toolbar-icon-view-mobile" [ngClass]="{'add-box-shadow-scroll': isScroll}">
     <ion-title>
       <div class="home-icon">
         <img (click)="openSettingPage()" src="assets/img/home-setting-icon-{{currentTheme}}.svg">
@@ -18,7 +18,7 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content scrollEvents="true" #scrollArea>
+<ion-content [scrollEvents]="true" (ionScroll)="handleScrolling($event)" #scrollArea>
   <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>

diff --git a/src/app/pages/home/home.ts b/src/app/pages/home/home.ts
@@ -1,4 +1,4 @@
-import { Component, NgZone, ViewChild } from '@angular/core';
+import { Component, ElementRef, NgZone, Renderer2, ViewChild } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import * as _ from 'lodash';
 import * as moment from 'moment';
@@ -90,6 +90,7 @@ export class HomePage {
   public isCordova: boolean;
   private zone;
   public txpsN: number;
+  public isScroll: boolean;
 
   constructor(
     private persistenceProvider: PersistenceProvider,
@@ -113,6 +114,7 @@ export class HomePage {
     private splashScreen: SplashScreen,
     private rateProvider: RateProvider,
     private themeProvider: ThemeProvider,
+    private renderer: Renderer2
   ) {
     this.currentTheme = this.themeProvider.currentAppTheme;
     this.logger.info('Loaded: HomePage');
@@ -125,6 +127,15 @@ export class HomePage {
     this.isCordova = this.platformProvider.isCordova;
   }
 
+  async handleScrolling(event) {
+    if (event.detail.currentY > 0) {
+      this.isScroll = true;
+    }
+    else {
+      this.isScroll = false;
+    }
+  }
+
   private showNewFeatureSlides() {
     if (this.appProvider.isLockModalOpen) return;
     this.events.unsubscribe('Local/showNewFeaturesSlides');

diff --git a/src/app/pages/includes/disclaimer-modal/disclaimer-modal.scss b/src/app/pages/includes/disclaimer-modal/disclaimer-modal.scss
@@ -47,6 +47,7 @@ disclaimer-modal {
         --border-color: rgba(0, 30, 46, 0.6);
         --border-style: solid;
         --border-width: 2px;
+        --checkmark-color: #00344B !important;
         margin-top: 6px;
       }
       .term {

diff --git a/src/app/pages/onboarding/feature-education/feature-education.html b/src/app/pages/onboarding/feature-education/feature-education.html
@@ -32,7 +32,7 @@ <h3 class="title" translate>Leverage multi-factor security</h3>
 </ion-content>
 
 <ion-footer class="ion-no-border custom-footer">
-  <ion-toolbar class="button-group" [ngClass]="{'show-button': !slideEnd && !isCordova}" *ngIf="!slideEnd && !isCordova">
+  <ion-toolbar class="button-group" [ngClass]="{'show-button': !slideEnd && !isCordova}" *ngIf="!slideEnd">
     <ion-button class="button-standard button-next hide-button-view-mobile" (click)="swiper.swiperRef.slideNext(400)">
       {{'Next' | translate}} <ion-icon name="chevron-forward-outline"></ion-icon>
     </ion-button>

diff --git a/src/app/pages/onboarding/feature-education/feature-education.scss b/src/app/pages/onboarding/feature-education/feature-education.scss
@@ -101,7 +101,7 @@ page-feature-education {
             color: rgb(46, 46, 46);
             font-weight: 300;
             padding-top: 15px;
-            line-height: 25px;
+            line-height: 28px;
 
             @media (max-width: 768px) {
               font-size: 14px;

diff --git a/src/app/pages/send/confirm/confirm.scss b/src/app/pages/send/confirm/confirm.scss
@@ -57,6 +57,10 @@ page-confirm {
 
       .fee-details {
         color: var(--color-error);
+        ion-icon{
+          margin: unset;
+          padding: unset;
+        }
       }
     }
 

diff --git a/src/app/pages/send/send.html b/src/app/pages/send/send.html
@@ -8,7 +8,8 @@
     'bg-EAT': token?.tokenInfo?.symbol == 'EAT',
     'bg-bcPro': token?.tokenInfo?.symbol == 'bcPro',
     'bg-DoC': token?.tokenInfo?.symbol == 'DoC',
-    'bg-ABCSLP': token?.tokenInfo?.symbol == 'ABCSLP'
+    'bg-ABCSLP': token?.tokenInfo?.symbol == 'ABCSLP',
+    'add-box-shadow-scroll': isScroll
     }">
     <ion-buttons slot="start">
       <ion-back-button icon="chevron-back-outline" defaultHref="/">
@@ -26,7 +27,7 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content scrollEvents="true" #scrollArea>
+<ion-content scrollEvents="true" #scrollArea (ionScroll)="handleScrolling($event)">
   <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
     <ion-toolbar class="wide-header__title" tappable>
       <expandable-header-primary>

diff --git a/src/app/pages/send/send.ts b/src/app/pages/send/send.ts
@@ -39,6 +39,7 @@ export class SendPage {
   public invalidAddress: boolean;
   public validDataFromClipboard;
   private onResumeSubscription: Subscription;
+  public isScroll = false;
   private pageMap = {
     AddressbookAddPage: '/address-book-add',
     AmountPage: '/amount',
@@ -120,6 +121,15 @@ export class SendPage {
     });
   }
 
+  async handleScrolling(event) {
+    if (event.detail.currentY > 0) {
+      this.isScroll = true;
+    }
+    else {
+      this.isScroll = false;
+    }
+  }
+
   ngOnInit() {
     this.logger.info('Loaded: SendPage');
   }

diff --git a/src/app/pages/settings/key-settings/key-settings.html b/src/app/pages/settings/key-settings/key-settings.html
@@ -1,5 +1,5 @@
 <ion-header class="bp-header">
-  <ion-toolbar>
+  <ion-toolbar [ngClass]="{'add-box-shadow-scroll': isScroll}">
     <ion-buttons slot="start">
       <ion-back-button icon="chevron-back-outline" defaultHref= "/"></ion-back-button>
     </ion-buttons>
@@ -11,7 +11,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content #scrollArea scrollEvents="true" forceOverflow="false" class="add-bottom-safe-area">
+<ion-content #scrollArea scrollEvents="true" forceOverflow="false" class="add-bottom-safe-area" (ionScroll)="handleScrolling($event)">
   <div class="wrapper">
     <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
       <ion-toolbar class="wide-header__title">

diff --git a/src/app/pages/settings/key-settings/key-settings.ts b/src/app/pages/settings/key-settings/key-settings.ts
@@ -45,6 +45,7 @@ export class KeySettingsPage {
   public isDeletedSeed: boolean;
   public needsBackup: boolean;
   public derivationStrategy: string;
+  public isScroll = false;
 
   private keyId: string;
   navParamsData: any;
@@ -81,6 +82,15 @@ export class KeySettingsPage {
     this.keyId = this.navParamsData.keyId;
   }
 
+  async handleScrolling(event) {
+    if (event.detail.currentY > 0) {
+      this.isScroll = true;
+    }
+    else {
+      this.isScroll = false;
+    }
+  }
+
   ionViewWillEnter() {
     this.loadingProvider.autoLoader();
     this.walletsGroup = this.profileProvider.getWalletGroup(this.keyId);

diff --git a/src/app/pages/settings/settings.html b/src/app/pages/settings/settings.html
@@ -5,7 +5,7 @@
       <img src="../../../assets/img/abcpay-text.svg" alt="">
     </div>
   </ion-toolbar>
-  <ion-toolbar>
+  <ion-toolbar [ngClass]="{'add-box-shadow-scroll': isScroll}">
     <ion-buttons slot="start">
       <ion-back-button icon="chevron-back-outline" defaultHref="tabs/wallets"></ion-back-button>
     </ion-buttons>
@@ -15,7 +15,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content [forceOverscroll]="true" scrollEvents="true" #scrollArea>
+<ion-content [forceOverscroll]="true" scrollEvents="true" #scrollArea (ionScroll)="handleScrolling($event)">
   <div class="wrapper">
     <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
       <ion-toolbar class="wide-header__title">