Skip to content

Commit

Permalink
fix(step-indicator): ensure 45px bottom margin (#563)
Browse files Browse the repository at this point in the history
@natalia-fitzgerald requested a consistent 45px spacing between the step
indicator and the content to match the designs, so I've put together
this small change for pre-clearance.

## Changes

- adjusts spacing to ensure 45px spacing between step indicator and the
content below it

## How to test this PR

1. Is the step indicator consistently 45px above the content below it?

## Screenshots
<img width="1904" alt="Screenshot 2024-05-22 at 6 51 03 AM"
src="https://github.com/cfpb/sbl-frontend/assets/19983248/a3dec0c4-9769-4258-b46c-27d1dd943347">
  • Loading branch information
billhimmelsbach authored May 28, 2024
1 parent 49ba829 commit 2e2442d
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/components/StepIndicator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export function StepIndicator({
}: StepIndicatorPropertyTypes): JSX.Element {
return (
<div className='step-indicator' aria-label='progress'>
<div className='my-10 flex w-full flex-1 grow flex-row p-0'>
<div className='mt-10 flex w-full flex-1 grow flex-row p-0'>
{steps.map((step, stepIndex) => (
<Step key={step.label} {...step} hasMargin={stepIndex > 0} />
))}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Filing/FilingApp/FilingSteps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function FilingSteps(): JSX.Element {
<Grid.Wrapper center>
<Grid.Row>
{/* TODO: Re-evaluate container and step indicator widths */}
<Grid.Column width={12}>
<Grid.Column className='u-mb0' width={12}>
<StepIndicator steps={filingSteps} />
</Grid.Column>
</Grid.Row>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Filing/FilingApp/FilingSubmit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function InstitutionYearLabel({
year: number | string | undefined;
}): JSX.Element {
return (
<div className='u-mb15 text-sm font-semibold uppercase tracking-[.063rem]'>
<div className='u-mb15 u-mt45 text-sm font-semibold uppercase tracking-[0.0625rem]'>
{name ?? 'Unknown institution'} | {year ?? '2024'}
</div>
);
Expand Down Expand Up @@ -121,7 +121,7 @@ export function FilingSubmit(): JSX.Element {
<FilingSteps />
<Grid.Wrapper center>
<Grid.Row>
<Grid.Column width={8} className='u-mt15'>
<Grid.Column width={8} className='u-mt0'>
<InstitutionYearLabel name={institution.name} year={year} />
<TextIntroduction
heading='Sign and submit'
Expand Down

0 comments on commit 2e2442d

Please sign in to comment.