From 4a07ae2835084c95b4f9b6dedcd7bcabd2b9c593 Mon Sep 17 00:00:00 2001
From: cade-exygy <131277283+cade-exygy@users.noreply.github.com>
Date: Fri, 26 Jan 2024 13:20:10 -0600
Subject: [PATCH 01/20] feat: 3761/direct to sign in (#3816)

* feat: check if user is logged in

* fix: clean up logs

* fix: remove unneeded prop

* fix: sign in before submit application test

* fix: add feature toggle

* fix: sign in before submitApplication tests

* fix: fix test

* fix: add feature flag to circleCI

* fix: remove toggle

* refactor: move redirect logic to ListingView
---
 .../components/listing/GetApplication.test.tsx    |  4 ++++
 .../src/components/listing/GetApplication.tsx     |  4 ++++
 .../public/src/components/listing/ListingView.tsx | 15 ++++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/sites/public/__tests__/components/listing/GetApplication.test.tsx b/sites/public/__tests__/components/listing/GetApplication.test.tsx
index 098e9657df..1b9d72e65e 100644
--- a/sites/public/__tests__/components/listing/GetApplication.test.tsx
+++ b/sites/public/__tests__/components/listing/GetApplication.test.tsx
@@ -27,6 +27,7 @@ describe("<Applications>", () => {
         }}
         preview={false}
         listingName={"Listing name"}
+        listingId="123"
       />
     )
     expect(getByText("How to Apply")).toBeTruthy()
@@ -57,6 +58,7 @@ describe("<Applications>", () => {
         }}
         preview={false}
         listingName={"Listing name"}
+        listingId="123"
       />
     )
     expect(queryByTestId("get-application-section")).toBeNull()
@@ -83,6 +85,7 @@ describe("<Applications>", () => {
         }}
         preview={true}
         listingName={"Listing name"}
+        listingId="123"
       />
     )
     expect(getByText("Apply Online").closest("button")?.disabled).toBe(true)
@@ -109,6 +112,7 @@ describe("<Applications>", () => {
         }}
         preview={false}
         listingName={"Listing name"}
+        listingId="123"
       />
     )
     expect(queryByText("Apply Online")).toBe(null)
diff --git a/sites/public/src/components/listing/GetApplication.tsx b/sites/public/src/components/listing/GetApplication.tsx
index f9778a8674..ce5e866822 100644
--- a/sites/public/src/components/listing/GetApplication.tsx
+++ b/sites/public/src/components/listing/GetApplication.tsx
@@ -32,6 +32,8 @@ export interface ApplicationsProps {
   applicationsOpenDate?: string
   /** The name of the listing */
   listingName: string
+  /** The id of the listing */
+  listingId: string
   /** The URL for an online applications */
   onlineApplicationURL?: string
   /** Any number of paper application objects, including their URL and language */
@@ -40,6 +42,8 @@ export interface ApplicationsProps {
   paperMethod?: boolean
   /** The date mailed applications must be received by */
   postmarkedApplicationsReceivedByDate?: string
+  /** Informs whether or not to hide actionable application buttons */
+  listingStatus?: string
   /** Whether or not to hide actionable application buttons */
   preview?: boolean
   strings?: {
diff --git a/sites/public/src/components/listing/ListingView.tsx b/sites/public/src/components/listing/ListingView.tsx
index fe7c28f5f0..ce5fef06d2 100644
--- a/sites/public/src/components/listing/ListingView.tsx
+++ b/sites/public/src/components/listing/ListingView.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useContext } from "react"
 import ReactDOMServer from "react-dom/server"
 import Markdown from "markdown-to-jsx"
 import {
@@ -35,7 +35,6 @@ import {
   ExpandableSection,
   SiteAlert,
   StandardTable,
-  GroupedTable,
   ImageCard,
   Icon,
 } from "@bloom-housing/ui-components"
@@ -52,6 +51,7 @@ import {
   getSummariesTable,
   getPdfUrlFromAsset,
   IMAGE_FALLBACK_URL,
+  AuthContext,
 } from "@bloom-housing/shared-helpers"
 import dayjs from "dayjs"
 import { ErrorPage } from "../../pages/_error"
@@ -79,6 +79,7 @@ interface ListingProps {
 }
 
 export const ListingView = (props: ListingProps) => {
+  const { initialStateLoaded, profile } = useContext(AuthContext)
   let buildingSelectionCriteria, preferencesSection
   const { listing } = props
   const {
@@ -353,10 +354,17 @@ export const ListingView = (props: ListingProps) => {
     return date ? dayjs(date).format(format) : null
   }
 
+  const redirectIfSignedOut = () =>
+    process.env.showMandatedAccounts && initialStateLoaded && !profile
+
   const applySidebar = () => (
     <>
       <GetApplication
-        onlineApplicationURL={getOnlineApplicationURL()}
+        onlineApplicationURL={
+          redirectIfSignedOut()
+            ? `/sign-in?redirectUrl=/applications/start/choose-language&listingId=${listing.id}`
+            : getOnlineApplicationURL()
+        }
         applicationsOpen={!appOpenInFuture}
         applicationsOpenDate={getDateString(listing.applicationOpenDate, "MMMM D, YYYY")}
         paperApplications={getPaperApplications()}
@@ -369,6 +377,7 @@ export const ListingView = (props: ListingProps) => {
         applicationPickUpAddress={getAddress(listing.applicationPickUpAddressType, "pickUp")}
         preview={props.preview}
         listingName={listing.name}
+        listingId={listing.id}
       />
       {!(
         listing.status === ListingStatus.closed ||

From e50998561c084e9b6e925cbc89150fd16a5c440e Mon Sep 17 00:00:00 2001
From: ColinBuyck <53269332+ColinBuyck@users.noreply.github.com>
Date: Mon, 29 Jan 2024 14:22:25 -0800
Subject: [PATCH 02/20] feat: 422/updated account theming (#3791)

* fix: rough draft refactoring

* fix: wip seeds card

* fix: wip account updates

* fix: account card styling

* fix: wip status item styling

* fix: edit screen adjustments

* fix: css matched app view

* fix: testing fixes

* fix: getById chnage

* fix: add plural copy fix

* fix: json update

* fix: remove tailwind

* fix: font weight touches

* fix: mantain translations

* fix: reorganizing files

* fix: svg updates

* fix: current pswd translations

* fix: unused css

* fix: width needed

* fix: css and heading updates

* fix: account card updates

* fix: partial new icon approach

* fix: final tweaks

* fix: no border figma matching
---
 shared-helpers/src/locales/general.json       |   4 +
 .../cypress/e2e/pages/my-applications.spec.ts |   2 +-
 .../account/AccountCard.module.scss           |  24 ++
 .../src/components/account/AccountCard.tsx    |  49 +++
 .../components/account/StatusItem.module.scss | 148 ++++-----
 .../src/components/account/StatusItem.tsx     |  59 ++--
 .../src/components/shared/CustomIconMap.tsx   |   8 +
 .../src/components/shared/CustomIcons.tsx     |  61 ++++
 .../src/pages/account/account.module.scss     |  26 ++
 .../public/src/pages/account/applications.tsx |  49 +--
 sites/public/src/pages/account/dashboard.tsx  |  78 ++---
 sites/public/src/pages/account/edit.tsx       | 286 +++++++++---------
 12 files changed, 477 insertions(+), 317 deletions(-)
 create mode 100644 sites/public/src/components/account/AccountCard.module.scss
 create mode 100644 sites/public/src/components/account/AccountCard.tsx
 create mode 100644 sites/public/src/components/shared/CustomIconMap.tsx
 create mode 100644 sites/public/src/components/shared/CustomIcons.tsx
 create mode 100644 sites/public/src/pages/account/account.module.scss

diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json
index 38dc8ef53f..324fc40f45 100644
--- a/shared-helpers/src/locales/general.json
+++ b/shared-helpers/src/locales/general.json
@@ -1,15 +1,18 @@
 {
   "account.accountSettings": "Account Settings",
   "account.accountSettingsSubtitle": "Account Settings, email and password",
+  "account.accountSettingsUpdate": "Update account settings",
   "account.application.confirmation": "Confirmation",
   "account.application.error": "Error",
   "account.application.noAccessError": "You are unauthorized to view this application",
   "account.application.noApplicationError": "No application with that ID exists",
   "account.application.return": "Return to applications",
+  "account.application.iconTitle": "application with checkmarks",
   "account.createAccount": "Create Account",
   "account.errorFetchingApplications": "Error fetching applications",
   "account.haveAnAccount": "Already have an account?",
   "account.myApplications": "My Applications",
+  "account.viewApplications": "View applications",
   "account.myApplicationsSubtitle": "See lottery dates and listings for properties for which you've applied",
   "account.noApplications": "It looks like you haven't applied to any listings yet.",
   "account.settings.alerts.currentPassword": "Invalid current password. Please try again.",
@@ -28,6 +31,7 @@
   "account.settings.placeholders.month": "MM",
   "account.settings.placeholders.year": "YYYY",
   "account.settings.update": "Update",
+  "account.settings.iconTitle": "generic user",
   "application.ada.hearing": "For Hearing Impairments",
   "application.ada.label": "ADA Accessible Units",
   "application.ada.mobility": "For Mobility Impairments",
diff --git a/sites/public/cypress/e2e/pages/my-applications.spec.ts b/sites/public/cypress/e2e/pages/my-applications.spec.ts
index e4bfb0016d..4554dea414 100644
--- a/sites/public/cypress/e2e/pages/my-applications.spec.ts
+++ b/sites/public/cypress/e2e/pages/my-applications.spec.ts
@@ -4,7 +4,7 @@ describe("My applications page", function () {
     cy.visit("/sign-in")
     cy.signIn()
     cy.url().should("include", "/account/dashboard")
-    cy.getByTestId("account-dashboard-applications").click()
+    cy.getByID("account-dashboard-applications").click()
     cy.location("pathname").should("include", "/account/applications")
     cy.signOut()
   })
diff --git a/sites/public/src/components/account/AccountCard.module.scss b/sites/public/src/components/account/AccountCard.module.scss
new file mode 100644
index 0000000000..7cfd3921ac
--- /dev/null
+++ b/sites/public/src/components/account/AccountCard.module.scss
@@ -0,0 +1,24 @@
+.account-card {
+  --card-header-padding-inline-desktop: var(--seeds-s12);
+  --card-header-padding-inline-mobile: var(--seeds-s4);
+  --card-content-padding-inline-mobile: var(--seeds-s4);
+  --card-border-width: 0rem;
+  width: 100%;
+  @media (max-width: theme("screens.sm")) {
+    --card-spacing-lg: var(--seeds-s6);
+    --card-border-radius: 0rem;
+  }
+}
+
+.acccount-card-icon {
+  margin-bottom: var(--seeds-s3);
+}
+
+.account-card-heading-group {
+  --subheading-margin: var(--seeds-s3);
+  --heading-margin: var(--seeds-s3);
+}
+
+.account-card-heading {
+  margin-top: var(--seeds-s3);
+}
diff --git a/sites/public/src/components/account/AccountCard.tsx b/sites/public/src/components/account/AccountCard.tsx
new file mode 100644
index 0000000000..588ac4f002
--- /dev/null
+++ b/sites/public/src/components/account/AccountCard.tsx
@@ -0,0 +1,49 @@
+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"
+
+interface AccountCardProps {
+  iconSymbol: CustomIconType
+  title: string
+  subtitle?: string
+  children: React.ReactElement
+  id?: string
+  divider?: "flush" | "inset"
+  headingPriority?: 1 | 2 | 3 | 4 | 5 | 6
+  className?: string
+}
+
+const AccountCard = (props: AccountCardProps) => {
+  const classNames = [styles["account-card"]]
+  if (props.className) classNames.push(props.className)
+
+  const customIcon = CustomIconMap[props.iconSymbol]
+
+  return (
+    <Card spacing="lg" className={classNames.join(" ")}>
+      <Card.Header divider={props?.divider}>
+        <Icon size="2xl" className={styles["account-card-icon"]}>
+          {customIcon}
+        </Icon>
+        {props.subtitle ? (
+          <HeadingGroup
+            size="2xl"
+            heading={props.title}
+            subheading={props.subtitle}
+            className={styles["account-card-heading-group"]}
+            headingPriority={props.headingPriority}
+          />
+        ) : (
+          <Heading size="2xl" className={styles["account-card-heading"]}>
+            {props.title}
+          </Heading>
+        )}
+      </Card.Header>
+      {props.children}
+    </Card>
+  )
+}
+
+export { AccountCard as default, AccountCard }
diff --git a/sites/public/src/components/account/StatusItem.module.scss b/sites/public/src/components/account/StatusItem.module.scss
index 86f62c980d..8abc78ad41 100644
--- a/sites/public/src/components/account/StatusItem.module.scss
+++ b/sites/public/src/components/account/StatusItem.module.scss
@@ -1,132 +1,92 @@
 .status-item {
-  @apply relative;
-  @apply text-gray-800;
-  @apply border-b;
-  @apply border-solid;
-  @apply border-gray-450;
-  @apply bg-primary-lighter;
-
-  &:last-of-type {
-    @apply border-b-0;
-  }
-}
-
-.status-item__inner {
-  @apply p-4;
+  position: relative;
+  padding: var(--seeds-s4);
+  background-color: var(--seeds-color-primary-lighter);
+  color: var(--seeds-gray-800);
+  border-bottom-width: 0.0625rem;
+  border-style: solid;
+  border-color: var(--seeds-color-gray-450);
 }
 
 .status-item__header {
-  @apply pb-2;
-
-  @screen md {
-    @apply flex;
-    @apply mb-4;
-    @apply justify-between;
-    @apply border-b;
-    @apply border-solid;
-    @apply border-gray-450;
+  display: flex;
+  padding-bottom: var(--seeds-s4);
+  justify-content: space-between;
+  border-bottom-width: 0.0625rem;
+  border-style: solid;
+  border-color: var(--seeds-color-gray-450);
+  margin-bottom: var(seeds-s4);
+  @media (max-width: theme("screens.md")) {
+    padding-bottom: var(--seeds-s2);
+    display: block;
   }
 }
 
 .status-item__title {
-  @apply text-xl;
-  @apply font-alt-sans;
-  @apply tracking-wider;
-  @apply mb-0;
-  @apply uppercase;
+  font-size: var(--seeds-font-size-lg);
+  margin-bottom: 0;
 }
 
 .status-item__due {
-  @screen md {
-    @apply text-right;
-    @apply self-center;
+  text-align: right;
+  align-self: center;
+  font-size: var(--seeds-font-size-sm);
+  @media (max-width: theme("screens.md")) {
+    text-align: left;
+    padding-top: var(--seeds-s2_5);
   }
 }
 
 .status-item__content {
-  @screen md {
-    @apply flex;
-    @apply justify-between;
+  display: flex;
+  justify-content: space-between;
+  padding-top: var(--seeds-s4);
+  @media (max-width: theme("screens.md")) {
+    display: grid;
   }
 }
 
 .status-confirmation__number {
-  @apply pt-4;
-}
-
-.status-item__details {
-  @apply text-center;
-  @screen md {
-    @apply text-left;
-  }
+  padding-top: var(--seeds-s4);
 }
 
 .status-item__action {
-  @apply text-center;
-  @apply pt-4;
-  @apply mb-4;
+  padding-top: 0;
+  text-align: right;
 
-  @screen md {
-    @apply pt-0;
-    @apply text-right;
+  @media (max-width: theme("screens.md")) {
+    text-align: center;
+    padding-top: var(seeds-s4);
+    margin-bottom: var(--seeds-s4);
   }
 }
 
 .status-item__footer {
-  @apply text-center;
-
-  @screen md {
-    @apply flex;
-    @apply justify-between;
-    @apply text-left;
-    @apply gap-4;
-  }
-}
-
-.status-item__links {
-  @apply pb-4;
-
-  @screen md {
-    @apply pb-0;
-  }
-}
-
-.status-item__meta {
-  @apply mt-4;
-
-  @screen md {
-    @apply text-right;
-    @apply mt-0;
+  display: flex;
+  gap: var(--seeds-s4);
+  flex-direction: row;
+  justify-content: flex-start;
+  padding-top: var(--seeds-s4);
+  width: fit-content;
+  @media (max-width: theme("screens.md")) {
+    flex-direction: column;
   }
 }
 
 .status-item__status {
-  @apply pb-4;
-}
-
-.status-item__label {
-  @apply relative;
-}
-
-.status-item__date {
-  @apply text-xs;
-}
-
-.status-item__address {
-  @apply mb-4;
+  padding-block: 0;
+  font-size: var(--seeds-font-size-sm);
+  @media (max-width: theme("screens.md")) {
+    padding-block: var(--seeds-s4);
+  }
 }
 
 .status-item__confirm-text {
-  @apply text-sm;
-  @apply mb-4;
+  font-size: var(--seeds-font-size-sm);
+  margin-bottom: var(--seeds-s4);
 }
 
 .status-item__confirm-number {
-  @apply text-xl;
-}
-
-.status-item__address {
-  @screen md {
-    @apply text-left;
-  }
+  font-size: var(--seeds-font-size-lg);
+  padding-top: var(--seeds-s2);
 }
diff --git a/sites/public/src/components/account/StatusItem.tsx b/sites/public/src/components/account/StatusItem.tsx
index 570b675818..94f32ad023 100644
--- a/sites/public/src/components/account/StatusItem.tsx
+++ b/sites/public/src/components/account/StatusItem.tsx
@@ -1,7 +1,8 @@
 import React from "react"
 import { t } from "@bloom-housing/ui-components"
-import { Button, Link } from "@bloom-housing/ui-seeds"
+import { Button, Card, Tag } from "@bloom-housing/ui-seeds"
 import styles from "./StatusItem.module.scss"
+import accountStyles from "../../pages/account/account.module.scss"
 
 interface StatusItemProps {
   applicationDueDate?: string
@@ -11,7 +12,7 @@ interface StatusItemProps {
   listingName: string
   listingURL: string
   strings?: {
-    applicationDeadline?: string
+    applicationsDeadline?: string
     edited?: string
     seeListing?: string
     status?: string
@@ -23,20 +24,22 @@ interface StatusItemProps {
 
 const StatusItem = (props: StatusItemProps) => {
   return (
-    <article className={styles["status-item"]}>
-      <div className={styles["status-item__inner"]}>
+    <Card.Section
+      className={`${accountStyles["account-card-section"]} ${accountStyles["application-card-section"]}`}
+    >
+      <article className={styles["status-item"]}>
         <header className={styles["status-item__header"]}>
           <h3 className={styles["status-item__title"]}>{props.listingName}</h3>
-          {props.applicationDueDate && (
-            <p className={styles["status-item__due"]}>
-              {props.strings?.applicationDeadline ?? t("listings.applicationDeadline")}:{" "}
-              {props.applicationDueDate}
-            </p>
-          )}
+          <p className={styles["status-item__status"]}>
+            {props.strings?.status ?? t("application.status")}:{" "}
+            <Tag variant="primary">
+              {props.strings?.submittedStatus ?? t("application.statuses.submitted")}
+            </Tag>
+          </p>
         </header>
 
         <section className={styles["status-item__content"]}>
-          <div className={styles["status-item__details"]}>
+          <div>
             {props.confirmationNumber && (
               <>
                 <span className={styles["status-item__confirm-text"]}>
@@ -51,31 +54,29 @@ const StatusItem = (props: StatusItemProps) => {
           </div>
 
           <div className={styles["status-item__action"]}>
-            <p className={styles["status-item__status"]}>
-              <span className={styles["status-item__label"]}>
-                {props.strings?.status ?? t("application.status")}:{" "}
-                {props.strings?.submittedStatus ?? t("application.statuses.submitted")}
-              </span>
-            </p>
-            <Button href={props.applicationURL} size="sm">
-              {props.strings?.viewApplication ?? t("application.viewApplication")}
-            </Button>
+            {props.applicationDueDate && (
+              <p className={styles["status-item__due"]}>
+                {props.strings?.applicationsDeadline ?? t("listings.applicationDeadline")}:{" "}
+                {props.applicationDueDate}
+              </p>
+            )}
           </div>
         </section>
 
         <footer className={styles["status-item__footer"]}>
-          <div className={styles["status-item_links"]}>
-            <Link href={props.listingURL}>{props.strings?.seeListing ?? t("t.seeListing")}</Link>
+          <div>
+            <Button href={props.applicationURL} variant="primary-outlined" size="sm">
+              {props.strings?.viewApplication ?? t("application.viewApplication")}
+            </Button>
           </div>
-
-          <div className={styles["status-item__meta"]}>
-            <p className={styles["status-item__date"]}>
-              {props.strings?.edited ?? t("application.edited")}: {props.applicationUpdatedAt}
-            </p>
+          <div>
+            <Button href={props.listingURL} variant="primary-outlined" size="sm">
+              {props.strings?.seeListing ?? t("t.seeListing")}
+            </Button>
           </div>
         </footer>
-      </div>
-    </article>
+      </article>
+    </Card.Section>
   )
 }
 
diff --git a/sites/public/src/components/shared/CustomIconMap.tsx b/sites/public/src/components/shared/CustomIconMap.tsx
new file mode 100644
index 0000000000..a31df30e4f
--- /dev/null
+++ b/sites/public/src/components/shared/CustomIconMap.tsx
@@ -0,0 +1,8 @@
+import { Application, Profile } from "./CustomIcons"
+
+export const CustomIconMap = {
+  application: Application,
+  profile: Profile,
+}
+
+export type CustomIconType = keyof typeof CustomIconMap
diff --git a/sites/public/src/components/shared/CustomIcons.tsx b/sites/public/src/components/shared/CustomIcons.tsx
new file mode 100644
index 0000000000..7d4172a4a7
--- /dev/null
+++ b/sites/public/src/components/shared/CustomIcons.tsx
@@ -0,0 +1,61 @@
+import { t } from "@bloom-housing/ui-components"
+
+export const Application = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="37"
+    height="48"
+    viewBox="0 0 37 48"
+    fill="none"
+    role="img"
+  >
+    <title>{t("account.application.iconTitle")}</title>
+    <path d="M36.7665 11.439L25.3275 0H0V47.388H36.765V11.439H36.7665Z" fill="#EDEBDA" />
+    <path d="M25.3286 0V11.439H36.7676L25.3286 0Z" fill="#CEC9AE" />
+    <path
+      d="M28.5975 17.9728H15.525C15.0735 17.9728 14.709 17.6083 14.709 17.1568C14.709 16.7053 15.0765 16.3408 15.525 16.3408H28.5975C29.049 16.3408 29.4135 16.7083 29.4135 17.1568C29.4135 17.6053 29.046 17.9728 28.5975 17.9728Z"
+      fill="#CEC9AE"
+    />
+    <path
+      d="M8.98976 18.7922C8.78126 18.7922 8.56976 18.7112 8.41076 18.5522L6.77576 16.9172C6.45626 16.5977 6.45626 16.0817 6.77576 15.7622C7.09526 15.4427 7.61126 15.4427 7.93076 15.7622L9.04676 16.8782L12.5598 14.0672C12.9123 13.7867 13.4268 13.8422 13.7088 14.1947C13.9908 14.5472 13.9338 15.0617 13.5813 15.3437L9.49676 18.6122C9.34526 18.7322 9.16526 18.7922 8.98526 18.7922H8.98976Z"
+      fill="#13A085"
+    />
+    <path
+      d="M28.5975 26.9611H15.525C15.0735 26.9611 14.709 26.5966 14.709 26.1451C14.709 25.6936 15.0765 25.3291 15.525 25.3291H28.5975C29.049 25.3291 29.4135 25.6936 29.4135 26.1451C29.4135 26.5966 29.046 26.9611 28.5975 26.9611Z"
+      fill="#CEC9AE"
+    />
+    <path
+      d="M8.98976 27.7771C8.78126 27.7771 8.56976 27.6976 8.41076 27.5371L6.77576 25.9021C6.45626 25.5826 6.45626 25.0666 6.77576 24.7471C7.09526 24.4276 7.61126 24.4276 7.93076 24.7471L9.04676 25.8631L12.5598 23.0521C12.9123 22.7716 13.4268 22.8271 13.7088 23.1796C13.9908 23.5321 13.9338 24.0466 13.5813 24.3286L9.49676 27.5971C9.34526 27.7171 9.16526 27.7771 8.98526 27.7771H8.98976Z"
+      fill="#13A085"
+    />
+    <path
+      d="M28.5975 35.9489H15.525C15.0735 35.9489 14.709 35.5844 14.709 35.1329C14.709 34.6814 15.0765 34.3169 15.525 34.3169H28.5975C29.049 34.3169 29.4135 34.6814 29.4135 35.1329C29.4135 35.5844 29.046 35.9489 28.5975 35.9489Z"
+      fill="#CEC9AE"
+    />
+    <path
+      d="M8.98976 36.7649C8.78126 36.7649 8.56976 36.6854 8.41076 36.5249L6.77576 34.8899C6.45626 34.5704 6.45626 34.0544 6.77576 33.7349C7.09526 33.4154 7.61126 33.4154 7.93076 33.7349L9.04676 34.8509L12.5598 32.0399C12.9123 31.7594 13.4268 31.8149 13.7088 32.1674C13.9908 32.5199 13.9338 33.0344 13.5813 33.3164L9.49676 36.5849C9.34526 36.7049 9.16526 36.7649 8.98526 36.7649H8.98976Z"
+      fill="#13A085"
+    />
+  </svg>
+)
+
+export const Profile = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 48 48"
+    fill="none"
+    role="img"
+  >
+    <title>{t("account.settings.iconTitle")}</title>
+    <path
+      d="M16.8447 37.6683L9.68974 41.5631C9.23674 41.8346 8.87374 42.106 8.51074 42.379C12.6777 45.9108 18.1107 47.9939 23.9982 47.9939C29.8857 47.9939 35.2272 45.9108 39.3942 42.4704C39.0312 42.1075 38.5782 41.8376 38.1267 41.6546L30.4272 37.8513C29.4312 37.3984 28.7982 36.3111 28.7982 35.2268V32.2394C28.9782 31.9679 29.2512 31.6965 29.5227 31.335C30.6102 29.8863 31.3347 28.2561 31.8777 26.5359C32.8737 26.2645 33.5982 25.3572 33.5982 24.2729V21.1024C33.5982 20.3781 33.3267 19.7437 32.7822 19.2908V14.4917C32.7822 14.4917 33.7782 7.24805 23.9067 7.24805C14.0352 7.24805 15.0312 14.4917 15.0312 14.4917V19.1108C14.5782 19.5637 14.2152 20.1981 14.2152 20.9225V24.0929C14.2152 24.9087 14.6682 25.7216 15.3027 26.0845C16.1187 29.6164 18.2022 32.0624 18.2022 32.0624V34.9614C18.3822 36.1401 17.7492 37.1359 16.8432 37.6773L16.8447 37.6683Z"
+      fill="#E7ECED"
+    />
+    <path
+      d="M24.4534 0.0001395C11.1409 -0.179827 0.273363 10.3227 0.000362808 23.5427C-0.0911372 31.0578 3.25986 37.8485 8.51286 42.2862C8.87586 42.0148 9.23736 41.7433 9.69186 41.4704L16.8469 37.5756C17.7514 37.0327 18.3874 36.0354 18.3874 35.0396V32.1406C18.3874 32.1406 16.3039 29.6046 15.4879 26.1627C14.8549 25.7098 14.4004 24.984 14.4004 24.1711V21.0007C14.4004 20.2763 14.6719 19.642 15.2164 19.189V14.4814C15.2164 14.4814 14.2204 7.23778 24.0919 7.23778C33.9634 7.23778 32.9674 14.4814 32.9674 14.4814V19.1006C33.4204 19.5535 33.7834 20.1879 33.7834 20.9122V24.0826C33.7834 25.1699 33.0589 26.0742 32.0629 26.3457C31.5199 28.0659 30.7039 29.6961 29.7079 31.1448C29.4364 31.5077 29.1649 31.8692 28.9834 32.0491V35.0366C28.9834 36.1239 29.6164 37.1197 30.6124 37.6611L38.3119 41.4644C38.7649 41.7358 39.2164 42.0073 39.5794 42.2802C44.5594 38.114 47.9119 31.6862 48.0004 24.4426C48.1804 11.1326 37.6759 0.267089 24.4534 -0.00585938V0.0001395Z"
+      fill="#556080"
+    />
+  </svg>
+)
diff --git a/sites/public/src/pages/account/account.module.scss b/sites/public/src/pages/account/account.module.scss
new file mode 100644
index 0000000000..79e3b2761b
--- /dev/null
+++ b/sites/public/src/pages/account/account.module.scss
@@ -0,0 +1,26 @@
+.account-card-container {
+  padding-inline: var(--seeds-s6);
+  @media (max-width: theme("screens.sm")) {
+    padding-inline: 0rem;
+    padding-block: var(--seeds-s4);
+  }
+}
+
+.account-card-section {
+  @media (min-width: theme("screens.sm")) {
+    --card-content-padding-inline: var(--seeds-s12);
+  }
+}
+
+.application-card-section {
+  --card-content-padding-block: var(--seeds-s6);
+}
+
+.account-settings-label {
+  font-size: var(--seeds-font-size-sm);
+  font-weight: var(--seeds-font-weight-bold);
+}
+
+.application-no-results {
+  padding-bottom: var(--seeds-s4);
+}
diff --git a/sites/public/src/pages/account/applications.tsx b/sites/public/src/pages/account/applications.tsx
index ccd41ec119..8d4fd365c1 100644
--- a/sites/public/src/pages/account/applications.tsx
+++ b/sites/public/src/pages/account/applications.tsx
@@ -1,12 +1,15 @@
 import React, { useEffect, useState, Fragment, useContext } from "react"
 import Head from "next/head"
-import { DashBlock, DashBlocks, HeaderBadge, t, LoadingOverlay } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { t, LoadingOverlay } from "@bloom-housing/ui-components"
+import { Button, Card, Heading } from "@bloom-housing/ui-seeds"
 import { PageView, pushGtmEvent, AuthContext, RequireLogin } from "@bloom-housing/shared-helpers"
 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 styles from "../../pages/account/account.module.scss"
 
 const Applications = () => {
   const { applicationsService, listingsService, profile } = useContext(AuthContext)
@@ -57,17 +60,23 @@ const Applications = () => {
   }, [applications, listLoading, listingsService])
 
   const noApplicationsSection = () => {
-    return error ? (
-      <div className="p-8">
-        <h1 className="pb-4 text-2xl">{`${t("account.errorFetchingApplications")}`}</h1>
-      </div>
-    ) : (
-      <div className="p-8">
-        <h1 className="pb-4 text-2xl">{t("account.noApplications")}</h1>
-        <Button variant="primary-outlined" href="/listings">
-          {t("listings.browseListings")}
-        </Button>
-      </div>
+    return (
+      <Card.Section
+        className={`${styles["account-card-section"]} ${styles["application-card-section"]}`}
+      >
+        {error ? (
+          <Heading size="2xl">{`${t("account.errorFetchingApplications")}`}</Heading>
+        ) : (
+          <>
+            <Heading className={styles["application-no-results"]} size="2xl">
+              {t("account.noApplications")}
+            </Heading>
+            <Button variant="primary-outlined" href="/listings">
+              {t("listings.browseListings")}
+            </Button>
+          </>
+        )}
+      </Card.Section>
     )
   }
   return (
@@ -79,8 +88,13 @@ const Applications = () => {
         <MetaTags title={t("account.myApplications")} description="" />
         <section className="bg-gray-300 border-t border-gray-450">
           <div className="flex flex-wrap relative max-w-3xl mx-auto md:py-8">
-            <DashBlocks>
-              <DashBlock title={t("account.myApplications")} icon={<HeaderBadge />}>
+            <AccountCard
+              iconSymbol="application"
+              title={t("account.myApplications")}
+              subtitle={t("account.myApplicationsSubtitle")}
+              divider="inset"
+            >
+              <>
                 <LoadingOverlay isLoading={loading}>
                   <Fragment>
                     {applications?.map((application, index) => {
@@ -88,9 +102,10 @@ const Applications = () => {
                     })}
                   </Fragment>
                 </LoadingOverlay>
+
                 {!applications && !loading && noApplicationsSection()}
-              </DashBlock>
-            </DashBlocks>
+              </>
+            </AccountCard>
           </div>
         </section>
       </Layout>
diff --git a/sites/public/src/pages/account/dashboard.tsx b/sites/public/src/pages/account/dashboard.tsx
index 3a167e09e2..65bc3de637 100644
--- a/sites/public/src/pages/account/dashboard.tsx
+++ b/sites/public/src/pages/account/dashboard.tsx
@@ -1,19 +1,15 @@
 import React, { useEffect, useState, useContext } from "react"
 import Head from "next/head"
 import { NextRouter, withRouter } from "next/router"
-import {
-  DashBlock,
-  DashBlocks,
-  HeaderBadge,
-  Icon,
-  t,
-  SiteAlert,
-  AlertBox,
-} from "@bloom-housing/ui-components"
+import { t, SiteAlert, AlertBox } from "@bloom-housing/ui-components"
 import { PageView, pushGtmEvent, AuthContext, RequireLogin } from "@bloom-housing/shared-helpers"
 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 styles from "./account.module.scss"
 
 interface DashboardProps {
   router: NextRouter
@@ -44,12 +40,6 @@ function Dashboard(props: DashboardProps) {
     setAlertMessage(null)
   }
 
-  const settingsIcon = (
-    <span className="header-badge">
-      <Icon size="medium" symbol="settings" />
-    </span>
-  )
-
   return (
     <RequireLogin signInPath="/sign-in" signInMessage={t("t.loginIsRequired")}>
       <Layout>
@@ -63,28 +53,44 @@ function Dashboard(props: DashboardProps) {
           </AlertBox>
         )}
         <section className="bg-gray-300 border-t border-gray-450">
-          <div className="max-w-5xl mx-auto md:py-8">
+          <div className="max-w-5xl mx-auto sm:py-8">
             <SiteAlert type="success" className="md:mb-8" timeout={30000} />
-
-            <div className="flex flex-wrap relative">
-              <h1 className={"sr-only"}>{t("nav.myDashboard")}</h1>
-              <DashBlocks>
-                <DashBlock
-                  href="/account/applications"
-                  title={t("account.myApplications")}
-                  subtitle={t("account.myApplicationsSubtitle")}
-                  icon={<HeaderBadge />}
-                  dataTestId={"account-dashboard-applications"}
-                ></DashBlock>
-                <DashBlock
-                  href="/account/edit"
-                  title={t("account.accountSettings")}
-                  subtitle={t("account.accountSettingsSubtitle")}
-                  icon={settingsIcon}
-                  dataTestId={"account-dashboard-settings"}
-                ></DashBlock>
-              </DashBlocks>
-            </div>
+            <h1 className={"sr-only"}>{t("nav.myDashboard")}</h1>
+            <Grid spacing="lg" className={styles["account-card-container"]}>
+              <Grid.Row columns={2}>
+                <Grid.Cell>
+                  <AccountCard
+                    iconSymbol="application"
+                    title={t("account.myApplications")}
+                    subtitle={t("account.myApplicationsSubtitle")}
+                  >
+                    <Card.Section className={styles["account-card-section"]}>
+                      <Button
+                        href={"/account/applications"}
+                        variant="primary-outlined"
+                        id="account-dashboard-applications"
+                      >
+                        {t("account.viewApplications")}
+                      </Button>
+                    </Card.Section>
+                  </AccountCard>
+                </Grid.Cell>
+                <Grid.Cell>
+                  <AccountCard
+                    iconSymbol="profile"
+                    title={t("account.accountSettings")}
+                    subtitle={t("account.accountSettingsSubtitle")}
+                    id="account-dashboard-settings"
+                  >
+                    <Card.Section className={styles["account-card-section"]}>
+                      <Button href={"/account/edit"} variant="primary-outlined">
+                        {t("account.accountSettingsUpdate")}
+                      </Button>
+                    </Card.Section>
+                  </AccountCard>
+                </Grid.Cell>
+              </Grid.Row>
+            </Grid>
           </div>
         </section>
       </Layout>
diff --git a/sites/public/src/pages/account/edit.tsx b/sites/public/src/pages/account/edit.tsx
index be06bee8e8..ada40f6a88 100644
--- a/sites/public/src/pages/account/edit.tsx
+++ b/sites/public/src/pages/account/edit.tsx
@@ -7,8 +7,6 @@ dayjs.extend(customParseFormat)
 import { useForm } from "react-hook-form"
 import {
   Field,
-  FormCard,
-  Icon,
   Form,
   emailRegex,
   t,
@@ -19,11 +17,14 @@ import {
   DOBField,
   DOBFieldValues,
 } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Button, Card } from "@bloom-housing/ui-seeds"
 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 styles from "./account.module.scss"
 
 type AlertMessage = {
   type: AlertTypes
@@ -149,102 +150,111 @@ const Edit = () => {
   return (
     <RequireLogin signInPath="/sign-in" signInMessage={t("t.loginIsRequired")}>
       <FormsLayout>
-        <FormCard>
-          <div className="form-card__lead text-center border-b mx-0">
-            <Icon size="2xl" symbol="settings" />
-            <h1 className="form-card__title">{t("account.accountSettings")}</h1>
-          </div>
-          <SiteAlert type="notice" dismissable />
-          <Form id="update-name" onSubmit={handleSubmit(onNameSubmit)}>
+        <AccountCard
+          iconSymbol="profile"
+          title={t("account.accountSettings")}
+          subtitle={t("account.accountSettingsSubtitle")}
+          divider="inset"
+          headingPriority={1}
+        >
+          <>
+            <SiteAlert type="notice" dismissable />
             {nameAlert && (
-              <AlertBox type={nameAlert.type} onClose={() => setNameAlert(null)} inverted closeable>
+              <AlertBox
+                type={nameAlert.type}
+                onClose={() => setNameAlert(null)}
+                className="my-0"
+                inverted
+                closeable
+              >
                 {nameAlert.message}
               </AlertBox>
             )}
-            <div className="form-card__group border-b">
-              <label className="text__caps-spaced" htmlFor="firstName">
-                {t("application.name.yourName")}
-              </label>
-
-              <Field
-                controlClassName="mt-2"
-                name="firstName"
-                placeholder={`${t("application.name.firstName")}`}
-                error={errors.firstName}
-                validation={{ maxLength: 64 }}
-                errorMessage={
-                  errors.firstName?.type === "maxLength"
-                    ? t("errors.maxLength")
-                    : t("errors.firstNameError")
-                }
-                register={register}
-                defaultValue={profile ? profile.firstName : null}
-              />
+            <Card.Section divider="inset" className={styles["account-card-section"]}>
+              <Form id="update-name" onSubmit={handleSubmit(onNameSubmit)}>
+                <label className={styles["account-settings-label"]} htmlFor="firstName">
+                  {t("application.name.yourName")}
+                </label>
+                <Field
+                  label={t("application.contact.givenName")}
+                  className="my-3"
+                  controlClassName="mt-2"
+                  name="firstName"
+                  error={errors.firstName}
+                  validation={{ maxLength: 64 }}
+                  errorMessage={
+                    errors.firstName?.type === "maxLength"
+                      ? t("errors.maxLength")
+                      : t("errors.firstNameError")
+                  }
+                  register={register}
+                  defaultValue={profile ? profile.firstName : null}
+                />
 
-              <Field
-                name="middleName"
-                placeholder={t("application.name.middleNameOptional")}
-                register={register}
-                defaultValue={profile ? profile?.middleName : null}
-                label={t("application.name.middleNameOptional")}
-                readerOnly
-                error={errors.middleName}
-                validation={{ maxLength: 64 }}
-                errorMessage={t("errors.maxLength")}
-              />
+                <Field
+                  name="middleName"
+                  className="mb-3"
+                  register={register}
+                  defaultValue={profile ? profile?.middleName : null}
+                  label={t("application.name.middleNameOptional")}
+                  error={errors.middleName}
+                  validation={{ maxLength: 64 }}
+                  errorMessage={t("errors.maxLength")}
+                />
 
-              <Field
-                name="lastName"
-                placeholder={t("application.name.lastName")}
-                error={errors.lastName}
-                register={register}
-                defaultValue={profile ? profile.lastName : null}
-                label={t("application.name.lastName")}
-                validation={{ maxLength: 64 }}
-                errorMessage={
-                  errors.lastName?.type === "maxLength"
-                    ? t("errors.maxLength")
-                    : t("errors.lastNameError")
-                }
-                readerOnly
-              />
-              <div className="text-center">
-                <Button type="submit" variant="primary-outlined" className="items-center">
+                <Field
+                  name="lastName"
+                  placeholder={t("application.name.lastName")}
+                  className="mb-6"
+                  error={errors.lastName}
+                  register={register}
+                  defaultValue={profile ? profile.lastName : null}
+                  label={t("application.contact.familyName")}
+                  validation={{ maxLength: 64 }}
+                  errorMessage={
+                    errors.lastName?.type === "maxLength"
+                      ? t("errors.maxLength")
+                      : t("errors.lastNameError")
+                  }
+                />
+                <Button type="submit" variant="primary-outlined">
                   {t("account.settings.update")}
                 </Button>
-              </div>
-            </div>
-          </Form>
-          <Form id="update-birthdate" onSubmit={handleSubmit(onBirthdateSubmit)}>
+              </Form>
+            </Card.Section>
             {dobAlert && (
-              <AlertBox type={dobAlert.type} onClose={() => setDobAlert(null)} inverted closeable>
+              <AlertBox
+                type={dobAlert.type}
+                onClose={() => setDobAlert(null)}
+                className="my-0"
+                inverted
+                closeable
+              >
                 {dobAlert.message}
               </AlertBox>
             )}
-            <div className="form-card__group border-b">
-              <DOBField
-                id="dateOfBirth"
-                name="dateOfBirth"
-                register={register}
-                error={errors?.dateOfBirth}
-                watch={watch}
-                validateAge18={true}
-                errorMessage={t("errors.dateOfBirthErrorAge")}
-                defaultDOB={{
-                  birthDay: profile ? dayjs(new Date(profile.dob)).utc().format("DD") : null,
-                  birthMonth: profile ? dayjs(new Date(profile.dob)).utc().format("MM") : null,
-                  birthYear: profile ? dayjs(new Date(profile.dob)).utc().format("YYYY") : null,
-                }}
-                label={t("application.name.yourDateOfBirth")}
-              />
-              <div className="text-center mt-5">
-                <Button type="submit" variant="primary-outlined" className="items-center">
+            <Card.Section divider="inset" className={styles["account-card-section"]}>
+              <Form id="update-birthdate" onSubmit={handleSubmit(onBirthdateSubmit)}>
+                <DOBField
+                  id="dateOfBirth"
+                  name="dateOfBirth"
+                  register={register}
+                  error={errors?.dateOfBirth}
+                  watch={watch}
+                  validateAge18={true}
+                  errorMessage={t("errors.dateOfBirthErrorAge")}
+                  defaultDOB={{
+                    birthDay: profile ? dayjs(new Date(profile.dob)).utc().format("DD") : null,
+                    birthMonth: profile ? dayjs(new Date(profile.dob)).utc().format("MM") : null,
+                    birthYear: profile ? dayjs(new Date(profile.dob)).utc().format("YYYY") : null,
+                  }}
+                  label={t("application.name.yourDateOfBirth")}
+                />
+                <Button type="submit" variant="primary-outlined" className="mt-6">
                   {t("account.settings.update")}
                 </Button>
-              </div>
-            </div>
-          </Form>
-          <Form id="update-email" onSubmit={handleSubmit(onEmailSubmit)}>
+              </Form>
+            </Card.Section>
             {emailAlert && (
               <AlertBox
                 type={emailAlert.type}
@@ -255,67 +265,69 @@ const Edit = () => {
                 {emailAlert.message}
               </AlertBox>
             )}
-            <div className="form-card__group border-b">
-              <Field
-                caps={true}
-                type="email"
-                name="email"
-                label={`${t("t.email")}`}
-                placeholder="example@web.com"
-                validation={{ pattern: emailRegex }}
-                error={errors.email}
-                errorMessage={`${t("errors.emailAddressError")}`}
-                register={register}
-                defaultValue={profile ? profile.email : null}
-              />
-              <div className="text-center">
-                <Button type="submit" variant="primary-outlined" className={"items-center"}>
+            <Card.Section divider="inset" className={styles["account-card-section"]}>
+              <Form id="update-email" onSubmit={handleSubmit(onEmailSubmit)}>
+                <label className={styles["account-settings-label"]} htmlFor="email">
+                  {t("application.name.yourEmailAddress")}
+                </label>
+                <Field
+                  type="email"
+                  name="email"
+                  label={`${t("t.email")}`}
+                  placeholder="example@web.com"
+                  className="mt-3 mb-6"
+                  validation={{ pattern: emailRegex }}
+                  error={errors.email}
+                  errorMessage={`${t("errors.emailAddressError")}`}
+                  register={register}
+                  defaultValue={profile ? profile.email : null}
+                />
+                <Button type="submit" variant="primary-outlined">
                   {t("account.settings.update")}
                 </Button>
-              </div>
-            </div>
-          </Form>
-          <Form id="update-password" onSubmit={handleSubmit(onPasswordSubmit)}>
+              </Form>
+            </Card.Section>
             {passwordAlert && (
               <AlertBox
                 type={passwordAlert.type}
                 onClose={() => setPasswordAlert(null)}
+                className="my-0"
                 inverted
                 closeable
               >
                 {passwordAlert.message}
               </AlertBox>
             )}
-            <div className="form-card__group border-b">
-              <fieldset>
-                <legend className="text__caps-spaced">
-                  {t("authentication.createAccount.password")}
-                </legend>
-                <p className="field-note mb-4">{t("account.settings.passwordRemember")}</p>
-                <div className={"flex flex-col"}>
-                  <Field
-                    caps={true}
-                    type="password"
-                    name="currentPassword"
-                    label={t("account.settings.currentPassword")}
-                    readerOnly={true}
-                    placeholder="Current password"
-                    error={errors.currentPassword}
-                    register={register}
-                    className={"mb-1"}
-                  />
-                  <div className="float-left text-sm font-semibold">
-                    <Link href="/forgot-password">{t("authentication.signIn.forgotPassword")}</Link>
+            <Card.Section divider="inset" className={styles["account-card-section"]}>
+              <Form id="update-password" onSubmit={handleSubmit(onPasswordSubmit)}>
+                <fieldset>
+                  <legend className={styles["account-settings-label"]}>
+                    {t("authentication.createAccount.password")}
+                  </legend>
+                  <p className="field-note mt-2 mb-3">{t("account.settings.passwordRemember")}</p>
+                  <div className={"flex flex-col"}>
+                    <Field
+                      type="password"
+                      name="currentPassword"
+                      label={t("account.settings.currentPassword")}
+                      error={errors.currentPassword}
+                      register={register}
+                      className={"mb-1"}
+                    />
+                    <span className="float-left text-sm font-semibold mt-2">
+                      <Link href="/forgot-password">
+                        {t("authentication.signIn.forgotPassword")}
+                      </Link>
+                    </span>
                   </div>
-                </div>
 
-                <div className="mt-5">
                   <Field
                     type="password"
                     name="password"
                     label={t("account.settings.newPassword")}
+                    labelClassName="mt-4"
+                    className="mt-4"
                     note={t("authentication.createAccount.passwordInfo")}
-                    placeholder={t("authentication.createAccount.mustBe8Chars")}
                     validation={{
                       minLength: MIN_PASSWORD_LENGTH,
                       pattern: passwordRegex,
@@ -323,16 +335,13 @@ const Edit = () => {
                     error={errors.password}
                     errorMessage={t("authentication.signIn.passwordError")}
                     register={register}
-                    className={"mb-1"}
                   />
-                </div>
 
-                <div className="mt-5">
                   <Field
                     type="password"
                     name="passwordConfirmation"
                     label={t("account.settings.confirmNewPassword")}
-                    placeholder={t("authentication.createAccount.mustBe8Chars")}
+                    className="mt-4 mb-6"
                     validation={{
                       validate: (value) =>
                         value === password.current ||
@@ -341,19 +350,16 @@ const Edit = () => {
                     error={errors.passwordConfirmation}
                     errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
                     register={register}
-                    className={"mb-1"}
                   />
-                </div>
 
-                <div className="text-center mt-5">
-                  <Button type="submit" variant="primary-outlined" className={"items-center"}>
+                  <Button type="submit" variant="primary-outlined">
                     {t("account.settings.update")}
                   </Button>
-                </div>
-              </fieldset>
-            </div>
-          </Form>
-        </FormCard>
+                </fieldset>
+              </Form>
+            </Card.Section>
+          </>
+        </AccountCard>
       </FormsLayout>
     </RequireLogin>
   )

From ad9422adbddd6f4e096bc2a11baaa8668c2c9d6b Mon Sep 17 00:00:00 2001
From: ColinBuyck <53269332+ColinBuyck@users.noreply.github.com>
Date: Mon, 29 Jan 2024 15:28:41 -0800
Subject: [PATCH 03/20] fix: add divider width (#3841)

* fix: add divider width

* fix: remove space
---
 sites/public/src/components/account/AccountCard.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/sites/public/src/components/account/AccountCard.module.scss b/sites/public/src/components/account/AccountCard.module.scss
index 7cfd3921ac..485bfb787a 100644
--- a/sites/public/src/components/account/AccountCard.module.scss
+++ b/sites/public/src/components/account/AccountCard.module.scss
@@ -3,6 +3,7 @@
   --card-header-padding-inline-mobile: var(--seeds-s4);
   --card-content-padding-inline-mobile: var(--seeds-s4);
   --card-border-width: 0rem;
+  --card-divider-width: var(--seeds-border-1);
   width: 100%;
   @media (max-width: theme("screens.sm")) {
     --card-spacing-lg: var(--seeds-s6);

From 3c66653c17f6f2aa77b122eca85a3b0a942814a4 Mon Sep 17 00:00:00 2001
From: cade-exygy <131277283+cade-exygy@users.noreply.github.com>
Date: Wed, 31 Jan 2024 15:47:17 -0600
Subject: [PATCH 04/20] feat: 3753/ma sign in copy (#3811)

* feat: add sign-in copy for mandated accounts

* refactor: signUpBenefits component

* feat(component): allow classNames to be applied and overridden

* feat: allow Sign Copy to be mobile responsive

* feat: show and hide correct layout based on screen size

* refactor: signUpBenefits component

* fix: 3753 fix typescript errors

* fix: fix null errors

* fix: remove type cast

* fix: fix import

* fix: 3753 remove duplicate sign in form

* fix: add feature toggle

* fix: clean up sign-in page

* fix: address issue with email input losing focus

* fix: add feature toggle

* fix: remvoe MA flag from circleCI

* fix: sort strings

* refactor: signUpBenefitsHeadingGroup component

* fix: style fixes

* fix: adjust padding

* refactor: clean up classNames
---
 .circleci/config.yml                          |  1 -
 shared-helpers/src/locales/general.json       |  5 ++
 .../src/components/account/SignUpBenefits.tsx | 33 ++++++++
 sites/public/src/layouts/forms.tsx            |  9 ++-
 sites/public/src/pages/sign-in.tsx            | 81 +++++++++++++++----
 5 files changed, 108 insertions(+), 21 deletions(-)
 create mode 100644 sites/public/src/components/account/SignUpBenefits.tsx

diff --git a/.circleci/config.yml b/.circleci/config.yml
index b57191d555..e1e3432a9e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -30,7 +30,6 @@ executors:
       # DB URL for the jest tests per ormconfig.test.ts
       TEST_DATABASE_URL: "postgres://bloom-ci@localhost:5432/bloom"
       PARTNERS_PORTAL_URL: "http://localhost:3001"
-
 jobs:
   setup:
     executor: standard-node
diff --git a/shared-helpers/src/locales/general.json b/shared-helpers/src/locales/general.json
index 324fc40f45..66454ac91f 100644
--- a/shared-helpers/src/locales/general.json
+++ b/shared-helpers/src/locales/general.json
@@ -15,6 +15,11 @@
   "account.viewApplications": "View applications",
   "account.myApplicationsSubtitle": "See lottery dates and listings for properties for which you've applied",
   "account.noApplications": "It looks like you haven't applied to any listings yet.",
+  "account.signUpSaveTime.applyFaster": "Apply faster with saved application details",
+  "account.signUpSaveTime.checkStatus": "Check on the status of an application at any time",
+  "account.signUpSaveTime.resetPassword": "Simply reset your password if you forget it",
+  "account.signUpSaveTime.subTitle": "Having an account will save you time by using saved application details, and allow you to check the status of an application at anytime.",
+  "account.signUpSaveTime.title": "Sign up quickly and check application status at anytime",
   "account.settings.alerts.currentPassword": "Invalid current password. Please try again.",
   "account.settings.alerts.dobSuccess": "Birthdate update successful",
   "account.settings.alerts.emailSuccess": "Email update successful",
diff --git a/sites/public/src/components/account/SignUpBenefits.tsx b/sites/public/src/components/account/SignUpBenefits.tsx
new file mode 100644
index 0000000000..070292fd6e
--- /dev/null
+++ b/sites/public/src/components/account/SignUpBenefits.tsx
@@ -0,0 +1,33 @@
+import { Icon } from "@bloom-housing/ui-seeds"
+import { faStopwatch, faEye, faLock } from "@fortawesome/free-solid-svg-icons"
+import { t } from "@bloom-housing/ui-components"
+
+type SignUpBenefitsProps = {
+  className?: string
+  idTag?: string
+}
+const SignUpBenefits = (props: SignUpBenefitsProps) => {
+  const iconListItems = [
+    { icon: faStopwatch, text: t("account.signUpSaveTime.applyFaster") },
+    { icon: faEye, text: t("account.signUpSaveTime.checkStatus") },
+    { icon: faLock, text: t("account.signUpSaveTime.resetPassword") },
+  ]
+  const classNames = ["flex flex-col pt-6 pb-6 pr-4 pl-4 md:p-0"]
+  if (props.className) classNames.push(props.className)
+  return (
+    <ul className={classNames.join(" ")}>
+      {iconListItems.map((item) => (
+        <li className="flex flex-row mb-2 items-center" key={`${item.text}-${props.idTag}`}>
+          <Icon
+            icon={item.icon}
+            size="xl"
+            className="border border-white bg-white rounded-full p-2.5"
+          />
+          <p className="ml-3">{item.text}</p>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default SignUpBenefits
diff --git a/sites/public/src/layouts/forms.tsx b/sites/public/src/layouts/forms.tsx
index d8967a01a5..526b1cb940 100644
--- a/sites/public/src/layouts/forms.tsx
+++ b/sites/public/src/layouts/forms.tsx
@@ -4,16 +4,19 @@ import { ApplicationTimeout } from "../components/applications/ApplicationTimeou
 
 interface FormLayoutProps {
   children?: React.ReactNode
+  className?: string
 }
 const FormLayout = (props: FormLayoutProps) => {
+  const classNames = [
+    "md:mb-20 md:mt-12 mx-auto sm:max-w-lg max-w-full print:my-0 print:max-w-full",
+  ]
+  if (props.className) classNames.push(props.className)
   return (
     <>
       <ApplicationTimeout />
       <Layout>
         <section className="bg-gray-300 border-t border-gray-450">
-          <div className="md:mb-20 md:mt-12 mx-auto sm:max-w-lg max-w-full print:my-0 print:max-w-full">
-            {props.children}
-          </div>
+          <div className={classNames.join(" ")}>{props.children}</div>
         </section>
       </Layout>
     </>
diff --git a/sites/public/src/pages/sign-in.tsx b/sites/public/src/pages/sign-in.tsx
index 77d0163312..5d20447b21 100644
--- a/sites/public/src/pages/sign-in.tsx
+++ b/sites/public/src/pages/sign-in.tsx
@@ -15,6 +15,8 @@ import {
 } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../lib/constants"
 import { EnumUserErrorExtraModelUserErrorMessages } from "@bloom-housing/backend-core/types"
+import { HeadingGroup } from "@bloom-housing/ui-seeds"
+import SignUpBenefits from "../components/account/SignUpBenefits"
 
 const SignIn = () => {
   const { login, userService } = useContext(AuthContext)
@@ -119,31 +121,76 @@ const SignIn = () => {
 
   useEffect(() => {
     if (
-      networkError?.error.response.data?.message ===
+      networkError?.error?.response?.data?.message ===
       EnumUserErrorExtraModelUserErrorMessages.accountNotConfirmed
     ) {
       setConfirmationStatusModal(true)
     }
   }, [networkError])
 
+  const SignUpBenefitsHeadingGroup = (props: { mobileView: boolean }) => {
+    const classNames = props.mobileView ? "py-6 px-4" : ""
+    return (
+      <HeadingGroup
+        heading={t("account.signUpSaveTime.title")}
+        subheading={t("account.signUpSaveTime.subTitle")}
+        size="2xl"
+        className={classNames}
+      />
+    )
+  }
+
   return (
     <>
-      <FormsLayout>
-        <FormSignIn
-          onSubmit={(data) => void onSubmit(data)}
-          control={{ register, errors, handleSubmit, watch }}
-          networkStatus={{
-            content: networkStatusContent,
-            type: networkStatusType,
-            reset: () => {
-              reset()
-              resetNetworkError()
-              setConfirmationStatusMessage(undefined)
-            },
-          }}
-          showRegisterBtn={true}
-        />
-      </FormsLayout>
+      {process.env.showMandatedAccounts ? (
+        <FormsLayout className="sm:max-w-lg md:max-w-full">
+          <div className="flex flex-col md:flex-row md:ml-20 justify-center">
+            <div className="display md:hidden ">
+              <SignUpBenefitsHeadingGroup mobileView={true} />
+            </div>
+            <div className="md:max-w-lg w-full justify-center">
+              <FormSignIn
+                onSubmit={(data) => void onSubmit(data)}
+                control={{ register, errors, handleSubmit, watch }}
+                networkStatus={{
+                  content: networkStatusContent,
+                  type: networkStatusType,
+                  reset: () => {
+                    reset()
+                    resetNetworkError()
+                    setConfirmationStatusMessage(undefined)
+                  },
+                }}
+                showRegisterBtn={true}
+              />
+            </div>
+            <div className="hidden md:flex">
+              <div className="md:flex md:flex-col md:p-8 md:max-w-lg md:w-full ">
+                <SignUpBenefitsHeadingGroup mobileView={false} />
+                <SignUpBenefits idTag="desktop" />
+              </div>
+            </div>
+            <SignUpBenefits idTag="mobile" className="display md:hidden" />
+          </div>
+        </FormsLayout>
+      ) : (
+        <FormsLayout>
+          <FormSignIn
+            onSubmit={(data) => void onSubmit(data)}
+            control={{ register, errors, handleSubmit, watch }}
+            networkStatus={{
+              content: networkStatusContent,
+              type: networkStatusType,
+              reset: () => {
+                reset()
+                resetNetworkError()
+                setConfirmationStatusMessage(undefined)
+              },
+            }}
+            showRegisterBtn={true}
+          />
+        </FormsLayout>
+      )}
 
       <ResendConfirmationModal
         isOpen={confirmationStatusModal}

From 956d05cb8cfe2cf3f5d43199acee5d0cb46ed693 Mon Sep 17 00:00:00 2001
From: cade-exygy <131277283+cade-exygy@users.noreply.github.com>
Date: Thu, 8 Feb 2024 09:47:40 -0600
Subject: [PATCH 05/20] feat: 3760/redirect to application (#3839)

* feat: redirect user after forget password email

* refactor: parse query params as strings

* feat: redirect user to application after create account

* feat: confirmation Modal redirect

* feat: redirect after resendConfirmation button

* fix: add SHOW_MANDATED_ACCOUNTS var

* refactor: check feature toggle first

* fix: maintain default behavior when SHOW_MANDATED_ACCOUNTS is FALSE

* refactor: remove bend feature toggle

* refactor: add helper

* refactor: helper function to generate email url

* refactor: getListingRedirectUrl helper

* style: cleanup

* fix: cleanup
---
 .../core/src/auth/services/user.service.ts    |  3 ++-
 backend/core/src/email/email.service.ts       |  3 ++-
 .../src/shared/utils/get-public-email-url.ts  | 18 +++++++++++++++
 shared-helpers/src/auth/AuthContext.ts        | 23 +++++++++++--------
 .../src/utilities/getListingRedirectUrl.ts    |  8 +++++++
 .../src/views/sign-in/FormSignIn.tsx          | 10 ++++++--
 .../components/account/ConfirmationModal.tsx  | 16 ++++++++++---
 .../applications/start/choose-language.tsx    |  7 +++---
 sites/public/src/pages/create-account.tsx     | 22 +++++++++++-------
 sites/public/src/pages/forgot-password.tsx    |  5 ++--
 sites/public/src/pages/reset-password.tsx     | 11 ++++++++-
 11 files changed, 96 insertions(+), 30 deletions(-)
 create mode 100644 backend/core/src/shared/utils/get-public-email-url.ts
 create mode 100644 shared-helpers/src/utilities/getListingRedirectUrl.ts

diff --git a/backend/core/src/auth/services/user.service.ts b/backend/core/src/auth/services/user.service.ts
index fb0a8b235a..21127eec37 100644
--- a/backend/core/src/auth/services/user.service.ts
+++ b/backend/core/src/auth/services/user.service.ts
@@ -50,6 +50,7 @@ import { Request as ExpressRequest, Response } from "express"
 import { UserProfileUpdateDto } from "../dto/user-profile.dto"
 import { Listing } from "../../listings/entities/listing.entity"
 import { ListingsService } from "../../listings/listings.service"
+import { getPublicEmailURL } from "../../shared/utils/get-public-email-url"
 
 dayjs.extend(advancedFormat)
 
@@ -621,7 +622,7 @@ export class UserService {
   }
 
   private static getPublicConfirmationUrl(appUrl: string, user: User) {
-    return `${appUrl}?token=${user.confirmationToken}`
+    return getPublicEmailURL(appUrl, user.confirmationToken)
   }
 
   private static getPartnersConfirmationUrl(appUrl: string, user: User) {
diff --git a/backend/core/src/email/email.service.ts b/backend/core/src/email/email.service.ts
index df42b3bc7d..9467f41808 100644
--- a/backend/core/src/email/email.service.ts
+++ b/backend/core/src/email/email.service.ts
@@ -25,6 +25,7 @@ import { Translation } from "../translations/entities/translation.entity"
 import { ListingEventType, Unit } from "../../types"
 import { formatLocalDate } from "../shared/utils/format-local-date"
 import { formatCommunityType } from "../listings/helpers"
+import { getPublicEmailURL } from "../shared/utils/get-public-email-url"
 
 type EmailAttachmentData = {
   data: string
@@ -244,8 +245,8 @@ export class EmailService {
     const jurisdiction = await this.getUserJurisdiction(user)
     void (await this.loadTranslations(jurisdiction, user.language))
     const compiledTemplate = this.template("forgot-password")
-    const resetUrl = `${appUrl}/reset-password?token=${user.resetToken}`
 
+    const resetUrl = getPublicEmailURL(appUrl, user.resetToken, "/reset-password")
     if (this.configService.get<string>("NODE_ENV") == "production") {
       Logger.log(
         `Preparing to send a forget password email to ${user.email} from ${jurisdiction.emailFromAddress}...`
diff --git a/backend/core/src/shared/utils/get-public-email-url.ts b/backend/core/src/shared/utils/get-public-email-url.ts
new file mode 100644
index 0000000000..2e6a2912a0
--- /dev/null
+++ b/backend/core/src/shared/utils/get-public-email-url.ts
@@ -0,0 +1,18 @@
+/**
+ * Creates a email URL object from passed url applies redirectUrl and listingId query params if they exist
+ * If they do not exist, the return value will be the email url with just the necessary token
+ */
+
+export const getPublicEmailURL = (url: string, token: string, actionPath?: string): string => {
+  const urlObj = new URL(url)
+
+  const redirectUrl = urlObj.searchParams.get("redirectUrl")
+  const listingId = urlObj.searchParams.get("listingId")
+
+  let emailUrl = `${urlObj.origin}${urlObj.pathname}/${actionPath ? actionPath : ""}?token=${token}`
+
+  if (!!redirectUrl && !!listingId) {
+    emailUrl = emailUrl.concat(`&redirectUrl=${redirectUrl}&listingId=${listingId}`)
+  }
+  return emailUrl
+}
diff --git a/shared-helpers/src/auth/AuthContext.ts b/shared-helpers/src/auth/AuthContext.ts
index 9594e411c7..13afca9f9c 100644
--- a/shared-helpers/src/auth/AuthContext.ts
+++ b/shared-helpers/src/auth/AuthContext.ts
@@ -35,6 +35,7 @@ import qs from "qs"
 import axiosStatic from "axios"
 import { ConfigContext } from "./ConfigContext"
 import { createAction, createReducer } from "typesafe-actions"
+import { getListingRedirectUrl } from "../utilities/getListingRedirectUrl"
 
 type ContextProps = {
   amiChartsService: AmiChartsService
@@ -63,9 +64,9 @@ type ContextProps = {
   ) => Promise<User | undefined>
   signOut: () => void
   confirmAccount: (token: string) => Promise<User | undefined>
-  forgotPassword: (email: string) => Promise<string | undefined>
-  createUser: (user: UserCreate) => Promise<UserBasic | undefined>
-  resendConfirmation: (email: string) => Promise<Status | undefined>
+  forgotPassword: (email: string, listingIdRedirect?: string) => Promise<string | undefined>
+  createUser: (user: UserCreate, listingIdRedirect?: string) => Promise<UserBasic | undefined>
+  resendConfirmation: (email: string, listingIdRedirect?: string) => Promise<Status | undefined>
   initialStateLoaded: boolean
   loading: boolean
   profile?: User
@@ -286,33 +287,37 @@ export const AuthProvider: FunctionComponent<React.PropsWithChildren> = ({ child
         dispatch(stopLoading())
       }
     },
-    createUser: async (user: UserCreate) => {
+    createUser: async (user: UserCreate, listingIdRedirect) => {
       dispatch(startLoading())
+      const appUrl = getListingRedirectUrl(listingIdRedirect)
       try {
         const response = await userService?.create({
-          body: { ...user, appUrl: window.location.origin },
+          body: { ...user, appUrl },
         })
         return response
       } finally {
         dispatch(stopLoading())
       }
     },
-    resendConfirmation: async (email: string) => {
+    resendConfirmation: async (email: string, listingIdRedirect) => {
       dispatch(startLoading())
+      const appUrl = getListingRedirectUrl(listingIdRedirect)
       try {
         const response = await userService?.resendConfirmation({
-          body: { email, appUrl: window.location.origin },
+          body: { email, appUrl },
         })
         return response
       } finally {
         dispatch(stopLoading())
       }
     },
-    forgotPassword: async (email) => {
+    forgotPassword: async (email, listingIdRedirect) => {
       dispatch(startLoading())
       try {
+        const appUrl = getListingRedirectUrl(listingIdRedirect)
+
         const response = await userService?.forgotPassword({
-          body: { email, appUrl: window.location.origin },
+          body: { email, appUrl },
         })
         return response?.message
       } finally {
diff --git a/shared-helpers/src/utilities/getListingRedirectUrl.ts b/shared-helpers/src/utilities/getListingRedirectUrl.ts
new file mode 100644
index 0000000000..5856020621
--- /dev/null
+++ b/shared-helpers/src/utilities/getListingRedirectUrl.ts
@@ -0,0 +1,8 @@
+export const getListingRedirectUrl = (
+  listingIdRedirect: string | undefined,
+  path: string = window.location.origin
+) => {
+  return process.env.showMandatedAccounts && listingIdRedirect
+    ? `${path}?redirectUrl=/applications/start/choose-language&listingId=${listingIdRedirect}`
+    : path
+}
diff --git a/shared-helpers/src/views/sign-in/FormSignIn.tsx b/shared-helpers/src/views/sign-in/FormSignIn.tsx
index cd2c62bdb4..19c5df2d3a 100644
--- a/shared-helpers/src/views/sign-in/FormSignIn.tsx
+++ b/shared-helpers/src/views/sign-in/FormSignIn.tsx
@@ -4,6 +4,8 @@ import { Button } from "@bloom-housing/ui-seeds"
 import { FormSignInErrorBox } from "./FormSignInErrorBox"
 import { NetworkStatus } from "../../auth/catchNetworkError"
 import type { UseFormMethods } from "react-hook-form"
+import { useRouter } from "next/router"
+import { getListingRedirectUrl } from "../../utilities/getListingRedirectUrl"
 
 export type FormSignInProps = {
   control: FormSignInControl
@@ -34,6 +36,10 @@ const FormSignIn = ({
     window.scrollTo(0, 0)
   }
   const { LinkComponent } = useContext(NavigationContext)
+  const router = useRouter()
+  const listingIdRedirect = router.query?.listingId as string
+  const forgetPasswordURL = getListingRedirectUrl(listingIdRedirect, "/forgot-password")
+  const createAccountUrl = getListingRedirectUrl(listingIdRedirect, "/create-account")
 
   return (
     <FormCard>
@@ -60,7 +66,7 @@ const FormSignIn = ({
           />
 
           <aside className="float-right text-sm font-semibold">
-            <LinkComponent href="/forgot-password">
+            <LinkComponent href={forgetPasswordURL}>
               {t("authentication.signIn.forgotPassword")}
             </LinkComponent>
           </aside>
@@ -88,7 +94,7 @@ const FormSignIn = ({
         <div className="form-card__group text-center border-t">
           <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
 
-          <Button variant="primary-outlined" href="/create-account">
+          <Button variant="primary-outlined" href={createAccountUrl}>
             {t("account.createAccount")}
           </Button>
         </div>
diff --git a/sites/public/src/components/account/ConfirmationModal.tsx b/sites/public/src/components/account/ConfirmationModal.tsx
index bd671b6055..06bf5b1e2b 100644
--- a/sites/public/src/components/account/ConfirmationModal.tsx
+++ b/sites/public/src/components/account/ConfirmationModal.tsx
@@ -27,7 +27,8 @@ const ConfirmationModal = (props: ConfirmationModalProps) => {
 
   const onSubmit = async ({ email }) => {
     try {
-      await resendConfirmation(email)
+      const listingId = router.query?.listingId as string
+      await resendConfirmation(email, listingId)
 
       setSiteAlertMessage(t(`authentication.createAccount.emailSent`), "success")
       setOpenModal(false)
@@ -39,12 +40,21 @@ const ConfirmationModal = (props: ConfirmationModalProps) => {
   }
 
   useEffect(() => {
+    const redirectUrl = router.query?.redirectUrl as string
+    const listingId = router.query?.listingId as string
+
+    const routerRedirectUrl =
+      process.env.showMandatedAccounts && redirectUrl && listingId
+        ? `${redirectUrl}`
+        : "/account/dashboard"
     if (router?.query?.token && !profile) {
       confirmAccount(router.query.token.toString())
         .then(() => {
           void router.push({
-            pathname: "/account/dashboard",
-            query: { alert: `authentication.createAccount.accountConfirmed` },
+            pathname: routerRedirectUrl,
+            query: process.env.showMandatedAccounts
+              ? { listingId: listingId }
+              : { alert: `authentication.createAccount.accountConfirmed` },
           })
           window.scrollTo(0, 0)
         })
diff --git a/sites/public/src/pages/applications/start/choose-language.tsx b/sites/public/src/pages/applications/start/choose-language.tsx
index bded70d86c..31f32f008a 100644
--- a/sites/public/src/pages/applications/start/choose-language.tsx
+++ b/sites/public/src/pages/applications/start/choose-language.tsx
@@ -67,8 +67,9 @@ const ApplicationChooseLanguage = (props: ChooseLanguageProps) => {
     conductor.reset()
     if (!router.isReady && !listingId) return
     if (router.isReady && !listingId) {
-      void router.push("/")
-      return
+      return process.env.showMandatedAccounts && initialStateLoaded && profile
+        ? undefined
+        : void router.push("/")
     }
 
     if (!context.listing || context.listing.id !== listingId) {
@@ -77,7 +78,7 @@ const ApplicationChooseLanguage = (props: ChooseLanguageProps) => {
       conductor.listing = context.listing
       setListing(context.listing)
     }
-  }, [router, conductor, context, listingId, props])
+  }, [router, conductor, context, listingId, props, initialStateLoaded, profile])
 
   useEffect(() => {
     if (listing?.status === "closed") {
diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx
index 1b6bc88894..0bbab86a27 100644
--- a/sites/public/src/pages/create-account.tsx
+++ b/sites/public/src/pages/create-account.tsx
@@ -32,6 +32,7 @@ export default () => {
   const [openModal, setOpenModal] = useState<boolean>(false)
   const router = useRouter()
   const language = router.locale
+  const listingId = router.query?.listingId as string
   const email = useRef({})
   const password = useRef({})
   email.current = watch("email", "")
@@ -48,11 +49,16 @@ export default () => {
   const onSubmit = async (data) => {
     try {
       const { dob, ...rest } = data
-      await createUser({
-        ...rest,
-        dob: dayjs(`${dob.birthYear}-${dob.birthMonth}-${dob.birthDay}`),
-        language,
-      })
+      const listingIdRedirect =
+        process.env.showMandatedAccounts && listingId ? listingId : undefined
+      await createUser(
+        {
+          ...rest,
+          dob: dayjs(`${dob.birthYear}-${dob.birthMonth}-${dob.birthDay}`),
+          language,
+        },
+        listingIdRedirect
+      )
 
       setOpenModal(true)
     } catch (err) {
@@ -255,14 +261,14 @@ export default () => {
           email: email.current,
         })}
         onClose={() => {
-          void router.push("/")
+          void router.push("/sign-in")
           window.scrollTo(0, 0)
         }}
         actions={[
           <Button
             variant="primary"
             onClick={() => {
-              void router.push("/")
+              void router.push("/sign-in")
               window.scrollTo(0, 0)
             }}
             size="sm"
@@ -274,7 +280,7 @@ export default () => {
             disabled={confirmationResent}
             onClick={() => {
               setConfirmationResent(true)
-              void resendConfirmation(email.current.toString())
+              void resendConfirmation(email.current.toString(), listingId)
             }}
             size="sm"
           >
diff --git a/sites/public/src/pages/forgot-password.tsx b/sites/public/src/pages/forgot-password.tsx
index c6e54ff0e7..7ca8befd9e 100644
--- a/sites/public/src/pages/forgot-password.tsx
+++ b/sites/public/src/pages/forgot-password.tsx
@@ -33,9 +33,10 @@ const ForgotPassword = () => {
 
   const onSubmit = async (data: { email: string }) => {
     const { email } = data
-
+    const listingId = router.query?.listingId as string
+    const listingIdRedirect = listingId && process.env.showMandatedAccounts ? listingId : undefined
     try {
-      await forgotPassword(email)
+      await forgotPassword(email, listingIdRedirect)
     } catch (error) {
       const { status } = error.response || {}
       determineNetworkError(status, error)
diff --git a/sites/public/src/pages/reset-password.tsx b/sites/public/src/pages/reset-password.tsx
index 0a46419cea..51227c2bc4 100644
--- a/sites/public/src/pages/reset-password.tsx
+++ b/sites/public/src/pages/reset-password.tsx
@@ -44,7 +44,16 @@ const ResetPassword = () => {
     try {
       const user = await resetPassword(token.toString(), password, passwordConfirmation)
       setSiteAlertMessage(t(`authentication.signIn.success`, { name: user.firstName }), "success")
-      await router.push("/account/applications")
+
+      const redirectUrl = router.query?.redirectUrl as string
+      const listingId = router.query?.listingId as string
+
+      const routerRedirectUrl =
+        process.env.showMandatedAccounts && redirectUrl && listingId
+          ? `${redirectUrl}?listingId=${listingId}`
+          : "/account/applications"
+
+      await router.push(routerRedirectUrl)
     } catch (err) {
       const { status, data } = err.response || {}
       if (status === 400) {

From 80d728cb480fd40d4c25c54edfd89f382dadff51 Mon Sep 17 00:00:00 2001
From: cliu02 <32694266+cliu02@users.noreply.github.com>
Date: Thu, 8 Feb 2024 09:58:23 -0800
Subject: [PATCH 06/20] feat: add MA account creation styling  (#3817)

* feat: update copy strings

* feat: update error strings

* feat: add show password

* feat: add form styling

* feat: update form styling

* fix: revert to previous password

* fix: update strings

* fix: remove tailwind apply

* fix: use seeds Card

* fix: update heading size

* fix: use style variables

* fix: alphabetize strings

* fix: use CardSection

* fix: use AccountCard

* fix: remove strings

* fix: update strings

* fix: remove doorway env

* fix: remove CardSection classNames

* fix: remove input colors

* fix: your name style

* feat: make emailConfirmation optional on the user-create dto

* fix: emailConfirmation optional

* fix: add AccountCard styles

* fix: change h2

* fix: override CardSection style with divider

* fix: update divider

* fix: style tweaks

---------

Co-authored-by: Cade Wolcott <cade.wolcott@exygy.com>
---
 backend/core/src/auth/dto/user-create.dto.ts  |   3 +-
 sites/public/src/pages/create-account.tsx     | 316 +++++++++---------
 .../public/styles/create-account.module.scss  |  26 ++
 3 files changed, 178 insertions(+), 167 deletions(-)
 create mode 100644 sites/public/styles/create-account.module.scss

diff --git a/backend/core/src/auth/dto/user-create.dto.ts b/backend/core/src/auth/dto/user-create.dto.ts
index bfad0c8e9a..44ba47ea5e 100644
--- a/backend/core/src/auth/dto/user-create.dto.ts
+++ b/backend/core/src/auth/dto/user-create.dto.ts
@@ -38,10 +38,11 @@ export class UserCreateDto extends OmitType(UserDto, [
   passwordConfirmation: string
 
   @Expose()
+  @IsOptional({ groups: [ValidationsGroupsEnum.default] })
   @IsEmail({}, { groups: [ValidationsGroupsEnum.default] })
   @Match("email", { groups: [ValidationsGroupsEnum.default] })
   @EnforceLowerCase()
-  emailConfirmation: string
+  emailConfirmation?: string
 
   @Expose()
   @IsOptional({ groups: [ValidationsGroupsEnum.default] })
diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx
index 0bbab86a27..0a41e46763 100644
--- a/sites/public/src/pages/create-account.tsx
+++ b/sites/public/src/pages/create-account.tsx
@@ -2,8 +2,6 @@ import React, { useEffect, useContext, useRef, useState } from "react"
 import { useForm } from "react-hook-form"
 import {
   Field,
-  FormCard,
-  Icon,
   Form,
   emailRegex,
   t,
@@ -13,7 +11,8 @@ import {
   Modal,
   passwordRegex,
 } from "@bloom-housing/ui-components"
-import { Button } from "@bloom-housing/ui-seeds"
+import { Button, Heading } from "@bloom-housing/ui-seeds"
+import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import dayjs from "dayjs"
 import customParseFormat from "dayjs/plugin/customParseFormat"
 dayjs.extend(customParseFormat)
@@ -21,6 +20,9 @@ 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 accountCardStyles from "./account/account.module.scss"
+import styles from "../../styles/create-account.module.scss"
 
 export default () => {
   const { createUser, resendConfirmation } = useContext(AuthContext)
@@ -78,182 +80,164 @@ export default () => {
 
   return (
     <FormsLayout>
-      <FormCard>
-        <div className="form-card__lead text-center border-b mx-0">
-          <Icon size="2xl" symbol="profile" />
-          <h1 className="form-card__title">{t("account.createAccount")}</h1>
+      <AccountCard
+        iconSymbol="profile"
+        title={t("account.createAccount")}
+        divider="inset"
+        headingPriority={1}
+      >
+        <>
           {requestError && (
             <AlertBox className="" onClose={() => setRequestError(undefined)} type="alert">
               {requestError}
             </AlertBox>
           )}
           <SiteAlert type="notice" dismissable />
-        </div>
-
-        <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
-          <div className="form-card__group border-b">
-            <label className="text__caps-spaced" htmlFor="firstName">
-              {t("application.name.yourName")}
-            </label>
-
-            <Field
-              controlClassName="mt-2"
-              name="firstName"
-              placeholder={t("application.name.firstName")}
-              validation={{ required: true, maxLength: 64 }}
-              error={errors.firstName}
-              errorMessage={
-                errors.firstName?.type === "maxLength"
-                  ? t("errors.maxLength")
-                  : t("errors.firstNameError")
-              }
-              register={register}
-            />
-
-            <Field
-              name="middleName"
-              placeholder={t("application.name.middleNameOptional")}
-              register={register}
-              label={t("application.name.middleNameOptional")}
-              readerOnly
-              error={errors.middleName}
-              validation={{ maxLength: 64 }}
-              errorMessage={t("errors.maxLength")}
-            />
+          <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
+            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
+              <label className={styles["create-account-header"]} htmlFor="firstName">
+                {t("application.name.yourName")}
+              </label>
 
-            <Field
-              name="lastName"
-              placeholder={t("application.name.lastName")}
-              validation={{ required: true, maxLength: 64 }}
-              error={errors.lastName}
-              register={register}
-              label={t("application.name.lastName")}
-              errorMessage={
-                errors.lastName?.type === "maxLength"
-                  ? t("errors.maxLength")
-                  : t("errors.lastNameError")
-              }
-              readerOnly
-            />
-          </div>
+              <label className={styles["create-account-field"]} htmlFor="firstName">
+                {t("application.name.firstName")}
+              </label>
+              <Field
+                controlClassName={styles["create-account-input"]}
+                className={styles["create-account-gap"]}
+                name="firstName"
+                validation={{ required: true, maxLength: 64 }}
+                error={errors.givenName}
+                errorMessage={
+                  errors.givenName?.type === "maxLength"
+                    ? t("errors.maxLength")
+                    : t("errors.firstNameError")
+                }
+                register={register}
+              />
 
-          <div className="form-card__group border-b">
-            <DOBField
-              register={register}
-              required={true}
-              error={errors.dob}
-              name="dob"
-              id="dob"
-              watch={watch}
-              validateAge18={true}
-              errorMessage={t("errors.dateOfBirthErrorAge")}
-              label={t("application.name.yourDateOfBirth")}
-            />
-          </div>
+              <label className={styles["create-account-field"]} htmlFor="middleName">
+                {t("application.name.middleNameOptional")}
+              </label>
+              <Field
+                name="middleName"
+                register={register}
+                label={t("application.name.middleNameOptional")}
+                readerOnly
+                error={errors.middleName}
+                validation={{ maxLength: 64 }}
+                errorMessage={t("errors.maxLength")}
+                controlClassName={styles["create-account-input"]}
+                className={styles["create-account-gap"]}
+              />
 
-          <div className="form-card__group border-b">
-            <Field
-              caps={true}
-              type="email"
-              name="email"
-              label={t("t.email")}
-              placeholder="example@web.com"
-              validation={{ required: true, pattern: emailRegex }}
-              error={errors.email}
-              errorMessage={t("authentication.signIn.loginError")}
-              register={register}
-            />
-            <p className="text text-gray-750 text-sm pb-2">
-              {t("authentication.createAccount.reEnterEmail")}
-            </p>
-            <Field
-              type="email"
-              name="emailConfirmation"
-              placeholder="example@web.com"
-              validation={{
-                validate: (value) =>
-                  value === email.current || t("authentication.createAccount.errors.emailMismatch"),
-              }}
-              onPaste={(e) => {
-                e.preventDefault()
-                e.nativeEvent.stopImmediatePropagation()
-                return false
-              }}
-              onDrop={(e) => {
-                e.preventDefault()
-                e.nativeEvent.stopImmediatePropagation()
-                return false
-              }}
-              error={errors.emailConfirmation}
-              errorMessage={t("authentication.createAccount.errors.emailMismatch")}
-              register={register}
-              label={t("authentication.createAccount.reEnterEmail")}
-              readerOnly
-            />
-          </div>
+              <label className={styles["create-account-field"]} htmlFor="lastName">
+                {t("application.name.lastName")}
+              </label>
+              <Field
+                name="lastName"
+                validation={{ required: true, maxLength: 64 }}
+                error={errors.lastName}
+                register={register}
+                label={t("application.name.lastName")}
+                errorMessage={
+                  errors.lastName?.type === "maxLength"
+                    ? t("errors.maxLength")
+                    : t("errors.lastNameError")
+                }
+                readerOnly
+                controlClassName={styles["create-account-input"]}
+              />
+            </CardSection>
+            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
+              <DOBField
+                register={register}
+                required={true}
+                error={errors.dob}
+                name="dob"
+                id="dob"
+                watch={watch}
+                validateAge18={true}
+                errorMessage={t("errors.dateOfBirthErrorAge")}
+                label={t("application.name.yourDateOfBirth")}
+              />
+              <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
+            </CardSection>
 
-          <div className="form-card__group border-b">
-            <Field
-              caps={true}
-              type="password"
-              name="password"
-              note={t("authentication.createAccount.passwordInfo")}
-              label={t("authentication.createAccount.password")}
-              placeholder={t("authentication.createAccount.mustBe8Chars")}
-              validation={{
-                required: true,
-                minLength: 8,
-                pattern: passwordRegex,
-              }}
-              error={errors.password}
-              errorMessage={t("authentication.signIn.passwordError")}
-              register={register}
-            />
-            <p className="text text-gray-750 text-sm pb-2">
-              {t("authentication.createAccount.reEnterPassword")}
-            </p>
-            <Field
-              type="password"
-              name="passwordConfirmation"
-              placeholder={t("authentication.createAccount.mustBe8Chars")}
-              validation={{
-                validate: (value) =>
-                  value === password.current ||
-                  t("authentication.createAccount.errors.passwordMismatch"),
-              }}
-              onPaste={(e) => {
-                e.preventDefault()
-                e.nativeEvent.stopImmediatePropagation()
-                return false
-              }}
-              onDrop={(e) => {
-                e.preventDefault()
-                e.nativeEvent.stopImmediatePropagation()
-                return false
-              }}
-              error={errors.passwordConfirmation}
-              errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
-              register={register}
-              label={t("authentication.createAccount.reEnterPassword")}
-              readerOnly
-            />
-
-            <div className="text-center mt-10">
+            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
+              <Field
+                caps={true}
+                type="email"
+                name="email"
+                label={t("application.name.yourEmailAddress")}
+                validation={{ required: true, pattern: emailRegex }}
+                error={errors.email}
+                errorMessage={t("authentication.signIn.loginError")}
+                register={register}
+                controlClassName={styles["create-account-input"]}
+                labelClassName={styles["create-account-label"]}
+              />
+            </CardSection>
+            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
+              <Field
+                caps={true}
+                type={"password"}
+                name="password"
+                note={t("authentication.createAccount.passwordInfo")}
+                label={t("authentication.createAccount.password")}
+                validation={{
+                  required: true,
+                  minLength: 8,
+                  pattern: passwordRegex,
+                }}
+                error={errors.password}
+                errorMessage={t("authentication.signIn.passwordError")}
+                register={register}
+                controlClassName={styles["create-account-input"]}
+              />
+              <label className={styles["create-account-field"]} htmlFor="passwordConfirmation">
+                {t("authentication.createAccount.reEnterPassword")}
+              </label>
+              <Field
+                type="password"
+                name="passwordConfirmation"
+                validation={{
+                  validate: (value) =>
+                    value === password.current ||
+                    t("authentication.createAccount.errors.passwordMismatch"),
+                }}
+                onPaste={(e) => {
+                  e.preventDefault()
+                  e.nativeEvent.stopImmediatePropagation()
+                  return false
+                }}
+                onDrop={(e) => {
+                  e.preventDefault()
+                  e.nativeEvent.stopImmediatePropagation()
+                  return false
+                }}
+                error={errors.passwordConfirmation}
+                errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
+                register={register}
+                controlClassName={styles["create-account-input"]}
+                label={t("authentication.createAccount.reEnterPassword")}
+                readerOnly
+              />
               <Button type="submit" variant="primary">
                 {t("account.createAccount")}
               </Button>
-            </div>
-          </div>
-        </Form>
-
-        <div className="form-card__group text-center">
-          <h2 className="mb-6">{t("account.haveAnAccount")}</h2>
-
-          <Button variant="primary-outlined" href="/sign-in">
-            {t("nav.signIn")}
-          </Button>
-        </div>
-      </FormCard>
+            </CardSection>
+            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
+              <Heading priority={2} size="2xl" className="mb-6">
+                {t("account.haveAnAccount")}
+              </Heading>
+              <Button href="/sign-in" variant="primary-outlined">
+                {t("nav.signIn")}
+              </Button>
+            </CardSection>
+          </Form>
+        </>
+      </AccountCard>
       <Modal
         open={openModal}
         title={t("authentication.createAccount.confirmationNeeded")}
diff --git a/sites/public/styles/create-account.module.scss b/sites/public/styles/create-account.module.scss
new file mode 100644
index 0000000000..8eeb43315f
--- /dev/null
+++ b/sites/public/styles/create-account.module.scss
@@ -0,0 +1,26 @@
+.create-account-header {
+    color: var(--seeds-color-gray-750);
+    font-size: var(--seeds-font-size-sm);
+    font-weight: var(--seeds-font-weight-bold);
+    display: block;
+}
+
+.create-account-field {
+    color: var(--seeds-color-gray-750);
+    font-size: var(--seeds-font-size-sm);
+    display: block;
+    margin-top: var(--bloom-s3);
+}
+
+.create-account-input {
+    border-radius: var(--bloom-rounded-lg);
+    margin-top: var(--bloom-s2);
+}
+
+.create-account-gap {
+    margin-bottom: var(--bloom-s4);
+}
+
+.create-account-label {
+    margin-bottom: var(--bloom-s1);
+}
\ No newline at end of file

From 3820ddde596da2885e423cca98a2739ccf40e97f Mon Sep 17 00:00:00 2001
From: cade-exygy <131277283+cade-exygy@users.noreply.github.com>
Date: Fri, 9 Feb 2024 15:27:44 -0600
Subject: [PATCH 07/20] feat: create Sign Up Copy (#3880)

* feat: create Sign Up Copy

* fix: style fix

* fix: reinstate success dto

* fix: update icon margin

---------

Co-authored-by: ColinBuyck <colin.buyck@gmail.com>
Co-authored-by: cliu02 <32694266+cliu02@users.noreply.github.com>
---
 .../src/components/account/SignUpBenefits.tsx |   2 +-
 .../account/SignUpBenefitsHeadingGroup.tsx    |  16 +
 sites/public/src/pages/create-account.tsx     | 348 ++++++++++--------
 sites/public/src/pages/sign-in.tsx            |  91 ++---
 .../styles/sign-up-benefits.module.scss       |  54 +++
 5 files changed, 299 insertions(+), 212 deletions(-)
 create mode 100644 sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
 create mode 100644 sites/public/styles/sign-up-benefits.module.scss

diff --git a/sites/public/src/components/account/SignUpBenefits.tsx b/sites/public/src/components/account/SignUpBenefits.tsx
index 070292fd6e..7b18d551fb 100644
--- a/sites/public/src/components/account/SignUpBenefits.tsx
+++ b/sites/public/src/components/account/SignUpBenefits.tsx
@@ -17,7 +17,7 @@ const SignUpBenefits = (props: SignUpBenefitsProps) => {
   return (
     <ul className={classNames.join(" ")}>
       {iconListItems.map((item) => (
-        <li className="flex flex-row mb-2 items-center" key={`${item.text}-${props.idTag}`}>
+        <li className="flex flex-row mb-3 items-center" key={`${item.text}-${props.idTag}`}>
           <Icon
             icon={item.icon}
             size="xl"
diff --git a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
new file mode 100644
index 0000000000..f55de20e44
--- /dev/null
+++ b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
@@ -0,0 +1,16 @@
+import { t } from "@bloom-housing/ui-components"
+import { HeadingGroup } from "@bloom-housing/ui-seeds"
+
+const SignUpBenefitsHeadingGroup = (props: { mobileView: boolean }) => {
+  const classNames = props.mobileView ? "py-6 px-4" : ""
+  return (
+    <HeadingGroup
+      heading={t("account.signUpSaveTime.title")}
+      subheading={t("account.signUpSaveTime.subTitle")}
+      size="2xl"
+      className={classNames}
+    />
+  )
+}
+
+export default SignUpBenefitsHeadingGroup
diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx
index 0a41e46763..9f8ca3df51 100644
--- a/sites/public/src/pages/create-account.tsx
+++ b/sites/public/src/pages/create-account.tsx
@@ -23,10 +23,14 @@ import FormsLayout from "../layouts/forms"
 import { AccountCard } from "../components/account/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"
+import SignUpBenefits from "../components/account/SignUpBenefits"
+import SignUpBenefitsHeadingGroup from "../components/account/SignUpBenefitsHeadingGroup"
 
 export default () => {
   const { createUser, resendConfirmation } = useContext(AuthContext)
   const [confirmationResent, setConfirmationResent] = useState<boolean>(false)
+  const signUpCopy = process.env.showMandatedAccounts
   /* Form Handler */
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { register, handleSubmit, errors, watch } = useForm()
@@ -79,165 +83,199 @@ export default () => {
   }
 
   return (
-    <FormsLayout>
-      <AccountCard
-        iconSymbol="profile"
-        title={t("account.createAccount")}
-        divider="inset"
-        headingPriority={1}
-      >
-        <>
-          {requestError && (
-            <AlertBox className="" onClose={() => setRequestError(undefined)} type="alert">
-              {requestError}
-            </AlertBox>
-          )}
-          <SiteAlert type="notice" dismissable />
-          <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <label className={styles["create-account-header"]} htmlFor="firstName">
-                {t("application.name.yourName")}
-              </label>
+    <FormsLayout className={signUpCopy && "sm:max-w-lg md:max-w-full"}>
+      <div className={signUpCopy && signUpBenefitsStyles["benefits-container"]}>
+        {signUpCopy && (
+          <div className={signUpBenefitsStyles["benefits-display-hide"]}>
+            <SignUpBenefitsHeadingGroup mobileView={true} />
+          </div>
+        )}
+        <div className={signUpCopy && signUpBenefitsStyles["benefits-form-container"]}>
+          <AccountCard
+            iconSymbol="profile"
+            title={t("account.createAccount")}
+            divider="inset"
+            headingPriority={1}
+          >
+            <>
+              {requestError && (
+                <AlertBox className="" onClose={() => setRequestError(undefined)} type="alert">
+                  {requestError}
+                </AlertBox>
+              )}
+              <SiteAlert type="notice" dismissable />
+              <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <label className={styles["create-account-header"]} htmlFor="firstName">
+                    {t("application.name.yourName")}
+                  </label>
 
-              <label className={styles["create-account-field"]} htmlFor="firstName">
-                {t("application.name.firstName")}
-              </label>
-              <Field
-                controlClassName={styles["create-account-input"]}
-                className={styles["create-account-gap"]}
-                name="firstName"
-                validation={{ required: true, maxLength: 64 }}
-                error={errors.givenName}
-                errorMessage={
-                  errors.givenName?.type === "maxLength"
-                    ? t("errors.maxLength")
-                    : t("errors.firstNameError")
-                }
-                register={register}
-              />
+                  <label className={styles["create-account-field"]} htmlFor="firstName">
+                    {t("application.name.firstName")}
+                  </label>
+                  <Field
+                    controlClassName={styles["create-account-input"]}
+                    name="firstName"
+                    validation={{ required: true, maxLength: 64 }}
+                    error={errors.givenName}
+                    errorMessage={
+                      errors.givenName?.type === "maxLength"
+                        ? t("errors.maxLength")
+                        : t("errors.firstNameError")
+                    }
+                    register={register}
+                  />
 
-              <label className={styles["create-account-field"]} htmlFor="middleName">
-                {t("application.name.middleNameOptional")}
-              </label>
-              <Field
-                name="middleName"
-                register={register}
-                label={t("application.name.middleNameOptional")}
-                readerOnly
-                error={errors.middleName}
-                validation={{ maxLength: 64 }}
-                errorMessage={t("errors.maxLength")}
-                controlClassName={styles["create-account-input"]}
-                className={styles["create-account-gap"]}
-              />
+                  <label className={styles["create-account-field"]} htmlFor="middleName">
+                    {t("application.name.middleNameOptional")}
+                  </label>
+                  <Field
+                    name="middleName"
+                    register={register}
+                    label={t("application.name.middleNameOptional")}
+                    readerOnly
+                    error={errors.middleName}
+                    validation={{ maxLength: 64 }}
+                    errorMessage={t("errors.maxLength")}
+                    controlClassName={styles["create-account-input"]}
+                  />
 
-              <label className={styles["create-account-field"]} htmlFor="lastName">
-                {t("application.name.lastName")}
-              </label>
-              <Field
-                name="lastName"
-                validation={{ required: true, maxLength: 64 }}
-                error={errors.lastName}
-                register={register}
-                label={t("application.name.lastName")}
-                errorMessage={
-                  errors.lastName?.type === "maxLength"
-                    ? t("errors.maxLength")
-                    : t("errors.lastNameError")
-                }
-                readerOnly
-                controlClassName={styles["create-account-input"]}
-              />
-            </CardSection>
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <DOBField
-                register={register}
-                required={true}
-                error={errors.dob}
-                name="dob"
-                id="dob"
-                watch={watch}
-                validateAge18={true}
-                errorMessage={t("errors.dateOfBirthErrorAge")}
-                label={t("application.name.yourDateOfBirth")}
-              />
-              <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
-            </CardSection>
+                  <label className={styles["create-account-field"]} htmlFor="lastName">
+                    {t("application.name.lastName")}
+                  </label>
+                  <Field
+                    name="lastName"
+                    validation={{ required: true, maxLength: 64 }}
+                    error={errors.lastName}
+                    register={register}
+                    label={t("application.name.lastName")}
+                    errorMessage={
+                      errors.lastName?.type === "maxLength"
+                        ? t("errors.maxLength")
+                        : t("errors.lastNameError")
+                    }
+                    readerOnly
+                    controlClassName={styles["create-account-input"]}
+                  />
+                </CardSection>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <DOBField
+                    register={register}
+                    required={true}
+                    error={errors.dob}
+                    name="dob"
+                    id="dob"
+                    watch={watch}
+                    validateAge18={true}
+                    errorMessage={t("errors.dateOfBirthErrorAge")}
+                    label={t("application.name.yourDateOfBirth")}
+                  />
+                  <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
+                </CardSection>
 
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <Field
-                caps={true}
-                type="email"
-                name="email"
-                label={t("application.name.yourEmailAddress")}
-                validation={{ required: true, pattern: emailRegex }}
-                error={errors.email}
-                errorMessage={t("authentication.signIn.loginError")}
-                register={register}
-                controlClassName={styles["create-account-input"]}
-                labelClassName={styles["create-account-label"]}
-              />
-            </CardSection>
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <Field
-                caps={true}
-                type={"password"}
-                name="password"
-                note={t("authentication.createAccount.passwordInfo")}
-                label={t("authentication.createAccount.password")}
-                validation={{
-                  required: true,
-                  minLength: 8,
-                  pattern: passwordRegex,
-                }}
-                error={errors.password}
-                errorMessage={t("authentication.signIn.passwordError")}
-                register={register}
-                controlClassName={styles["create-account-input"]}
-              />
-              <label className={styles["create-account-field"]} htmlFor="passwordConfirmation">
-                {t("authentication.createAccount.reEnterPassword")}
-              </label>
-              <Field
-                type="password"
-                name="passwordConfirmation"
-                validation={{
-                  validate: (value) =>
-                    value === password.current ||
-                    t("authentication.createAccount.errors.passwordMismatch"),
-                }}
-                onPaste={(e) => {
-                  e.preventDefault()
-                  e.nativeEvent.stopImmediatePropagation()
-                  return false
-                }}
-                onDrop={(e) => {
-                  e.preventDefault()
-                  e.nativeEvent.stopImmediatePropagation()
-                  return false
-                }}
-                error={errors.passwordConfirmation}
-                errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
-                register={register}
-                controlClassName={styles["create-account-input"]}
-                label={t("authentication.createAccount.reEnterPassword")}
-                readerOnly
-              />
-              <Button type="submit" variant="primary">
-                {t("account.createAccount")}
-              </Button>
-            </CardSection>
-            <CardSection divider={"inset"} className={accountCardStyles["account-card-section"]}>
-              <Heading priority={2} size="2xl" className="mb-6">
-                {t("account.haveAnAccount")}
-              </Heading>
-              <Button href="/sign-in" variant="primary-outlined">
-                {t("nav.signIn")}
-              </Button>
-            </CardSection>
-          </Form>
-        </>
-      </AccountCard>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <Field
+                    caps={true}
+                    type="email"
+                    name="email"
+                    label={t("application.name.yourEmailAddress")}
+                    validation={{ required: true, pattern: emailRegex }}
+                    error={errors.email}
+                    errorMessage={t("authentication.signIn.loginError")}
+                    register={register}
+                    controlClassName={styles["create-account-input"]}
+                  />
+                </CardSection>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <Field
+                    caps={true}
+                    type={"password"}
+                    name="password"
+                    note={t("authentication.createAccount.passwordInfo")}
+                    label={t("authentication.createAccount.password")}
+                    validation={{
+                      required: true,
+                      minLength: 8,
+                      pattern: passwordRegex,
+                    }}
+                    error={errors.password}
+                    errorMessage={t("authentication.signIn.passwordError")}
+                    register={register}
+                    controlClassName={styles["create-account-input"]}
+                  />
+                  <label className={styles["create-account-field"]} htmlFor="passwordConfirmation">
+                    {t("authentication.createAccount.reEnterPassword")}
+                  </label>
+                  <Field
+                    type="password"
+                    name="passwordConfirmation"
+                    validation={{
+                      validate: (value) =>
+                        value === password.current ||
+                        t("authentication.createAccount.errors.passwordMismatch"),
+                    }}
+                    onPaste={(e) => {
+                      e.preventDefault()
+                      e.nativeEvent.stopImmediatePropagation()
+                      return false
+                    }}
+                    onDrop={(e) => {
+                      e.preventDefault()
+                      e.nativeEvent.stopImmediatePropagation()
+                      return false
+                    }}
+                    error={errors.passwordConfirmation}
+                    errorMessage={t("authentication.createAccount.errors.passwordMismatch")}
+                    register={register}
+                    controlClassName={styles["create-account-input"]}
+                    label={t("authentication.createAccount.reEnterPassword")}
+                    readerOnly
+                  />
+                  <Button type="submit" variant="primary">
+                    {t("account.createAccount")}
+                  </Button>
+                </CardSection>
+                <CardSection
+                  divider={"inset"}
+                  className={accountCardStyles["account-card-section"]}
+                >
+                  <Heading priority={2} size="2xl" className="mb-6">
+                    {t("account.haveAnAccount")}
+                  </Heading>
+                  <Button href="/sign-in" variant="primary-outlined">
+                    {t("nav.signIn")}
+                  </Button>
+                </CardSection>
+              </Form>
+            </>
+          </AccountCard>
+        </div>
+        {signUpCopy && (
+          <div className={signUpBenefitsStyles["benefits-hide-display"]}>
+            <div className={signUpBenefitsStyles["benefits-desktop-container"]}>
+              <SignUpBenefitsHeadingGroup mobileView={false} />
+              <SignUpBenefits idTag="desktop" />
+            </div>
+          </div>
+        )}
+        {signUpCopy && (
+          <div className={signUpBenefitsStyles["benefits-display-hide"]}>
+            <SignUpBenefits idTag="mobile" />
+          </div>
+        )}
+      </div>
       <Modal
         open={openModal}
         title={t("authentication.createAccount.confirmationNeeded")}
diff --git a/sites/public/src/pages/sign-in.tsx b/sites/public/src/pages/sign-in.tsx
index 5d20447b21..386c4c7b17 100644
--- a/sites/public/src/pages/sign-in.tsx
+++ b/sites/public/src/pages/sign-in.tsx
@@ -15,11 +15,13 @@ import {
 } from "@bloom-housing/shared-helpers"
 import { UserStatus } from "../lib/constants"
 import { EnumUserErrorExtraModelUserErrorMessages } from "@bloom-housing/backend-core/types"
-import { HeadingGroup } from "@bloom-housing/ui-seeds"
 import SignUpBenefits from "../components/account/SignUpBenefits"
+import signUpBenefitsStyles from "../../styles/sign-up-benefits.module.scss"
+import SignUpBenefitsHeadingGroup from "../components/account/SignUpBenefitsHeadingGroup"
 
 const SignIn = () => {
   const { login, userService } = useContext(AuthContext)
+  const signUpCopy = process.env.showMandatedAccounts
   /* Form Handler */
   // This is causing a linting issue with unbound-method, see open issue as of 10/21/2020:
   // https://github.com/react-hook-form/react-hook-form/issues/2887
@@ -128,69 +130,46 @@ const SignIn = () => {
     }
   }, [networkError])
 
-  const SignUpBenefitsHeadingGroup = (props: { mobileView: boolean }) => {
-    const classNames = props.mobileView ? "py-6 px-4" : ""
-    return (
-      <HeadingGroup
-        heading={t("account.signUpSaveTime.title")}
-        subheading={t("account.signUpSaveTime.subTitle")}
-        size="2xl"
-        className={classNames}
-      />
-    )
-  }
-
   return (
     <>
-      {process.env.showMandatedAccounts ? (
-        <FormsLayout className="sm:max-w-lg md:max-w-full">
-          <div className="flex flex-col md:flex-row md:ml-20 justify-center">
-            <div className="display md:hidden ">
+      <FormsLayout className={signUpCopy && "sm:max-w-lg md:max-w-full"}>
+        <div className={signUpCopy && signUpBenefitsStyles["benefits-container"]}>
+          {signUpCopy && (
+            <div className={signUpBenefitsStyles["benefits-display-hide"]}>
               <SignUpBenefitsHeadingGroup mobileView={true} />
             </div>
-            <div className="md:max-w-lg w-full justify-center">
-              <FormSignIn
-                onSubmit={(data) => void onSubmit(data)}
-                control={{ register, errors, handleSubmit, watch }}
-                networkStatus={{
-                  content: networkStatusContent,
-                  type: networkStatusType,
-                  reset: () => {
-                    reset()
-                    resetNetworkError()
-                    setConfirmationStatusMessage(undefined)
-                  },
-                }}
-                showRegisterBtn={true}
-              />
-            </div>
-            <div className="hidden md:flex">
-              <div className="md:flex md:flex-col md:p-8 md:max-w-lg md:w-full ">
+          )}
+          <div className={signUpCopy && signUpBenefitsStyles["benefits-form-container"]}>
+            <FormSignIn
+              onSubmit={(data) => void onSubmit(data)}
+              control={{ register, errors, handleSubmit, watch }}
+              networkStatus={{
+                content: networkStatusContent,
+                type: networkStatusType,
+                reset: () => {
+                  reset()
+                  resetNetworkError()
+                  setConfirmationStatusMessage(undefined)
+                },
+              }}
+              showRegisterBtn={true}
+            />
+          </div>
+          {signUpCopy && (
+            <div className={signUpBenefitsStyles["benefits-hide-display"]}>
+              <div className={signUpBenefitsStyles["benefits-desktop-container"]}>
                 <SignUpBenefitsHeadingGroup mobileView={false} />
                 <SignUpBenefits idTag="desktop" />
               </div>
             </div>
-            <SignUpBenefits idTag="mobile" className="display md:hidden" />
-          </div>
-        </FormsLayout>
-      ) : (
-        <FormsLayout>
-          <FormSignIn
-            onSubmit={(data) => void onSubmit(data)}
-            control={{ register, errors, handleSubmit, watch }}
-            networkStatus={{
-              content: networkStatusContent,
-              type: networkStatusType,
-              reset: () => {
-                reset()
-                resetNetworkError()
-                setConfirmationStatusMessage(undefined)
-              },
-            }}
-            showRegisterBtn={true}
-          />
-        </FormsLayout>
-      )}
+          )}
+          {signUpCopy && (
+            <div className={signUpBenefitsStyles["benefits-display-hide"]}>
+              <SignUpBenefits idTag="mobile" />
+            </div>
+          )}
+        </div>
+      </FormsLayout>
 
       <ResendConfirmationModal
         isOpen={confirmationStatusModal}
diff --git a/sites/public/styles/sign-up-benefits.module.scss b/sites/public/styles/sign-up-benefits.module.scss
new file mode 100644
index 0000000000..8a46239e97
--- /dev/null
+++ b/sites/public/styles/sign-up-benefits.module.scss
@@ -0,0 +1,54 @@
+.benefits-form-layout {
+    @media (min-width: theme("screens.sm")) {
+      max-width: var(--seeds-width-lg);
+    }
+    @media (min-width: theme("screens.md")) {
+      max-width: 100%;
+    }
+  }
+  .benefits-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  
+    @media (min-width: theme("screens.md")) {
+      flex-direction: row;
+      margin-left: var(--seeds-s20);
+    }
+  }
+  
+  .benefits-display-hide {
+    display: block;
+  
+    @media (min-width: theme("screens.md")) {
+      display: none;
+    }
+  }
+  
+  .benefits-hide-display {
+    display: none;
+  
+    @media (min-width: theme("screens.md")) {
+      display: flex;
+    }
+  }
+  
+  .benefits-form-container {
+    width: 100%;
+    justify-content: center;
+  
+    @media (min-width: theme("screens.md")) {
+      max-width: var(--seeds-width-lg);
+      width: max-content;
+    }
+  }
+  
+  .benefits-desktop-container {
+    @media (min-width: theme("screens.md")) {
+      display: flex;
+      flex-direction: column;
+      padding: var(--seeds-s8);
+      max-width: var(--seeds-width-lg);
+      width: 100%;
+    }
+  }
\ No newline at end of file

From dd918c338247f45506930ca55b3bdbb2d70930f0 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 08/20] 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 8d4fd365c1..9a1781dd30 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 ada40f6a88..74d39abdc8 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

From d734a39c25c793a3e89932d8c69104d6bbe5e623 Mon Sep 17 00:00:00 2001
From: cliu02 <32694266+cliu02@users.noreply.github.com>
Date: Mon, 12 Feb 2024 08:14:04 -0800
Subject: [PATCH 09/20] feat: add MA application check for signed-in user
 (#3850)

---
 shared-helpers/src/auth/UseRequireLoggedInUser.ts        | 4 ++--
 sites/public/src/lib/hooks.ts                            | 2 ++
 .../src/pages/applications/start/choose-language.tsx     | 9 ++++-----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/shared-helpers/src/auth/UseRequireLoggedInUser.ts b/shared-helpers/src/auth/UseRequireLoggedInUser.ts
index 835e959813..2bde9d1628 100644
--- a/shared-helpers/src/auth/UseRequireLoggedInUser.ts
+++ b/shared-helpers/src/auth/UseRequireLoggedInUser.ts
@@ -6,11 +6,11 @@ import { NavigationContext } from "@bloom-housing/ui-components"
  * Require a logged in user. Waits on initial load, then initiates a redirect to `redirectPath` if user is not
  * logged in.
  */
-function useRequireLoggedInUser(redirectPath: string) {
+function useRequireLoggedInUser(redirectPath: string, disable?: boolean) {
   const { profile, initialStateLoaded } = useContext(AuthContext)
   const { router } = useContext(NavigationContext)
 
-  if (initialStateLoaded && !profile) {
+  if (!disable && initialStateLoaded && !profile) {
     void router.push(redirectPath)
   }
   return profile
diff --git a/sites/public/src/lib/hooks.ts b/sites/public/src/lib/hooks.ts
index 51d7783abb..4af5358c16 100644
--- a/sites/public/src/lib/hooks.ts
+++ b/sites/public/src/lib/hooks.ts
@@ -15,6 +15,7 @@ import {
 import { ParsedUrlQuery } from "querystring"
 import { AppSubmissionContext } from "./applications/AppSubmissionContext"
 import { getListingApplicationStatus } from "./helpers"
+import { useRequireLoggedInUser } from "@bloom-housing/shared-helpers"
 
 export const useRedirectToPrevPage = (defaultPath = "/") => {
   const router = useRouter()
@@ -32,6 +33,7 @@ export const useRedirectToPrevPage = (defaultPath = "/") => {
 }
 
 export const useFormConductor = (stepName: string) => {
+  useRequireLoggedInUser("/", !process.env.showMandatedAccounts)
   const context = useContext(AppSubmissionContext)
   const conductor = context.conductor
 
diff --git a/sites/public/src/pages/applications/start/choose-language.tsx b/sites/public/src/pages/applications/start/choose-language.tsx
index 31f32f008a..8eaaecf382 100644
--- a/sites/public/src/pages/applications/start/choose-language.tsx
+++ b/sites/public/src/pages/applications/start/choose-language.tsx
@@ -66,12 +66,11 @@ const ApplicationChooseLanguage = (props: ChooseLanguageProps) => {
   useEffect(() => {
     conductor.reset()
     if (!router.isReady && !listingId) return
-    if (router.isReady && !listingId) {
-      return process.env.showMandatedAccounts && initialStateLoaded && profile
-        ? undefined
-        : void router.push("/")
+    if (router.isReady) {
+      if (!listingId || (process.env.showMandatedAccounts && initialStateLoaded && !profile)) {
+        void router.push("/")
+      }
     }
-
     if (!context.listing || context.listing.id !== listingId) {
       void loadListing(props.backendApiBase, listingId, setListing, conductor, context, "en")
     } else {

From dc6fb3031c62eae7374599dcdf4af3e7e43e21a6 Mon Sep 17 00:00:00 2001
From: cade-exygy <131277283+cade-exygy@users.noreply.github.com>
Date: Thu, 14 Dec 2023 13:05:46 -0600
Subject: [PATCH 10/20] feat: ma-3752 add flag (#3773)

* feat: mA-3752 feat: add SHOW_MANDATED_ACCOUNTS flag

* fix: add feature flag to bloom public next config

* fix: remove flag from partners
---
 sites/public/.env.template  | 8 +++++---
 sites/public/next.config.js | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/sites/public/.env.template b/sites/public/.env.template
index bf0724b5c0..bdb217c3cb 100644
--- a/sites/public/.env.template
+++ b/sites/public/.env.template
@@ -19,10 +19,12 @@ SENTRY_ORG=
 # this GTM key is for local development only
 GTM_KEY=GTM-KF22FJP
 
+# feature toggles
+SHOW_MANDATED_ACCOUNTS=FALSE
+SHOW_PROFESSIONAL_PARTNERS=TRUE
+
 ### Begin Doorway-specific variables ###
 # Note: This must be kept in sync with the same env variable in backend/core
 # Note: BLOOM_API_BASE must match EXTERNAL_API_BASE in tasks/import-listings
 BLOOM_API_BASE=https://hba-dev-proxy.herokuapp.com
-GOOGLE_MAPS_API_KEY=SUPER_SECRET_KEY
-
-SHOW_PROFESSIONAL_PARTNERS=TRUE
+GOOGLE_MAPS_API_KEY=SUPER_SECRET_KEY
\ No newline at end of file
diff --git a/sites/public/next.config.js b/sites/public/next.config.js
index 834f307228..766c931983 100644
--- a/sites/public/next.config.js
+++ b/sites/public/next.config.js
@@ -42,8 +42,8 @@ module.exports = withBundleAnalyzer({
     cacheRevalidate: process.env.CACHE_REVALIDATE ? Number(process.env.CACHE_REVALIDATE) : 60,
     cloudinaryCloudName: process.env.CLOUDINARY_CLOUD_NAME,
     showProfessionalPartners: process.env.SHOW_PROFESSIONAL_PARTNERS === "TRUE",
+    showMandatedAccounts: process.env.SHOW_MANDATED_ACCOUNTS === "TRUE",
     notificationsSignUpUrl: process.env.NOTIFICATIONS_SIGN_UP_URL || null,
-
     // start Doorway env variables
     //googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY, // moved to runtime config
     awsS3BucketName: process.env.AWS_S3_BUCKET_NAME,

From 2b8ecdcd77fd3b25dfe2ef1b6bb4e9046ca98055 Mon Sep 17 00:00:00 2001
From: ColinBuyck <53269332+ColinBuyck@users.noreply.github.com>
Date: Tue, 13 Feb 2024 11:26:36 -0800
Subject: [PATCH 11/20] fix: shared-helpers tailwind config (#479)

---
 sites/public/tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/sites/public/tailwind.config.js b/sites/public/tailwind.config.js
index f4ca86305b..51aa076671 100644
--- a/sites/public/tailwind.config.js
+++ b/sites/public/tailwind.config.js
@@ -15,6 +15,7 @@ module.exports = {
     content: [
       "./pages/**/*.tsx",
       "./src/**/*.tsx",
+      "../../node_modules/@bloom-housing/shared-helpers/src/views/**/*.tsx",
       "../../node_modules/@bloom-housing/ui-components/src/**/*.tsx",
     ],
     safelist: [/grid-cols-/],

From 31b2780825465cfa65c3c43cb295131decee22e6 Mon Sep 17 00:00:00 2001
From: ColinBuyck <colin.buyck@gmail.com>
Date: Tue, 13 Feb 2024 14:48:16 -0800
Subject: [PATCH 12/20] feat: account design updates (#3853)

* fix: updates per Jesse feedback

* fix: generalize application view

* fix: heading level and typography updates

* fix: confirmation page changes

* fix: applications spacing changes

* fix: no results updates

* fix: update prisma typing

* fix: back href

* fix: final tweaks

* fix: aligning mobile view and css class names

* fix: remove testing line
---
 .../views/accounts/AccountCard.module.scss    |  23 ++--
 .../src/views/accounts/AccountCard.tsx        |   4 +
 .../components/account/StatusItem.module.scss |  25 +++--
 .../src/components/account/StatusItem.tsx     |   8 +-
 .../SubmittedApplicationView.modules.scss     |   0
 .../applications/SubmittedApplicationView.tsx |  93 ++++++++++++++++
 .../components/shared/FormSummaryDetails.tsx  |  12 +--
 .../src/pages/account/StatusItemWrapper.tsx   |   6 +-
 .../src/pages/account/account.module.scss     |  28 +++--
 .../src/pages/account/application/[id].tsx    | 101 ++++++------------
 .../public/src/pages/account/applications.tsx |  32 +++---
 sites/public/src/pages/account/dashboard.tsx  |   9 +-
 sites/public/src/pages/account/edit.tsx       |  18 ++--
 sites/public/src/pages/applications/view.tsx  |  81 ++------------
 sites/public/src/pages/create-account.tsx     |  11 +-
 15 files changed, 244 insertions(+), 207 deletions(-)
 create mode 100644 sites/public/src/components/applications/SubmittedApplicationView.modules.scss
 create mode 100644 sites/public/src/components/applications/SubmittedApplicationView.tsx

diff --git a/shared-helpers/src/views/accounts/AccountCard.module.scss b/shared-helpers/src/views/accounts/AccountCard.module.scss
index 485bfb787a..c9fa125e30 100644
--- a/shared-helpers/src/views/accounts/AccountCard.module.scss
+++ b/shared-helpers/src/views/accounts/AccountCard.module.scss
@@ -1,13 +1,19 @@
 .account-card {
-  --card-header-padding-inline-desktop: var(--seeds-s12);
-  --card-header-padding-inline-mobile: var(--seeds-s4);
-  --card-content-padding-inline-mobile: var(--seeds-s4);
-  --card-border-width: 0rem;
-  --card-divider-width: var(--seeds-border-1);
   width: 100%;
+  height: 100%;
+  justify-content: space-between;
   @media (max-width: theme("screens.sm")) {
     --card-spacing-lg: var(--seeds-s6);
-    --card-border-radius: 0rem;
+  }
+}
+
+.account-card-inline-desktop {
+  --card-header-padding-inline-desktop: var(--seeds-s12);
+}
+
+.account-card-inline-mobile {
+  @media (max-width: theme("screens.sm")) {
+    --card-header-padding-inline-mobile: var(--seeds-s4);
   }
 }
 
@@ -16,8 +22,11 @@
 }
 
 .account-card-heading-group {
-  --subheading-margin: var(--seeds-s3);
   --heading-margin: var(--seeds-s3);
+  --subheading-color: var(--seeds-text-color-light);
+  @media (max-width: theme("screens.sm")) {
+    --subheading-margin: var(--seeds-s3);
+  }
 }
 
 .account-card-heading {
diff --git a/shared-helpers/src/views/accounts/AccountCard.tsx b/shared-helpers/src/views/accounts/AccountCard.tsx
index f199d7809c..47ef391218 100644
--- a/shared-helpers/src/views/accounts/AccountCard.tsx
+++ b/shared-helpers/src/views/accounts/AccountCard.tsx
@@ -13,11 +13,15 @@ interface AccountCardProps {
   divider?: "flush" | "inset"
   headingPriority?: 1 | 2 | 3 | 4 | 5 | 6
   className?: string
+  thinDesktop?: boolean
+  thinMobile?: boolean
 }
 
 const AccountCard = (props: AccountCardProps) => {
   const classNames = [styles["account-card"]]
   if (props.className) classNames.push(props.className)
+  if (!props.thinDesktop) classNames.push(styles["account-card-inline-desktop"])
+  if (props.thinMobile) classNames.push(styles["account-card-inline-mobile"])
 
   const customIcon = CustomIconMap[props.iconSymbol]
 
diff --git a/sites/public/src/components/account/StatusItem.module.scss b/sites/public/src/components/account/StatusItem.module.scss
index 8abc78ad41..203fab5a0d 100644
--- a/sites/public/src/components/account/StatusItem.module.scss
+++ b/sites/public/src/components/account/StatusItem.module.scss
@@ -1,8 +1,8 @@
 .status-item {
   position: relative;
   padding: var(--seeds-s4);
-  background-color: var(--seeds-color-primary-lighter);
-  color: var(--seeds-gray-800);
+  background-color: var(--seeds-bg-color-muted);
+  color: var(--seeds-color-gray-900);
   border-bottom-width: 0.0625rem;
   border-style: solid;
   border-color: var(--seeds-color-gray-450);
@@ -16,7 +16,7 @@
   border-style: solid;
   border-color: var(--seeds-color-gray-450);
   margin-bottom: var(seeds-s4);
-  @media (max-width: theme("screens.md")) {
+  @media (max-width: theme("screens.sm")) {
     padding-bottom: var(--seeds-s2);
     display: block;
   }
@@ -31,17 +31,22 @@
   text-align: right;
   align-self: center;
   font-size: var(--seeds-font-size-sm);
-  @media (max-width: theme("screens.md")) {
+  color: var(--seeds-color-gray-750);
+  @media (max-width: theme("screens.sm")) {
     text-align: left;
     padding-top: var(--seeds-s2_5);
   }
 }
 
+.status-item__due-date {
+  font-weight: var(--seeds-font-weight-semibold);
+}
+
 .status-item__content {
   display: flex;
   justify-content: space-between;
   padding-top: var(--seeds-s4);
-  @media (max-width: theme("screens.md")) {
+  @media (max-width: theme("screens.sm")) {
     display: grid;
   }
 }
@@ -54,10 +59,9 @@
   padding-top: 0;
   text-align: right;
 
-  @media (max-width: theme("screens.md")) {
+  @media (max-width: theme("screens.sm")) {
     text-align: center;
     padding-top: var(seeds-s4);
-    margin-bottom: var(--seeds-s4);
   }
 }
 
@@ -68,15 +72,17 @@
   justify-content: flex-start;
   padding-top: var(--seeds-s4);
   width: fit-content;
-  @media (max-width: theme("screens.md")) {
+  @media (max-width: theme("screens.sm")) {
     flex-direction: column;
+    padding-top: var(--seeds-s6);
   }
 }
 
 .status-item__status {
   padding-block: 0;
   font-size: var(--seeds-font-size-sm);
-  @media (max-width: theme("screens.md")) {
+  color: var(--seeds-color-gray-750);
+  @media (max-width: theme("screens.sm")) {
     padding-block: var(--seeds-s4);
   }
 }
@@ -88,5 +94,6 @@
 
 .status-item__confirm-number {
   font-size: var(--seeds-font-size-lg);
+  font-weight: var(--seeds-font-weight-semibold);
   padding-top: var(--seeds-s2);
 }
diff --git a/sites/public/src/components/account/StatusItem.tsx b/sites/public/src/components/account/StatusItem.tsx
index 94f32ad023..3237ee12cf 100644
--- a/sites/public/src/components/account/StatusItem.tsx
+++ b/sites/public/src/components/account/StatusItem.tsx
@@ -24,9 +24,7 @@ interface StatusItemProps {
 
 const StatusItem = (props: StatusItemProps) => {
   return (
-    <Card.Section
-      className={`${accountStyles["account-card-section"]} ${accountStyles["application-card-section"]}`}
-    >
+    <Card.Section className={accountStyles["account-card-applications-section"]}>
       <article className={styles["status-item"]}>
         <header className={styles["status-item__header"]}>
           <h3 className={styles["status-item__title"]}>{props.listingName}</h3>
@@ -57,7 +55,7 @@ const StatusItem = (props: StatusItemProps) => {
             {props.applicationDueDate && (
               <p className={styles["status-item__due"]}>
                 {props.strings?.applicationsDeadline ?? t("listings.applicationDeadline")}:{" "}
-                {props.applicationDueDate}
+                <span className={styles["status-item__due-date"]}>{props.applicationDueDate}</span>
               </p>
             )}
           </div>
@@ -70,7 +68,7 @@ const StatusItem = (props: StatusItemProps) => {
             </Button>
           </div>
           <div>
-            <Button href={props.listingURL} variant="primary-outlined" size="sm">
+            <Button href={props.listingURL} variant="secondary-outlined" size="sm">
               {props.strings?.seeListing ?? t("t.seeListing")}
             </Button>
           </div>
diff --git a/sites/public/src/components/applications/SubmittedApplicationView.modules.scss b/sites/public/src/components/applications/SubmittedApplicationView.modules.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/sites/public/src/components/applications/SubmittedApplicationView.tsx b/sites/public/src/components/applications/SubmittedApplicationView.tsx
new file mode 100644
index 0000000000..f90ce5b75f
--- /dev/null
+++ b/sites/public/src/components/applications/SubmittedApplicationView.tsx
@@ -0,0 +1,93 @@
+import { t } from "@bloom-housing/ui-components"
+import { Button, Card, Heading, Icon } from "@bloom-housing/ui-seeds"
+import FormSummaryDetails from "../shared/FormSummaryDetails"
+import { listingSectionQuestions } from "@bloom-housing/shared-helpers"
+import { useMemo } from "react"
+import { DATE_FORMAT } from "../../lib/constants"
+import dayjs from "dayjs"
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"
+import { ApplicationSection, Listing } from "@bloom-housing/backend-core/types"
+
+interface SubmittedApplicationViewProps {
+  application: any
+  listing: Listing
+  backHref: string
+}
+
+const SubmittedApplicationView = ({
+  application,
+  listing,
+  backHref,
+}: SubmittedApplicationViewProps) => {
+  const confirmationDate = useMemo(() => {
+    return dayjs().format(DATE_FORMAT)
+  }, [])
+
+  return (
+    <>
+      <Card spacing={"sm"} className={"my-6"}>
+        <Card.Section className={"bg-primary px-8 py-4"}>
+          <Heading priority={1} size="xl" className={"font-bold font-alt-sans text-white"}>
+            {listing?.name}
+          </Heading>
+        </Card.Section>
+        <Card.Section className={"px-8"}>
+          <div>
+            {listing && (
+              <Button
+                size="sm"
+                variant={"text"}
+                href={`/listing/${listing.id}/${listing?.urlSlug}`}
+              >
+                {t("application.confirmation.viewOriginalListing")}
+              </Button>
+            )}
+          </div>
+        </Card.Section>
+      </Card>
+      <Card spacing={"lg"} className={"mb-6"}>
+        <Card.Section divider={"inset"}>
+          <Button
+            size="sm"
+            leadIcon={<Icon icon={faChevronLeft} />}
+            variant={"text"}
+            href={backHref}
+          >
+            {t("t.back")}
+          </Button>
+          <Heading priority={2} size={"2xl"} className="mt-6">
+            {t("application.confirmation.informationSubmittedTitle")}
+          </Heading>
+          <p className="field-note mt-4">
+            {t("application.confirmation.submitted")}
+            {confirmationDate}
+          </p>
+        </Card.Section>
+        <Card.Section divider={"inset"} className={"border-none"}>
+          <p>{`${t("application.yourLotteryNumber")}:`}</p>
+          <p className="font-semibold text-lg mt-3">
+            {application?.confirmationCode || application?.id}
+          </p>
+        </Card.Section>
+        <FormSummaryDetails
+          listing={listing}
+          application={application}
+          hidePreferences={
+            listingSectionQuestions(listing, ApplicationSection.preferences)?.length === 0
+          }
+          hidePrograms={listingSectionQuestions(listing, ApplicationSection.programs)?.length === 0}
+          editMode={false}
+        />
+        <Card.Section>
+          <div className="hide-for-print">
+            <Button variant="text" size="sm" onClick={() => window.print()}>
+              {t("application.confirmation.printCopy")}
+            </Button>
+          </div>
+        </Card.Section>
+      </Card>
+    </>
+  )
+}
+
+export { SubmittedApplicationView as default, SubmittedApplicationView }
diff --git a/sites/public/src/components/shared/FormSummaryDetails.tsx b/sites/public/src/components/shared/FormSummaryDetails.tsx
index 3c98a206b5..a9a6f65898 100644
--- a/sites/public/src/components/shared/FormSummaryDetails.tsx
+++ b/sites/public/src/components/shared/FormSummaryDetails.tsx
@@ -116,7 +116,7 @@ const FormSummaryDetails = ({
   ) => {
     return (
       <>
-        <h3 className="form--card__sub-header">
+        <h3 className="form--card__sub-header border-none text-xl">
           {header}
           {editMode && !validationError && <EditLink href={appLink} />}
         </h3>
@@ -161,7 +161,7 @@ const FormSummaryDetails = ({
 
   return (
     <>
-      <h3 className="form--card__sub-header">
+      <h3 className="form--card__sub-header border-none text-xl">
         {t("t.you")}
         {editMode && <EditLink href="/applications/contact/name" />}
       </h3>
@@ -278,7 +278,7 @@ const FormSummaryDetails = ({
       {application.alternateContact.type !== "" &&
         application.alternateContact.type !== "noContact" && (
           <div id="alternateContact">
-            <h3 className="form--card__sub-header">
+            <h3 className="form--card__sub-header border-none text-xl">
               {t("application.alternateContact.type.label")}
               {editMode && !validationError && (
                 <EditLink href="/applications/contact/alternate-contact-type" />
@@ -339,7 +339,7 @@ const FormSummaryDetails = ({
 
       {application.householdSize > 1 && (
         <div id="householdMembers">
-          <h3 className="form--card__sub-header">
+          <h3 className="form--card__sub-header border-none text-xl">
             {t("application.household.householdMembers")}
             {editMode && !validationError && (
               <EditLink href="/applications/household/add-members" />
@@ -391,7 +391,7 @@ const FormSummaryDetails = ({
       )}
 
       <div id="householdDetails">
-        <h3 className="form--card__sub-header">
+        <h3 className="form--card__sub-header border-none text-xl">
           {t("application.review.householdDetails")}
           {editMode && !validationError && (
             <EditLink href="/applications/household/preferred-units" />
@@ -452,7 +452,7 @@ const FormSummaryDetails = ({
               : null
           )}
 
-        <h3 className="form--card__sub-header">
+        <h3 className="form--card__sub-header border-none text-xl">
           {t("t.income")}
           {editMode && !validationError && <EditLink href="/applications/financial/vouchers" />}
         </h3>
diff --git a/sites/public/src/pages/account/StatusItemWrapper.tsx b/sites/public/src/pages/account/StatusItemWrapper.tsx
index 90bac6ec96..4844fc8a5e 100644
--- a/sites/public/src/pages/account/StatusItemWrapper.tsx
+++ b/sites/public/src/pages/account/StatusItemWrapper.tsx
@@ -11,11 +11,11 @@ interface StatusItemWrapperProps {
 }
 
 const StatusItemWrapper = (props: StatusItemWrapperProps) => {
+  const applicationDueDate = props.application?.fullListing?.applicationDueDate
+
   return (
     <StatusItem
-      applicationDueDate={dayjs(props.application?.fullListing?.applicationDueDate).format(
-        "MMMM D, YYYY"
-      )}
+      applicationDueDate={applicationDueDate && dayjs(applicationDueDate).format("MMMM D, YYYY")}
       applicationURL={`application/${props.application?.id}`}
       applicationUpdatedAt={dayjs(props.application?.updatedAt).format("MMMM D, YYYY")}
       confirmationNumber={props.application?.confirmationCode || props.application?.id}
diff --git a/sites/public/src/pages/account/account.module.scss b/sites/public/src/pages/account/account.module.scss
index 79e3b2761b..f1431b1660 100644
--- a/sites/public/src/pages/account/account.module.scss
+++ b/sites/public/src/pages/account/account.module.scss
@@ -1,19 +1,24 @@
 .account-card-container {
   padding-inline: var(--seeds-s6);
   @media (max-width: theme("screens.sm")) {
-    padding-inline: 0rem;
-    padding-block: var(--seeds-s4);
+    padding: var(--seeds-s4);
   }
 }
 
-.account-card-section {
-  @media (min-width: theme("screens.sm")) {
-    --card-content-padding-inline: var(--seeds-s12);
+.account-card-applications-section {
+  --card-content-padding-inline: var(--seeds-s12);
+  @media (max-width: theme("screens.sm")) {
+    --card-content-padding-inline: var(--seeds-s4);
+    --card-content-padding-block: var(--seeds-s4);
   }
 }
 
-.application-card-section {
-  --card-content-padding-block: var(--seeds-s6);
+.account-card-settings-section {
+  --card-content-padding-inline: var(--seeds-s12);
+  @media (max-width: theme("screens.sm")) {
+    --card-content-padding-inline: var(--seeds-s4);
+    --card-content-padding-block: var(--seeds-s6);
+  }
 }
 
 .account-settings-label {
@@ -22,5 +27,12 @@
 }
 
 .application-no-results {
-  padding-bottom: var(--seeds-s4);
+  padding: var(--seeds-s8);
+  background-color: var(--seeds-bg-color-muted);
+  @media (max-width: theme("screens.sm")) {
+    padding: var(--seeds-s6);
+  }
+}
+.application-no-results-text {
+  padding-bottom: var(--seeds-s6);
 }
diff --git a/sites/public/src/pages/account/application/[id].tsx b/sites/public/src/pages/account/application/[id].tsx
index 1f7cde86fb..cbd43720ae 100644
--- a/sites/public/src/pages/account/application/[id].tsx
+++ b/sites/public/src/pages/account/application/[id].tsx
@@ -1,17 +1,16 @@
 import React, { useEffect, useState, useContext } from "react"
-import { t, FormCard, dateToString, Heading } from "@bloom-housing/ui-components"
-import Link from "next/link"
-import FormSummaryDetails from "../../../components/shared/FormSummaryDetails"
+import { t } from "@bloom-housing/ui-components"
 import FormsLayout from "../../../layouts/forms"
 import { Application, Listing } from "@bloom-housing/backend-core/types"
 import { useRouter } from "next/router"
 import { AuthContext, RequireLogin } from "@bloom-housing/shared-helpers"
+import { SubmittedApplicationView } from "../../../components/applications/SubmittedApplicationView"
+import { Card, Button, Heading } from "@bloom-housing/ui-seeds"
 
 export default () => {
   const router = useRouter()
   const applicationId = router.query.id as string
-  const { applicationsService, listingsService } = useContext(AuthContext)
-  const { profile } = useContext(AuthContext)
+  const { applicationsService, listingsService, profile } = useContext(AuthContext)
   const [application, setApplication] = useState<Application>()
   const [listing, setListing] = useState<Listing>()
   const [unauthorized, setUnauthorized] = useState(false)
@@ -49,71 +48,41 @@ export default () => {
       <RequireLogin signInPath="/sign-in" signInMessage={t("t.loginIsRequired")}>
         <FormsLayout>
           {noApplication && (
-            <FormCard header={<Heading priority={1}>{t("account.application.error")}</Heading>}>
-              <p className="field-note mb-5">{t("account.application.noApplicationError")}</p>
-              <a href={`applications`} className="button is-small">
-                {t("account.application.return")}
-              </a>
-            </FormCard>
+            <Card spacing={"sm"} className={"my-6"}>
+              <Card.Section className={"bg-primary px-8 py-4"}>
+                <Heading priority={1} className={"text-xl font-bold font-alt-sans text-white"}>
+                  {t("account.application.error")}
+                </Heading>
+              </Card.Section>
+              <Card.Section className={"px-8"}>
+                <p className="field-note mb-5">{t("account.application.noApplicationError")}</p>
+                <Button href={`applications`} size="sm" variant="primary-outlined">
+                  {t("account.application.return")}
+                </Button>
+              </Card.Section>
+            </Card>
           )}
           {unauthorized && (
-            <FormCard header={<Heading priority={1}>{t("account.application.error")}</Heading>}>
-              <p className="field-note mb-5">{t("account.application.noAccessError")}</p>
-              <a href={`applications`} className="button is-small">
-                {t("account.application.return")}
-              </a>
-            </FormCard>
+            <Card spacing={"sm"} className={"my-6"}>
+              <Card.Section className={"bg-primary px-8 py-4"}>
+                <Heading priority={1} className={"text-xl font-bold font-alt-sans text-white"}>
+                  {t("account.application.error")}
+                </Heading>
+              </Card.Section>
+              <Card.Section className={"px-8"}>
+                <p className="field-note mb-5">{t("account.application.noAccessError")}</p>
+                <Button href={`applications`} size="sm" variant="primary-outlined">
+                  {t("account.application.return")}
+                </Button>
+              </Card.Section>
+            </Card>
           )}
           {application && (
-            <>
-              <FormCard
-                header={<Heading priority={1}>{t("account.application.confirmation")}</Heading>}
-              >
-                <div className="py-2">
-                  {listing && (
-                    <span className="lined text-sm">
-                      <Link
-                        href={`listing/id=${listing.id}`}
-                        as={`${origin}/listing/${listing.id}/${listing.urlSlug}`}
-                      >
-                        {t("application.confirmation.viewOriginalListing")}
-                      </Link>
-                    </span>
-                  )}
-                </div>
-              </FormCard>
-
-              <FormCard>
-                <div className="form-card__lead border-b">
-                  <h2 className="form-card__title is-borderless">
-                    {t("application.confirmation.informationSubmittedTitle")}
-                  </h2>
-                  <p className="field-note mt-4 text-center">
-                    {t("application.confirmation.submitted")}
-                    {dateToString(application.submissionDate)}
-                  </p>
-                </div>
-                <div className="form-card__group text-center">
-                  <h3 className="form-card__paragraph-title">
-                    {t("application.confirmation.lotteryNumber")}
-                  </h3>
-
-                  <p className="font-serif text-2xl my-0">
-                    {application.confirmationCode || application.id}
-                  </p>
-                </div>
-
-                <FormSummaryDetails listing={listing} application={application} />
-
-                <div className="form-card__pager hide-for-print">
-                  <div className="form-card__pager-row py-6">
-                    <button className="lined text-sm" onClick={() => window.print()}>
-                      {t("application.confirmation.printCopy")}
-                    </button>
-                  </div>
-                </div>
-              </FormCard>
-            </>
+            <SubmittedApplicationView
+              application={application}
+              listing={listing}
+              backHref={"/account/applications"}
+            />
           )}
         </FormsLayout>
       </RequireLogin>
diff --git a/sites/public/src/pages/account/applications.tsx b/sites/public/src/pages/account/applications.tsx
index 9a1781dd30..4ab8985cf1 100644
--- a/sites/public/src/pages/account/applications.tsx
+++ b/sites/public/src/pages/account/applications.tsx
@@ -61,21 +61,21 @@ const Applications = () => {
 
   const noApplicationsSection = () => {
     return (
-      <Card.Section
-        className={`${styles["account-card-section"]} ${styles["application-card-section"]}`}
-      >
-        {error ? (
-          <Heading size="2xl">{`${t("account.errorFetchingApplications")}`}</Heading>
-        ) : (
-          <>
-            <Heading className={styles["application-no-results"]} size="2xl">
-              {t("account.noApplications")}
-            </Heading>
-            <Button variant="primary-outlined" href="/listings">
-              {t("listings.browseListings")}
-            </Button>
-          </>
-        )}
+      <Card.Section className={styles["account-card-applications-section"]}>
+        <div className={styles["application-no-results"]}>
+          {error ? (
+            <Heading priority={2} size="xl">{`${t("account.errorFetchingApplications")}`}</Heading>
+          ) : (
+            <>
+              <Heading priority={2} className={styles["application-no-results-text"]} size="xl">
+                {t("account.noApplications")}
+              </Heading>
+              <Button size="sm" variant="primary-outlined" href="/listings">
+                {t("listings.browseListings")}
+              </Button>
+            </>
+          )}
+        </div>
       </Card.Section>
     )
   }
@@ -92,7 +92,9 @@ const Applications = () => {
               iconSymbol="application"
               title={t("account.myApplications")}
               subtitle={t("account.myApplicationsSubtitle")}
+              headingPriority={1}
               divider="inset"
+              thinMobile
             >
               <>
                 <LoadingOverlay isLoading={loading}>
diff --git a/sites/public/src/pages/account/dashboard.tsx b/sites/public/src/pages/account/dashboard.tsx
index df964db8d5..e9087870e0 100644
--- a/sites/public/src/pages/account/dashboard.tsx
+++ b/sites/public/src/pages/account/dashboard.tsx
@@ -63,9 +63,11 @@ function Dashboard(props: DashboardProps) {
                     iconSymbol="application"
                     title={t("account.myApplications")}
                     subtitle={t("account.myApplicationsSubtitle")}
+                    thinDesktop
                   >
-                    <Card.Section className={styles["account-card-section"]}>
+                    <Card.Section>
                       <Button
+                        size="sm"
                         href={"/account/applications"}
                         variant="primary-outlined"
                         id="account-dashboard-applications"
@@ -81,9 +83,10 @@ function Dashboard(props: DashboardProps) {
                     title={t("account.accountSettings")}
                     subtitle={t("account.accountSettingsSubtitle")}
                     id="account-dashboard-settings"
+                    thinDesktop
                   >
-                    <Card.Section className={styles["account-card-section"]}>
-                      <Button href={"/account/edit"} variant="primary-outlined">
+                    <Card.Section>
+                      <Button size="sm" href={"/account/edit"} variant="primary-outlined">
                         {t("account.accountSettingsUpdate")}
                       </Button>
                     </Card.Section>
diff --git a/sites/public/src/pages/account/edit.tsx b/sites/public/src/pages/account/edit.tsx
index 74d39abdc8..6334d7c9de 100644
--- a/sites/public/src/pages/account/edit.tsx
+++ b/sites/public/src/pages/account/edit.tsx
@@ -156,6 +156,7 @@ const Edit = () => {
           subtitle={t("account.accountSettingsSubtitle")}
           divider="inset"
           headingPriority={1}
+          thinMobile
         >
           <>
             <SiteAlert type="notice" dismissable />
@@ -170,7 +171,7 @@ const Edit = () => {
                 {nameAlert.message}
               </AlertBox>
             )}
-            <Card.Section divider="inset" className={styles["account-card-section"]}>
+            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
               <Form id="update-name" onSubmit={handleSubmit(onNameSubmit)}>
                 <label className={styles["account-settings-label"]} htmlFor="firstName">
                   {t("application.name.yourName")}
@@ -217,7 +218,7 @@ const Edit = () => {
                       : t("errors.lastNameError")
                   }
                 />
-                <Button type="submit" variant="primary-outlined">
+                <Button type="submit" size="sm" variant="primary-outlined">
                   {t("account.settings.update")}
                 </Button>
               </Form>
@@ -233,7 +234,7 @@ const Edit = () => {
                 {dobAlert.message}
               </AlertBox>
             )}
-            <Card.Section divider="inset" className={styles["account-card-section"]}>
+            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
               <Form id="update-birthdate" onSubmit={handleSubmit(onBirthdateSubmit)}>
                 <DOBField
                   id="dateOfBirth"
@@ -250,7 +251,8 @@ const Edit = () => {
                   }}
                   label={t("application.name.yourDateOfBirth")}
                 />
-                <Button type="submit" variant="primary-outlined" className="mt-6">
+                <p className={"field-sub-note"}>{t("application.name.dobHelper")}</p>
+                <Button type="submit" size="sm" variant="primary-outlined" className="mt-6">
                   {t("account.settings.update")}
                 </Button>
               </Form>
@@ -265,7 +267,7 @@ const Edit = () => {
                 {emailAlert.message}
               </AlertBox>
             )}
-            <Card.Section divider="inset" className={styles["account-card-section"]}>
+            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
               <Form id="update-email" onSubmit={handleSubmit(onEmailSubmit)}>
                 <label className={styles["account-settings-label"]} htmlFor="email">
                   {t("application.name.yourEmailAddress")}
@@ -282,7 +284,7 @@ const Edit = () => {
                   register={register}
                   defaultValue={profile ? profile.email : null}
                 />
-                <Button type="submit" variant="primary-outlined">
+                <Button type="submit" size="sm" variant="primary-outlined">
                   {t("account.settings.update")}
                 </Button>
               </Form>
@@ -298,7 +300,7 @@ const Edit = () => {
                 {passwordAlert.message}
               </AlertBox>
             )}
-            <Card.Section divider="inset" className={styles["account-card-section"]}>
+            <Card.Section divider="inset" className={styles["account-card-settings-section"]}>
               <Form id="update-password" onSubmit={handleSubmit(onPasswordSubmit)}>
                 <fieldset>
                   <legend className={styles["account-settings-label"]}>
@@ -352,7 +354,7 @@ const Edit = () => {
                     register={register}
                   />
 
-                  <Button type="submit" variant="primary-outlined">
+                  <Button type="submit" size="sm" variant="primary-outlined">
                     {t("account.settings.update")}
                   </Button>
                 </fieldset>
diff --git a/sites/public/src/pages/applications/view.tsx b/sites/public/src/pages/applications/view.tsx
index b4564ddd91..c634af7b69 100644
--- a/sites/public/src/pages/applications/view.tsx
+++ b/sites/public/src/pages/applications/view.tsx
@@ -2,23 +2,12 @@
 5.5 View
 Optional application summary
 */
-import React, { useContext, useEffect, useMemo } from "react"
-import Link from "next/link"
-import dayjs from "dayjs"
-import { t } from "@bloom-housing/ui-components"
+import React, { useContext, useEffect } from "react"
 import FormsLayout from "../../layouts/forms"
 import { AppSubmissionContext } from "../../lib/applications/AppSubmissionContext"
-import FormSummaryDetails from "../../components/shared/FormSummaryDetails"
-import { DATE_FORMAT, UserStatus } from "../../lib/constants"
-import {
-  pushGtmEvent,
-  PageView,
-  AuthContext,
-  listingSectionQuestions,
-} from "@bloom-housing/shared-helpers"
-import { ApplicationSection } from "@bloom-housing/backend-core"
-import { Card, Heading } from "@bloom-housing/ui-seeds"
-import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
+import { UserStatus } from "../../lib/constants"
+import { pushGtmEvent, PageView, AuthContext } from "@bloom-housing/shared-helpers"
+import { SubmittedApplicationView } from "../../components/applications/SubmittedApplicationView"
 
 const ApplicationView = () => {
   const { application, listing } = useContext(AppSubmissionContext)
@@ -32,65 +21,13 @@ const ApplicationView = () => {
     })
   }, [profile])
 
-  const confirmationDate = useMemo(() => {
-    return dayjs().format(DATE_FORMAT)
-  }, [])
-
   return (
     <FormsLayout>
-      <Card spacing={"sm"} className={"my-6"}>
-        <CardSection className={"bg-primary px-8 py-4 text-white"}>
-          <Heading priority={1} className={"text-xl font-bold font-alt-sans"}>
-            {t("account.application.confirmation")}
-          </Heading>
-        </CardSection>
-        <CardSection className={"px-8"}>
-          <div>
-            {listing && (
-              <span className={"lined text-sm"}>
-                <Link href={`/listing/${listing.id}/${listing.urlSlug}`}>
-                  {t("application.confirmation.viewOriginalListing")}
-                </Link>
-              </span>
-            )}
-          </div>
-        </CardSection>
-      </Card>
-      <Card spacing={"lg"} className={"mb-6"}>
-        <CardSection divider={"inset"}>
-          <Heading priority={2} size={"2xl"}>
-            {t("application.confirmation.informationSubmittedTitle")}
-          </Heading>
-          <p className="field-note mt-4">
-            {t("application.confirmation.submitted")}
-            {confirmationDate}
-          </p>
-        </CardSection>
-        <CardSection divider={"inset"} className={"border-none"}>
-          <Heading priority={3} size={"md"}>
-            {t("application.confirmation.lotteryNumber")}
-          </Heading>
-          <p className="font-serif text-2xl my-0">
-            {application.confirmationCode || application.id}
-          </p>
-        </CardSection>
-        <FormSummaryDetails
-          listing={listing}
-          application={application}
-          hidePreferences={
-            listingSectionQuestions(listing, ApplicationSection.preferences)?.length === 0
-          }
-          hidePrograms={listingSectionQuestions(listing, ApplicationSection.programs)?.length === 0}
-          editMode={false}
-        />
-        <CardSection>
-          <div className="hide-for-print">
-            <button className="lined text-sm" onClick={() => window.print()}>
-              {t("application.confirmation.printCopy")}
-            </button>
-          </div>
-        </CardSection>
-      </Card>
+      <SubmittedApplicationView
+        application={application}
+        listing={listing}
+        backHref={"/applications/review/confirmation"}
+      ></SubmittedApplicationView>
     </FormsLayout>
   )
 }
diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx
index 6d21f24192..2c18f6790e 100644
--- a/sites/public/src/pages/create-account.tsx
+++ b/sites/public/src/pages/create-account.tsx
@@ -96,6 +96,7 @@ export default () => {
             title={t("account.createAccount")}
             divider="inset"
             headingPriority={1}
+            thinMobile
           >
             <>
               {requestError && (
@@ -107,7 +108,7 @@ export default () => {
               <Form id="create-account" onSubmit={handleSubmit(onSubmit)}>
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <label className={styles["create-account-header"]} htmlFor="firstName">
                     {t("application.name.yourName")}
@@ -163,7 +164,7 @@ export default () => {
                 </CardSection>
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <DOBField
                     register={register}
@@ -181,7 +182,7 @@ export default () => {
 
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <Field
                     caps={true}
@@ -197,7 +198,7 @@ export default () => {
                 </CardSection>
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <Field
                     caps={true}
@@ -249,7 +250,7 @@ export default () => {
                 </CardSection>
                 <CardSection
                   divider={"inset"}
-                  className={accountCardStyles["account-card-section"]}
+                  className={accountCardStyles["account-card-settings-section"]}
                 >
                   <Heading priority={2} size="2xl" className="mb-6">
                     {t("account.haveAnAccount")}

From 8a3a1d8af41f4cb56a29fab51be7e3796706a66a Mon Sep 17 00:00:00 2001
From: Emily Jablonski <65367387+emilyjablonski@users.noreply.github.com>
Date: Wed, 14 Feb 2024 18:04:09 -0700
Subject: [PATCH 13/20] feat: mandated accounts followup (#477)

Co-authored-by: Cade Wolcott <cade.wolcott@exygy.com>
Co-authored-by: cliu02 <32694266+cliu02@users.noreply.github.com>
Co-authored-by: ColinBuyck <colin.buyck@gmail.com>
---
 .../src/headers/SiteHeader.tsx                |   2 +-
 .../src/auth/UseRequireLoggedInUser.ts        |   5 +-
 .../views/accounts/AccountCard.module.scss    |   3 +
 .../src/views/accounts/AccountCard.tsx        |   6 +-
 .../forgot-password/FormForgotPassword.tsx    |   4 +-
 .../src/views/sign-in/FormSignIn.tsx          |   5 +-
 .../src/views/sign-in/FormSignInErrorBox.tsx  |   2 +-
 .../components/account/ConfirmationModal.tsx  |   2 +-
 .../src/components/account/SignUpBenefits.tsx |   1 +
 .../account/SignUpBenefitsHeadingGroup.tsx    |   1 +
 .../src/components/account/StatusItem.tsx     |   4 +-
 .../applications/SubmittedApplicationView.tsx |   3 +-
 sites/public/src/layouts/application.tsx      | 128 +++++++++++++++++-
 sites/public/src/lib/helpers.tsx              | 128 +-----------------
 .../styles/sign-up-benefits.module.scss       |   2 +-
 15 files changed, 150 insertions(+), 146 deletions(-)

diff --git a/doorway-ui-components/src/headers/SiteHeader.tsx b/doorway-ui-components/src/headers/SiteHeader.tsx
index 5e1d6dd7c1..ad42d64d73 100644
--- a/doorway-ui-components/src/headers/SiteHeader.tsx
+++ b/doorway-ui-components/src/headers/SiteHeader.tsx
@@ -63,7 +63,7 @@ const SiteHeader = (props: SiteHeaderProps) => {
     const logoOffset = document.getElementById("site-header-logo")?.offsetLeft
     const linksOffset = document.getElementById("site-header-links")?.offsetLeft
     if (linksOffset === undefined || logoOffset === undefined) return
-    return linksOffset === 0 || linksOffset === logoOffset
+    return linksOffset === 0
       ? setNavbarClass("site-header__navbar-wrapped")
       : setNavbarClass("site-header__navbar-inline")
   }
diff --git a/shared-helpers/src/auth/UseRequireLoggedInUser.ts b/shared-helpers/src/auth/UseRequireLoggedInUser.ts
index 2bde9d1628..75d4f7efa4 100644
--- a/shared-helpers/src/auth/UseRequireLoggedInUser.ts
+++ b/shared-helpers/src/auth/UseRequireLoggedInUser.ts
@@ -1,14 +1,15 @@
 import { useContext } from "react"
 import { AuthContext } from "./AuthContext"
-import { NavigationContext } from "@bloom-housing/ui-components"
+import { useRouter } from "next/router"
 
 /**
  * Require a logged in user. Waits on initial load, then initiates a redirect to `redirectPath` if user is not
  * logged in.
  */
+
 function useRequireLoggedInUser(redirectPath: string, disable?: boolean) {
   const { profile, initialStateLoaded } = useContext(AuthContext)
-  const { router } = useContext(NavigationContext)
+  const router = useRouter()
 
   if (!disable && initialStateLoaded && !profile) {
     void router.push(redirectPath)
diff --git a/shared-helpers/src/views/accounts/AccountCard.module.scss b/shared-helpers/src/views/accounts/AccountCard.module.scss
index c9fa125e30..ac9cc3d881 100644
--- a/shared-helpers/src/views/accounts/AccountCard.module.scss
+++ b/shared-helpers/src/views/accounts/AccountCard.module.scss
@@ -2,6 +2,8 @@
   width: 100%;
   height: 100%;
   justify-content: space-between;
+  --card-border-width: 0rem;
+  --card-divider-width: var(--seeds-border-1);
   @media (max-width: theme("screens.sm")) {
     --card-spacing-lg: var(--seeds-s6);
   }
@@ -30,5 +32,6 @@
 }
 
 .account-card-heading {
+  font-weight: var(--seeds-font-weight-semibold);
   margin-top: var(--seeds-s3);
 }
diff --git a/shared-helpers/src/views/accounts/AccountCard.tsx b/shared-helpers/src/views/accounts/AccountCard.tsx
index 47ef391218..1a7df90a18 100644
--- a/shared-helpers/src/views/accounts/AccountCard.tsx
+++ b/shared-helpers/src/views/accounts/AccountCard.tsx
@@ -34,7 +34,11 @@ const AccountCard = (props: AccountCardProps) => {
         {props.subtitle ? (
           <HeadingGroup
             size="2xl"
-            heading={props.title}
+            heading={
+              <Heading size="2xl" className={styles["account-card-heading"]}>
+                {props.title}
+              </Heading>
+            }
             subheading={props.subtitle}
             className={styles["account-card-heading-group"]}
             headingPriority={props.headingPriority}
diff --git a/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx b/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx
index 19dd9930c1..be2a12497f 100644
--- a/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx
+++ b/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx
@@ -89,7 +89,9 @@ const FormForgotPassword = ({
           />
           <section>
             <div className="text-center mt-6">
-              <Button variant="primary">{t("authentication.forgotPassword.sendEmail")}</Button>
+              <Button type="submit" variant="primary">
+                {t("authentication.forgotPassword.sendEmail")}
+              </Button>
             </div>
             <div className="text-center mt-6">
               <Button onClick={() => router.back()} variant="text">
diff --git a/shared-helpers/src/views/sign-in/FormSignIn.tsx b/shared-helpers/src/views/sign-in/FormSignIn.tsx
index 91f60f87f7..f295fd8279 100644
--- a/shared-helpers/src/views/sign-in/FormSignIn.tsx
+++ b/shared-helpers/src/views/sign-in/FormSignIn.tsx
@@ -51,9 +51,8 @@ const FormSignIn = ({
           errors={errors}
           networkStatus={networkStatus}
           errorMessageId={"main-sign-in"}
-          className="mx-12"
         />
-        <CardSection className="mx-4">
+        <CardSection className="sm:mx-4">
           <Form id="sign-in" onSubmit={handleSubmit(onSubmit, onError)}>
             <Field
               caps={true}
@@ -93,7 +92,7 @@ const FormSignIn = ({
           </Form>
         </CardSection>
         {showRegisterBtn && (
-          <CardFooter className="border-t py-8 mx-12">
+          <CardFooter className="border-t py-8 mx-6 sm:mx-12">
             <Heading priority={2} size="2xl" className="mb-6">
               {t("authentication.createAccount.noAccount")}
             </Heading>
diff --git a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
index f3b4874170..b61da97467 100644
--- a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
+++ b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx
@@ -21,7 +21,7 @@ const FormSignInErrorBox = ({
   errorMessageId,
   className,
 }: FormSignInErrorBoxProps) => {
-  const classNames = ["border-b"]
+  const classNames = []
   if (className) classNames.push(className)
   return (
     <div className={classNames.join(" ")}>
diff --git a/sites/public/src/components/account/ConfirmationModal.tsx b/sites/public/src/components/account/ConfirmationModal.tsx
index 06bf5b1e2b..361cc3a9ce 100644
--- a/sites/public/src/components/account/ConfirmationModal.tsx
+++ b/sites/public/src/components/account/ConfirmationModal.tsx
@@ -2,7 +2,7 @@ import { Modal, t, Form, Field, AlertBox } from "@bloom-housing/ui-components"
 import { Button } from "@bloom-housing/ui-seeds"
 import { AuthContext } from "@bloom-housing/shared-helpers"
 import { useRouter } from "next/router"
-import { useContext, useEffect, useRef, useState } from "react"
+import React, { useContext, useEffect, useRef, useState } from "react"
 import { useForm } from "react-hook-form"
 import { emailRegex } from "../../lib/helpers"
 
diff --git a/sites/public/src/components/account/SignUpBenefits.tsx b/sites/public/src/components/account/SignUpBenefits.tsx
index 7b18d551fb..4b85dbabd4 100644
--- a/sites/public/src/components/account/SignUpBenefits.tsx
+++ b/sites/public/src/components/account/SignUpBenefits.tsx
@@ -1,3 +1,4 @@
+import React from "react"
 import { Icon } from "@bloom-housing/ui-seeds"
 import { faStopwatch, faEye, faLock } from "@fortawesome/free-solid-svg-icons"
 import { t } from "@bloom-housing/ui-components"
diff --git a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
index f55de20e44..d9955a569c 100644
--- a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
+++ b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx
@@ -1,3 +1,4 @@
+import React from "react"
 import { t } from "@bloom-housing/ui-components"
 import { HeadingGroup } from "@bloom-housing/ui-seeds"
 
diff --git a/sites/public/src/components/account/StatusItem.tsx b/sites/public/src/components/account/StatusItem.tsx
index 3237ee12cf..331b85be53 100644
--- a/sites/public/src/components/account/StatusItem.tsx
+++ b/sites/public/src/components/account/StatusItem.tsx
@@ -30,7 +30,7 @@ const StatusItem = (props: StatusItemProps) => {
           <h3 className={styles["status-item__title"]}>{props.listingName}</h3>
           <p className={styles["status-item__status"]}>
             {props.strings?.status ?? t("application.status")}:{" "}
-            <Tag variant="primary">
+            <Tag variant="primary-inverse">
               {props.strings?.submittedStatus ?? t("application.statuses.submitted")}
             </Tag>
           </p>
@@ -68,7 +68,7 @@ const StatusItem = (props: StatusItemProps) => {
             </Button>
           </div>
           <div>
-            <Button href={props.listingURL} variant="secondary-outlined" size="sm">
+            <Button href={props.listingURL} variant="primary-outlined" size="sm">
               {props.strings?.seeListing ?? t("t.seeListing")}
             </Button>
           </div>
diff --git a/sites/public/src/components/applications/SubmittedApplicationView.tsx b/sites/public/src/components/applications/SubmittedApplicationView.tsx
index f90ce5b75f..d28b578b52 100644
--- a/sites/public/src/components/applications/SubmittedApplicationView.tsx
+++ b/sites/public/src/components/applications/SubmittedApplicationView.tsx
@@ -2,12 +2,11 @@ import { t } from "@bloom-housing/ui-components"
 import { Button, Card, Heading, Icon } from "@bloom-housing/ui-seeds"
 import FormSummaryDetails from "../shared/FormSummaryDetails"
 import { listingSectionQuestions } from "@bloom-housing/shared-helpers"
-import { useMemo } from "react"
+import React, { useMemo } from "react"
 import { DATE_FORMAT } from "../../lib/constants"
 import dayjs from "dayjs"
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"
 import { ApplicationSection, Listing } from "@bloom-housing/backend-core/types"
-
 interface SubmittedApplicationViewProps {
   application: any
   listing: Listing
diff --git a/sites/public/src/layouts/application.tsx b/sites/public/src/layouts/application.tsx
index c569ecc06b..9073fc3677 100644
--- a/sites/public/src/layouts/application.tsx
+++ b/sites/public/src/layouts/application.tsx
@@ -1,18 +1,138 @@
-import React from "react"
+import React, { useContext } from "react"
 import { useRouter } from "next/router"
 import Head from "next/head"
-import { getSiteFooter, getSiteHeader } from "../lib/helpers"
-import { t } from "@bloom-housing/ui-components"
+import { MenuLink, setSiteAlertMessage, t } from "@bloom-housing/ui-components"
+import { AuthContext } from "@bloom-housing/shared-helpers"
+import { getSiteFooter } from "../lib/helpers"
+import { SiteHeader } from "@bloom-housing/doorway-ui-components/src/headers/SiteHeader"
 
 const Layout = (props) => {
+  const { profile, signOut } = useContext(AuthContext)
+
   const router = useRouter()
+
+  const languages =
+    router?.locales?.map((item) => ({
+      prefix: item === "en" ? "" : item,
+      label: t(`languages.${item}`),
+    })) || []
+
+  const menuLinks: MenuLink[] = [
+    {
+      title: t("pageTitle.welcome"),
+      href: "/",
+    },
+    {
+      title: t("nav.viewListings"),
+      href: "/listings",
+    },
+    {
+      title: t("nav.helpCenter"),
+      href: "#",
+      subMenuLinks: [
+        {
+          title: t("pageTitle.getStarted"),
+          href: "/help/get-started",
+        },
+        {
+          title: t("pageTitle.housingHelp"),
+          href: "/help/housing-help",
+        },
+        {
+          title: t("pageTitle.questions"),
+          href: "/help/questions",
+        },
+      ],
+    },
+  ]
+  if (process.env.housingCounselorServiceUrl) {
+    menuLinks.push({
+      title: t("pageTitle.getAssistance"),
+      href: process.env.housingCounselorServiceUrl,
+    })
+  }
+  if (process.env.showProfessionalPartners) {
+    menuLinks.push({
+      title: t("nav.professionalPartners"),
+      href: "#",
+      subMenuLinks: [
+        {
+          title: t("pageTitle.developersAndPropertyManagers"),
+          href: "/professional-partners/developers-and-property-managers",
+        },
+        {
+          title: t("pageTitle.jurisdictions"),
+          href: "/professional-partners/jurisdictions",
+        },
+      ],
+    })
+  }
+  if (profile) {
+    menuLinks.push({
+      title: t("nav.myAccount"),
+      subMenuLinks: [
+        {
+          title: t("nav.myDashboard"),
+          href: "/account/dashboard",
+        },
+        {
+          title: t("account.myApplications"),
+          href: "/account/applications",
+        },
+        {
+          title: t("account.accountSettings"),
+          href: "/account/edit",
+        },
+        {
+          title: t("nav.signOut"),
+          onClick: () => {
+            const signOutFxn = async () => {
+              setSiteAlertMessage(t(`authentication.signOut.success`), "notice")
+              await router.push("/sign-in")
+              signOut()
+            }
+            void signOutFxn()
+          },
+        },
+      ],
+    })
+  } else {
+    menuLinks.push({
+      title: t("nav.signIn"),
+      href: "/sign-in",
+    })
+  }
+
   return (
     <div className="site-wrapper">
       <div className="site-content">
         <Head>
           <title>{t("nav.siteTitle")}</title>
         </Head>
-        {getSiteHeader(router)}
+        <SiteHeader
+          logoSrc="/images/doorway-logo.png"
+          homeURL="/"
+          mainContentId="main-content"
+          languages={languages.map((lang) => {
+            return {
+              label: lang.label,
+              onClick: () =>
+                void router.push(router.asPath, router.asPath, { locale: lang.prefix || "en" }),
+              active: t("config.routePrefix") === lang.prefix,
+            }
+          })}
+          menuLinks={menuLinks.map((menuLink) => {
+            return {
+              ...menuLink,
+              className:
+                router.pathname === menuLink.href ||
+                menuLink.subMenuLinks?.map((link) => link.href).indexOf(router.pathname) >= 0
+                  ? "secondary"
+                  : "",
+            }
+          })}
+          strings={{ skipToMainContent: t("t.skipToMainContent") }}
+        />
         <main id="main-content" className="md:overflow-x-hidden">
           {props.children}
         </main>
diff --git a/sites/public/src/lib/helpers.tsx b/sites/public/src/lib/helpers.tsx
index 0b502d76f9..6214eb2bbf 100644
--- a/sites/public/src/lib/helpers.tsx
+++ b/sites/public/src/lib/helpers.tsx
@@ -1,6 +1,5 @@
 import React from "react"
 import dayjs from "dayjs"
-import { NextRouter } from "next/router"
 import {
   Address,
   Listing,
@@ -9,13 +8,12 @@ import {
   ListingStatus,
   ApplicationMultiselectQuestion,
 } from "@bloom-housing/backend-core/types"
-import { t, ApplicationStatusType, MenuLink, StatusBarType } from "@bloom-housing/ui-components"
+import { t, ApplicationStatusType, StatusBarType } from "@bloom-housing/ui-components"
 import {
   FooterNav,
   FooterSection,
   ListingCard,
   SiteFooter,
-  SiteHeader,
 } from "@bloom-housing/doorway-ui-components"
 import {
   imageUrlFromListing,
@@ -245,130 +243,6 @@ export const untranslateMultiselectQuestion = (
   })
 }
 
-// FYI when auth/logging in is re-enabled, you'll need to pass in
-// call `const { profile, signOut } = useContext(AuthContext)`
-// from the layout and pass into this function.
-export const getSiteHeader = (router: NextRouter) => {
-  const languages =
-    router?.locales?.map((item) => ({
-      prefix: item === "en" ? "" : item,
-      label: t(`languages.${item}`),
-    })) || []
-
-  const menuLinks: MenuLink[] = [
-    {
-      title: t("pageTitle.welcome"),
-      href: "/",
-    },
-    {
-      title: t("nav.viewListings"),
-      href: "/listings",
-    },
-    {
-      title: t("nav.helpCenter"),
-      href: "#",
-      subMenuLinks: [
-        {
-          title: t("pageTitle.getStarted"),
-          href: "/help/get-started",
-        },
-        {
-          title: t("pageTitle.housingHelp"),
-          href: "/help/housing-help",
-        },
-        {
-          title: t("pageTitle.questions"),
-          href: "/help/questions",
-        },
-      ],
-    },
-  ]
-  if (process.env.housingCounselorServiceUrl) {
-    menuLinks.push({
-      title: t("pageTitle.getAssistance"),
-      href: process.env.housingCounselorServiceUrl,
-    })
-  }
-  if (process.env.showProfessionalPartners) {
-    menuLinks.push({
-      title: t("nav.professionalPartners"),
-      href: "#",
-      subMenuLinks: [
-        {
-          title: t("pageTitle.developersAndPropertyManagers"),
-          href: "/professional-partners/developers-and-property-managers",
-        },
-        {
-          title: t("pageTitle.jurisdictions"),
-          href: "/professional-partners/jurisdictions",
-        },
-      ],
-    })
-  }
-  // TODO: Uncomment when applications are re-enabled
-  // if (profile) {
-  //   menuLinks.push({
-  //     title: t("nav.myAccount"),
-  //     subMenuLinks: [
-  //       {
-  //         title: t("nav.myDashboard"),
-  //         href: "/account/dashboard",
-  //       },
-  //       {
-  //         title: t("account.myApplications"),
-  //         href: "/account/applications",
-  //       },
-  //       {
-  //         title: t("account.accountSettings"),
-  //         href: "/account/edit",
-  //       },
-  //       {
-  //         title: t("nav.signOut"),
-  //         onClick: () => {
-  //           const signOutFxn = async () => {
-  //             setSiteAlertMessage(t(`authentication.signOut.success`), "notice")
-  //             await router.push("/sign-in")
-  //             signOut()
-  //           }
-  //           void signOutFxn()
-  //         },
-  //       },
-  //     ],
-  //   })
-  // } else {
-  // menuLinks.push({
-  //   title: t("nav.signIn"),
-  //   href: "/sign-in",
-  // })
-  // }
-  return (
-    <SiteHeader
-      logoSrc="/images/doorway-logo.png"
-      homeURL="/"
-      mainContentId="main-content"
-      languages={languages.map((lang) => {
-        return {
-          label: lang.label,
-          onClick: () =>
-            void router.push(router.asPath, router.asPath, { locale: lang.prefix || "en" }),
-          active: t("config.routePrefix") === lang.prefix,
-        }
-      })}
-      menuLinks={menuLinks.map((menuLink) => {
-        return {
-          ...menuLink,
-          className:
-            router.pathname === menuLink.href ||
-            menuLink.subMenuLinks?.map((link) => link.href).indexOf(router.pathname) >= 0
-              ? "secondary"
-              : "",
-        }
-      })}
-      strings={{ skipToMainContent: t("t.skipToMainContent") }}
-    />
-  )
-}
-
 export const getSiteFooter = () => {
   return (
     <SiteFooter>
diff --git a/sites/public/styles/sign-up-benefits.module.scss b/sites/public/styles/sign-up-benefits.module.scss
index 8a46239e97..1bded6ae36 100644
--- a/sites/public/styles/sign-up-benefits.module.scss
+++ b/sites/public/styles/sign-up-benefits.module.scss
@@ -39,7 +39,7 @@
   
     @media (min-width: theme("screens.md")) {
       max-width: var(--seeds-width-lg);
-      width: max-content;
+      width: 100%;
     }
   }
   

From cc8f74b35d0c1afc650ecec0b5cc8c9e67230a27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20Zi=C4=99cina?= <kziecina@airnauts.com>
Date: Thu, 1 Feb 2024 16:59:08 +0100
Subject: [PATCH 14/20] fix: align multiselect questions with design (#3842)

---
 shared-helpers/src/views/multiselectQuestions.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/shared-helpers/src/views/multiselectQuestions.tsx b/shared-helpers/src/views/multiselectQuestions.tsx
index 03e8a1005e..96f6b172dd 100644
--- a/shared-helpers/src/views/multiselectQuestions.tsx
+++ b/shared-helpers/src/views/multiselectQuestions.tsx
@@ -221,8 +221,8 @@ export const getCheckboxOption = (
 ) => {
   const optionFieldName = fieldName(question.text, applicationSection, option.text)
   return (
-    <div className={`mb-5 ${option.ordinal !== 1 ? "border-t pt-5" : ""}`} key={option.text}>
-      <div className={`mb-5 field ${resolveObject(optionFieldName, errors) ? "error" : ""}`}>
+    <div className={`mb-3 ${option.ordinal !== 1 ? "pt-3" : ""}`} key={option.text}>
+      <div className={`mb-3 field ${resolveObject(optionFieldName, errors) ? "error" : ""}`}>
         {getCheckboxField(
           option,
           question,
@@ -237,7 +237,7 @@ export const getCheckboxOption = (
         )}
       </div>
       {option.description && (
-        <div className="ml-8 -mt-5 mb-5">
+        <div className="ml-8 -mt-3 mb-3">
           <ExpandableContent strings={{ readMore: t("t.readMore"), readLess: t("t.readLess") }}>
             <p className="field-note mb-2">
               {option.description}

From 73a3f3f2927e84b5444109c38d143d5a4f2ccb49 Mon Sep 17 00:00:00 2001
From: ColinBuyck <53269332+ColinBuyck@users.noreply.github.com>
Date: Wed, 14 Feb 2024 21:14:38 -0800
Subject: [PATCH 15/20] fix: mandated accounts check for sign in (#482)

---
 build/docker/Dockerfile.sites-generic    |  1 +
 sites/public/src/layouts/application.tsx | 68 ++++++++++++------------
 2 files changed, 36 insertions(+), 33 deletions(-)

diff --git a/build/docker/Dockerfile.sites-generic b/build/docker/Dockerfile.sites-generic
index e3893788da..0c78b9d4c6 100644
--- a/build/docker/Dockerfile.sites-generic
+++ b/build/docker/Dockerfile.sites-generic
@@ -15,6 +15,7 @@ ARG GTM_KEY
 ARG FEATURE_LISTINGS_APPROVAL
 ARG SHOW_PROFESSIONAL_PARTNERS
 ARG NOTIFICATIONS_SIGN_UP_URL
+ARG SHOW_MANDATED_ACCOUNTS
 
 
 # The base image will contain all the source code needed for our site
diff --git a/sites/public/src/layouts/application.tsx b/sites/public/src/layouts/application.tsx
index 9073fc3677..30fff04615 100644
--- a/sites/public/src/layouts/application.tsx
+++ b/sites/public/src/layouts/application.tsx
@@ -67,40 +67,42 @@ const Layout = (props) => {
       ],
     })
   }
-  if (profile) {
-    menuLinks.push({
-      title: t("nav.myAccount"),
-      subMenuLinks: [
-        {
-          title: t("nav.myDashboard"),
-          href: "/account/dashboard",
-        },
-        {
-          title: t("account.myApplications"),
-          href: "/account/applications",
-        },
-        {
-          title: t("account.accountSettings"),
-          href: "/account/edit",
-        },
-        {
-          title: t("nav.signOut"),
-          onClick: () => {
-            const signOutFxn = async () => {
-              setSiteAlertMessage(t(`authentication.signOut.success`), "notice")
-              await router.push("/sign-in")
-              signOut()
-            }
-            void signOutFxn()
+  if (process.env.showMandatedAccounts) {
+    if (profile) {
+      menuLinks.push({
+        title: t("nav.myAccount"),
+        subMenuLinks: [
+          {
+            title: t("nav.myDashboard"),
+            href: "/account/dashboard",
           },
-        },
-      ],
-    })
-  } else {
-    menuLinks.push({
-      title: t("nav.signIn"),
-      href: "/sign-in",
-    })
+          {
+            title: t("account.myApplications"),
+            href: "/account/applications",
+          },
+          {
+            title: t("account.accountSettings"),
+            href: "/account/edit",
+          },
+          {
+            title: t("nav.signOut"),
+            onClick: () => {
+              const signOutFxn = async () => {
+                setSiteAlertMessage(t(`authentication.signOut.success`), "notice")
+                await router.push("/sign-in")
+                signOut()
+              }
+              void signOutFxn()
+            },
+          },
+        ],
+      })
+    } else {
+      menuLinks.push({
+        title: t("nav.signIn"),
+        href: "/sign-in",
+      })
+    }
   }
 
   return (

From b29342a74eb4e8e24ac5e0c5f6245850c114a50b Mon Sep 17 00:00:00 2001
From: emilyjablonski <emijablonski@gmail.com>
Date: Wed, 14 Feb 2024 22:29:32 -0700
Subject: [PATCH 16/20] fix: add args to build files

---
 build/docker/Dockerfile.sites-generic | 2 ++
 ci/buildspec/build_public.yml         | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/build/docker/Dockerfile.sites-generic b/build/docker/Dockerfile.sites-generic
index 0c78b9d4c6..e57539b641 100644
--- a/build/docker/Dockerfile.sites-generic
+++ b/build/docker/Dockerfile.sites-generic
@@ -122,6 +122,7 @@ ARG GTM_KEY
 ARG FEATURE_LISTINGS_APPROVAL
 ARG SHOW_PROFESSIONAL_PARTNERS
 ARG NOTIFICATIONS_SIGN_UP_URL
+ARG SHOW_MANDATED_ACCOUNTS
 
 
 # We need to have this nested 2 layers deep due to hardcoded paths in package.json
@@ -144,6 +145,7 @@ ENV GTM_KEY=$GTM_KEY
 ENV FEATURE_LISTINGS_APPROVAL=$FEATURE_LISTINGS_APPROVAL
 ENV SHOW_PROFESSIONAL_PARTNERS=$SHOW_PROFESSIONAL_PARTNERS
 ENV NOTIFICATIONS_SIGN_UP_URL=$NOTIFICATIONS_SIGN_UP_URL
+ENV SHOW_MANDATED_ACCOUNTS=$SHOW_MANDATED_ACCOUNTS
 
 
 
diff --git a/ci/buildspec/build_public.yml b/ci/buildspec/build_public.yml
index c75604cb11..a630e5df6e 100644
--- a/ci/buildspec/build_public.yml
+++ b/ci/buildspec/build_public.yml
@@ -40,6 +40,7 @@ phases:
         --build-arg "GTM_KEY=${GTM_KEY}"
         --build-arg "SHOW_PROFESSIONAL_PARTNERS=$SHOW_PROFESSIONAL_PARTNERS"
         --build-arg "NOTIFICATIONS_SIGN_UP_URL=$NOTIFICATIONS_SIGN_UP_URL"
+        --build-arg "SHOW_MANDATED_ACCOUNTS=$SHOW_MANDATED_ACCOUNTS"
         --target test
         -t sites/public:test
         .
@@ -64,6 +65,7 @@ phases:
         --build-arg "GTM_KEY=${GTM_KEY}"
         --build-arg "SHOW_PROFESSIONAL_PARTNERS=$SHOW_PROFESSIONAL_PARTNERS"
         --build-arg "NOTIFICATIONS_SIGN_UP_URL=$NOTIFICATIONS_SIGN_UP_URL"
+        --build-arg "SHOW_MANDATED_ACCOUNTS=$SHOW_MANDATED_ACCOUNTS"
         --target run
         -t sites/public:run-candidate
         .

From ac49490e9f995f2a728b2d67c1604090ebc4d7b9 Mon Sep 17 00:00:00 2001
From: emilyjablonski <emijablonski@gmail.com>
Date: Wed, 14 Feb 2024 22:48:40 -0700
Subject: [PATCH 17/20] fix: alert box background color fix

---
 doorway-ui-components/src/notifications/AlertBox.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doorway-ui-components/src/notifications/AlertBox.scss b/doorway-ui-components/src/notifications/AlertBox.scss
index 88400879de..7215f85ff7 100644
--- a/doorway-ui-components/src/notifications/AlertBox.scss
+++ b/doorway-ui-components/src/notifications/AlertBox.scss
@@ -4,7 +4,7 @@
   --background-color: var(--bloom-color-primary-light);
   --alert-background-color: var(--bloom-color-alert-light);
   --alert-invert-background-color: var(--bloom-color-alert);
-  --notice-background-color: var(--bloom-color-primary-light);
+  --notice-background-color: var(--bloom-color-primary-lightest);
   --notice-invert-background-color: var(--bloom-color-primary);
   --success-background-color: var(--bloom-color-success-light);
   --success-invert-background-color: var(--bloom-color-success);

From 9dfad3fe264f2c6e2ecf70092d32dd14eaacf3ae Mon Sep 17 00:00:00 2001
From: Cade Wolcott <cade.wolcott@exygy.com>
Date: Thu, 15 Feb 2024 17:05:32 -0600
Subject: [PATCH 18/20] fix: no longer pull redirectUrl from router query

---
 sites/public/src/components/account/ConfirmationModal.tsx | 2 +-
 sites/public/src/pages/reset-password.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/sites/public/src/components/account/ConfirmationModal.tsx b/sites/public/src/components/account/ConfirmationModal.tsx
index 361cc3a9ce..14632308cd 100644
--- a/sites/public/src/components/account/ConfirmationModal.tsx
+++ b/sites/public/src/components/account/ConfirmationModal.tsx
@@ -40,7 +40,7 @@ const ConfirmationModal = (props: ConfirmationModalProps) => {
   }
 
   useEffect(() => {
-    const redirectUrl = router.query?.redirectUrl as string
+    const redirectUrl = "/applications/start/choose-language"
     const listingId = router.query?.listingId as string
 
     const routerRedirectUrl =
diff --git a/sites/public/src/pages/reset-password.tsx b/sites/public/src/pages/reset-password.tsx
index 51227c2bc4..36c136a5c7 100644
--- a/sites/public/src/pages/reset-password.tsx
+++ b/sites/public/src/pages/reset-password.tsx
@@ -45,7 +45,7 @@ const ResetPassword = () => {
       const user = await resetPassword(token.toString(), password, passwordConfirmation)
       setSiteAlertMessage(t(`authentication.signIn.success`, { name: user.firstName }), "success")
 
-      const redirectUrl = router.query?.redirectUrl as string
+      const redirectUrl = "/applications/start/choose-language"
       const listingId = router.query?.listingId as string
 
       const routerRedirectUrl =

From 404982c2f6c33b265f074b300540e58afdc1f0ec Mon Sep 17 00:00:00 2001
From: ColinBuyck <colin.buyck@gmail.com>
Date: Mon, 19 Feb 2024 15:32:25 -0800
Subject: [PATCH 19/20] fix: testing fix and swagger updates

---
 backend/core/test/user/user.e2e-spec.ts   | 25 ++++++++++++++++++++---
 backend/core/types/src/backend-swagger.ts |  2 +-
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/backend/core/test/user/user.e2e-spec.ts b/backend/core/test/user/user.e2e-spec.ts
index 57d72126ed..571e20d724 100644
--- a/backend/core/test/user/user.e2e-spec.ts
+++ b/backend/core/test/user/user.e2e-spec.ts
@@ -111,6 +111,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     await supertest(app.getHttpServer()).post(`/user/`).send(userCreateDto).expect(400)
   })
@@ -129,6 +130,7 @@ describe("UsersService", () => {
       lastName: "Last",
       dob: new Date(),
       confirmedAt: new Date(),
+      appUrl: "http://localhost",
     }
     await supertest(app.getHttpServer())
       .post(`/user/`)
@@ -190,6 +192,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     const mockWelcome = jest.spyOn(testEmailService, "welcome")
     const res = await supertest(app.getHttpServer())
@@ -216,6 +219,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     await supertest(app.getHttpServer())
       .post(`/user/`)
@@ -250,6 +254,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     await supertest(app.getHttpServer()).post(`/user/`).send(userCreateDto).expect(400)
     userCreateDto.passwordConfirmation = "Abcdef1!"
@@ -273,6 +278,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     const res = await supertest(app.getHttpServer())
       .post(`/user`)
@@ -299,6 +305,7 @@ describe("UsersService", () => {
       email: "test2@example.com",
       agreedToTermsOfService: false,
       jurisdictions: [],
+      appUrl: "http://localhost",
     }
     await supertest(app.getHttpServer())
       .put(`/user/${user2UpdateDto.id}`)
@@ -321,6 +328,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     await supertest(app.getHttpServer())
       .post(`/user/`)
@@ -329,7 +337,7 @@ describe("UsersService", () => {
       .expect(201)
     await supertest(app.getHttpServer())
       .post("/user/resend-confirmation")
-      .send({ email: userCreateDto.email })
+      .send({ email: userCreateDto.email, appUrl: "http://localhost" })
       .expect(201)
   })
 
@@ -343,6 +351,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     await supertest(app.getHttpServer())
       .post(`/user/`)
@@ -358,14 +367,14 @@ describe("UsersService", () => {
       .expect(200)
     await supertest(app.getHttpServer())
       .post("/user/resend-confirmation")
-      .send({ email: userCreateDto.email })
+      .send({ email: userCreateDto.email, appUrl: "http://localhost" })
       .expect(406)
   })
 
   it("should return 404 if there is no user to resend confirmation to", async () => {
     await supertest(app.getHttpServer())
       .post("/user/resend-confirmation")
-      .send({ email: "unknown@email.com" })
+      .send({ email: "unknown@email.com", appUrl: "http://localhost" })
       .expect(404)
   })
 
@@ -379,6 +388,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     const mockWelcome = jest.spyOn(testEmailService, "welcome")
     await supertest(app.getHttpServer())
@@ -450,6 +460,7 @@ describe("UsersService", () => {
       lastName: "Last",
       dob: new Date(),
       language: Language.en,
+      appUrl: "http://localhost",
     }
 
     const userCreateResponse = await supertest(app.getHttpServer())
@@ -527,6 +538,7 @@ describe("UsersService", () => {
       lastName: "Last",
       dob: new Date(),
       language: Language.en,
+      appUrl: "http://localhost",
     }
 
     const userBCreateDto: UserCreateDto = {
@@ -539,6 +551,7 @@ describe("UsersService", () => {
       lastName: "Last",
       dob: new Date(),
       language: Language.en,
+      appUrl: "http://localhost",
     }
 
     const { userId: userAId } = await createAndConfirmUser(userACreateDto)
@@ -685,6 +698,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
     const res = await supertest(app.getHttpServer())
       .post(`/user`)
@@ -725,6 +739,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
 
     await supertest(app.getHttpServer())
@@ -821,6 +836,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
 
     await supertest(app.getHttpServer())
@@ -896,6 +912,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
 
     await supertest(app.getHttpServer())
@@ -980,6 +997,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
 
     const userCreateResponse = await supertest(app.getHttpServer())
@@ -1066,6 +1084,7 @@ describe("UsersService", () => {
       middleName: "Mid",
       lastName: "Last",
       dob: new Date(),
+      appUrl: "http://localhost",
     }
 
     await supertest(app.getHttpServer())
diff --git a/backend/core/types/src/backend-swagger.ts b/backend/core/types/src/backend-swagger.ts
index d715152600..a1a9d8ec48 100644
--- a/backend/core/types/src/backend-swagger.ts
+++ b/backend/core/types/src/backend-swagger.ts
@@ -3979,7 +3979,7 @@ export interface UserCreate {
   passwordConfirmation: string
 
   /**  */
-  emailConfirmation: string
+  emailConfirmation?: string
 
   /**  */
   appUrl?: string

From 8c6fc1044a24e0ae4a978533a6387168d7ee0e3a Mon Sep 17 00:00:00 2001
From: ColinBuyck <colin.buyck@gmail.com>
Date: Tue, 20 Feb 2024 11:51:38 -0800
Subject: [PATCH 20/20] fix: commenting for prisma type updates

---
 .../src/components/applications/SubmittedApplicationView.tsx     | 1 +
 sites/public/src/components/shared/FormSummaryDetails.tsx        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/sites/public/src/components/applications/SubmittedApplicationView.tsx b/sites/public/src/components/applications/SubmittedApplicationView.tsx
index d28b578b52..526e798591 100644
--- a/sites/public/src/components/applications/SubmittedApplicationView.tsx
+++ b/sites/public/src/components/applications/SubmittedApplicationView.tsx
@@ -8,6 +8,7 @@ import dayjs from "dayjs"
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"
 import { ApplicationSection, Listing } from "@bloom-housing/backend-core/types"
 interface SubmittedApplicationViewProps {
+  // TODO change to use Prisma application type instead of any
   application: any
   listing: Listing
   backHref: string
diff --git a/sites/public/src/components/shared/FormSummaryDetails.tsx b/sites/public/src/components/shared/FormSummaryDetails.tsx
index a9a6f65898..8f79f7c85a 100644
--- a/sites/public/src/components/shared/FormSummaryDetails.tsx
+++ b/sites/public/src/components/shared/FormSummaryDetails.tsx
@@ -13,6 +13,7 @@ import {
 } from "@bloom-housing/backend-core/types"
 
 type FormSummaryDetailsProps = {
+  // TODO change to use Prisma application type instead of any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   application: any
   listing: Listing