Re-design of AuthLogin Page

[courtneyc1]

🗣 Description

Re-design the AuthLogin Page. Completes issue #2323

💭 Motivation and context

Follow a given design layout to make the login page more user friendly.

🧪 Testing

The login page will have a new notification banner and messaging, redesigned warning banner, a footer with less fields, and overall layout change. A user will see the redesigned page rather than the old one.

📷 Screenshots

Updated re-design as of 01/04/2024

✅ Pre-approval checklist

• This PR has an informative and human-readable title.
• Changes are limited to a single goal - eschew scope creep!
• All future TODOs are captured in issues, which are referenced
  in code comments.
• All relevant type-of-change labels have been added.
• I have read the CONTRIBUTING document.
• These code changes follow cisagov code standards.
• All relevant repo and/or project documentation has been updated
  to reflect the changes in this PR.
• Tests have been added and/or modified to cover the changes in this PR.
• All new and existing tests pass.

✅ Pre-merge checklist

• Revert dependencies to default branches.
• Finalize version.

✅ Post-merge checklist

• Create a release.

[courtneyc1]

@dmfezzareed @schmelz21 I have made a few changes from the original design to help with the user experience. I have added the notifications above the login area and the Warning banner below with some stylistic changes. Please let me know your thoughts on the attached screen shots in accepting the new design or reverting the changes back to the original design.

[schmelz21]

@courtneyc1 - as we review the suggestion, please note the footer change only needs to be applied to the login page only.

[schmelz21]

@courtneyc1 - it was determined to work toward the original design request, Thanks
https://user-images.githubusercontent.com/126171978/279734973-d56e81bd-a2eb-4556-a20c-e772ad21ad65.png

[dmfezzareed]

@courtneyc1 I like the yellow background on the platform notification and the absence of a border; the footer looks great! @nickviola , @ameliav please note the footer for the new registration page.

@schmelz21 For the benefit of all frontend dev - The "landing strip" down the middle of any XFD page will be removed, and all pages refactored in MUI to utilize the landscape available. We want as much information displayed (as appropriate) on the first screen that loads, without scrolling being required, unless absolutely necessary. I've communicated this in the past . The rule will be no less than a 1 inch margin, on the left and right sides of any XFD page. cc @ameliav , @ValeriaReveles , @courtneyc1

• Please stick with the acceptance criteria format as designed, changing/adding only the yellow platform notification formatting.

[dmfezzareed]

Hello @schmelz21 @dmfezzareed ,

Typically, temporary notifications on web pages are a banner across the top to catch a user's attention. Are the "Platform Notifications" meant to be up for short periods of time? Else, if they are a permanent fixture to the page, they should go below the login box in a less eye-catching color as Debra had it. Please confirm.

@ameliav This suggestion is spot on! Kudos! So long as the banner across the top can be persistent for a period time, and visible at every logon page landing, I prefer your suggestion. cc @schmelz21

[nickviola]

LGTM

[cduhn17]

See one comment

[schmelz21]

LGTM, @cduhn17 - okay for a review and resolve conversation?

[cduhn17]

LGTM