Landing page: Cosmetic & responsive design updates

[LibbyUX]

The HRA Dashboards landing page has been adjusted to be more dynamic and cosmetic.

This is a low priority development request.

Please see my annotated image of the updates and new section of the MVP1 canvas for all adjustments/breakpoints:

[bhushankhope]

@LibbyUX fixed in PR #477 . Thanks

[bherr2]

@LibbyUX can you review and close if finished?

[LibbyUX]

@bherr2 yes, thank you for the reminder ping!

Off the top, it does need to be closer to spec:

• Currently, the font on the visual cards does not match the spec. The live production cards use Nunito Sans, however, this was specified using our Label font, Metropolis 500/Medium.
• Diversity & Inclusion needs to be reordered still in navigation

Let me review this more thoroughly tomorrow morning. I think the footers may need to match the design system footer as well. Adding to my task sheet. Thank you so much!

[bherr2]

@LibbyUX please review from this URL for now https://cdn.humanatlas.io/ui/dashboard-ui/

[LibbyUX]

Thank you @bherr2 !! Reviewing now!

[LibbyUX]

Compared with notes. This is looking so fabulous!

• Display font & overall notes
• Visual cards: Questions & Requests
• Footer: Requests

Also, two super exciting notes to document in GitHub as well as the Figma canvas:

• The Display font weight in this preview looks AMAZING. This production font weight be applied globally to all interfaces using it.
• The footer is so close. After these updates, it too can be applied globally.

Thank you! Go team!!

[LibbyUX]

Hi @axdanbol, wanted to provide a status update on this one:

We can close this one out when the visual cards match the spec.

I'm looking for:

• The specified interaction states
• The bottom of the card has a white container for the label space
• The alignment text alignment is left center
• There is no wrapping of the text when the components resize

Please let me know if there is anything else I can do for this! Thanks so much!

[bhushankhope]

@LibbyUX I fixed the styles for the card. Please review here