Header updates

[r-bartlett-gsa]

As a benefits tool user, in order to navigate between USAGov and benefits tool subsite without confusion, I would like the benefit tool subsite to resemble USAGov look and feel as close as possible.

Acceptance criteria:

• Move the language toggle above the search bar
• Update phone number in the header styling and placement to match USAGov's beta site

Resources:

• Design review document (Current design review #553)
• Design prioritization spreadsheet

Definition of Done:

• Code complete
• Tests coverage is greater than team benchmark (90% goal)
• Security scans passed
• Acceptance Criteria is met and it works as expected
• Accessibility tested
• Cross browser tested
• Build process and deployment is automated and repeatable
• Load testing/performance testing
• Self Documentation whenever possible
• Feature toggles if appropriate
• Deployed to staging
• Usability testing
• PR approved / Peer reviewed
• A11y tested by Meghan
• PO approved (UX, usability, edge cases)

More details about each item can be find in BEARS P4 DoD google doc

QA checklist

[fpigeonjr]

This is part of the work on PR #616.

[danny-englander]

This is dependent on #582 and #581.

[fpigeonjr]

I have completed my involvement with this GitHub issue and am stepping away from it.
Thank you for your understanding.

[danny-englander]

@nehemiah-abuga This is ready for testing. For this ticket, we are testing the header for widescreens for visual similarity to https://beta.usa.gov/

1. Pull this branch locally: multi-life-event-2023
2. Test the header as compared to https://beta.usa.gov/ for desktop
3. switch languages to Spanish and repeat the test.

Note, there may be some minor differences. We will test for mobile once #689 is complete, at the moment that ticket is blocked.

[nehemiah-abuga]

I have verified this change and the headers are similar.

[danny-englander]

Noting that Amy is testing the header over in #581 (comment) so I will mark this one as done.