feat: update header css to handle redesign

Author: aswanson-nr

src/components/Header.js

@@ -42,16 +42,14 @@ const Header = ({ hasHeaderBg }) => {
       <GlobalHeader
         className={mobileMenuActive ? styles.existsInActiveMobileMenu : ''}
         css={css`
-          ul {
-            line-height: 14px;
-            font-size: 16px;
+          .dark-mode & {
+            /* The header does not change color with the rest of the theme 
+            * This locks those color values specifically for the header. */
+            --color-neutrals-050: #fafbfb;
+            --color-neutrals-100: #f4f5f5;
+            --color-neutrals-500: #b9bdbd;
+            --color-neutrals-600: #8e9494;
           }
-
-          a {
-            border-bottom: none;
-          }
-
-          z-index: 700;
         `}
       />
       <header
@@ -80,7 +78,6 @@ const Header = ({ hasHeaderBg }) => {
             mobileMenuActive ? styles.mobileMenuActive : ''
           }`}
         >
-          <DarkModeToggle className={styles.headerDarkModeToggle} />
           <button
             className={styles.mobileMenuButton}
             onClick={() => setMobileMenuActive(!mobileMenuActive)}

src/components/Header.module.scss

@@ -133,7 +133,7 @@ div.exists-in-active-mobile-menu {
 
   .mobile-menu-active {
     position: absolute;
-    top: 0;
+    top: var(--global-header-height);
     right: 0;
     bottom: -100vh;
     left: 0;
@@ -145,7 +145,7 @@ div.exists-in-active-mobile-menu {
       height: 20.5px;
       background-size: 20.51px 20.51px;
       position: absolute;
-      top: 50px;
+      top: 18px;
       right: 30px;
       background-image: url('../images/icon-menu-close.svg');
     }
@@ -190,12 +190,6 @@ div.exists-in-active-mobile-menu {
 
 @media screen and (max-width: 480px) {
   .mobile-menu-active {
-    top: 35px;
-    
-    .mobile-menu-button {
-      top: 21px;
-    }
-
     .header-dark-mode-toggle {
       display: block;