Skip to content

Commit

Permalink
422/account design updates (#3853)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
ColinBuyck authored Feb 13, 2024
1 parent 091df62 commit 6c1d913
Show file tree
Hide file tree
Showing 15 changed files with 252 additions and 211 deletions.
23 changes: 16 additions & 7 deletions shared-helpers/src/views/accounts/AccountCard.module.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}

Expand All @@ -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 {
Expand Down
4 changes: 4 additions & 0 deletions shared-helpers/src/views/accounts/AccountCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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]

Expand Down
25 changes: 16 additions & 9 deletions sites/public/src/components/account/StatusItem.module.scss
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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;
}
Expand All @@ -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;
}
}
Expand All @@ -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);
}
}

Expand All @@ -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);
}
}
Expand All @@ -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);
}
8 changes: 3 additions & 5 deletions sites/public/src/components/account/StatusItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Empty file.
101 changes: 101 additions & 0 deletions sites/public/src/components/applications/SubmittedApplicationView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
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 {
Application,
Listing,
MultiselectQuestionsApplicationSectionEnum,
} from "@bloom-housing/shared-helpers/src/types/backend-swagger"
import { useMemo } from "react"
import { DATE_FORMAT } from "../../lib/constants"
import dayjs from "dayjs"
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons"

interface SubmittedApplicationViewProps {
application: Application
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, MultiselectQuestionsApplicationSectionEnum.preferences)
?.length === 0
}
hidePrograms={
listingSectionQuestions(listing, MultiselectQuestionsApplicationSectionEnum.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 }
12 changes: 6 additions & 6 deletions sites/public/src/components/shared/FormSummaryDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,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>
Expand Down Expand Up @@ -187,7 +187,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>
Expand Down Expand Up @@ -304,7 +304,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" />
Expand Down Expand Up @@ -365,7 +365,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" />
Expand Down Expand Up @@ -417,7 +417,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" />
Expand Down Expand Up @@ -478,7 +478,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>
Expand Down
6 changes: 3 additions & 3 deletions sites/public/src/pages/account/StatusItemWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
28 changes: 20 additions & 8 deletions sites/public/src/pages/account/account.module.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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);
}
Loading

0 comments on commit 6c1d913

Please sign in to comment.