From 841523c7971f0350a949eebc61004b2fbe464ad1 Mon Sep 17 00:00:00 2001
From: cliu02 <32694266+cliu02@users.noreply.github.com>
Date: Mon, 12 Feb 2024 08:12:11 -0800
Subject: [PATCH] feat: add MA sign in styling (#3820)

---
 .../views/accounts}/AccountCard.module.scss   |   0
 .../src/views/accounts}/AccountCard.tsx       |   2 +-
 .../src/views/accounts}/CustomIconMap.tsx     |   0
 .../src/views/accounts}/CustomIcons.tsx       |   1 +
 .../src/views/sign-in/FormSignIn.tsx          | 121 +++++++++---------
 .../src/views/sign-in/FormSignInErrorBox.tsx  |  12 +-
 .../public/src/pages/account/applications.tsx |   2 +-
 sites/public/src/pages/account/dashboard.tsx  |   2 +-
 sites/public/src/pages/account/edit.tsx       |   2 +-
 sites/public/src/pages/create-account.tsx     |   2 +-
 sites/public/styles/sign-in.module.scss       |   6 +
 11 files changed, 85 insertions(+), 65 deletions(-)
 rename {sites/public/src/components/account => shared-helpers/src/views/accounts}/AccountCard.module.scss (100%)
 rename {sites/public/src/components/account => shared-helpers/src/views/accounts}/AccountCard.tsx (95%)
 rename {sites/public/src/components/shared => shared-helpers/src/views/accounts}/CustomIconMap.tsx (100%)
 rename {sites/public/src/components/shared => shared-helpers/src/views/accounts}/CustomIcons.tsx (99%)
 create mode 100644 sites/public/styles/sign-in.module.scss

diff --git a/sites/public/src/components/account/AccountCard.module.scss b/shared-helpers/src/views/accounts/AccountCard.module.scss
similarity index 100%
rename from sites/public/src/components/account/AccountCard.module.scss
rename to shared-helpers/src/views/accounts/AccountCard.module.scss
diff --git a/sites/public/src/components/account/AccountCard.tsx b/shared-helpers/src/views/accounts/AccountCard.tsx
similarity index 95%
rename from sites/public/src/components/account/AccountCard.tsx
rename to shared-helpers/src/views/accounts/AccountCard.tsx
index 588ac4f002..f199d7809c 100644
--- a/sites/public/src/components/account/AccountCard.tsx
+++ b/shared-helpers/src/views/accounts/AccountCard.tsx
@@ -2,7 +2,7 @@ import { Heading, HeadingGroup, Icon } from "@bloom-housing/ui-seeds"
 import Card from "@bloom-housing/ui-seeds/src/blocks/Card"
 import React from "react"
 import styles from "./AccountCard.module.scss"
-import { CustomIconMap, CustomIconType } from "../shared/CustomIconMap"
+import { CustomIconMap, CustomIconType } from "./CustomIconMap"
 
 interface AccountCardProps {
   iconSymbol: CustomIconType
diff --git a/sites/public/src/components/shared/CustomIconMap.tsx b/shared-helpers/src/views/accounts/CustomIconMap.tsx
similarity index 100%
rename from sites/public/src/components/shared/CustomIconMap.tsx
rename to shared-helpers/src/views/accounts/CustomIconMap.tsx
diff --git a/sites/public/src/components/shared/CustomIcons.tsx b/shared-helpers/src/views/accounts/CustomIcons.tsx
similarity index 99%
rename from sites/public/src/components/shared/CustomIcons.tsx
rename to shared-helpers/src/views/accounts/CustomIcons.tsx
index 7d4172a4a7..eaa5460cb4 100644
--- a/sites/public/src/components/shared/CustomIcons.tsx
+++ b/shared-helpers/src/views/accounts/CustomIcons.tsx
@@ -1,4 +1,5 @@
 import { t } from "@bloom-housing/ui-components"
+import React from "react"
 
 export const Application = (
   <svg
diff --git a/shared-helpers/src/views/sign-in/FormSignIn.tsx b/shared-helpers/src/views/sign-in/FormSignIn.tsx
index 19c5df2d3a..91f60f87f7 100644
--- a/shared-helpers/src/views/sign-in/FormSignIn.tsx
+++ b/shared-helpers/src/views/sign-in/FormSignIn.tsx
@@ -1,9 +1,12 @@
 import React, { useContext } from "react"
-import { Field, Form, FormCard, Icon, NavigationContext, t } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Field, Form, NavigationContext, t } from "@bloom-housing/ui-components"
+import { Button, Heading } from "@bloom-housing/ui-seeds"
+import { CardSection, CardFooter } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { FormSignInErrorBox } from "./FormSignInErrorBox"
 import { NetworkStatus } from "../../auth/catchNetworkError"
 import type { UseFormMethods } from "react-hook-form"
+import { AccountCard } from "../accounts/AccountCard"
+import styles from "../../../../sites/public/styles/sign-in.module.scss"
 import { useRouter } from "next/router"
 import { getListingRedirectUrl } from "../../utilities/getListingRedirectUrl"
 
@@ -42,64 +45,66 @@ const FormSignIn = ({
   const createAccountUrl = getListingRedirectUrl(listingIdRedirect, "/create-account")
 
   return (
-    <FormCard>
-      <div className="form-card__lead text-center">
-        <Icon size="2xl" symbol="profile" />
-        <h1 className="form-card__title">{t(`nav.signIn`)}</h1>
-      </div>
-      <FormSignInErrorBox
-        errors={errors}
-        networkStatus={networkStatus}
-        errorMessageId={"main-sign-in"}
-      />
-      <div className="form-card__group pt-0">
-        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
-          <Field
-            caps={true}
-            name="email"
-            label={t("t.email")}
-            validation={{ required: true }}
-            error={errors.email}
-            errorMessage={t("authentication.signIn.enterLoginEmail")}
-            register={register}
-            dataTestId="sign-in-email-field"
-          />
+    <AccountCard iconSymbol="profile" title={t("nav.signIn")} divider="inset" headingPriority={1}>
+      <>
+        <FormSignInErrorBox
+          errors={errors}
+          networkStatus={networkStatus}
+          errorMessageId={"main-sign-in"}
+          className="mx-12"
+        />
+        <CardSection className="mx-4">
+          <Form id="sign-in" onSubmit={handleSubmit(onSubmit, onError)}>
+            <Field
+              caps={true}
+              className="mb-6"
+              name="email"
+              label={t("t.email")}
+              labelClassName="font-semibold p-0"
+              validation={{ required: true }}
+              error={errors.email}
+              errorMessage={t("authentication.signIn.enterLoginEmail")}
+              register={register}
+              dataTestId="sign-in-email-field"
+            />
+            <aside>
+              <LinkComponent href={forgetPasswordURL} className={styles["forgot-password"]}>
+                {t("authentication.signIn.forgotPassword")}
+              </LinkComponent>
+            </aside>
+            <Field
+              caps={true}
+              className="mb-3"
+              name="password"
+              label={t("authentication.createAccount.password")}
+              labelClassName="font-semibold p-0"
+              validation={{ required: true }}
+              error={errors.password}
+              errorMessage={t("authentication.signIn.enterLoginPassword")}
+              register={register}
+              type={"password"}
+              dataTestId="sign-in-password-field"
+            />
+            <div className="mt-6">
+              <Button type="submit" variant="primary" id="sign-in-button">
+                {t("nav.signIn")}
+              </Button>
+            </div>
+          </Form>
+        </CardSection>
+        {showRegisterBtn && (
+          <CardFooter className="border-t py-8 mx-12">
+            <Heading priority={2} size="2xl" className="mb-6">
+              {t("authentication.createAccount.noAccount")}
+            </Heading>
 
-          <aside className="float-right text-sm font-semibold">
-            <LinkComponent href={forgetPasswordURL}>
-              {t("authentication.signIn.forgotPassword")}
-            </LinkComponent>
-          </aside>
-
-          <Field
-            caps={true}
-            name="password"
-            label={t("authentication.createAccount.password")}
-            validation={{ required: true }}
-            error={errors.password}
-            errorMessage={t("authentication.signIn.enterLoginPassword")}
-            register={register}
-            type="password"
-            dataTestId="sign-in-password-field"
-          />
-
-          <div className="text-center mt-6">
-            <Button type="submit" variant="primary" id="sign-in-button">
-              {t("nav.signIn")}
+            <Button variant="primary-outlined" href={createAccountUrl}>
+              {t("account.createAccount")}
             </Button>
-          </div>
-        </Form>
-      </div>
-      {showRegisterBtn && (
-        <div className="form-card__group text-center border-t">
-          <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
-
-          <Button variant="primary-outlined" href={createAccountUrl}>
-            {t("account.createAccount")}
-          </Button>
-        </div>
-      )}
-    </FormCard>
+          </CardFooter>
+        )}
+      </>
+    </AccountCard>
   )
 }
 
diff --git a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
index 39fd476021..f3b4874170 100644
--- a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
+++ b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
@@ -7,6 +7,7 @@ export type FormSignInErrorBoxProps = {
   errors: FormSignInErrorBoxControl["errors"]
   networkStatus: NetworkStatus
   errorMessageId: string
+  className?: string
 }
 
 export type FormSignInErrorBoxControl = {
@@ -14,9 +15,16 @@ export type FormSignInErrorBoxControl = {
   control: UseFormMethods["control"]
 }
 
-const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignInErrorBoxProps) => {
+const FormSignInErrorBox = ({
+  networkStatus,
+  errors,
+  errorMessageId,
+  className,
+}: FormSignInErrorBoxProps) => {
+  const classNames = ["border-b"]
+  if (className) classNames.push(className)
   return (
-    <div className="border-b">
+    <div className={classNames.join(" ")}>
       {Object.entries(errors).length > 0 && !networkStatus.content && (
         <AlertBox type="alert" inverted closeable>
           {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
diff --git a/sites/public/src/pages/account/applications.tsx b/sites/public/src/pages/account/applications.tsx
index 895a521f35..4f370fd3ed 100644
--- a/sites/public/src/pages/account/applications.tsx
+++ b/sites/public/src/pages/account/applications.tsx
@@ -7,7 +7,7 @@ import Layout from "../../layouts/application"
 import { StatusItemWrapper, AppWithListing } from "./StatusItemWrapper"
 import { MetaTags } from "../../components/shared/MetaTags"
 import { UserStatus } from "../../lib/constants"
-import { AccountCard } from "../../components/account/AccountCard"
+import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard"
 
 import styles from "../../pages/account/account.module.scss"
 
diff --git a/sites/public/src/pages/account/dashboard.tsx b/sites/public/src/pages/account/dashboard.tsx
index 65bc3de637..df964db8d5 100644
--- a/sites/public/src/pages/account/dashboard.tsx
+++ b/sites/public/src/pages/account/dashboard.tsx
@@ -7,7 +7,7 @@ import Layout from "../../layouts/application"
 import { MetaTags } from "../../components/shared/MetaTags"
 import { UserStatus } from "../../lib/constants"
 import { Button, Card, Grid } from "@bloom-housing/ui-seeds"
-import { AccountCard } from "../../components/account/AccountCard"
+import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard"
 
 import styles from "./account.module.scss"
 
diff --git a/sites/public/src/pages/account/edit.tsx b/sites/public/src/pages/account/edit.tsx
index 4cbb730894..12525d9c5f 100644
--- a/sites/public/src/pages/account/edit.tsx
+++ b/sites/public/src/pages/account/edit.tsx
@@ -22,7 +22,7 @@ import Link from "next/link"
 import { PageView, pushGtmEvent, AuthContext, RequireLogin } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../../lib/constants"
 import FormsLayout from "../../layouts/forms"
-import { AccountCard } from "../../components/account/AccountCard"
+import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard"
 
 import styles from "./account.module.scss"
 
diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx
index 9f8ca3df51..6d21f24192 100644
--- a/sites/public/src/pages/create-account.tsx
+++ b/sites/public/src/pages/create-account.tsx
@@ -20,7 +20,7 @@ import { useRouter } from "next/router"
 import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../lib/constants"
 import FormsLayout from "../layouts/forms"
-import { AccountCard } from "../components/account/AccountCard"
+import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard"
 import accountCardStyles from "./account/account.module.scss"
 import styles from "../../styles/create-account.module.scss"
 import signUpBenefitsStyles from "../../styles/sign-up-benefits.module.scss"
diff --git a/sites/public/styles/sign-in.module.scss b/sites/public/styles/sign-in.module.scss
new file mode 100644
index 0000000000..b97924f850
--- /dev/null
+++ b/sites/public/styles/sign-in.module.scss
@@ -0,0 +1,6 @@
+.forgot-password {
+    float: right;
+    font-size: var(--seeds-font-size-sm); 
+    text-decoration-line: underline;
+    color: var(--seeds-color-blue-900);
+}
\ No newline at end of file