feat: add MA sign in styling (#3820)

sites/public/src/components/account/AccountCard.tsx → 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

sites/public/src/components/shared/CustomIcons.tsx → 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

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>
   )
 }
 

shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx

@@ -7,16 +7,24 @@ export type FormSignInErrorBoxProps = {
   errors: FormSignInErrorBoxControl["errors"]
   networkStatus: NetworkStatus
   errorMessageId: string
+  className?: string
 }
 
 export type FormSignInErrorBoxControl = {
   errors: UseFormMethods["errors"]
   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")}

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"
 

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"
 

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"
 

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"

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);
+}