fix: various uptake and visual enhancements to address design QA (#4038)

* fix: various uptake and visual enhancements to address design QA * fix: prettier * fix: feedback from QA
bloom-housing · May 24, 2024 · 71c8a16 · 71c8a16
1 parent 0efab7a
commit 71c8a16
Show file tree

Hide file tree

Showing 6 changed files with 223 additions and 164 deletions.
diff --git a/sites/public/src/components/applications/HouseholdMemberForm.tsx b/sites/public/src/components/applications/HouseholdMemberForm.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { t } from "@bloom-housing/ui-components"
 import { Button, FieldValue, Icon } from "@bloom-housing/ui-seeds"
 import { CustomIconMap } from "@bloom-housing/shared-helpers"
+import styles from "../../layouts/application-form.module.scss"
 
 export interface HouseholdMemberFormProps {
   editMember?: (memberId: number | undefined) => void
@@ -19,8 +20,11 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
   const editMode = props.editMode !== false && props.editMember // undefined should default to true
 
   return (
-    <div className="flex justify-between flex-row border-b">
-      <FieldValue helpText={props.subtitle} className="py-4 text-left">
+    <div className={styles["application-form-household-member"]}>
+      <FieldValue
+        className={styles["application-form-household-field-value"]}
+        helpText={props.subtitle}
+      >
         {props.memberFirstName} {props.memberLastName}
       </FieldValue>
       <div>
@@ -29,7 +33,7 @@ const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
             id={`edit-member-${props.memberFirstName}-${props.memberLastName}`}
             type="button"
             variant="text"
-            className="pt-4 app-household-member-edit-button"
+            className="app-household-member-edit-button pb-1"
             onClick={() => props.editMember && props.editMember(props.memberId)}
           >
             {props.strings?.edit ?? t("t.edit")}

diff --git a/sites/public/src/components/applications/HouseholdSizeField.tsx b/sites/public/src/components/applications/HouseholdSizeField.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { CardSection } from "@bloom-housing/ui-seeds/src/blocks/Card"
 import { t, ErrorMessage, AlertBox, AlertNotice } from "@bloom-housing/ui-components"
 import { UseFormMethods, FieldError } from "react-hook-form"
 
@@ -60,23 +61,27 @@ const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
           }
         />
       </span>
-      <ErrorMessage
-        id={"householdsize-error"}
-        error={!!error}
-        className="block mt-0 line-normal text-alert"
-      >
-        <AlertBox type="alert" inverted onClose={() => clearErrors()}>
-          {strings?.dontQualifyHeader ?? t("application.household.dontQualifyHeader")}
-        </AlertBox>
-        <AlertNotice title={error?.message} type="alert" inverted>
-          <p className="mb-2">
-            {strings?.dontQualifyDescription ?? t("application.household.dontQualifyInfo")}
-          </p>
-          <p>
-            <a href={assistanceUrl}>{strings?.getAssistance ?? t("pageTitle.getAssistance")}</a>
-          </p>
-        </AlertNotice>
-      </ErrorMessage>
+      {error && (
+        <CardSection>
+          <ErrorMessage
+            id={"householdsize-error"}
+            error={!!error}
+            className="block mt-0 line-normal text-alert"
+          >
+            <AlertBox type="alert" inverted onClose={() => clearErrors()}>
+              {strings?.dontQualifyHeader ?? t("application.household.dontQualifyHeader")}
+            </AlertBox>
+            <AlertNotice title={error?.message} type="alert" inverted>
+              <p className="mb-2">
+                {strings?.dontQualifyDescription ?? t("application.household.dontQualifyInfo")}
+              </p>
+              <p>
+                <a href={assistanceUrl}>{strings?.getAssistance ?? t("pageTitle.getAssistance")}</a>
+              </p>
+            </AlertNotice>
+          </ErrorMessage>
+        </CardSection>
+      )}
     </>
   )
 }

diff --git a/sites/public/src/components/shared/FormSummaryDetails.module.scss b/sites/public/src/components/shared/FormSummaryDetails.module.scss
@@ -0,0 +1,38 @@
+.summary-header {
+  display: flex;
+  justify-content: space-between;
+  padding-block: var(--seeds-spacer-header);
+  background: var(--seeds-color-gray-300);
+}
+
+.summary-section {
+  padding-block-end: var(--seeds-spacer-header);
+}
+
+.summary-value {
+  padding-block-end: var(--seeds-spacer-content);
+
+  &:last-of-type {
+    padding-block-end: var(--seeds-spacer-header);
+  }
+}
+
+.summary-note-text {
+  font-size: var(--seeds-type-label-size);
+  margin-block-end: var(--seeds-spacer-content);
+}
+
+.household-member-section {
+  border-block-end: 1px solid var(--seeds-color-gray-450);
+  margin-block-end: var(--seeds-spacer-header);
+
+  &:last-child {
+    border-block-end: none;
+  }
+}
+
+.household-member-same-address {
+  font-size: var(--seeds-type-label-size);
+  color: var(--seeds-text-color-light);
+  padding-block-end: var(--seeds-spacer-header);
+}