From 71d707e38639c9589d2862fd111cc12a2d2a8b9b Mon Sep 17 00:00:00 2001 From: Emily Jablonski <65367387+emilyjablonski@users.noreply.github.com> Date: Mon, 11 Mar 2024 14:26:48 -0600 Subject: [PATCH] refactor: uptake and merge card (#3922) --- shared-helpers/index.ts | 2 + shared-helpers/src/types/scss.d.ts | 1 + .../views/accounts/AccountCard.module.scss | 34 ----- .../src/views/accounts/AccountCard.tsx | 53 ------- .../views/components/BloomCard.module.scss | 30 ++++ .../src/views/components/BloomCard.tsx | 68 +++++++++ .../FormForgotPassword.module.scss | 3 + .../forgot-password/FormForgotPassword.tsx | 92 ++++++------ .../src/views/sign-in/FormSignIn.module.scss | 19 +++ .../src/views/sign-in/FormSignIn.tsx | 26 ++-- .../src/views/sign-in/FormSignInErrorBox.tsx | 19 +-- .../views/sign-in/ResendConfirmationModal.tsx | 2 +- sites/partners/src/pages/reset-password.tsx | 4 +- .../components/account/ConfirmationModal.tsx | 2 +- .../account/SignUpBenefits.module.scss | 28 ++++ .../src/components/account/SignUpBenefits.tsx | 13 +- .../SignUpBenefitsHeadingGroup.module.scss | 13 ++ .../account/SignUpBenefitsHeadingGroup.tsx | 4 +- .../src/layouts/application-form.module.scss | 61 +++++++- sites/public/src/layouts/application-form.tsx | 131 +++++++++--------- sites/public/src/layouts/forms.module.scss | 14 ++ sites/public/src/layouts/forms.tsx | 7 +- .../src/pages/account/account.module.scss | 1 + .../public/src/pages/account/applications.tsx | 17 ++- sites/public/src/pages/account/dashboard.tsx | 23 +-- sites/public/src/pages/account/edit.tsx | 106 +++++++------- .../pages/applications/financial/income.tsx | 2 +- sites/public/src/pages/create-account.tsx | 17 +-- sites/public/src/pages/reset-password.tsx | 85 ++++++------ .../public/styles/create-account.module.scss | 26 ++-- sites/public/styles/overrides.scss | 3 +- sites/public/styles/sign-in.module.scss | 6 - .../styles/sign-up-benefits.module.scss | 91 ++++++------ sites/public/tailwind.config.js | 1 + 34 files changed, 578 insertions(+), 426 deletions(-) create mode 100644 shared-helpers/src/types/scss.d.ts delete mode 100644 shared-helpers/src/views/accounts/AccountCard.module.scss delete mode 100644 shared-helpers/src/views/accounts/AccountCard.tsx create mode 100644 shared-helpers/src/views/components/BloomCard.module.scss create mode 100644 shared-helpers/src/views/components/BloomCard.tsx create mode 100644 shared-helpers/src/views/forgot-password/FormForgotPassword.module.scss create mode 100644 shared-helpers/src/views/sign-in/FormSignIn.module.scss create mode 100644 sites/public/src/components/account/SignUpBenefits.module.scss create mode 100644 sites/public/src/components/account/SignUpBenefitsHeadingGroup.module.scss create mode 100644 sites/public/src/layouts/forms.module.scss delete mode 100644 sites/public/styles/sign-in.module.scss diff --git a/shared-helpers/index.ts b/shared-helpers/index.ts index 74a81269f2..50f4aa02d6 100644 --- a/shared-helpers/index.ts +++ b/shared-helpers/index.ts @@ -7,6 +7,7 @@ export * from "./src/auth/catchNetworkError" export * from "./src/utilities/blankApplication" export * from "./src/utilities/events" export * from "./src/utilities/formKeys" +export * from "./src/utilities/getListingRedirectUrl" export * from "./src/utilities/gtm" export * from "./src/utilities/nextjs" export * from "./src/utilities/pdfs" @@ -18,6 +19,7 @@ export * from "./src/utilities/unitTypes" export * from "./src/utilities/DateFormat" export * from "./src/utilities/constants" export * from "./src/utilities/maskData" +export * from "./src/views/components/BloomCard" export * from "./src/views/multiselectQuestions" export * from "./src/views/occupancyFormatting" export * from "./src/views/summaryTables" diff --git a/shared-helpers/src/types/scss.d.ts b/shared-helpers/src/types/scss.d.ts new file mode 100644 index 0000000000..e4089fc807 --- /dev/null +++ b/shared-helpers/src/types/scss.d.ts @@ -0,0 +1 @@ +declare module "*.scss" diff --git a/shared-helpers/src/views/accounts/AccountCard.module.scss b/shared-helpers/src/views/accounts/AccountCard.module.scss deleted file mode 100644 index c9fa125e30..0000000000 --- a/shared-helpers/src/views/accounts/AccountCard.module.scss +++ /dev/null @@ -1,34 +0,0 @@ -.account-card { - width: 100%; - height: 100%; - justify-content: space-between; - @media (max-width: theme("screens.sm")) { - --card-spacing-lg: var(--seeds-s6); - } -} - -.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); - } -} - -.acccount-card-icon { - margin-bottom: var(--seeds-s3); -} - -.account-card-heading-group { - --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 { - margin-top: var(--seeds-s3); -} diff --git a/shared-helpers/src/views/accounts/AccountCard.tsx b/shared-helpers/src/views/accounts/AccountCard.tsx deleted file mode 100644 index 47ef391218..0000000000 --- a/shared-helpers/src/views/accounts/AccountCard.tsx +++ /dev/null @@ -1,53 +0,0 @@ -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 "./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 - 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] - - return ( - - - - {customIcon} - - {props.subtitle ? ( - - ) : ( - - {props.title} - - )} - - {props.children} - - ) -} - -export { AccountCard as default, AccountCard } diff --git a/shared-helpers/src/views/components/BloomCard.module.scss b/shared-helpers/src/views/components/BloomCard.module.scss new file mode 100644 index 0000000000..c1f4c1ae69 --- /dev/null +++ b/shared-helpers/src/views/components/BloomCard.module.scss @@ -0,0 +1,30 @@ +.form-card { + --card-content-padding-inline: var(--seeds-s12); + --card-header-padding-inline: var(--seeds-s12); + @media (max-width: theme("screens.sm")) { + --card-content-padding-inline: var(--seeds-s4); + --card-header-padding-inline: var(--seeds-s4); + --card-border-radius: 0; + --card-content-padding-block: var(--seeds-s6); + } + width: 100%; +} + +.block-card { + width: 100%; + height: 100%; + justify-content: space-between; + --subheading-color: var(--seeds-text-color-light); + --heading-margin: var(--seeds-s3); + @media (max-width: theme("screens.sm")) { + --card-spacing-lg: var(--seeds-s6); + } +} + +.card-icon { + margin-bottom: var(--seeds-s3); +} + +.card-heading-group { + --subheading-color: var(--seeds-text-color-light); +} diff --git a/shared-helpers/src/views/components/BloomCard.tsx b/shared-helpers/src/views/components/BloomCard.tsx new file mode 100644 index 0000000000..3a6922ee70 --- /dev/null +++ b/shared-helpers/src/views/components/BloomCard.tsx @@ -0,0 +1,68 @@ +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 "./BloomCard.module.scss" +import { CustomIconMap, CustomIconType } from "../accounts/CustomIconMap" + +interface BloomCardProps { + iconSymbol?: CustomIconType + title?: string + subtitle?: string | React.ReactNode + children: React.ReactElement + id?: string + headingPriority?: 1 | 2 | 3 | 4 | 5 | 6 + className?: string + variant?: "form" | "block" + headerLink?: React.ReactNode +} + +const BloomCard = (props: BloomCardProps) => { + const classNames = [props.variant === "block" ? styles["block-card"] : styles["form-card"]] + if (props.className) classNames.push(props.className) + + const customIcon = props.iconSymbol ? CustomIconMap[props.iconSymbol] : undefined + + const getTitle = () => { + if (props.title) { + if (props.subtitle) { + return ( + + ) + } + return ( + + {props.title} + + ) + } + return null + } + + const title = getTitle() + + return ( + + {title && ( + + {customIcon && ( + + {customIcon} + + )} + {props.headerLink && props.headerLink} + {title} + + )} + + {props.children} + + ) +} + +export { BloomCard as default, BloomCard } diff --git a/shared-helpers/src/views/forgot-password/FormForgotPassword.module.scss b/shared-helpers/src/views/forgot-password/FormForgotPassword.module.scss new file mode 100644 index 0000000000..fa85af41b2 --- /dev/null +++ b/shared-helpers/src/views/forgot-password/FormForgotPassword.module.scss @@ -0,0 +1,3 @@ +.forgot-password-submit-button { + margin-top: var(--seeds-s1); +} diff --git a/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx b/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx index be2a12497f..c6ae0baa7e 100644 --- a/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx +++ b/shared-helpers/src/views/forgot-password/FormForgotPassword.tsx @@ -3,8 +3,6 @@ import { Button } from "@bloom-housing/ui-seeds" import { Field, Form, - FormCard, - Icon, t, AlertBox, SiteAlert, @@ -13,8 +11,11 @@ import { NavigationContext, emailRegex, } from "@bloom-housing/ui-components" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import { NetworkErrorReset, NetworkStatusContent } from "../../auth/catchNetworkError" import type { UseFormMethods } from "react-hook-form" +import BloomCard from "../components/BloomCard" +import styles from "./FormForgotPassword.module.scss" export type FormForgotPasswordProps = { control: FormForgotPasswordControl @@ -49,59 +50,58 @@ const FormForgotPassword = ({ const { router } = useContext(NavigationContext) return ( - -
- -

{t("authentication.forgotPassword.sendEmail")}

-
+ + <> + {Object.entries(errors).length > 0 && !networkError.error && ( + + {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")} + + )} - {Object.entries(errors).length > 0 && !networkError.error && ( - - {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")} - - )} + {!!networkError.error?.error && Object.entries(errors).length === 0 && ( + + networkError.reset()}> + {networkError.error.title} + - {!!networkError.error?.error && Object.entries(errors).length === 0 && ( - - networkError.reset()}> - {networkError.error.title} - + + {networkError.error.description} + + + )} - - {networkError.error.description} - - - )} + - + +
+ networkError.reset()} + labelClassName={"text__caps-spaced"} + /> -
- - networkError.reset()} - /> -
-
- -
-
+ + +
-
- -
-
+ + + + ) } diff --git a/shared-helpers/src/views/sign-in/FormSignIn.module.scss b/shared-helpers/src/views/sign-in/FormSignIn.module.scss new file mode 100644 index 0000000000..3bf53b4c23 --- /dev/null +++ b/shared-helpers/src/views/sign-in/FormSignIn.module.scss @@ -0,0 +1,19 @@ +.forgot-password { + float: right; + font-size: var(--seeds-font-size-sm); + text-decoration-line: underline; + color: var(--seeds-color-blue-900); +} + +.sign-in-error-container { + margin-inline: var(--seeds-s4); + + @media (min-width: theme("screens.sm")) { + margin-inline: var(--seeds-s12); + } +} + +.sign-in-error { + margin-top: var(--seeds-s6); + width: 100%; +} diff --git a/shared-helpers/src/views/sign-in/FormSignIn.tsx b/shared-helpers/src/views/sign-in/FormSignIn.tsx index 91f60f87f7..b46b05434a 100644 --- a/shared-helpers/src/views/sign-in/FormSignIn.tsx +++ b/shared-helpers/src/views/sign-in/FormSignIn.tsx @@ -1,14 +1,14 @@ import React, { useContext } from "react" +import type { UseFormMethods } from "react-hook-form" 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 { CardSection } 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 { BloomCard } from "../components/BloomCard" import { useRouter } from "next/router" import { getListingRedirectUrl } from "../../utilities/getListingRedirectUrl" +import styles from "./FormSignIn.module.scss" export type FormSignInProps = { control: FormSignInControl @@ -45,27 +45,26 @@ const FormSignIn = ({ const createAccountUrl = getListingRedirectUrl(listingIdRedirect, "/create-account") return ( - + <> - +
- + )} - + ) } diff --git a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx index f3b4874170..ca8b808271 100644 --- a/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx +++ b/shared-helpers/src/views/sign-in/FormSignInErrorBox.tsx @@ -2,6 +2,7 @@ import React from "react" import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components" import type { UseFormMethods } from "react-hook-form" import { NetworkStatus } from "../../auth/catchNetworkError" +import styles from "./FormSignIn.module.scss" export type FormSignInErrorBoxProps = { errors: FormSignInErrorBoxControl["errors"] @@ -21,12 +22,10 @@ const FormSignInErrorBox = ({ errorMessageId, className, }: FormSignInErrorBoxProps) => { - const classNames = ["border-b"] - if (className) classNames.push(className) return ( -
+
{Object.entries(errors).length > 0 && !networkStatus.content && ( - + {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")} )} @@ -35,7 +34,7 @@ const FormSignInErrorBox = ({ networkStatus.reset()}> {networkStatus.content.title} @@ -49,7 +48,12 @@ const FormSignInErrorBox = ({ {networkStatus.type === "success" && ( <> - networkStatus.reset()}> + networkStatus.reset()} + className={styles["sign-in-error"]} + > {networkStatus.content?.title} @@ -58,8 +62,7 @@ const FormSignInErrorBox = ({ )} - - +
) } diff --git a/shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx b/shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx index fa4c21bf48..7d6de2e2ca 100644 --- a/shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx +++ b/shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx @@ -80,7 +80,6 @@ const ResendConfirmationModal = ({ <>
diff --git a/sites/partners/src/pages/reset-password.tsx b/sites/partners/src/pages/reset-password.tsx index 8e2294bd5b..6c5ccad7f4 100644 --- a/sites/partners/src/pages/reset-password.tsx +++ b/sites/partners/src/pages/reset-password.tsx @@ -64,7 +64,6 @@ const ResetPassword = () => {
{ errorMessage={t("authentication.forgotPassword.enterNewLoginPassword")} register={register} type="password" + labelClassName={"text__caps-spaced"} /> { errorMessage={t("authentication.createAccount.errors.passwordMismatch")} register={register} type="password" + labelClassName={"text__caps-spaced"} />
diff --git a/sites/public/src/components/account/ConfirmationModal.tsx b/sites/public/src/components/account/ConfirmationModal.tsx index 1d511ef70e..097194e393 100644 --- a/sites/public/src/components/account/ConfirmationModal.tsx +++ b/sites/public/src/components/account/ConfirmationModal.tsx @@ -112,7 +112,6 @@ const ConfirmationModal = (props: ConfirmationModalProps) => { )} { error={errors.email} errorMessage={t("authentication.signIn.loginError")} register={register} + labelClassName={"text__caps-spaced"} />

{t("authentication.createAccount.resendEmailInfo")}

diff --git a/sites/public/src/components/account/SignUpBenefits.module.scss b/sites/public/src/components/account/SignUpBenefits.module.scss new file mode 100644 index 0000000000..38566e4b58 --- /dev/null +++ b/sites/public/src/components/account/SignUpBenefits.module.scss @@ -0,0 +1,28 @@ +.sign-up-benefits-container { + display: flex; + flex-direction: column; + padding-top: var(--seeds-s6); + padding-bottom: var(--seeds-s4); + padding-inline: var(--seeds-s4); + @media (min-width: theme("screens.md")) { + padding: 0; + } +} + +.sign-up-benefits-item { + display: flex; + flex-direction: row; + margin-bottom: var(--seeds-s3); + align-items: center; + + .icon { + border: 1px solid var(--seeds-color-white); + background-color: var(--seeds-color-white); + border-radius: var(--seeds-rounded-full); + padding: var(--seeds-s2_5); + } + + .text { + margin-left: var(--seeds-s3); + } +} diff --git a/sites/public/src/components/account/SignUpBenefits.tsx b/sites/public/src/components/account/SignUpBenefits.tsx index 7b18d551fb..2a4b6c8864 100644 --- a/sites/public/src/components/account/SignUpBenefits.tsx +++ b/sites/public/src/components/account/SignUpBenefits.tsx @@ -1,6 +1,7 @@ import { Icon } from "@bloom-housing/ui-seeds" import { faStopwatch, faEye, faLock } from "@fortawesome/free-solid-svg-icons" import { t } from "@bloom-housing/ui-components" +import styles from "./SignUpBenefits.module.scss" type SignUpBenefitsProps = { className?: string @@ -12,18 +13,14 @@ const SignUpBenefits = (props: SignUpBenefitsProps) => { { 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"] + const classNames = [styles["sign-up-benefits-container"]] if (props.className) classNames.push(props.className) return (
    {iconListItems.map((item) => ( -
  • - -

    {item.text}

    +
  • + +

    {item.text}

    • ))}
diff --git a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.module.scss b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.module.scss new file mode 100644 index 0000000000..766637f366 --- /dev/null +++ b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.module.scss @@ -0,0 +1,13 @@ +.sign-up-benefits-heading-group { + padding-top: var(--seeds-s6); + padding-inline: var(--seeds-s4); + padding-bottom: var(--seeds-s2); + + @media (min-width: theme("screens.md")) { + padding-bottom: var(--seeds-s6); + } + + @media (min-width: theme("screens.sm")) { + padding-top: 0; + } +} diff --git a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx index f55de20e44..4566a4fcd9 100644 --- a/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx +++ b/sites/public/src/components/account/SignUpBenefitsHeadingGroup.tsx @@ -1,14 +1,14 @@ import { t } from "@bloom-housing/ui-components" import { HeadingGroup } from "@bloom-housing/ui-seeds" +import styles from "./SignUpBenefitsHeadingGroup.module.scss" const SignUpBenefitsHeadingGroup = (props: { mobileView: boolean }) => { - const classNames = props.mobileView ? "py-6 px-4" : "" return ( ) } diff --git a/sites/public/src/layouts/application-form.module.scss b/sites/public/src/layouts/application-form.module.scss index 0b0a5218db..47952c7376 100644 --- a/sites/public/src/layouts/application-form.module.scss +++ b/sites/public/src/layouts/application-form.module.scss @@ -1,5 +1,6 @@ .application-form-header { margin-block: var(--seeds-s6); + color: var(--seeds-color-gray-700); @media (max-width: theme("screens.md")) { margin-block-end: 0; @@ -13,11 +14,49 @@ border-top-right-radius: 0; margin-top: 0; } + + .application-form-header-title { + background-color: var(--seeds-color-primary); + padding-block: var(--seeds-s4); + color: var(--seeds-color-white); + --card-content-padding-inline: var(--seeds-s8); + @media (max-width: theme("screens.sm")) { + --card-content-padding-inline: var(--seeds-s4); + } + } + + .application-form-header-heading { + font-size: var(--seeds-type-heading-size-xl); + color: var(--seeds-color-white); + font-weight: var(--seeds-font-weight-bold); + font-family: var(--seeds-font-alt-sans); + } + + .application-form-header-progress { + padding-block: var(--seeds-s4); + --card-content-padding-block: var(--seeds-s4); + --card-content-padding-inline: var(--seeds-s8); + @media (max-width: theme("screens.sm")) { + --card-content-padding-inline: var(--seeds-s4); + } + + .desktop-nav { + display: block; + @media (max-width: theme("screens.sm")) { + display: none; + } + } + + .mobile-nav { + display: none; + @media (max-width: theme("screens.sm")) { + display: block; + } + } + } } .application-form-body { - margin-block-end: var(--seeds-s6); - @media (max-width: theme("screens.md")) { border-top-left-radius: 0; border-top-right-radius: 0; @@ -30,6 +69,24 @@ } } +.application-form-header-no-border { + header { + --card-divider-width: 0; + } +} + +.application-form-action-footer { + background-color: var(--seeds-color-primary-lighter); +} + +.application-form-save-and-return { + margin-top: var(--seeds-s4); +} + +.application-form-back-link { + margin-bottom: var(--seeds-s6); +} + /* overrides for Seeds Message & Alert */ .message-inside-card { --common-message-max-width: auto; diff --git a/sites/public/src/layouts/application-form.tsx b/sites/public/src/layouts/application-form.tsx index 3d5560c203..babd56eb94 100644 --- a/sites/public/src/layouts/application-form.tsx +++ b/sites/public/src/layouts/application-form.tsx @@ -1,10 +1,10 @@ import React from "react" import { faChevronLeft } from "@fortawesome/free-solid-svg-icons" -import { Button, Card, Heading, Icon } from "@bloom-housing/ui-seeds" +import { Button, Heading, Icon } from "@bloom-housing/ui-seeds" +import { BloomCard } from "@bloom-housing/shared-helpers" import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" import { t, ProgressNav, StepHeader } from "@bloom-housing/ui-components" import ApplicationConductor from "../lib/applications/ApplicationConductor" - import styles from "./application-form.module.scss" interface ApplicationFormLayoutProps { @@ -29,7 +29,7 @@ interface ApplicationFormLayoutProps { const ApplicationFormLayout = (props: ApplicationFormLayoutProps) => { const getBackLink = (url?: string, onClickFxn?: () => void) => { return ( -
+
- - {props.conductor.canJumpForwardToReview() && ( -
- -
- )} + + <> + + + {props.listingName} + - )} - + +
+ +
+
+ +
+ + + + + <> + {props.children} + {props.conductor && ( + + + + {props.conductor.canJumpForwardToReview() && ( +
+ +
+ )} + + )} + + ) } diff --git a/sites/public/src/layouts/forms.module.scss b/sites/public/src/layouts/forms.module.scss new file mode 100644 index 0000000000..3003bf6195 --- /dev/null +++ b/sites/public/src/layouts/forms.module.scss @@ -0,0 +1,14 @@ +.form-layout-container { + background-color: var(--seeds-bg-color-canvas); + border-top: 1px solid var(--seeds-border-color); +} + +.form-layout { + margin-inline: auto; + max-width: 100%; + @media (min-width: theme("screens.sm")) { + margin-bottom: var(--seeds-s20); + margin-top: var(--seeds-s12); + max-width: var(--seeds-width-lg); + } +} diff --git a/sites/public/src/layouts/forms.tsx b/sites/public/src/layouts/forms.tsx index 526b1cb940..84c885e561 100644 --- a/sites/public/src/layouts/forms.tsx +++ b/sites/public/src/layouts/forms.tsx @@ -1,21 +1,20 @@ import React from "react" import Layout from "./application" import { ApplicationTimeout } from "../components/applications/ApplicationTimeout" +import styles from "./forms.module.scss" 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", - ] + const classNames = [styles["form-layout"]] if (props.className) classNames.push(props.className) return ( <> -
+
{props.children}
diff --git a/sites/public/src/pages/account/account.module.scss b/sites/public/src/pages/account/account.module.scss index f1431b1660..b4ed1e3580 100644 --- a/sites/public/src/pages/account/account.module.scss +++ b/sites/public/src/pages/account/account.module.scss @@ -24,6 +24,7 @@ .account-settings-label { font-size: var(--seeds-font-size-sm); font-weight: var(--seeds-font-weight-bold); + color: var(--seeds-input-text-label-color); } .application-no-results { diff --git a/sites/public/src/pages/account/applications.tsx b/sites/public/src/pages/account/applications.tsx index 793c8aa73a..ee5026e41c 100644 --- a/sites/public/src/pages/account/applications.tsx +++ b/sites/public/src/pages/account/applications.tsx @@ -2,12 +2,17 @@ import React, { useEffect, useState, Fragment, useContext } from "react" import Head from "next/head" 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 { + PageView, + pushGtmEvent, + AuthContext, + RequireLogin, + BloomCard, +} 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 "@bloom-housing/shared-helpers/src/views/accounts/AccountCard" import styles from "../../pages/account/account.module.scss" @@ -88,14 +93,12 @@ const Applications = () => {
-
- + <> @@ -108,7 +111,7 @@ const Applications = () => { {!applications && !loading && noApplicationsSection()} - +
diff --git a/sites/public/src/pages/account/dashboard.tsx b/sites/public/src/pages/account/dashboard.tsx index e9087870e0..a1b1273f79 100644 --- a/sites/public/src/pages/account/dashboard.tsx +++ b/sites/public/src/pages/account/dashboard.tsx @@ -2,12 +2,17 @@ import React, { useEffect, useState, useContext } from "react" import Head from "next/head" import { NextRouter, withRouter } from "next/router" import { t, SiteAlert, AlertBox } from "@bloom-housing/ui-components" -import { PageView, pushGtmEvent, AuthContext, RequireLogin } from "@bloom-housing/shared-helpers" +import { + PageView, + pushGtmEvent, + AuthContext, + RequireLogin, + BloomCard, +} 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 "@bloom-housing/shared-helpers/src/views/accounts/AccountCard" import styles from "./account.module.scss" @@ -59,11 +64,12 @@ function Dashboard(props: DashboardProps) { - - + diff --git a/sites/public/src/pages/account/edit.tsx b/sites/public/src/pages/account/edit.tsx index a2831a469c..a247b206cd 100644 --- a/sites/public/src/pages/account/edit.tsx +++ b/sites/public/src/pages/account/edit.tsx @@ -19,10 +19,15 @@ import { } from "@bloom-housing/ui-components" import { Button, Card } from "@bloom-housing/ui-seeds" import Link from "next/link" -import { PageView, pushGtmEvent, AuthContext, RequireLogin } from "@bloom-housing/shared-helpers" +import { + PageView, + pushGtmEvent, + AuthContext, + RequireLogin, + BloomCard, +} from "@bloom-housing/shared-helpers" import { UserStatus } from "../../lib/constants" import FormsLayout from "../../layouts/forms" -import { AccountCard } from "@bloom-housing/shared-helpers/src/views/accounts/AccountCard" import styles from "./account.module.scss" @@ -150,28 +155,27 @@ const Edit = () => { return ( - <> - {nameAlert && ( - setNameAlert(null)} - className="my-0" - inverted - closeable - > - {nameAlert.message} - - )} + + {nameAlert && ( + setNameAlert(null)} + className="mb-4" + inverted + closeable + > + {nameAlert.message} + + )}
- {dobAlert && ( - setDobAlert(null)} - className="my-0" - inverted - closeable - > - {dobAlert.message} - - )} + + {dobAlert && ( + setDobAlert(null)} + className="mb-4" + inverted + closeable + > + {dobAlert.message} + + )}
{
- {emailAlert && ( - setEmailAlert(null)} - inverted - closeable - > - {emailAlert.message} - - )} + + {emailAlert && ( + setEmailAlert(null)} + inverted + closeable + className={"mb-4"} + > + {emailAlert.message} + + )}
- {passwordAlert && ( - setPasswordAlert(null)} - className="my-0" - inverted - closeable - > - {passwordAlert.message} - - )} + + {passwordAlert && ( + setPasswordAlert(null)} + className="mb-4" + inverted + closeable + > + {passwordAlert.message} + + )}
@@ -362,7 +370,7 @@ const Edit = () => { - + ) diff --git a/sites/public/src/pages/applications/financial/income.tsx b/sites/public/src/pages/applications/financial/income.tsx index ea72245968..b056a75241 100644 --- a/sites/public/src/pages/applications/financial/income.tsx +++ b/sites/public/src/pages/applications/financial/income.tsx @@ -177,7 +177,7 @@ const ApplicationIncome = () => { name="income" type="currency" label={t("application.financial.income.prompt")} - caps={true} + labelClassName={"text__caps-spaced"} validation={{ required: true, min: 0.01 }} error={errors.income} register={register} diff --git a/sites/public/src/pages/create-account.tsx b/sites/public/src/pages/create-account.tsx index 2c18f6790e..860eddf428 100644 --- a/sites/public/src/pages/create-account.tsx +++ b/sites/public/src/pages/create-account.tsx @@ -17,10 +17,9 @@ import dayjs from "dayjs" import customParseFormat from "dayjs/plugin/customParseFormat" dayjs.extend(customParseFormat) import { useRouter } from "next/router" -import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" +import { PageView, pushGtmEvent, AuthContext, BloomCard } from "@bloom-housing/shared-helpers" import { UserStatus } from "../lib/constants" import FormsLayout from "../layouts/forms" -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" @@ -91,13 +90,7 @@ export default () => {
)}
- + <> {requestError && ( setRequestError(undefined)} type="alert"> @@ -185,7 +178,6 @@ export default () => { className={accountCardStyles["account-card-settings-section"]} > { errorMessage={t("authentication.signIn.loginError")} register={register} controlClassName={styles["create-account-input"]} + labelClassName={"text__caps-spaced"} /> { className={accountCardStyles["account-card-settings-section"]} > { - +
{signUpCopy && (
diff --git a/sites/public/src/pages/reset-password.tsx b/sites/public/src/pages/reset-password.tsx index 51227c2bc4..fe1c8a95f7 100644 --- a/sites/public/src/pages/reset-password.tsx +++ b/sites/public/src/pages/reset-password.tsx @@ -4,15 +4,14 @@ import { useForm } from "react-hook-form" import { Field, Form, - FormCard, - Icon, t, AlertBox, SiteAlert, setSiteAlertMessage, } from "@bloom-housing/ui-components" import { Button } from "@bloom-housing/ui-seeds" -import { PageView, pushGtmEvent, AuthContext } from "@bloom-housing/shared-helpers" +import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card" +import { PageView, pushGtmEvent, AuthContext, BloomCard } from "@bloom-housing/shared-helpers" import { UserStatus } from "../lib/constants" import FormsLayout from "../layouts/forms" @@ -67,53 +66,49 @@ const ResetPassword = () => { return ( - -
- -

{t("authentication.forgotPassword.changePassword")}

-
- {requestError && ( - setRequestError(undefined)} type="alert"> - {requestError} - - )} - -
-
- + + <> + {requestError && ( + setRequestError(undefined)} type="alert"> + {requestError} + + )} + + + + - - value === passwordValue.current || - t("authentication.createAccount.errors.passwordMismatch"), - }} - error={errors.passwordConfirmation} - errorMessage={t("authentication.createAccount.errors.passwordMismatch")} - register={register} - type="password" - /> + + value === passwordValue.current || + t("authentication.createAccount.errors.passwordMismatch"), + }} + error={errors.passwordConfirmation} + errorMessage={t("authentication.createAccount.errors.passwordMismatch")} + register={register} + type="password" + labelClassName={"text__caps-spaced"} + /> -
-
- -
- + + + + ) } diff --git a/sites/public/styles/create-account.module.scss b/sites/public/styles/create-account.module.scss index 8eeb43315f..ebfa1a3103 100644 --- a/sites/public/styles/create-account.module.scss +++ b/sites/public/styles/create-account.module.scss @@ -1,26 +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; + color: var(--seeds-input-text-label-color); + 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); + color: var(--seeds-input-text-label-color); + 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); + border-radius: var(--bloom-rounded-lg); + margin-top: var(--bloom-s2); } .create-account-gap { - margin-bottom: var(--bloom-s4); + margin-bottom: var(--bloom-s4); } .create-account-label { - margin-bottom: var(--bloom-s1); -} \ No newline at end of file + margin-bottom: var(--bloom-s1); +} diff --git a/sites/public/styles/overrides.scss b/sites/public/styles/overrides.scss index 71842a4cc4..d4664d0f81 100644 --- a/sites/public/styles/overrides.scss +++ b/sites/public/styles/overrides.scss @@ -2,10 +2,11 @@ .seeds-button { -webkit-font-smoothing: antialiased; // restore macOS styling that had been unset } - + --text-caps-spaced-letter-spacing: var(--bloom-letter-spacing-tight); --text-caps-spaced-font-weight: 700; .text__caps-spaced { text-transform: none; + color: var(--seeds-input-text-label-color); } } diff --git a/sites/public/styles/sign-in.module.scss b/sites/public/styles/sign-in.module.scss deleted file mode 100644 index b97924f850..0000000000 --- a/sites/public/styles/sign-in.module.scss +++ /dev/null @@ -1,6 +0,0 @@ -.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 diff --git a/sites/public/styles/sign-up-benefits.module.scss b/sites/public/styles/sign-up-benefits.module.scss index 8a46239e97..65f9c60f69 100644 --- a/sites/public/styles/sign-up-benefits.module.scss +++ b/sites/public/styles/sign-up-benefits.module.scss @@ -1,54 +1,53 @@ .benefits-form-layout { - @media (min-width: theme("screens.sm")) { - max-width: var(--seeds-width-lg); - } - @media (min-width: theme("screens.md")) { - max-width: 100%; - } + @media (min-width: theme("screens.sm")) { + max-width: var(--seeds-width-lg); } - .benefits-container { - display: flex; - flex-direction: column; - justify-content: center; - - @media (min-width: theme("screens.md")) { - flex-direction: row; - margin-left: var(--seeds-s20); - } + @media (min-width: theme("screens.md")) { + max-width: 100%; } - - .benefits-display-hide { - display: block; - - @media (min-width: theme("screens.md")) { - display: none; - } +} +.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-hide-display { +} + +.benefits-display-hide { + display: block; + + @media (min-width: theme("screens.md")) { display: none; - - @media (min-width: theme("screens.md")) { - display: flex; - } } - - .benefits-form-container { +} + +.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); + } +} + +.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%; - 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 +} diff --git a/sites/public/tailwind.config.js b/sites/public/tailwind.config.js index 51aa076671..cf9d186a96 100644 --- a/sites/public/tailwind.config.js +++ b/sites/public/tailwind.config.js @@ -17,6 +17,7 @@ module.exports = { "./src/**/*.tsx", "../../node_modules/@bloom-housing/shared-helpers/src/views/**/*.tsx", "../../node_modules/@bloom-housing/ui-components/src/**/*.tsx", + "../../node_modules/@bloom-housing/shared-helpers/src/views/**/*.tsx", ], safelist: [/grid-cols-/], },