Tidy up layout

1. Use tailwind if possible. 2. Realize that each step has a different desired content width, so introduce contentClassName for that. 3. Adjust many numbers to follow the design, like margin, padding, gap. 4. Add margin to content so that text are not TOO near the edge in mobile view.
authgear · Jun 13, 2024 · e50d07c · e50d07c
1 parent 4731773
commit e50d07c
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 90 deletions.
diff --git a/portal/src/OnboardingSurveyLayout.module.css b/portal/src/OnboardingSurveyLayout.module.css
@@ -1,41 +1,34 @@
-.logo {
-  position: absolute;
-  height: 48px;
-}
 .body {
-  min-height: 100vh;
-  flex-shrink: 0;
-}
-.centerDiv {
-  margin: auto;
-  padding-top: 100px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 750px;
+  @apply min-h-screen;
+  @apply shrink-0;
+  @apply flex flex-col;
+  @apply relative;
 }
-.navigationDiv {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
+
+.logo {
+  @apply absolute;
+  @apply h-12;
 }
-.contentDiv {
-  margin: 50px 10px;
-  max-width: 100%;
+
+.content {
+  @apply self-center;
+  @apply flex flex-col;
+  @apply mt-[100px] mx-4 mb-4;
 }
-.titlesDiv {
-  width: 420px;
-  max-width: 100%;
+
+.navigationDiv {
+  @apply self-center;
+  @apply flex flex-row justify-between items-center;
+  @apply gap-2.5;
 }
+
 .SurveyTitle {
-  white-space: pre-line;
-  text-align: center;
-  margin-bottom: 20px;
+  @apply whitespace-pre-line;
+  @apply text-center;
+  @apply mb-6;
 }
+
 .SurveySubtitle {
-  white-space: pre-line;
-  text-align: center;
+  @apply whitespace-pre-line;
+  @apply text-center;
 }
diff --git a/portal/src/OnboardingSurveyLayout.tsx b/portal/src/OnboardingSurveyLayout.tsx
@@ -1,3 +1,4 @@
+import cn from "classnames";
 import React, { useContext, useMemo } from "react";
 import { useTheme, Text } from "@fluentui/react";
 import { Context } from "@oursky/react-messageformat";
@@ -80,12 +81,20 @@ export interface SurveyLayoutProps {
   nextButton: React.ReactNode;
   backButton?: React.ReactNode;
   children?: React.ReactNode;
+  contentClassName?: string;
 }
 
 export default function SurveyLayout(
   props: SurveyLayoutProps
 ): React.ReactElement {
-  const { title, subtitle, nextButton, backButton, children } = props;
+  const {
+    title,
+    subtitle,
+    nextButton,
+    backButton,
+    children,
+    contentClassName,
+  } = props;
   const theme = useTheme();
   const overrideBodyStyles = useMemo(() => {
     return {
@@ -95,12 +104,10 @@ export default function SurveyLayout(
   return (
     <div style={overrideBodyStyles} className={styles.body}>
       <Logo />
-      <div className={styles.centerDiv}>
-        <div className={styles.titlesDiv}>
-          <SurveyTitle>{title}</SurveyTitle>
-          <SurveySubtitle>{subtitle}</SurveySubtitle>
-        </div>
-        <div className={styles.contentDiv}>{children}</div>
+      <div className={cn(styles.content, contentClassName)}>
+        <SurveyTitle>{title}</SurveyTitle>
+        <SurveySubtitle>{subtitle}</SurveySubtitle>
+        {children}
         <div className={styles.navigationDiv}>
           {backButton}
           {nextButton}

diff --git a/portal/src/OnboardingSurveyScreen.module.css b/portal/src/OnboardingSurveyScreen.module.css
@@ -1,42 +1,55 @@
 .SingleChoiceButtonGroupVariantCentered {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-  justify-content: center;
-  width: 100%;
+  @apply my-[72px];
+  @apply flex flex-row flex-wrap items-center justify-center;
+  @apply gap-4;
 }
+
 .SingleChoiceButtonGroupVariantLabeled {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-  width: 100%;
+  @apply flex flex-row flex-wrap items-center;
+  @apply gap-4;
+  @apply w-full;
 }
+
+.formBox {
+  @apply mt-[48px] mb-[72px];
+  @apply grid;
+  @apply gap-8;
+}
+
+.step1Content {
+  @apply max-w-[600px];
+}
+
+.step2Content {
+  @apply max-w-[420px];
+}
+
+.step3Content {
+  @apply max-w-[420px];
+}
+
+.step4Content {
+  @apply max-w-[760px];
+}
+
+.step4 {
+  @apply mt-[48px] mb-[72px];
+}
+
 .MultiChoiceButtonGroup {
-  display: grid;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin: auto;
-  grid-auto-rows: 1fr;
+  @apply grid;
+  @apply gap-6 mobile:gap-3;
   @apply grid-cols-2 mobile:grid-cols-1;
+  grid-auto-rows: 1fr;
 }
+
 .CompoundChoiceButton {
-  display: grid;
   max-width: 368px;
   min-height: 118px;
   height: 100%;
   padding: 25px;
 }
-.formBox {
-  width: 380px;
-  max-width: 100%;
-  display: grid;
-  gap: 20px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
+
 .otherReasonInput {
-  margin-top: 20px;
+  @apply mt-8;
 }
diff --git a/portal/src/OnboardingSurveyScreen.tsx b/portal/src/OnboardingSurveyScreen.tsx
@@ -1,3 +1,4 @@
+import cn from "classnames";
 import React, {
   useContext,
   useState,
@@ -140,9 +141,7 @@ function CompoundChoiceButton(props: DefaultCompoundButtonProps) {
       {...props}
       toggle={true}
       styles={overrideStyles}
-      className={
-        (checked ? "ring-2" : "ring-1") + " " + styles.CompoundChoiceButton
-      }
+      className={cn(checked ? "ring-2" : "ring-1", styles.CompoundChoiceButton)}
     />
   );
 }
@@ -369,6 +368,7 @@ function Step1(_props: StepProps) {
   );
   return (
     <SurveyLayout
+      contentClassName={styles.step1Content}
       title={renderToString("OnboardingSurveyScreen.step1.title")}
       subtitle={renderToString("OnboardingSurveyScreen.step1.subtitle")}
       nextButton={
@@ -436,6 +436,7 @@ function Step2(_props: StepProps) {
   }, [theme]);
   return (
     <SurveyLayout
+      contentClassName={styles.step2Content}
       title={renderToString("OnboardingSurveyScreen.step2.title")}
       subtitle={renderToString("OnboardingSurveyScreen.step2.subtitle")}
       nextButton={
@@ -537,6 +538,7 @@ function Step3Team(_props: StepProps) {
   }, [theme]);
   return (
     <SurveyLayout
+      contentClassName={styles.step3Content}
       title={renderToString("OnboardingSurveyScreen.step3-team.title")}
       subtitle={renderToString("OnboardingSurveyScreen.step3-team.subtitle")}
       nextButton={
@@ -645,6 +647,7 @@ function Step3Individual(_props: StepProps) {
   }, [theme]);
   return (
     <SurveyLayout
+      contentClassName={styles.step3Content}
       title={renderToString("OnboardingSurveyScreen.step3-individual.title")}
       subtitle={renderToString(
         "OnboardingSurveyScreen.step3-individual.subtitle"
@@ -755,6 +758,7 @@ function Step4(_props: StepProps) {
   }, [theme]);
   return (
     <SurveyLayout
+      contentClassName={styles.step4Content}
       title={renderToString("OnboardingSurveyScreen.step4.title")}
       subtitle={renderToString("OnboardingSurveyScreen.step4.subtitle")}
       nextButton={
@@ -773,27 +777,29 @@ function Step4(_props: StepProps) {
         />
       }
     >
-      <MultiChoiceButtonGroup
-        prefix={[prefix, reasonChoiceGroup].join("_")}
-        availableChoices={reasonChoices}
-        selectedChoices={reasonChoicesState}
-        setChoice={setReasonChoicesState}
-      />
-      {reasonChoicesState.includes("Other") ? (
-        <FormProvider loading={false}>
-          <FormTextField
-            parentJSONPointer={""}
-            fieldName={"otherReason"}
-            styles={inputStyles}
-            className={styles.otherReasonInput}
-            label={renderToString(
-              "OnboardingSurveyScreen.step4.otherReason.label"
-            )}
-            value={otherReason}
-            onChange={(_, v) => setOtherReason(v!)}
-          />
-        </FormProvider>
-      ) : null}
+      <div className={styles.step4}>
+        <MultiChoiceButtonGroup
+          prefix={[prefix, reasonChoiceGroup].join("_")}
+          availableChoices={reasonChoices}
+          selectedChoices={reasonChoicesState}
+          setChoice={setReasonChoicesState}
+        />
+        {reasonChoicesState.includes("Other") ? (
+          <FormProvider loading={false}>
+            <FormTextField
+              parentJSONPointer={""}
+              fieldName={"otherReason"}
+              styles={inputStyles}
+              className={styles.otherReasonInput}
+              label={renderToString(
+                "OnboardingSurveyScreen.step4.otherReason.label"
+              )}
+              value={otherReason}
+              onChange={(_, v) => setOtherReason(v!)}
+            />
+          </FormProvider>
+        ) : null}
+      </div>
     </SurveyLayout>
   );
 }