updated header (#1622)

* update logged out view

* Clean up MIT logo links

* use Link component

* search icon and nav menu button opacity on hover

* user menu style

* get rid of text based mit learn logo and replace with SVG

* fix vertical alignment

* adjust minimum height of mui toolbar to fit design, adjust search icon hitbox

* fix height of usermenu container

* fix nav drawer top padding

* fix header shadow

* remove manual width of user menu popover and anchor it to the left side of the trigger

* add hover underline to user menu popover links

* mobile styling fixes

* fix footer tests

frontends/mit-learn/src/page-components/Footer/Footer.test.tsx

@@ -3,18 +3,23 @@ import Footer from "./Footer"
 import React from "react"
 import { ThemeProvider } from "ol-components"
 import * as urls from "@/common/urls"
+import { MemoryRouter } from "react-router"
 
 describe("Footer", () => {
   test("Renders the appropriate text and links", async () => {
-    render(<Footer />, {
-      wrapper: ThemeProvider,
-    })
+    render(
+      <MemoryRouter>
+        <ThemeProvider>
+          <Footer />
+        </ThemeProvider>
+      </MemoryRouter>,
+    )
     interface Links {
       [key: string]: string
     }
     const expectedLinks: Links = {
       // key is blank here because the link is an image
-      "": "https://mit.edu/",
+      "": "https://www.mit.edu/",
       Home: urls.HOME,
       "About Us": urls.ABOUT,
       Accessibility: urls.ACCESSIBILITY,

frontends/mit-learn/src/page-components/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import { Container, styled } from "ol-components"
-import { MITLogoLink } from "ol-utilities"
 import * as urls from "@/common/urls"
 import React, { FunctionComponent } from "react"
+import MITLogoLink from "../MITLogoLink/MITLogoLink"
 
 const PUBLIC_URL = APP_SETTINGS.PUBLIC_URL
 const HOME_URL = `${PUBLIC_URL}/`
@@ -147,10 +147,7 @@ const Footer: FunctionComponent = () => {
         <FooterContainerInner>
           <FooterContent>
             <FooterLeftContainer>
-              <FooterLogo
-                href="https://mit.edu/"
-                src="/static/images/mit_logo_std_cmyk_black.svg"
-              />
+              <FooterLogo href="https://www.mit.edu/" target="_blank" />
               <FooterAddress data-testid="footer-address">
                 Massachusetts Institute of Technology
                 <br />