style(ui): update consent page layout (#3459)

packages/ui/src/App.tsx

@@ -77,6 +77,7 @@ const App = () => {
       <Provider value={context}>
         <AppBoundary>
           <Routes>
+            <Route path="sign-in/consent" element={<Consent />} />
             <Route element={<AppLayout />}>
               <Route
                 path="unknown-session"
@@ -84,8 +85,6 @@ const App = () => {
               />
               <Route path="springboard" element={<Springboard />} />
 
-              <Route path="sign-in/consent" element={<Consent />} />
-
               <Route element={<LoadingLayerProvider />}>
                 {/* Sign-in */}
                 <Route path="sign-in">

packages/ui/src/pages/Consent/index.module.scss

@@ -1,12 +1,25 @@
 @use '@/scss/underscore' as _;
 
-.img {
-  width: 96px;
-  height: 96px;
-  @include _.image-align-center;
-  margin-bottom: _.unit(4);
+
+.viewBox {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+
+  .container {
+    min-height: 100%;
+    @include _.flex_column(center, center);
+  }
+
+  .img {
+    height: _.unit(10);
+    @include _.image-align-center;
+    margin-bottom: _.unit(5);
+  }
+
+  .loadingWrapper {
+    height: _.unit(16);
+    @include _.flex_column(center, center);
+  }
 }
 
-.loadingWrapper {
-  height: _.unit(12);
-}

packages/ui/src/pages/Consent/index.tsx

@@ -1,7 +1,6 @@
 import { conditional } from '@silverhand/essentials';
 import { useEffect, useContext, useState } from 'react';
 
-import StaticPageLayout from '@/Layout/StaticPageLayout';
 import { consent } from '@/apis/consent';
 import { LoadingIcon } from '@/components/LoadingLayer';
 import useApi from '@/hooks/use-api';
@@ -42,10 +41,12 @@ const Consent = () => {
   }, [asyncConsent, handleError]);
 
   return (
-    <StaticPageLayout>
-      {brandingLogo && <img alt="logo" className={styles.img} src={brandingLogo} />}
-      <div className={styles.loadingWrapper}>{loading && <LoadingIcon />}</div>
-    </StaticPageLayout>
+    <div className={styles.viewBox}>
+      <div className={styles.container}>
+        {brandingLogo && <img alt="logo" className={styles.img} src={brandingLogo} />}
+        <div className={styles.loadingWrapper}>{loading && <LoadingIcon />}</div>
+      </div>
+    </div>
   );
 };