Onboarding Survey UI

ref DEV-1331
ref DEV-1336

Author: louischan-oursky

portal/src/OnboardingSurveyLayout.module.css

@@ -0,0 +1,34 @@
+.body {
+  @apply min-h-screen;
+  @apply shrink-0;
+  @apply flex flex-col;
+  @apply relative;
+}
+
+.logo {
+  @apply absolute;
+  @apply h-12;
+}
+
+.content {
+  @apply self-center;
+  @apply flex flex-col;
+  @apply mt-[100px] mx-4 mb-4;
+}
+
+.navigationDiv {
+  @apply self-center;
+  @apply flex flex-row justify-between items-center;
+  @apply gap-2.5;
+}
+
+.SurveyTitle {
+  @apply whitespace-pre-line;
+  @apply text-center;
+  @apply mb-6;
+}
+
+.SurveySubtitle {
+  @apply whitespace-pre-line;
+  @apply text-center;
+}

portal/src/OnboardingSurveyLayout.tsx

@@ -0,0 +1,118 @@
+import cn from "classnames";
+import React, { useContext, useMemo } from "react";
+import { useTheme, Text } from "@fluentui/react";
+import { Context } from "@oursky/react-messageformat";
+import styles from "./OnboardingSurveyLayout.module.css";
+import authgearLogoURL from "./images/authgear_logo_color.svg";
+
+interface LogoProps {}
+
+const Logo: React.VFC<LogoProps> = (_props: LogoProps) => {
+  const { renderToString } = useContext(Context);
+  const theme = useTheme();
+  const logoStyles = useMemo(() => {
+    return {
+      fill: theme.semanticColors.bodyText,
+    };
+  }, [theme]);
+  return (
+    <img
+      style={logoStyles}
+      className={styles.logo}
+      alt={renderToString("system.name")}
+      src={authgearLogoURL}
+    />
+  );
+};
+
+export interface SurveyTitleProps {
+  children?: React.ReactNode;
+}
+
+export function SurveyTitle(props: SurveyTitleProps): React.ReactElement {
+  const theme = useTheme();
+  const overrideStyles = useMemo(() => {
+    return {
+      root: {
+        color: theme.semanticColors.bodyText,
+      },
+    };
+  }, [theme]);
+  return (
+    <Text
+      styles={overrideStyles}
+      className={styles.SurveyTitle}
+      variant="xxLarge"
+      block={true}
+    >
+      {props.children}
+    </Text>
+  );
+}
+
+export interface SurveySubtitleProps {
+  children?: React.ReactNode;
+}
+
+export function SurveySubtitle(props: SurveySubtitleProps): React.ReactElement {
+  const theme = useTheme();
+  const overrideStyles = useMemo(() => {
+    return {
+      root: {
+        color: theme.semanticColors.bodySubtext,
+      },
+    };
+  }, [theme]);
+  return (
+    <Text
+      styles={overrideStyles}
+      className={styles.SurveySubtitle}
+      variant="large"
+      block={true}
+    >
+      {props.children}
+    </Text>
+  );
+}
+
+export interface SurveyLayoutProps {
+  title: string;
+  subtitle: string;
+  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,
+    contentClassName,
+  } = props;
+  const theme = useTheme();
+  const overrideBodyStyles = useMemo(() => {
+    return {
+      backgroundColor: theme.semanticColors.bodyStandoutBackground,
+    };
+  }, [theme]);
+  return (
+    <div style={overrideBodyStyles} className={styles.body}>
+      <Logo />
+      <div className={cn(styles.content, contentClassName)}>
+        <SurveyTitle>{title}</SurveyTitle>
+        <SurveySubtitle>{subtitle}</SurveySubtitle>
+        {children}
+        <div className={styles.navigationDiv}>
+          {backButton}
+          {nextButton}
+        </div>
+      </div>
+    </div>
+  );
+}

portal/src/OnboardingSurveyScreen.module.css

@@ -0,0 +1,55 @@
+.SingleChoiceButtonGroupVariantCentered {
+  @apply my-[72px];
+  @apply flex flex-row flex-wrap items-center justify-center;
+  @apply gap-4;
+}
+
+.SingleChoiceButtonGroupVariantLabeled {
+  @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 {
+  @apply grid;
+  @apply gap-6 mobile:gap-3;
+  @apply grid-cols-2 mobile:grid-cols-1;
+  grid-auto-rows: 1fr;
+}
+
+.CompoundChoiceButton {
+  max-width: 368px;
+  min-height: 118px;
+  height: 100%;
+  padding: 25px;
+}
+
+.otherReasonInput {
+  @apply mt-8;
+}