fix: fix translucent screen issue with ion-content (#3318)

fylein · Dec 11, 2024 · 46a5063 · 46a5063
1 parent 9f30d9e
commit 46a5063
Show file tree

Hide file tree

Showing 9 changed files with 393 additions and 376 deletions.
diff --git a/src/app/auth/new-password/new-password.page.html b/src/app/auth/new-password/new-password.page.html
@@ -1,106 +1,108 @@
-<div class="new-password">
-  <div>
-    <ion-icon
-      class="fy-icon new-password__back-icon"
-      src="../../../assets/svg/arrow-tail-left.svg"
-      (click)="redirectToSignIn()"
-    ></ion-icon>
+<ion-content scroll-y="false" class="no-keyboard-adjust">
+  <div class="new-password">
     <div>
-      <div class="new-password__form-header">Reset Password</div>
+      <ion-icon
+        class="fy-icon new-password__back-icon"
+        src="../../../assets/svg/arrow-tail-left.svg"
+        (click)="redirectToSignIn()"
+      ></ion-icon>
       <div>
-        <form *ngIf="fg" [formGroup]="fg">
-          <div class="new-password__input-container">
-            <div
-              class="new-password__text new-password__text-block"
-              [ngClass]="{'new-password__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}"
-            >
-              <div class="new-password__text-label">New password</div>
-              <div class="new-password__password-container">
-                <input
-                  placeholder="Enter password"
-                  [required]="true"
-                  [type]="hide ? 'text': 'password'"
-                  class="new-password__text-input smartlook-show"
-                  formControlName="password"
-                  (focus)="setPasswordTooltip(true)"
-                  (blur)="setPasswordTooltip(false)"
-                />
-                <div class="new-password__password-icon-container" matSuffix (click)="hide = !hide">
-                  <ion-icon
-                    class="fy-icon new-password__password-icon"
-                    src="{{hide ? '/assets/svg/eye.svg' : '/assets/svg/eye-slash.svg'}}"
-                  ></ion-icon>
+        <div class="new-password__form-header">Reset Password</div>
+        <div>
+          <form *ngIf="fg" [formGroup]="fg">
+            <div class="new-password__input-container">
+              <div
+                class="new-password__text new-password__text-block"
+                [ngClass]="{'new-password__text__invalid': fg.controls.password.touched && !fg.controls.password.valid}"
+              >
+                <div class="new-password__text-label">New password</div>
+                <div class="new-password__password-container">
+                  <input
+                    placeholder="Enter password"
+                    [required]="true"
+                    [type]="hide ? 'password': 'text'"
+                    class="new-password__text-input smartlook-show"
+                    formControlName="password"
+                    (focus)="setPasswordTooltip(true)"
+                    (blur)="setPasswordTooltip(false)"
+                  />
+                  <div class="new-password__password-icon-container" matSuffix (click)="hide = !hide">
+                    <ion-icon
+                      class="fy-icon new-password__password-icon"
+                      src="{{hide ? '/assets/svg/eye-slash.svg' : '/assets/svg/eye.svg'}}"
+                    ></ion-icon>
+                  </div>
                 </div>
+                <app-password-check-tooltip
+                  *ngIf="showPasswordTooltip"
+                  [password]="fg.controls.password.value"
+                  (isPasswordValid)="onPasswordValid($event)"
+                ></app-password-check-tooltip>
+              </div>
+              <div
+                *ngIf="fg.controls.password.touched && fg.controls.password.invalid && fg.controls.password.errors.required"
+                class="new-password__error"
+              >
+                Password cannot be empty
+              </div>
+              <div
+                *ngIf="fg.controls.password.touched && fg.controls.password.invalid && fg.controls.password.errors.invalidPassword && !fg.controls.password.errors.required"
+                class="new-password__error"
+              >
+                Please enter a valid password.
               </div>
-              <app-password-check-tooltip
-                *ngIf="showPasswordTooltip"
-                [password]="fg.controls.password.value"
-                (isPasswordValid)="onPasswordValid($event)"
-              ></app-password-check-tooltip>
-            </div>
-            <div
-              *ngIf="fg.controls.password.touched && fg.controls.password.invalid && fg.controls.password.errors.required"
-              class="new-password__error"
-            >
-              Password cannot be empty
-            </div>
-            <div
-              *ngIf="fg.controls.password.touched && fg.controls.password.invalid && fg.controls.password.errors.invalidPassword && !fg.controls.password.errors.required"
-              class="new-password__error"
-            >
-              Please enter a valid password.
             </div>
-          </div>
-          <div class="new-password__input-container">
-            <div
-              class="new-password__text new-password__text-block"
-              [ngClass]="{'new-password__text__invalid': fg.controls.confirmPassword.touched && !fg.controls.confirmPassword.valid}"
-            >
-              <div class="new-password__text-label">Confirm new password</div>
-              <div class="new-password__password-container">
-                <input
-                  placeholder="Re-enter password"
-                  [required]="true"
-                  [type]="hideConfirmPassword ? 'text': 'password'"
-                  class="new-password__text-input smartlook-show"
-                  formControlName="confirmPassword"
-                />
-                <div
-                  class="new-password__password-icon-container"
-                  matSuffix
-                  (click)="hideConfirmPassword = !hideConfirmPassword"
-                >
-                  <ion-icon
-                    class="fy-icon new-password__password-icon"
-                    src="{{hideConfirmPassword ? '/assets/svg/eye.svg' : '/assets/svg/eye-slash.svg'}}"
-                  ></ion-icon>
+            <div class="new-password__input-container">
+              <div
+                class="new-password__text new-password__text-block"
+                [ngClass]="{'new-password__text__invalid': fg.controls.confirmPassword.touched && !fg.controls.confirmPassword.valid}"
+              >
+                <div class="new-password__text-label">Confirm new password</div>
+                <div class="new-password__password-container">
+                  <input
+                    placeholder="Re-enter password"
+                    [required]="true"
+                    [type]="hideConfirmPassword ? 'text': 'password'"
+                    class="new-password__text-input smartlook-show"
+                    formControlName="confirmPassword"
+                  />
+                  <div
+                    class="new-password__password-icon-container"
+                    matSuffix
+                    (click)="hideConfirmPassword = !hideConfirmPassword"
+                  >
+                    <ion-icon
+                      class="fy-icon new-password__password-icon"
+                      src="{{hideConfirmPassword ? '/assets/svg/eye-slash.svg' : '/assets/svg/eye.svg' }}"
+                    ></ion-icon>
+                  </div>
                 </div>
               </div>
+              <div
+                *ngIf="fg.controls.confirmPassword.touched && fg.controls.confirmPassword.invalid && fg.controls.confirmPassword.errors.required"
+                class="new-password__error"
+              >
+                Password cannot be empty
+              </div>
+              <div
+                *ngIf="fg.controls.confirmPassword.touched && fg.controls.confirmPassword.invalid && fg.controls.confirmPassword.errors.passwordMismatch"
+                class="new-password__error"
+              >
+                Passwords do not match
+              </div>
             </div>
-            <div
-              *ngIf="fg.controls.confirmPassword.touched && fg.controls.confirmPassword.invalid && fg.controls.confirmPassword.errors.required"
-              class="new-password__error"
-            >
-              Password cannot be empty
-            </div>
-            <div
-              *ngIf="fg.controls.confirmPassword.touched && fg.controls.confirmPassword.invalid && fg.controls.confirmPassword.errors.passwordMismatch"
-              class="new-password__error"
-            >
-              Passwords do not match
-            </div>
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
     </div>
-  </div>
-  <div *ngIf="fg">
-    <ion-button (click)="changePassword()" class="btn-primary" fill="clear" [disabled]="!fg.valid">
-      Reset password
-    </ion-button>
-    <div class="new-password__cta-secondary" (click)="redirectToSignIn()">
-      <ion-icon class="new-password__arrow-icon" [src]="'/assets/svg/arrow-left.svg'" slot="icon-only"></ion-icon>
-      <span class="new-password__cta-text">Back to Sign In</span>
+    <div *ngIf="fg">
+      <ion-button (click)="changePassword()" class="btn-primary" fill="clear" [disabled]="!fg.valid">
+        Reset password
+      </ion-button>
+      <div class="new-password__cta-secondary" (click)="redirectToSignIn()">
+        <ion-icon class="new-password__arrow-icon" [src]="'/assets/svg/arrow-left.svg'" slot="icon-only"></ion-icon>
+        <span class="new-password__cta-text">Back to Sign In</span>
+      </div>
     </div>
   </div>
-</div>
+</ion-content>
diff --git a/src/app/auth/new-password/new-password.page.scss b/src/app/auth/new-password/new-password.page.scss
@@ -3,7 +3,7 @@
 .new-password {
   display: flex;
   flex-direction: column;
-  padding: 24px 20px;
+  padding: 24px 20px 44px 20px;
   margin-top: 18px;
   height: 100%;
   justify-content: space-between;

diff --git a/src/app/auth/new-password/new-password.page.ts b/src/app/auth/new-password/new-password.page.ts
@@ -33,9 +33,9 @@ export class NewPasswordPage implements OnInit {
 
   isPasswordValid = false;
 
-  hide = false;
+  hide = true;
 
-  hideConfirmPassword = false;
+  hideConfirmPassword = true;
 
   showPasswordTooltip = false;
 

diff --git a/src/app/auth/pending-verification/pending-verification.page.html b/src/app/auth/pending-verification/pending-verification.page.html
@@ -1,88 +1,93 @@
-<div class="pending-verification" *ngIf="fg">
-  <div class="pending-verification__send-invite" *ngIf="!isInvitationLinkSent">
-    <div class="pending-verification__form-container" *ngIf="!isInvitationLinkSent">
-      <div class="pending-verification__error-icon-container">
-        <ion-icon
-          class="pending-verification__error-icon"
-          [src]="'/assets/svg/error-outlined.svg'"
-          slot="icon-only"
-        ></ion-icon>
-      </div>
-      <div>
-        <div class="pending-verification__page-header">The invitation has expired</div>
-        <div class="pending-verification__sub-header">
-          Enter your registered email address to receive a new invitation and set up your account on Fyle.
+<ion-content scroll-y="false" class="no-keyboard-adjust">
+  <div class="pending-verification" *ngIf="fg">
+    <div class="pending-verification__send-invite" *ngIf="!isInvitationLinkSent">
+      <div class="pending-verification__form-container">
+        <div class="pending-verification__error-icon-container">
+          <ion-icon
+            class="pending-verification__error-icon"
+            [src]="'/assets/svg/error-outlined.svg'"
+            slot="icon-only"
+          ></ion-icon>
         </div>
-      </div>
-      <form [formGroup]="fg" class="pending-verification__input-container">
-        <div class="pending-verification__input-container__label">Registered Email</div>
-        <input
-          #simpleEmailInput
-          matInput
-          type="email"
-          placeholder="Enter registered email"
-          formControlName="email"
-          pattern="\S+@\S+\.\S{2,}"
-          class="pending-verification__input-container__input"
-        />
-        <div class="pending-verification__error-message" *ngIf="fg.controls.email.touched && !fg.controls.email.valid">
-          Please enter a valid email.
+        <div>
+          <div class="pending-verification__page-header">The invitation has expired</div>
+          <div class="pending-verification__sub-header">
+            Enter your registered email address to receive a new invitation and set up your account on Fyle.
+          </div>
         </div>
-      </form>
-    </div>
-    <div>
-      <ion-button
-        (click)="resendVerificationLink(fg.controls.email.value)"
-        class="btn-primary"
-        fill="clear"
-        [disabled]="!fg.valid"
-      >
-        Send invite
-      </ion-button>
-      <div class="pending-verification__cta-secondary" (click)="onGotoSignInClick()">
-        <ion-icon
-          class="pending-verification__arrow-icon"
-          [src]="'/assets/svg/arrow-left.svg'"
-          slot="icon-only"
-        ></ion-icon>
-        <span class="pending-verification__cta-text">Back to Sign In</span>
-      </div>
-    </div>
-  </div>
-  <div class="pending-verification__send-invite" *ngIf="isInvitationLinkSent">
-    <div class="pending-verification__content-container" *ngIf="isInvitationLinkSent">
-      <div class="pending-verification__success-icon-container">
-        <ion-icon
-          class="pending-verification__success-icon"
-          [src]="'/assets/svg/check-circle-outline.svg'"
-          slot="icon-only"
-        ></ion-icon>
+        <form [formGroup]="fg" class="pending-verification__input-container">
+          <div class="pending-verification__input-container__label">Registered Email</div>
+          <input
+            #simpleEmailInput
+            matInput
+            type="email"
+            placeholder="Enter registered email"
+            formControlName="email"
+            pattern="\S+@\S+\.\S{2,}"
+            class="pending-verification__input-container__input"
+          />
+          <div
+            class="pending-verification__error-message"
+            *ngIf="fg.controls.email.touched && !fg.controls.email.valid"
+          >
+            Please enter a valid email.
+          </div>
+        </form>
       </div>
-      <section class="pending-verification__text">
-        <h1 class="pending-verification__header">Invitation link sent</h1>
-        <p class="pending-verification__content">
-          A new invitation link has been sent to your registered email address. Check your inbox to continue setting up
-          your account.
-        </p>
-      </section>
-    </div>
-    <div class="pending-verification__cta">
-      <ion-button
-        (click)="onGotoSignInClick()"
-        class="btn-primary"
-        fill="clear"
-        aria-label="Navigate back to sign in page"
-        role="button"
-      >
-        <div class="pending-verification__cta-content">
+      <div>
+        <ion-button
+          (click)="resendVerificationLink(fg.controls.email.value)"
+          class="btn-primary"
+          fill="clear"
+          [disabled]="!fg.valid"
+        >
+          Send invite
+        </ion-button>
+        <div class="pending-verification__cta-secondary" (click)="onGotoSignInClick()">
           <ion-icon
             class="pending-verification__arrow-icon"
             [src]="'/assets/svg/arrow-left.svg'"
             slot="icon-only"
           ></ion-icon>
           <span class="pending-verification__cta-text">Back to Sign In</span>
         </div>
-      </ion-button>
+      </div>
+    </div>
+    <div class="pending-verification__send-invite" *ngIf="isInvitationLinkSent">
+      <div class="pending-verification__content-container" *ngIf="isInvitationLinkSent">
+        <div class="pending-verification__success-icon-container">
+          <ion-icon
+            class="pending-verification__success-icon"
+            [src]="'/assets/svg/check-circle-outline.svg'"
+            slot="icon-only"
+          ></ion-icon>
+        </div>
+        <section class="pending-verification__text">
+          <h1 class="pending-verification__header">Invitation link sent</h1>
+          <p class="pending-verification__content">
+            A new invitation link has been sent to your registered email address. Check your inbox to continue setting
+            up your account.
+          </p>
+        </section>
+      </div>
+      <div class="pending-verification__cta">
+        <ion-button
+          (click)="onGotoSignInClick()"
+          class="btn-primary"
+          fill="clear"
+          aria-label="Navigate back to sign in page"
+          role="button"
+        >
+          <div class="pending-verification__cta-content">
+            <ion-icon
+              class="pending-verification__arrow-icon"
+              [src]="'/assets/svg/arrow-left.svg'"
+              slot="icon-only"
+            ></ion-icon>
+            <span class="pending-verification__cta-text">Back to Sign In</span>
+          </div>
+        </ion-button>
+      </div>
     </div>
   </div>
-</div>
+</ion-content>