[WIP] Improve the patient portal header, footer and identification screens - #2384
Draft
marta- wants to merge 5 commits into
Draft
[WIP] Improve the patient portal header, footer and identification screens#2384marta- wants to merge 5 commits into
marta- wants to merge 5 commits into
Conversation
The footer layout was broken on the patient identification page. It switched between a horizontal flex row (with a CSS "·" pseudo-element separator) and a vertical CSS grid based on a 600px media query, which did not lay out correctly. Replace this with a single row MUI Stack inside the Toolbar: - the middle dot is now the Stack divider, drawn between the items; - items wrap onto more lines on narrow screens instead of switching to a separate vertical layout; - the "align" prop drives the Stack's justifyContent. Set useFlexGap and flexWrap as defaults for all Stacks in portalTheme instead of on this single Stack: useFlexGap via MuiStack defaultProps (the documented way to enable it globally), and flexWrap via styleOverrides, because flexWrap is not a real Stack prop and would otherwise leak onto the DOM node. These defaults do not change the other Stacks rendered in the patient portal.
Redesign the top of the patient portal header so the survey name, the two logos, and the user menu each have a clear, robust place, and so the layout holds up when any of them is missing. Survey name: - Moved next to the app (left) logo, separated by a light vertical bar that only shows when a name is present. - Styled as bold, text-secondary, with a normal line height instead of the tall "overline" default that looked awkward when wrapping. - Constrained the logo + name cluster to the left half of the header so long names wrap instead of stretching across the whole row. Affiliation logo: - Rendered as its own image on the right, separate from the app logo, so the survey name can sit between them. - Kept at its original size to respect branding, and hidden below 500px so the brand and name have room on narrow screens. User greeting and Sign out: - Moved to a small pill at the very top right, with a subtle background and rounded bottom corners so it looks like it hangs from the top. - The name no longer disappears on small screens; instead it truncates with an ellipsis, while Sign out is never truncated. - The text right-aligns with the affiliation logo. Also replaced the hardcoded 780px and 500px widths with the theme values (width.main and width.compact), and removed the old affiliation block-layout overrides that centered everything between the two logos.
Move the "Where can I find my MRN?" hint (the link under the MRN input and the dialog it opens) out of PatientIdentification into a new MRNHelper component. The hint is no longer rendered. Its dialog content is specific to UHN and the screenshots are out of date, so it should not be part of the generic patient identification form. Keeping it as its own file preserves the code for whoever wants to refresh the screenshots and bring it back. The file documents how to reuse it (drop <MRNHelper /> back in place of the MRN field's helper text) and how to make it opt-in per deployment through a UI extension, the way the page footer works. Also dropped the imports, styles and state in PatientIdentification that only served the hint.
Two small cleanups in the date of birth picker on the patient identification form: - Remove an onBlur handler that ran when the typed date was invalid. It called setError(true), which displayed nothing, and setErrorMessage, which does not exist and would have thrown. It also showed a long, technical message that is not helpful for patients. Invalid dates are still blocked: the form will not submit an invalid date, and on submit it shows a plain message asking for the date of birth. - Remove a className that referenced a style that does not exist, so it had no effect.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Status: [WORK IN PROGRESS]
This branch was prepared for RPS demo and isn't meant for merging at this time, but can still be reviewed.
Needs more testing on projects with different Affiliation and PatientAccess settings than RPS, especially Your Experience.
Also needs a Jira ticket and properly tagged commits.
Summary
UI improvements across the patient portal's shared chrome and the patient identification screen. Layout and styling only — no changes to the authentication flow, survey logic, or stored data.
Footer
Stackinside theToolbar, with the middle dot as theStackdivider. On narrow screens the items wrap onto more lines instead of switching to a separate vertical layout.useFlexGap(viaMuiStackdefault props) andflexWrap: wrap(via style overrides) for allStacks inportalTheme, so this behavior is defined once rather than per component. Verified this does not affect the other stacks rendered in the patient portal.Header
width.mainandwidth.compact), and removed the old block-layout overrides that centered everything between the two logos.Patient identification
MRNHelpercomponent. It is dormant (not rendered): its dialog content is specific to UHN and the screenshots are out of date. The file documents how to refresh and reuse it, or expose it as an opt-in UI extension per deployment.onBlurhandler that referenced a nonexistent setter and showed a long, technical message, plus aclassNamepointing at a missing style. Invalid dates are still blocked on submit.