Consolidated list of design updates (shared platform)

[natalia-fitzgerald]

The purpose of this issue is to have a place to post design adjustments or changes to the shared platform pages.

[natalia-fitzgerald]

Change weight of status label #191

Upon reviewing the Shared platform (authenticated) page versus the View your user profile (in code) I noticed a consistency in the status label (institution-list). This is the right way to do this. Unfortunately, the weight of the status label was inconsistent in my Figma file (500 in the authenticated page and 400 in the view user profile page).

Issue for this task: https://github.com/cfpb/sbl-frontend/issues/191

Figma mock-up

Authenticated page	View user profile

Code implementation

Authenticated page	View user profile

My concern with the current implementation is that on the "View your user profile" page the heading (Associated financial institutions) and the status label look too close in styling. Since we definitely should have a consistent approach I'm thinking that it would be best to go with the 400 weight approach. Thoughts?

Proposed update

• 400 weight for "Approved"status label

Authenticated page	View user profile

I have discussed with the team and we have decided to proceed with this change.

[natalia-fitzgerald]

Spacing adjustment on unauthenticated landing page #192

There is a spacing adjustment I would like to make to the shared landing (unauthenticated) page. In the current implementation the space between the heading and the numbered icon list is 15px. The space between the list items is 30px. This creates a spacing association between the heading and the first list item.

Ticket for this task: https://github.com/cfpb/sbl-frontend/issues/192

There are two options for how to address this issue:

Option 1: Increase the spacing

• Increase space between the heading and the list items to 30px
• (Possibly) also increase the space between the button and the heading to 60px

Implemented based on Figma	45 before / 30 after	60 before / 30 after

Option 2: Add a divider line between the button and the numbered icon list

• Add a divider with 45px above and below between the button and the numbered icon list
• Increase space between the heading and the list items to 30px
• (Possibly) Increase the space after the numbered icon list to 45px (between the list and the well)

Implemented based on Figma	Proposed update

I have discussed with the team and we have decided to proceed with Option 2.

[billhimmelsbach]

Option 2: Add a divider line between the button and the numbered icon list

I prefer option #2 for sure. I do think it would be nice to have a dividing line there to separate those concerns out a bit. Can we ticket that one?