From a9f0ac87d7f454e6ad9f58227f47de651c56a512 Mon Sep 17 00:00:00 2001
From: Jared White <jared@jaredwhite.com>
Date: Wed, 3 Jul 2024 15:13:22 -0700
Subject: [PATCH] feat: application confirmation styling updates based on
 design QA (#4173)

---
 .../applications/review/confirmation.tsx      | 148 +++++++++---------
 sites/public/styles/overrides.scss            |  55 +++++++
 2 files changed, 128 insertions(+), 75 deletions(-)

diff --git a/sites/public/src/pages/applications/review/confirmation.tsx b/sites/public/src/pages/applications/review/confirmation.tsx
index 3af34b07ba..742a672db1 100644
--- a/sites/public/src/pages/applications/review/confirmation.tsx
+++ b/sites/public/src/pages/applications/review/confirmation.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useEffect, useMemo } from "react"
-import Link from "next/link"
 import { useRouter } from "next/router"
 import Markdown from "markdown-to-jsx"
 import { t, ApplicationTimeline } from "@bloom-housing/ui-components"
@@ -9,8 +8,9 @@ import {
   PageView,
   pushGtmEvent,
   AuthContext,
+  BloomCard,
 } from "@bloom-housing/shared-helpers"
-import { Button, Card, Heading } from "@bloom-housing/ui-seeds"
+import { Button, Heading, Link } from "@bloom-housing/ui-seeds"
 import FormsLayout from "../../../layouts/forms"
 import { AppSubmissionContext } from "../../../lib/applications/AppSubmissionContext"
 import { UserStatus } from "../../../lib/constants"
@@ -52,88 +52,86 @@ const ApplicationConfirmation = () => {
 
   return (
     <FormsLayout>
-      <Card spacing={"lg"}>
-        <CardSection divider={"flush"}>
-          <Heading priority={1} size={"2xl"}>
-            {t("application.review.confirmation.title")}
-            {listing?.name}
-          </Heading>
-        </CardSection>
-
-        {imageUrl && <img src={imageUrl} alt={listing?.name} />}
-
-        <CardSection divider={"flush"}>
-          <h2 className="text__caps-spaced">
-            {t("application.review.confirmation.lotteryNumber")}
-          </h2>
-
-          <p
-            id="confirmationCode"
-            className="font-serif text-2xl mb-1"
-            data-testid={"app-confirmation-id"}
-          >
-            {application.confirmationCode || application.id}
-          </p>
-          <p className="field-note">{t("application.review.confirmation.pleaseWriteNumber")}</p>
-        </CardSection>
-
-        <CardSection divider={"inset"}>
-          <div className="markdown markdown-informational">
-            <ApplicationTimeline />
-
-            <Markdown options={{ disableParsingRawHTML: true }}>{content.text}</Markdown>
-          </div>
-        </CardSection>
-
-        <CardSection divider={"inset"}>
-          <div className="markdown markdown-informational">
-            <Markdown options={{ disableParsingRawHTML: true }}>
-              {t("application.review.confirmation.needToMakeUpdates", {
-                agentName: listing?.leasingAgentName || "",
-                agentPhone: listing?.leasingAgentPhone || "",
-                agentEmail: listing?.leasingAgentEmail || "",
-                agentOfficeHours: listing?.leasingAgentOfficeHours || "",
-              })}
-            </Markdown>
-          </div>
-        </CardSection>
-
-        {initialStateLoaded && !profile && (
-          <CardSection divider={"flush"} className={"border-none"}>
+      <BloomCard>
+        <>
+          <CardSection divider={"flush"}>
+            <Heading priority={1} size={"2xl"}>
+              {t("application.review.confirmation.title")}
+              {listing?.name}
+            </Heading>
+          </CardSection>
+
+          {imageUrl && <img src={imageUrl} alt={listing?.name} />}
+
+          <CardSection divider={"inset"}>
+            <Heading priority={2} size="lg">
+              {t("application.review.confirmation.lotteryNumber")}
+            </Heading>
+
+            <p
+              id="confirmationCode"
+              className="font-serif text-2xl my-3"
+              data-testid={"app-confirmation-id"}
+            >
+              {application.confirmationCode || application.id}
+            </p>
+            <p>{t("application.review.confirmation.pleaseWriteNumber")}</p>
+          </CardSection>
+
+          <CardSection divider={"inset"}>
+            <div className="markdown markdown-informational">
+              <ApplicationTimeline />
+
+              <Markdown options={{ disableParsingRawHTML: true }}>{content.text}</Markdown>
+            </div>
+          </CardSection>
+
+          <CardSection divider={"inset"}>
             <div className="markdown markdown-informational">
               <Markdown options={{ disableParsingRawHTML: true }}>
-                {t("application.review.confirmation.createAccount")}
+                {t("application.review.confirmation.needToMakeUpdates", {
+                  agentName: listing?.leasingAgentName || "",
+                  agentPhone: listing?.leasingAgentPhone || "",
+                  agentEmail: listing?.leasingAgentEmail || "",
+                  agentOfficeHours: listing?.leasingAgentOfficeHours || "",
+                })}
               </Markdown>
             </div>
           </CardSection>
-        )}
-
-        {initialStateLoaded && !profile && (
-          <CardSection className={"bg-primary-lighter border-none"} divider={"flush"}>
-            <Button
-              variant={"primary"}
-              onClick={() => {
-                void router.push("/create-account")
-              }}
-              id={"app-confirmation-create-account"}
-            >
-              {t("account.createAccount")}
-            </Button>
-          </CardSection>
-        )}
 
-        <CardSection divider={"flush"}>
-          <span className="underline text-sm" data-testid={"app-confirmation-browse"}>
+          {initialStateLoaded && !profile && (
+            <CardSection divider={"flush"} className={"border-none"}>
+              <div className="markdown markdown-informational">
+                <Markdown options={{ disableParsingRawHTML: true }}>
+                  {t("application.review.confirmation.createAccount")}
+                </Markdown>
+              </div>
+            </CardSection>
+          )}
+
+          {initialStateLoaded && !profile && (
+            <CardSection className={"bg-primary-lighter border-none"} divider={"flush"}>
+              <Button
+                variant={"primary"}
+                onClick={() => {
+                  void router.push("/create-account")
+                }}
+                id={"app-confirmation-create-account"}
+              >
+                {t("account.createAccount")}
+              </Button>
+            </CardSection>
+          )}
+
+          <CardSection divider={"flush"}>
             <Link href="/listings">{t("application.review.confirmation.browseMore")}</Link>
-          </span>
-        </CardSection>
+          </CardSection>
 
-        <CardSection>
-          <span className="underline text-sm" data-testid={"app-confirmation-print"}>
+          <CardSection>
             <Link href="/applications/view">{t("application.review.confirmation.print")}</Link>
-          </span>
-        </CardSection>
-      </Card>
+          </CardSection>
+        </>
+      </BloomCard>
     </FormsLayout>
   )
 }
diff --git a/sites/public/styles/overrides.scss b/sites/public/styles/overrides.scss
index 9d036492ce..90f43eb852 100644
--- a/sites/public/styles/overrides.scss
+++ b/sites/public/styles/overrides.scss
@@ -16,4 +16,59 @@
   .label.text__caps-spaced {
     margin-bottom: var(--seeds-s1);
   }
+
+  .markdown-informational {
+    font-size: var(--seeds-type-body-size);
+
+    h3 {
+      font-family: var(--seeds-font-alt-sans);
+      font-size: var(--seeds-type-heading-size-lg);
+      font-weight: var(--seeds-font-weight-semibold);
+    }
+
+    ul:not(.application-timeline) > li:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  ul.application-timeline {
+    .ui-icon > svg {
+      margin-top: 0 !important;
+    }
+
+    .progress-nav__dot-item > p {
+      padding-top: 2.65rem;
+      text-align: left;
+      font-weight: normal !important;
+    }
+
+    .progress-nav__dot-item {
+      text-align: left;
+    }
+
+    .progress-nav__dot-item::before {
+      left: 1rem;
+    }
+
+    .progress-nav__dot-item::after {
+      top: 0.9rem;
+      height: 3px;
+    }
+
+    .progress-nav__dot-item.is-active::before {
+      background-color: var(--seeds-color-success-dark);
+    }
+
+    .progress-nav__dot-item:first-of-type::after {
+      left: 0;
+    }
+
+    .progress-nav__dot-item:last-of-type::after {
+      display: none;
+    }
+
+    .progress-nav__dot-item .absolute {
+      margin-left: 0.6rem;
+    }
+  }
 }