fix: Revert Verify changes

fylein · Dec 11, 2024 · 1810aa4 · 1810aa4
1 parent 1996d94
commit 1810aa4
Show file tree

Hide file tree

Showing 35 changed files with 1,154 additions and 1,549 deletions.
diff --git a/src/app/auth/disabled/disabled.page.html b/src/app/auth/disabled/disabled.page.html
@@ -1,33 +1,25 @@
 <ion-content>
-  <div class="disabled-user">
-    <div class="disabled-user__content-container">
-      <div class="disabled-user__error-icon-container">
-        <ion-icon
-          class="disabled-user__error-icon"
-          [src]="'/assets/svg/error-outlined.svg'"
-          slot="icon-only"
-        ></ion-icon>
-      </div>
-      <section class="disabled-user__text">
-        <h1 class="disabled-user__header">Account disabled</h1>
-        <p class="disabled-user__content">
-          This account is no longer active. Please contact your company admin for details.
-        </p>
-      </section>
-    </div>
-    <div class="disabled-user__cta">
-      <ion-button
-        (click)="onGotoSignInClick()"
-        class="btn-primary"
-        fill="clear"
-        aria-label="Navigate back to sign in page"
-        role="button"
-      >
-        <div class="disabled-user__cta-content">
-          <ion-icon class="disabled-user__arrow-icon" [src]="'/assets/svg/arrow-left.svg'" slot="icon-only"></ion-icon>
-          <span class="disabled-user__cta-text">Back to Sign In</span>
-        </div>
-      </ion-button>
+  <ion-grid class="disabled--header-container">
+    <ion-row class="disabled--header ion-align-items-center">
+      <ion-col class="disabled--header-logo-container">
+        <img class="disabled--header-logo" src="../../../assets/svg/fyle-logo-light.svg" alt="fyle-logo-light" />
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+  <div class="disabled--body">
+    <div id="disabled--header" class="disabled--body-header">Account Disabled</div>
+    <img class="disabled--image" src="../../../assets/images/stop.svg" alt="Stop" />
+    <div class="disabled--subtext">
+      This account is no longer active. Please contact your company admin for details.
     </div>
   </div>
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar mode="md">
+    <ion-button fill="clear" expand="full" (click)="onGotoSignInClick()">
+      <span class="disabled--greyed"> Incorrect Account? </span>
+      Try Signing in Again
+    </ion-button>
+  </ion-toolbar>
+</ion-footer>
diff --git a/src/app/auth/disabled/disabled.page.scss b/src/app/auth/disabled/disabled.page.scss
@@ -1,80 +1,93 @@
-@import '../../../theme/colors.scss';
+$disabled-header: #220033;
+$body-header: #000;
+$body-subheader: #4a4a4a;
+$password-icon: #b9beba;
+$secondary-cta-border: #e0e0e0;
 
-.disabled-user {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
+.disabled {
+  &--header {
+    min-height: 140px;
+  }
+
+  &--header-container {
+    min-height: 140px;
+    background-color: $disabled-header;
+  }
 
-  &__content-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 2;
+  &--header-logo-container {
+    text-align: center;
   }
 
-  &__arrow-icon {
-    fill: $pure-white;
-    margin-right: 8px;
+  &--header-logo {
+    max-width: 100px;
   }
 
-  &__cta-text {
-    font-size: 14px;
-    font-weight: 500;
+  &--body {
+    padding: 24px;
+    text-align: center;
   }
 
-  &__cta {
-    margin: 0 20px 24px 20px;
+  &--body-field {
+    width: 100%;
   }
 
-  &__cta-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  &--body-header {
+    font-size: 24px;
+    margin-top: 16px;
+    margin-bottom: 8px;
+    color: $body-header;
+    font-weight: 700;
   }
 
-  &__error-icon-container {
-    width: 60px;
-    height: 60px;
-    border-radius: 8px;
-    background: $pale-pink;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 16px;
+  &--image {
+    max-width: 125px;
+    padding: 12px;
   }
 
-  &__error-icon {
-    width: 45px;
-    height: 45px;
+  &--subtext {
+    font-size: 16px;
+    color: $body-subheader;
+    margin-top: 8px;
+    margin-bottom: 24px;
   }
 
-  &__text {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-direction: column;
+  &--primary-cta {
+    .mat-button-base {
+      width: 100%;
+      font-weight: 700;
+      min-height: 47px;
+    }
   }
 
-  &__header {
-    color: $black;
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: normal;
-    height: 26px;
-    margin: 0;
+  &--password-visibility-icon {
+    color: $password-icon;
   }
 
-  &__content {
-    color: $black-light;
+  &--secondary-cta {
+    .mat-button-base {
+      width: 100%;
+      font-weight: 700;
+      min-height: 47px;
+      letter-spacing: 1.6px;
+      border: 1px solid $secondary-cta-border;
+    }
+    margin-top: 24px;
+  }
+
+  &--redirect {
+    margin: 16px;
     text-align: center;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.25;
-    height: 36px;
-    width: 274px;
+    font-size: 16px;
+    a {
+      text-decoration: none;
+    }
+  }
+
+  &--edit-email {
+    text-align: end;
+  }
+
+  &--greyed {
+    color: grey;
   }
 }
diff --git a/src/app/auth/new-password/new-password.module.ts b/src/app/auth/new-password/new-password.module.ts
@@ -17,7 +17,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 
 import { PopupComponent } from './popup/popup.component';
-import { SharedModule } from 'src/app/shared/shared.module';
 
 @NgModule({
   imports: [
@@ -31,7 +30,6 @@ import { SharedModule } from 'src/app/shared/shared.module';
     ReactiveFormsModule,
     MatIconModule,
     MatButtonModule,
-    SharedModule,
   ],
   declarations: [NewPasswordPage, PopupComponent],
 })