From 6dfa4b3d951a609b9c13a9d6bc00195f59bdf4f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?=
 <102536422+filipslezaklab@users.noreply.github.com>
Date: Wed, 6 Dec 2023 10:25:18 +0100
Subject: [PATCH] fix: mfa mobile scroll (#463)

---
 web/src/pages/auth/MFARoute/MFANav/MFANav.tsx |  4 +-
 web/src/pages/auth/MFARoute/style.scss        | 67 ++++++++-----------
 web/src/pages/auth/style.scss                 | 35 +++++++---
 .../modals/ManageWebAuthNModal/style.scss     | 31 +++++----
 4 files changed, 72 insertions(+), 65 deletions(-)

diff --git a/web/src/pages/auth/MFARoute/MFANav/MFANav.tsx b/web/src/pages/auth/MFARoute/MFANav/MFANav.tsx
index bad8e83f4..ee6ef0e58 100644
--- a/web/src/pages/auth/MFARoute/MFANav/MFANav.tsx
+++ b/web/src/pages/auth/MFARoute/MFANav/MFANav.tsx
@@ -17,7 +17,7 @@ export const MFANav = () => {
 
   const totpRoute = useMatch('/auth/mfa/totp');
   const web3Route = useMatch('/auth/mfa/web3');
-  const webAuthNRoute = useMatch('/auth/mfa/webautn');
+  const webAuthNRoute = useMatch('/auth/mfa/webauthn');
   const emailRoute = useMatch('/auth/mfa/email');
   const recoveryRoute = useMatch('/auth/mfa/recovery');
 
@@ -104,7 +104,7 @@ export const MFANav = () => {
           onClick={() => navigate(link.link, { replace: true })}
         />
       ))}
-      {!recoveryRoute !== null && (
+      {!recoveryRoute && (
         <Button
           text={LL.loginPage.mfa.controls.useRecoveryCode()}
           size={ButtonSize.LARGE}
diff --git a/web/src/pages/auth/MFARoute/style.scss b/web/src/pages/auth/MFARoute/style.scss
index 4fcfa378b..6db6ca0bc 100644
--- a/web/src/pages/auth/MFARoute/style.scss
+++ b/web/src/pages/auth/MFARoute/style.scss
@@ -3,77 +3,68 @@
 #auth-container {
   #mfa {
     display: flex;
-    flex-flow: column nowrap;
+    flex-flow: column;
     align-content: center;
     justify-content: center;
     align-items: center;
-    gap: 0;
+    gap: 24px;
     height: 100%;
     width: 100%;
     box-sizing: border-box;
-    padding: 3rem 1.5rem;
+    padding: 15px 10px 30px 10px;
 
-    > h1 {
-      @include typography-legacy(28px, 39px, semiBold, var(--text-main), 'Poppins');
-
-      margin-bottom: 1.5rem;
-
-      @include media-breakpoint-up(md) {
-        margin-bottom: 2.7rem;
-      }
+    h1 {
+      @include typography(app-welcome-1);
+      color: var(--text-body-primary);
+      width: 100%;
+      text-align: center;
     }
 
     & > p {
-      @include regular-text;
+      @include typography(welcome-h2);
 
       color: var(--gray-dark);
-      margin-bottom: 1.5rem;
-      line-height: 25px;
-      max-width: 334px;
       text-align: center;
-
-      @include media-breakpoint-up(md) {
-        margin-bottom: 2.7rem;
-      }
+      width: 100%;
+      max-width: 334px;
     }
 
     .btn {
-      width: 284px;
+      min-width: 284px;
+
       height: 50px;
+      min-height: 50px;
 
       span,
       p {
-        font-family: Roboto;
+        @include typography(app-button-l);
       }
     }
 
     nav,
     form {
-      width: 284px;
+      display: flex;
+      flex-flow: column;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 24px;
+      min-width: 284px;
+
+      & > * {
+        min-width: 284px;
+        padding: 0;
+        margin: 0;
+      }
     }
 
     & > nav {
-      margin-top: 2.4rem;
-
       & > span {
-        @include typography-legacy(12px, 14px, regular, var(--gray-light));
+        @include typography(app-modal-1);
+        color: var(--text-body-tertiary);
 
         display: block;
         width: 100%;
         text-align: center;
-        margin-bottom: 2rem;
-      }
-
-      .btn {
-        margin-bottom: 2rem;
-      }
-    }
-
-    & > form {
-      .btn {
-        &:not(:last-child) {
-          margin-bottom: 2.4rem;
-        }
       }
     }
   }
diff --git a/web/src/pages/auth/style.scss b/web/src/pages/auth/style.scss
index 75625df34..e28c4a7a5 100644
--- a/web/src/pages/auth/style.scss
+++ b/web/src/pages/auth/style.scss
@@ -1,26 +1,36 @@
 @use '../../shared/scss/helpers' as *;
 
 #auth-container {
-  background-color: var(--bg-light);
+  background-color: var(--surface-frame-bg);
+  display: flex;
   min-height: 100vh;
-  min-width: 100%;
-  display: inline-grid;
-  grid-auto-flow: row dense;
-  grid-template-rows: 1fr;
-  grid-auto-columns: 1fr;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
-  justify-items: center;
+  min-height: 100dvh;
+  max-height: 100vh;
+  max-height: 100dvh;
+  overflow: auto;
+  @include media-breakpoint-up(lg) {
+    min-height: 100vh;
+    min-width: 100%;
+    max-height: 100vh;
+    height: max-content;
+    display: grid;
+    grid-template-rows: 100%;
+    grid-template-columns: 1fr 1fr;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+    justify-items: center;
+  }
 
   .logo-container {
     grid-row: 1;
+    grid-column: 1;
     display: none;
     flex-direction: column;
     align-content: center;
     align-items: center;
     justify-content: center;
-    background-color: var(--primary);
+    background-color: var(--surface-main-primary);
     flex-grow: 1;
     flex-shrink: 0;
     width: 100%;
@@ -39,6 +49,9 @@
   & > section {
     display: flex;
     width: 100%;
+    height: 100%;
+    max-height: 100%;
     grid-row: 1;
+    grid-column: 2;
   }
 }
diff --git a/web/src/pages/users/UserProfile/UserAuthInfo/modals/ManageWebAuthNModal/style.scss b/web/src/pages/users/UserProfile/UserAuthInfo/modals/ManageWebAuthNModal/style.scss
index c98b3cef4..08ff851b1 100644
--- a/web/src/pages/users/UserProfile/UserAuthInfo/modals/ManageWebAuthNModal/style.scss
+++ b/web/src/pages/users/UserProfile/UserAuthInfo/modals/ManageWebAuthNModal/style.scss
@@ -1,17 +1,17 @@
 @use '../../../../../../shared/scss/helpers' as *;
 
 #manage-webauthn-modal {
-  padding-bottom: 2.6rem;
+  padding-bottom: 26px;
 
   & > .content {
     & > .message-box {
       box-sizing: border-box;
       min-height: 70px;
-      margin-bottom: 2rem;
+      margin-bottom: 20px;
 
       @include media-breakpoint-up(lg) {
-        width: calc(100% - 6rem);
-        margin: 0 3rem 3.4rem;
+        width: calc(100% - 60px);
+        margin: 0 30px 34px;
       }
     }
 
@@ -21,15 +21,15 @@
       box-sizing: border-box;
 
       @include media-breakpoint-down(lg) {
-        padding: 0 1.5rem;
-        row-gap: 1rem;
-        margin-bottom: 3rem;
+        padding: 0 15px;
+        row-gap: 10px;
+        margin-bottom: 30px;
       }
 
       @include media-breakpoint-up(lg) {
-        padding: 0 3rem;
-        row-gap: 2rem;
-        margin-bottom: 3.4rem;
+        padding: 0 30px;
+        row-gap: 20px;
+        margin-bottom: 34px;
       }
 
       & > .row-box {
@@ -40,10 +40,10 @@
         align-items: center;
         align-content: start;
         justify-content: start;
-        padding: 0;
+        padding: 0 20px;
+        box-sizing: border-box;
 
         & > :nth-child(1) {
-          margin-left: 2rem;
           width: 22px;
           height: 22px;
         }
@@ -55,8 +55,11 @@
           color: #444a4e;
         }
 
-        & > :nth-child(3) {
-          margin-left: 2rem;
+        .btn {
+          padding: 0;
+          width: 40px;
+          height: 40px;
+          justify-self: flex-end;
         }
       }
     }