feat: Fix QA issues for Sign In page (#3386)

android/app/src/main/res/drawable/ic_launcher_new_splash_background.xml

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector
+    android:height="108dp"
+    android:width="108dp"
+    android:viewportHeight="108"
+    android:viewportWidth="108"
+    xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#3DDC84"
+          android:pathData="M0,0h108v108h-108z"/>
+    <path android:fillColor="#00000000" android:pathData="M9,0L9,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,0L19,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,0L29,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,0L39,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,0L49,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,0L59,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,0L69,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,0L79,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M89,0L89,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M99,0L99,108"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,9L108,9"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,19L108,19"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,29L108,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,39L108,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,49L108,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,59L108,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,69L108,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,79L108,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,89L108,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M0,99L108,99"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,29L89,29"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,39L89,39"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,49L89,49"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,59L89,59"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,69L89,69"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M19,79L89,79"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M29,19L29,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M39,19L39,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M49,19L49,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M59,19L59,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M69,19L69,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+    <path android:fillColor="#00000000" android:pathData="M79,19L79,89"
+          android:strokeColor="#33FFFFFF" android:strokeWidth="0.8"/>
+</vector>

android/app/src/main/res/drawable/ic_launcher_new_splash_foreground.xml

@@ -1,34 +1,36 @@
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="108dp"
     android:height="108dp"
-    android:viewportWidth="108"
-    android:viewportHeight="108">
-  <group android:scaleX="0.6017143"
-      android:scaleY="0.6017143"
-      android:translateX="32.94"
-      android:translateY="46.77943">
-    <path
-        android:pathData="M2,3.379C2,2.618 2.597,2 3.333,2H20.667C21.403,2 22,2.618 22,3.379V20.621C22,21.382 21.403,22 20.667,22H3.333C2.597,22 2,21.382 2,20.621V3.379Z"
-        android:fillColor="#ffffff"/>
-    <path
-        android:pathData="M10.353,2H3.037C2.464,2 2,2.464 2,3.037V20.963C2,21.536 2.464,22 3.037,22H20.963C21.536,22 22,21.536 22,20.963V3.037C22,2.464 21.536,2 20.963,2H11.729V2.419C11.729,2.521 11.729,14.718 11.729,14.854V14.991C11.695,15.641 11.49,16.153 11.097,16.546C10.328,17.315 8.995,17.418 7.833,17.418C6.26,17.418 4.141,17.213 3.783,15.521L3.731,15.094C3.714,15.008 3.714,14.769 3.714,14.154C3.714,13.573 3.714,12.752 3.714,11.898V5.302C3.714,4.891 3.851,4.55 4.141,4.259C4.432,3.969 4.774,3.832 5.184,3.832L9.029,3.849L9.166,3.883V5.182H5.303C5.201,5.182 5.15,5.233 5.15,5.302C5.15,5.507 5.15,5.609 5.15,5.609V8.207H8.055V9.54H5.15V15.008C5.184,15.965 6.602,16.153 7.798,16.153C8.328,16.136 9.456,16.136 9.969,15.623C10.106,15.487 10.234,15.23 10.353,14.854V2Z"
-        android:fillColor="#FF3366"
-        android:fillType="evenOdd"/>
-    <path
-        android:pathData="M29.629,4.657V7.149H33.45V9.688H29.629V16.883H27V4.657C27,3.199 28.217,2 29.75,2H34.473V4.563H29.75C29.677,4.539 29.629,4.586 29.629,4.657Z"
-        android:fillColor="#000000"
-        android:fillType="evenOdd"/>
-    <path
-        android:pathData="M44.744,22H37.637V19.437H44.744C44.793,19.437 44.866,19.39 44.866,19.32V17.533H38.465C36.955,17.533 35.714,16.334 35.714,14.876V6.389H38.343V14.9C38.343,14.97 38.391,15.041 38.489,15.041H44.744C44.793,15.041 44.866,14.994 44.866,14.9V6.389H47.495V19.343C47.471,20.801 46.254,22 44.744,22Z"
-        android:fillColor="#000000"
-        android:fillType="evenOdd"/>
-    <path
-        android:pathData="M52.193,2V14.226C52.193,14.296 52.242,14.367 52.314,14.367H54.651V16.906H52.314C50.805,16.906 49.564,15.707 49.564,14.249V2.024H52.193V2Z"
-        android:fillColor="#000000"
-        android:fillType="evenOdd"/>
-    <path
-        android:pathData="M67.868,12.533V8.325C67.868,6.867 66.627,5.668 65.118,5.691H58.862C57.353,5.691 56.112,6.89 56.112,8.348V14.226C56.112,15.684 57.353,16.883 58.862,16.883H67.868V14.343H58.838C58.741,14.343 58.692,14.273 58.692,14.202V12.533H67.868ZM65.264,8.325V9.994H58.716V8.325C58.716,8.23 58.789,8.183 58.862,8.183H65.118C65.215,8.183 65.264,8.254 65.264,8.325Z"
-        android:fillColor="#000000"
-        android:fillType="evenOdd"/>
-  </group>
+    android:viewportWidth="768"
+    android:viewportHeight="768">
+  <path
+      android:pathData="M-76.8,-76.8h921.6v921.6h-921.6z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M-76.8,-76.8h921.6v921.6h-921.6z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M196.98,335.18C196.98,330.86 200.36,327.35 204.53,327.35L302.77,327.35C306.95,327.35 310.33,330.86 310.33,335.18L310.33,433.11C310.33,437.43 306.95,440.94 302.77,440.94L204.53,440.94C200.36,440.94 196.98,437.43 196.98,433.11ZM196.98,335.18"
+      android:fillColor="#ffffff"
+      android:fillType="nonZero"/>
+  <path
+      android:pathData="M244.32,327.35L202.85,327.35C199.61,327.35 196.98,329.99 196.98,333.24L196.98,435.05C196.98,438.3 199.61,440.94 202.85,440.94L304.46,440.94C307.7,440.94 310.33,438.3 310.33,435.05L310.33,333.24C310.33,329.99 307.7,327.35 304.46,327.35L252.12,327.35L252.12,329.73C252.12,330.31 252.12,399.58 252.12,400.36L252.12,401.13C251.93,404.82 250.76,407.73 248.54,409.96C244.18,414.34 236.62,414.92 230.04,414.92C221.12,414.92 209.11,413.75 207.08,404.14L206.79,401.71C206.69,401.23 206.69,399.87 206.69,396.38C206.69,393.08 206.69,388.42 206.69,383.57L206.69,346.1C206.69,343.77 207.46,341.83 209.11,340.18C210.76,338.53 212.7,337.75 215.02,337.75L236.81,337.85L237.59,338.05L237.59,345.42L215.7,345.42C215.12,345.42 214.83,345.71 214.83,346.1C214.83,347.27 214.83,347.85 214.83,347.85L214.83,362.6L231.29,362.6L231.29,370.17L214.83,370.17L214.83,401.23C215.02,406.67 223.06,407.73 229.84,407.73C232.84,407.64 239.23,407.64 242.14,404.73C242.91,403.95 243.64,402.49 244.32,400.36ZM244.32,327.35"
+      android:fillColor="#ff3366"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M353.57,342.44L353.57,356.59L375.23,356.59L375.23,371.02L353.57,371.02L353.57,411.88L338.67,411.88L338.67,342.44C338.67,334.16 345.57,327.35 354.26,327.35L381.02,327.35L381.02,341.91L354.26,341.91C353.85,341.77 353.57,342.04 353.57,342.44ZM353.57,342.44"
+      android:fillColor="#161528"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M439.25,440.94L398.96,440.94L398.96,426.39L439.25,426.39C439.52,426.39 439.93,426.12 439.93,425.72L439.93,415.57L403.65,415.57C395.1,415.57 388.06,408.76 388.06,400.48L388.06,352.28L402.96,352.28L402.96,400.61C402.96,401.02 403.24,401.41 403.79,401.41L439.25,401.41C439.52,401.41 439.93,401.15 439.93,400.61L439.93,352.28L454.84,352.28L454.84,425.85C454.7,434.13 447.8,440.94 439.25,440.94ZM439.25,440.94"
+      android:fillColor="#161528"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M481.46,327.35L481.46,396.79C481.46,397.19 481.74,397.59 482.15,397.59L495.39,397.59L495.39,412.01L482.15,412.01C473.6,412.01 466.56,405.2 466.56,396.92L466.56,327.48L481.46,327.48ZM481.46,327.35"
+      android:fillColor="#161528"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M570.31,387.17L570.31,363.27C570.31,354.99 563.27,348.18 554.72,348.32L519.26,348.32C510.71,348.32 503.67,355.13 503.67,363.41L503.67,396.79C503.67,405.07 510.71,411.88 519.26,411.88L570.31,411.88L570.31,397.46L519.13,397.46C518.57,397.46 518.3,397.05 518.3,396.65L518.3,387.17ZM555.55,363.27L555.55,372.75L518.43,372.75L518.43,363.27C518.43,362.74 518.85,362.47 519.26,362.47L554.72,362.47C555.27,362.47 555.55,362.87 555.55,363.27ZM555.55,363.27"
+      android:fillColor="#161528"
+      android:fillType="evenOdd"/>
 </vector>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_new_splash.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_new_splash_background"/>
+    <background android:drawable="@drawable/ic_launcher_new_splash_background"/>
     <foreground android:drawable="@drawable/ic_launcher_new_splash_foreground"/>
 </adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_new_splash_round.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/ic_launcher_new_splash_background"/>
+    <background android:drawable="@drawable/ic_launcher_new_splash_background"/>
     <foreground android:drawable="@drawable/ic_launcher_new_splash_foreground"/>
 </adaptive-icon>

src/app/app.component.ts

@@ -105,7 +105,7 @@ export class AppComponent implements OnInit {
         style: Style.Default,
       });
 
-      setTimeout(async () => await SplashScreen.hide(), 1000);
+      setTimeout(async () => await SplashScreen.hide(), 500);
 
       /*
        * Use the app's font size irrespective of the user's device font size.

src/app/auth/sign-in/sign-in.page.html

@@ -7,6 +7,7 @@
         height="auto"
         onloadedmetadata="this.muted = true"
         oncanplay="this.play()"
+        poster="../../../assets/images/video-default-background.png"
         loop
       >
         <source src="/assets/videos/mobile-onboarding.mp4" type="video/mp4" />

src/app/auth/sign-in/sign-in.page.scss

@@ -41,14 +41,15 @@
   &__select-sign-in {
     display: flex;
     flex-direction: column;
-    height: 96vh;
+    height: 100vh;
     padding: 20px 20px 0 20px;
   }
 
   &__cta-container {
     margin-top: 24px;
     position: relative;
     height: 144px;
+    margin-bottom: 24px;
   }
 
   &__divider-container {
@@ -62,15 +63,15 @@
 
   &__divider {
     height: 1px;
-    background-color: $grey;
+    background-color: $border-tertiary;
     width: 100%;
   }
 
   &__enter-email {
     height: 96vh;
     margin-top: 18px;
     padding: 20px;
-    padding: 28px 20px 44px 20px;
+    padding: 24px 20px 44px 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -134,8 +135,9 @@
     &__disabled-email {
       font-size: 14px;
       font-weight: 500;
-      line-height: 1.28;
+      line-height: 1.3;
       color: $blue-black;
+      padding-top: 4px;
       margin-bottom: 24px;
       display: flex;
       align-items: center;
@@ -269,3 +271,16 @@
     }
   }
 }
+
+.fade-in {
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}