-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
3ea47ed
commit 99847f0
Showing
12 changed files
with
477 additions
and
317 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
24 changes: 24 additions & 0 deletions
24
sites/public/src/components/account/AccountCard.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 } |
148 changes: 54 additions & 94 deletions
148
sites/public/src/components/account/StatusItem.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.