[EPO-8615] Basic user flows are styled

components/auth/buttons/FacebookSSO/FacebookSSO.tsx

@@ -5,13 +5,20 @@ import { Button } from "@rubin-epo/epo-react-lib";
 import { useTranslation } from "react-i18next";
 import { getOauthUrl } from "./actions";
 
-export default function FacebookSSO({ onError }: { onError: () => void }) {
+export default function FacebookSSO({
+  className,
+  onError,
+}: {
+  className: string;
+  onError: () => void;
+}) {
   const [status, setStatus] = useState<"loading" | null>(null);
 
   const { t } = useTranslation();
 
   return (
     <Button
+      className={className}
       onClick={async () => {
         setStatus("loading");
         try {

components/auth/buttons/GoogleSSO/Button.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { GoogleLogin } from "@react-oauth/google";
+import { useGoogleLogin } from "@react-oauth/google";
 import { Button } from "@rubin-epo/epo-react-lib";
+import { useTranslation } from "react-i18next";
 import { useAuthDialogManager } from "@/components/auth/AuthDialogManagerContext";
 import { usePathToRevalidate } from "@/components/auth/clientHelpers";
 import { authenticateEducator, authenticateStudent } from "./actions";
@@ -12,9 +13,13 @@ export default function SSOButton({
 }: {
   onError: () => void;
 }) {
+  const { t } = useTranslation();
   const { pendingGroup } = useAuthDialogManager();
-
   const pathToRevalidate = usePathToRevalidate();
+  const login = useGoogleLogin({
+    onSuccess: handleSuccess,
+    onError: handleError,
+  });
 
   function handleError() {
     console.error("error");
@@ -43,12 +48,12 @@ export default function SSOButton({
   }
 
   return (
-    <GoogleLogin
-      onSuccess={handleSuccess}
-      onError={handleError}
-      theme="outline"
-      size="large"
-    />
+    <Button
+      onClick={() => login()}
+      styleAs="tertiary"
+    >
+      {t("sign_in.continue_with_google")}
+    </Button>
   );
 }
 

components/auth/buttons/GoogleSSO/GoogleSSO.tsx

@@ -5,12 +5,18 @@ import Button from "./Button";
 
 const GOOGLE_APP_ID = process.env.NEXT_PUBLIC_GOOGLE_APP_ID;
 
-export default function GoogleSSO({ onError }: { onError: () => void }) {
+export default function GoogleSSO({
+  className,
+  onError,
+}: {
+  className: string;
+  onError: () => void;
+}) {
   if (!GOOGLE_APP_ID) return null;
 
   return (
     <GoogleOAuthProvider clientId={GOOGLE_APP_ID}>
-      <Button onError={onError} />
+      <Button className={className} onError={onError} />
     </GoogleOAuthProvider>
   );
 }

components/auth/buttons/SignIn/SignIn.tsx

@@ -21,7 +21,7 @@ export default function SignIn() {
         {t("auth.log_in_to_continue")}
       </Button>
       <Styled.ButtonLabel>
-        This option allows you to safely save your work.
+        {t("auth.continue_w_login_label")}
       </Styled.ButtonLabel>
     </>
   );

components/auth/dialogs/ForgotPassword/ForgotPassword.tsx

@@ -1,11 +1,11 @@
 "use client";
 
 import { useState } from "react";
-import { BasicModal, Button, Input } from "@rubin-epo/epo-react-lib";
+import { BasicModal, Input } from "@rubin-epo/epo-react-lib";
 import { useAuthDialogManager } from "@/components/auth/AuthDialogManagerContext";
 import { useTranslation } from "react-i18next";
-import Submit from "@/components/form/Submit";
 import { forgotPassword } from "./actions";
+import * as Styled from "./styles";
 
 export default function SignUp() {
   const { active, closeModal } = useAuthDialogManager();
@@ -32,7 +32,7 @@ export default function SignUp() {
       case "error":
         return t("reset_password.error_message");
       default:
-        return undefined;
+        return t("reset_password.description");
     }
   }
 
@@ -44,7 +44,7 @@ export default function SignUp() {
       onClose={closeModal}
     >
       {status !== "success" && (
-        <form
+        <Styled.Form
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore
           action={async (formData: FormData) => {
@@ -59,9 +59,9 @@ export default function SignUp() {
           }}
         >
           <div>
-            <label htmlFor="forgottenPasswordEmail">
+            <Styled.Label htmlFor="forgottenPasswordEmail">
               {t("form.email_required")}
-            </label>
+            </Styled.Label>
             <Input
               name="email"
               id="forgottenPasswordEmail"
@@ -70,26 +70,26 @@ export default function SignUp() {
               required
             />
           </div>
-          <Submit>
+          <Styled.SubmitButton>
             {(pending) =>
               t(
                 pending
                   ? "reset_password.submit_pending"
                   : "reset_password.submit"
               )
             }
-          </Submit>
-        </form>
+          </Styled.SubmitButton>
+        </Styled.Form>
       )}
       {status === "success" && (
-        <Button
+        <Styled.ConfirmButton
           onClick={() => {
             setStatus(null);
             closeModal();
           }}
         >
           {t("reset_password.confirm_button")}
-        </Button>
+        </Styled.ConfirmButton>
       )}
     </BasicModal>
   );

components/auth/dialogs/ForgotPassword/styles.ts

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { Button } from "@rubin-epo/epo-react-lib";
+import Submit from "@/components/form/Submit";
+
+export const Form = styled.form`
+	margin-top: 50px;
+`;
+
+export const SubmitButton = styled(Submit)`
+	width: 100%;
+	margin-top: 30px;
+`;
+
+export const Label = styled.label`
+  font-weight: 700;
+`;
+
+export const ConfirmButton = styled(Button)`
+	width: 100%;
+	margin-top: 30px;
+`;

components/auth/dialogs/SelectGroup/SelectGroup.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { BasicModal, Button } from "@rubin-epo/epo-react-lib";
-import { useAuthDialogManager } from "@/components/auth/AuthDialogManagerContext";
+import Image from "next/image";
 import { useTranslation } from "react-i18next";
+import { BasicModal } from "@rubin-epo/epo-react-lib";
+import { useAuthDialogManager } from "@/components/auth/AuthDialogManagerContext";
+import * as Styled from "./styles";
 
 export default function SelectGroup() {
   const { active, openModal, closeModal, setPendingGroup } =
@@ -12,32 +14,34 @@ export default function SelectGroup() {
 
   return (
     <BasicModal
-      title="Select your role"
+      title={t("join.title")}
+      description={t("join.description")}
       open={active === "selectGroup"}
       onClose={closeModal}
     >
-      <Button
-        onClick={() => {
-          setPendingGroup("students");
-          openModal("selectProvider");
-        }}
-      >
-        {t("join.as_students")}
-      </Button>
-      <Button
-        onClick={() => {
-          setPendingGroup("educators");
-          openModal("selectProvider");
-        }}
-        styleAs="educator"
-      >
-        {t("join.as_educators")}
-      </Button>
-      <div>
-        <button onClick={() => openModal("signIn")}>
-          {t("join.sign_in_link")}
-        </button>
-      </div>
+      <Styled.Middle>
+        <Styled.StudentButton
+          onClick={() => {
+            setPendingGroup("students");
+            openModal("selectProvider");
+          }}
+        >
+          <Image role="presentation" src="/assets/roles/student.svg" alt="" width={64} height={64} />
+          <div>{t("join.as_students")}</div>
+        </Styled.StudentButton>
+        <Styled.EducatorButton
+          onClick={() => {
+            setPendingGroup("educators");
+            openModal("selectProvider");
+          }}
+        >
+          <Image role="presentation" src="/assets/roles/educator.svg" alt="" width={55} height={64} />
+          <div>{t("join.as_educators")}</div>
+        </Styled.EducatorButton>
+      </Styled.Middle>
+      <Styled.SignInButton onClick={() => openModal("signIn")}>
+        {t("join.sign_in_link")}
+      </Styled.SignInButton>
     </BasicModal>
   );
 }

components/auth/dialogs/SelectGroup/styles.ts

@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import { Button } from "@rubin-epo/epo-react-lib";
+
+export const Middle = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: center;
+  margin-top: 18px;
+  margin-bottom: 18px;
+`;
+
+const buttonShared = `
+  width: calc(50% - 9px);
+  max-width: 160px;
+  font-size: 13px;
+  border-width: 2px;
+`;
+
+const innerButton = `
+  span {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+
+    img {
+      width: 60px;
+      margin-bottom: 30px;
+    }
+  }
+`;
+
+export const StudentButton = styled(Button)`
+  --button-background-color: var(--green05);
+  --button-color: var(--black);
+
+  ${buttonShared}
+  margin-right: 18px;
+
+  ${innerButton}
+
+  span img {
+    width: 60px;
+    margin-top: 7px;
+  }
+`;
+
+export const EducatorButton = styled(Button)`
+  --button-background-color: var(--orange10);
+  --button-border-color: #DB5400;
+  --button-color: var(--black);
+
+  ${buttonShared}
+  ${innerButton}
+`;
+
+export const SignInButton = styled.button`
+  width: 100%;
+  color: var(--turquoise70);
+`;

components/auth/dialogs/SelectProvider/SelectProvider.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import { BasicModal, Button } from "@rubin-epo/epo-react-lib";
+import { BasicModal } from "@rubin-epo/epo-react-lib";
 import { useAuthDialogManager } from "@/components/auth/AuthDialogManagerContext";
-import AuthButtons from "@/components/auth/buttons";
 import { useTranslation } from "react-i18next";
+import * as Styled from "./styles";
 
 export default function SelectProvider() {
   const { active, pendingGroup, openModal, closeModal } =
@@ -21,25 +21,25 @@ export default function SelectProvider() {
       open={active === "selectProvider"}
       onClose={closeModal}
     >
-      <AuthButtons.GoogleSSO
-        onError={() =>
-          setOutput(t("sign_in.error_message", { context: "google" }))
-        }
-      />
-      <AuthButtons.FacebookSSO
-        onError={() =>
-          setOutput(t("sign_in.error_message", { context: "facebook" }))
-        }
-      />
-      <Button onClick={() => openModal("signUp")} styleAs="tertiary">
-        {t("join.sign_up_with_email")}
-      </Button>
-      <div>
-        <button onClick={() => openModal("signIn")}>
+      <Styled.InnerModal>
+        <Styled.GoogleSSOButton
+          onError={() =>
+            setOutput(t("sign_in.error_message", { context: "google" }))
+          }
+        />
+        <Styled.FacebookSSOButton
+          onError={() =>
+            setOutput(t("sign_in.error_message", { context: "facebook" }))
+          }
+        />
+        <Styled.EmailButton onClick={() => openModal("signUp")} styleAs="tertiary">
+          {t("join.sign_up_with_email")}
+        </Styled.EmailButton>
+        <Styled.SignInButton onClick={() => openModal("signIn")}>
           {t("join.sign_in_link")}
-        </button>
-      </div>
-      <output>{output && <p>{output}</p>}</output>
+        </Styled.SignInButton>
+        <output>{output && <p>{output}</p>}</output>
+      </Styled.InnerModal>
     </BasicModal>
   );
 }