updated header

[gumaerc]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/5305

Description (What does it do?)

This PR implements the new site header as shown in the issue above and the screenshots below.

Screenshots (if appropriate):

How can this be tested?

• Spin up mit-learn on this branch
• Load the home page at https://localhost:8062/
• Compare the new header to the Figma designs in the above issue both while logged in and logged out and make sure everything shows up as it should

[shanbady]

There seems to be some extra padding around the header. Figma is showing 72p height but locally its coming out to 76px.

[gumaerc]

There seems to be some extra padding around the header. Figma is showing 72p height but locally its coming out to 76px.

@shanbady We actually had a discussion about this in Slack, but there seems to be an issue with Figma here. If you look at the box model for the header element in a browser, it is correctly including the bottom 4px border:

In Figma, the height is shown as "72px" because it's not including the 4px bottom border, even though it is shown in their box model:

I've confirmed with @mbilalmughal that the height is correct as-is.

[shanbady]

We also have a mit-logo-learn.jpg which is used in subscription emails - https://learn.mit.edu/static/images/mit-logo-learn.jpg - are we leaving this as the old one for now or should this get swapped out as well (also worth noting it is intentionally a jpg for email template support)