Skip to content

Commit

Permalink
fix: update application styles (#132)
Browse files Browse the repository at this point in the history
emilyjablonski authored Oct 31, 2023
1 parent 5e9a989 commit 27f57db
Showing 9 changed files with 73 additions and 29 deletions.
6 changes: 2 additions & 4 deletions __tests__/forms/PhoneField.test.tsx
Original file line number Diff line number Diff line change
@@ -40,14 +40,12 @@ const ErrorPhoneField = () => {

describe("<PhoneField>", () => {
it("renders default state", () => {
const { getByText, getByPlaceholderText } = render(<DefaultPhoneField />)
const { getByText } = render(<DefaultPhoneField />)
expect(getByText("Your Second Phone Number")).toBeTruthy()
expect(getByPlaceholderText("(555) 555-5555")).toBeTruthy()
})
it("renders error state", () => {
const { getByText, getByPlaceholderText } = render(<ErrorPhoneField />)
const { getByText } = render(<ErrorPhoneField />)
expect(getByText("Your Second Phone Number")).toBeTruthy()
expect(getByPlaceholderText("(555) 555-5555")).toBeTruthy()
expect(getByText("Uh oh!")).toBeTruthy()
})
})
11 changes: 4 additions & 7 deletions src/forms/DOBField.tsx
Original file line number Diff line number Diff line change
@@ -69,8 +69,7 @@ const DOBField = (props: DOBFieldProps) => {
name={getFieldName("birthMonth")}
label={props.strings?.month ?? t("t.month")}
disabled={props.disabled}
readerOnly={true}
placeholder={props.strings?.monthPlaceholder ?? t("account.settings.placeholders.month")}
placeholder={props.strings?.monthPlaceholder ?? ""}
defaultValue={defaultDOB?.birthMonth ? defaultDOB.birthMonth : ""}
error={error?.birthMonth !== undefined}
validation={{
@@ -91,8 +90,7 @@ const DOBField = (props: DOBFieldProps) => {
name={getFieldName("birthDay")}
label={props.strings?.day ?? t("t.day")}
disabled={props.disabled}
readerOnly={true}
placeholder={props.strings?.dayPlaceholder ?? t("account.settings.placeholders.day")}
placeholder={props.strings?.dayPlaceholder ?? ""}
defaultValue={defaultDOB?.birthDay ? defaultDOB.birthDay : ""}
error={error?.birthDay !== undefined}
validation={{
@@ -113,8 +111,7 @@ const DOBField = (props: DOBFieldProps) => {
name={getFieldName("birthYear")}
label={props.strings?.year ?? t("t.year")}
disabled={props.disabled}
readerOnly={true}
placeholder={props.strings?.yearPlaceholder ?? t("account.settings.placeholders.year")}
placeholder={props.strings?.yearPlaceholder ?? ""}
defaultValue={defaultDOB?.birthYear ? defaultDOB.birthYear : ""}
error={error?.birthYear !== undefined}
validation={{
@@ -137,7 +134,7 @@ const DOBField = (props: DOBFieldProps) => {

{hasError && (
<div className="field error">
<span id={`${id}-error`} className="error-message">
<span id={`${id || ""}-error`} className="error-message">
{errorMessage ? errorMessage : props.strings?.dateError ?? t("errors.dateOfBirthError")}
</span>
</div>
2 changes: 1 addition & 1 deletion src/forms/PhoneField.tsx
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ export const PhoneField = (props: {
mask?: (args: any) => JSX.Element
dataTestId?: string
}) => {
const labelClasses = ["label"]
const labelClasses = []
if (props.caps) labelClasses.push("text__caps-spaced")
if (props.readerOnly) labelClasses.push("sr-only")
/**
2 changes: 1 addition & 1 deletion src/forms/PhoneMask.tsx
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ export const PhoneMask = React.forwardRef((props: any, ref: any) => {
mask={["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/]}
className="input"
type="tel"
placeholder={placeholder || "(555) 555-5555"}
placeholder={placeholder ?? ""}
guide={false}
id={name}
value={value}
1 change: 0 additions & 1 deletion src/global/forms.scss
Original file line number Diff line number Diff line change
@@ -16,7 +16,6 @@
.label {
@apply pb-2;
@apply text-sm;
@apply text-gray-800;
}

label + .control {
1 change: 0 additions & 1 deletion src/global/text.scss
Original file line number Diff line number Diff line change
@@ -93,7 +93,6 @@ h1.title {
@apply underline;
@apply font-alt-sans;
@apply text-sm;
@apply uppercase;
@apply block;
@apply text-primary;
@apply font-semibold;
4 changes: 3 additions & 1 deletion src/helpers/MultiLineAddress.tsx
Original file line number Diff line number Diff line change
@@ -31,7 +31,9 @@ const MultiLineAddress = ({ address }: MultiLineAddressProps) => {
}

if (address.city || address.state || address.zipCode) {
str += `${address.city && `${address.city} ,`} ${address.state} ${address.zipCode}`
str += `${address.city ? `${address.city},` : ""} ${address.state || ""} ${
address.zipCode || ""
}`
}

return str
39 changes: 26 additions & 13 deletions src/navigation/ProgressNav.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
.progress-nav {
--completed-step-color: var(--bloom-color-gray-850);
--completed-step-color: var(--bloom-color-primary);
--completed-step-font-color: var(--bloom-color-gray-850);
--active-step-color: var(--bloom-color-primary);
--active-step-font-color: var(--bloom-color-gray-950);
--future-step-color: var(--bloom-color-gray-450);
--future-step-font-color: var(--bloom-text-color);

--dot-size: var(--bloom-s3);
--dot-padding-left-mobile: var(--bloom-s2);
--dot-label-padding-top: var(--bloom-s4);
--dot-label-padding-left: var(--bloom-s1);
--dot-font-size-desktop: var(--bloom-font-size-base);
--dot-font-size-mobile: var(--bloom-font-size-3xs);
--dot-label-padding-right: var(--bloom-s4);
--dot-font-size: var(--bloom-font-size-sm);
--dot-line-color: var(--bloom-color-gray-450);
--dot-active-font-weight: bold;
--dot-text-transform: capitalize;
@@ -24,21 +23,21 @@
--bar-active-font-weight: bold;
--bar-text-transform: capitalize;

--nav-width: initial;

display: table;
width: 100%;
width: var(--nav-width);
}

.progress-nav__dot-item {
font-size: var(--dot-font-size-mobile);
padding: var(--dot-size) var(--dot-padding-left-mobile);
font-size: var(--dot-font-size);
position: relative;
text-align: center;
text-transform: var(--dot-text-transform);
display: table-cell;
white-space: normal;
float: none;
@media (min-width: $screen-md) {
font-size: var(--dot-font-size-desktop);
padding: 0rem;
}

@@ -49,32 +48,32 @@
background-color: var(--completed-step-color);
border-radius: 50%;
top: 0;
left: 50%;
left: 0.5rem;
content: "";
transform: translateX(-50%);
z-index: 2;
}

&:after {
position: absolute;
background-color: var(--dot-line-color);
background-color: var(--completed-step-color);
width: 100%;
left: 0;
left: 0.5rem;
top: 0.4rem;
content: "";
height: 1px;
}

&:first-of-type {
&:after {
left: 50%;
left: 20%;
}
}

&:last-of-type {
&:after {
left: auto;
right: 50%;
right: 80%;
}
}
.progress-nav__item-container {
@@ -86,12 +85,16 @@
pointer-events: none;
cursor: default;
z-index: 3;
padding-right: var(--dot-label-padding-right);
}

&.is-active {
&:before {
background-color: var(--active-step-color);
}
&:after {
background-color: var(--completed-step-color);
}
.progress-nav__item-container {
color: var(--active-step-font-color);
font-weight: var(--dot-active-font-weight);
@@ -105,12 +108,22 @@
.progress-nav__item-container {
color: var(--future-step-font-color);
}

&:after {
background-color: var(--future-step-color);
}
&:last-of-type {
&:after {
z-index: -1;
}
}
}
}

.progress-nav__bar {
border-spacing: var(--bar-spacing);
table-layout: fixed;
width: 100%;
}

.progress-nav__bar-item {
36 changes: 36 additions & 0 deletions src/page_components/ApplicationTimeline.scss
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@
}

.application-timeline {
width: 100%;
.progress-nav__dot-item {
@apply pt-0;

@@ -18,6 +19,41 @@
p {
padding-top: 3.8em;
}

&:before {
left: 50%;
}

&:after {
left: 0;
}

&:first-of-type {
&:after {
left: 50%;
}
}

&:last-of-type {
&:after {
left: auto;
right: 50%;
}
}

&.is-disabled {
&:last-of-type {
&:after {
z-index: 0;
}
}
}

&.is-active {
&:after {
background-color: var(--future-step-color);
}
}
}

.progress-nav__dot-item.is-active::before,

0 comments on commit 27f57db

Please sign in to comment.