UI Refresh

[DavidMcClatchey]

Description

• The current UI has some minor inconsistencies in header levels, spacing, and margins across different pages.
• These inconsistencies can create a disjointed user experience and detract from the overall usability and visual appeal of the application. By implementing these UX improvements, we aim to enhance the application's aesthetics, improve user satisfaction, and ensure a more consistent and polished look and feel.

Proposed solution

Changes for multiple pages

📸 Please include before/after screenshots with measurements 📸

1. Restyle top-level headers to be H2 (rather than H3 or H1).
   • See line 125 in ManageUsers.scss for a place to possibly copy/modify the h1 formatting and move it to _prime-styles.scss within prime-container.usa-card__header. After moving to _prime-styles.scss, try applying that formatting to all affected headers, but double check that that formatting won't apply in places it wasn't intended. Also double check that wherever the new h1 formatting is used, that it's not getting overridden by a lower level CSS file.
2. Update top, left, and bottom padding around the header and/or "back button" to be 24px.
   • See (3) for spacing between back buttons and headers.
   • Try doing the 24px padding within the same h1 formatting as used in (1) above if possible and double check that that formatting won't apply in places it wasn't intended. Also double check that wherever the new padding formatting is used, that it's not getting overridden by a lower level CSS file.
3. For any headers with a back button above it, include 8px of space between the button and the header.
   • It looks like the back buttons typically have a div like line 19 in AddPatientsHeader.tsx where new formatting could be added. The new formatting could be defined in _prime-styles.scss and applied where needed, again making sure that the new styling isn't getting overridden by a lower level CSS styling.
4. For all page components/white cards, ensure that all margins are 24px.
   • It looks like this formatting can be housed within prime-container (line 16) inside of _prime-styles.scss, but this may need to be a case-by-case approach and we'll want to make sure that we want that padding anywhere the prime-container style is used. Also make sure that the new styling isn't getting overridden by a lower level CSS styling.

Mark each box below with ✅ once complete and include before/after screenshots 📸 with measurements

	(1)	(2)	(3)	(4)
Dashboard			N/A
Test results			N/A
Upload spreadsheet			N/A
Upload history			N/A
Submission details
Patients			N/A
[Patient full name]
Add new patient
Add new patient(s)
Manage users			N/A
Manage Facilities			N/A
[Facility name]
Add facility
Manage organization			N/A
Patient self-registration			N/A
Conduct test page			N/A

Page specific changes:

1. Test Results:
   • The two buttons should be pushed over 8px so that the margin to the right of “Clear filters” is 24px
2. Upload Spreadsheet:
   • Change header copy to “Upload spreadsheet”

Extra?

1. Replace "Analytics" in file name(s) with "Dashboard" to reflect the UI's page name, and double check the file names here reflect the page names.

Additional context

Figma link: https://www.figma.com/design/LglkDsGZDKMZm3XCkJPhfR/SimpleReport-2023%2B?node-id=8330-17686&p=f&t=ReRoxx7Hjwp8y0Er-0