fix(console): sign in exp layout (#1142)

packages/console/src/pages/SignInExperience/components/Preview.module.scss

@@ -4,8 +4,8 @@
   width: 480px;
   padding: 0;
   overflow: hidden;
-  box-shadow: var(--shadow-1);
-  border: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
 
   .header {
     display: flex;
@@ -43,59 +43,6 @@
       border: none;
     }
 
-    &.mobile {
-      padding: _.unit(10) 0;
-
-      .device {
-        width: 390px;
-        margin: 0 auto;
-        border-radius: 26px;
-        overflow: hidden;
-
-        .topBar {
-          display: flex;
-          align-items: center;
-          padding: _.unit(3) _.unit(6);
-
-          .time {
-            flex: 1;
-            font: var(--font-subhead-2);
-          }
-        }
-
-        &.dark {
-          // Sync with iframe's UI color
-          background: #1a1c1d;
-
-          .topBar {
-            color: #fff;
-          }
-        }
-
-        &.light {
-          // Sync with iframe's UI color
-          background: #fff;
-
-          .topBar {
-            color: #000;
-          }
-        }
-
-        iframe {
-          width: 390px;
-          height: 808px;
-        }
-      }
-
-      .description {
-        margin-top: _.unit(6);
-        width: 100%;
-        text-align: center;
-        color: var(--color-caption);
-        font: var(--font-body-small);
-      }
-    }
-
     &.web {
       .device {
         width: 480px;
@@ -113,5 +60,76 @@
         }
       }
     }
+
+    &.mobile {
+      padding: _.unit(10) 0;
+      height: 500px;
+      position: relative;
+
+      .deviceWrapper {
+        width: 390px;
+        height: 450px;
+        margin: 0 auto;
+        transform: scale(0.5);
+        transform-origin: top center;
+
+        .device {
+          border-radius: 26px;
+          overflow: hidden;
+
+          .topBar {
+            display: flex;
+            align-items: center;
+            padding: _.unit(3) _.unit(6);
+
+            .time {
+              flex: 1;
+              font: var(--font-subhead-2);
+            }
+          }
+
+          &.dark {
+            // Sync with iframe's UI color
+            background: #1a1c1d;
+
+            .topBar {
+              color: #fff;
+            }
+          }
+
+          &.light {
+            // Sync with iframe's UI color
+            background: #fff;
+
+            .topBar {
+              color: #000;
+            }
+          }
+
+          iframe {
+            width: 390px;
+            height: 808px;
+          }
+        }
+
+        @media screen and (min-height: 1100px) {
+          transform: unset;
+          height: 900px;
+        }
+
+        @media screen and (min-height: 900px) and (max-height: 1100px) {
+          transform: scale(0.75);
+          height: 675px;
+        }
+
+        .description {
+          margin-top: _.unit(6);
+          width: 100%;
+          text-align: center;
+          color: var(--color-caption);
+          font: var(--font-body-small);
+        }
+      }
+    }
   }
 }

packages/console/src/pages/SignInExperience/components/Preview.tsx

@@ -110,14 +110,6 @@ const Preview = ({ signInExperience, className }: Props) => {
         </div>
       </div>
       <TabNav className={styles.nav}>
-        <TabNavItem
-          isActive={platform === 'web'}
-          onClick={() => {
-            setPlatform('web');
-          }}
-        >
-          {t('sign_in_exp.preview.web')}
-        </TabNavItem>
         <TabNavItem
           isActive={platform === 'mobile'}
           onClick={() => {
@@ -126,20 +118,30 @@ const Preview = ({ signInExperience, className }: Props) => {
         >
           {t('sign_in_exp.preview.mobile')}
         </TabNavItem>
+        <TabNavItem
+          isActive={platform === 'web'}
+          onClick={() => {
+            setPlatform('web');
+          }}
+        >
+          {t('sign_in_exp.preview.web')}
+        </TabNavItem>
       </TabNav>
       <div className={classNames(styles.body, styles[platform])}>
-        <div className={classNames(styles.device, styles[mode])}>
+        <div className={styles.deviceWrapper}>
+          <div className={classNames(styles.device, styles[mode])}>
+            {platform === 'mobile' && (
+              <div className={styles.topBar}>
+                <div className={styles.time}>{dayjs().format('HH:mm')}</div>
+                <PhoneInfo />
+              </div>
+            )}
+            <iframe ref={previewRef} src="/sign-in?preview=true" tabIndex={-1} />
+          </div>
           {platform === 'mobile' && (
-            <div className={styles.topBar}>
-              <div className={styles.time}>{dayjs().format('HH:mm')}</div>
-              <PhoneInfo />
-            </div>
+            <div className={styles.description}>{t('sign_in_exp.preview.mobile_description')}</div>
           )}
-          <iframe ref={previewRef} src="/sign-in?preview=true" tabIndex={-1} />
         </div>
-        {platform === 'mobile' && (
-          <div className={styles.description}>{t('sign_in_exp.preview.mobile_description')}</div>
-        )}
       </div>
     </Card>
   );

packages/console/src/pages/SignInExperience/index.module.scss

@@ -2,9 +2,9 @@
 
 .wrapper {
   display: flex;
-  align-items: flex-start;
-  height: 100%;
+  align-items: stretch;
   min-width: 950px;
+  height: 100%;
 
   .setup {
     flex: 1;

packages/console/src/pages/SignInExperience/index.tsx

@@ -14,7 +14,6 @@ import CardTitle from '@/components/CardTitle';
 import TabNav, { TabNavItem } from '@/components/TabNav';
 import useApi, { RequestError } from '@/hooks/use-api';
 import useSettings from '@/hooks/use-settings';
-import useUserPreferences from '@/hooks/use-user-preferences';
 import * as detailsStyles from '@/scss/details.module.scss';
 import * as modalStyles from '@/scss/modal.module.scss';
 
@@ -35,9 +34,6 @@ const SignInExperience = () => {
   const { tab } = useParams();
   const { data, error, mutate } = useSWR<SignInExperienceType, RequestError>('/api/sign-in-exp');
   const { settings, error: settingsError, updateSettings } = useSettings();
-  const {
-    data: { experienceNoticeConfirmed },
-  } = useUserPreferences();
   const [dataToCompare, setDataToCompare] = useState<SignInExperienceType>();
 
   const methods = useForm<SignInExperienceForm>();
@@ -95,7 +91,7 @@ const SignInExperience = () => {
     return <div>{settingsError.body?.message ?? settingsError.message}</div>;
   }
 
-  if (!experienceNoticeConfirmed) {
+  if (!settings?.customizeSignInExperience) {
     return <Welcome />;
   }