fix: typography

app/client-v2/apps/goat/app/onboarding/auth/AuthTemplate.tsx → app/client-v2/apps/goat/app/onboarding/layout.tsx

@@ -1,13 +1,15 @@
+"use client";
+
 import { makeStyles } from "@/lib/theme";
 
 import Box from "@p4b/ui/components/Box";
 import Grid from "@p4b/ui/components/Grid";
 
-interface AuthTemplateProps {
+interface OnboardingLayoutProps {
   children: React.ReactNode;
 }
 
-const AuthTemplate = (props: AuthTemplateProps) => {
+const OnboardingLayout = (props: OnboardingLayoutProps) => {
   const { children } = props;
 
   const { classes } = useStyles();
@@ -56,7 +58,7 @@ const AuthTemplate = (props: AuthTemplateProps) => {
   );
 };
 
-const useStyles = makeStyles({ name: { AuthTemplate } })((theme) => ({
+const useStyles = makeStyles({ name: { OnboardingLayout } })((theme) => ({
   root: {
     display: "flex",
   },
@@ -96,4 +98,4 @@ const useStyles = makeStyles({ name: { AuthTemplate } })((theme) => ({
   },
 }));
 
-export default AuthTemplate;
+export default OnboardingLayout;

app/client-v2/apps/goat/app/onboarding/organization/page.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { makeStyles } from "@/lib/theme";
+import { useState, useRef } from "react";
+
+import { Card } from "@p4b/ui/components/Card";
+import { SelectField } from "@p4b/ui/components/SelectField";
+import { TextField } from "@p4b/ui/components/Text/TextField";
+import { Button, Text } from "@p4b/ui/components/theme";
+
+export default function OrganizationCreate() {
+  const [selectedIndustry, setSelectedIndustry] = useState("gis");
+
+  const Industries = [
+    {
+      name: "Transport Planing",
+      value: "transportPlaning",
+    },
+    {
+      name: "Urban Planing",
+      value: "urbanPlaning",
+    },
+    {
+      name: "GIS",
+      value: "gis",
+    },
+    {
+      name: "Architecture",
+      value: "Architecture",
+    },
+  ];
+
+  const onSubmit = () => {
+    console.log("submit");
+  };
+
+  const { classes } = useStyles();
+
+  const organizationInputRef = useRef<HTMLInputElement>(null);
+  const submitButtonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <>
+      <div className={classes.cardContainer}>
+        <Card width={480} noHover={true}>
+          <div className={classes.root}>
+            <div>
+              <div>
+                <Text typo="section heading">Create organization</Text>
+              </div>
+              <form onSubmit={onSubmit} method="post">
+                <TextField
+                  disabled={false}
+                  id="organizationName"
+                  name="organizationName"
+                  inputProps_ref={organizationInputRef}
+                  inputProps_aria-label="text"
+                  inputProps_tabIndex={1}
+                  inputProps_spellCheck={false}
+                  label="Organization name"
+                  autoComplete="off"
+                />
+
+                <SelectField
+                  className={classes.selectField}
+                  updateChange={setSelectedIndustry}
+                  options={Industries}
+                  defaultValue={selectedIndustry}
+                  label="Industry"
+                  size="medium"
+                />
+
+                <div className={classes.buttonsWrapper}>
+                  <Button
+                    ref={submitButtonRef}
+                    className={classes.buttonSubmit}
+                    name="login"
+                    type="submit"
+                    disabled={selectedIndustry && organizationInputRef?.current?.value !== "" ? false : true}>
+                    Get started!
+                  </Button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </>
+  );
+}
+
+const useStyles = makeStyles({ name: { OrganizationCreate } })((theme) => ({
+  root: {
+    margin: "32px",
+    "& .MuiTextField-root": {
+      width: "100%",
+      marginTop: theme.spacing(6),
+      marginBottom: theme.spacing(6),
+    },
+  },
+  selectField: {
+    width: "100%",
+    marginTop: theme.spacing(5),
+  },
+  buttonsWrapper: {
+    marginTop: theme.spacing(4),
+    display: "flex",
+    justifyContent: "flex-end",
+  },
+  buttonSubmit: {
+    width: "100%",
+    marginTop: theme.spacing(4),
+    marginLeft: theme.spacing(0),
+  },
+  divider: {
+    ...theme.spacing.topBottom("margin", 5),
+  },
+  cardContainer: {
+    display: "flex",
+    justifyContent: "center",
+  },
+}));

app/client-v2/apps/goat/app/onboarding/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default async function OnBoardingPage({}) {
+  return redirect("/onboarding/organization");
+}

app/client-v2/apps/goat/app/page.tsx

@@ -1,5 +1,17 @@
+import { options as authOptions } from "@/app/api/auth/[...nextauth]/options";
+import type { Session } from "next-auth";
+import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 
 export default async function Home({}) {
-  return redirect("/home");
+  const session: Session | null = await getServerSession(authOptions);
+  if (!session) {
+    redirect("/api/auth/signin");
+  }
+
+  if (session?.user && !session?.user?.org_id) {
+    return redirect(`/onboarding`);
+  }
+
+  return redirect(`/home`);
 }

app/client-v2/apps/goat/lib/theme.ts

@@ -14,7 +14,7 @@ export const { ThemeProvider, useTheme } = createThemeProvider({
 
     return {
       fontFamily: '"Mulish", sans-serif',
-      rootFontSizePx: typographyDesc.rootFontSizePx,
+      rootFontSizePx: 16,
       variants: {
         ...typographyDesc.variants,
         "display heading": {