From e1619ae1a89c66fbdafe488e4a5cc9f714bd10d1 Mon Sep 17 00:00:00 2001
From: mmeigs <matt.meigs@mongodb.com>
Date: Wed, 7 Aug 2024 10:33:22 -0400
Subject: [PATCH] Fix preview header (#1194)

---
 src/components/Header/preview-header.js | 36 +++++++++++++++++--------
 src/styles/global-dark-mode.css         |  2 +-
 src/styles/mongodb-docs.css             |  1 -
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/Header/preview-header.js b/src/components/Header/preview-header.js
index 8b5b9a9f1..0f362eb24 100644
--- a/src/components/Header/preview-header.js
+++ b/src/components/Header/preview-header.js
@@ -1,24 +1,36 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
+import { palette } from '@leafygreen-ui/palette';
 import { SidenavMobileMenuDropdown } from '../Sidenav';
 import SiteBanner from '../Banner/SiteBanner';
 import { theme } from '../../theme/docsTheme';
+import { HeaderContext } from './header-context';
 
-const StyledHeaderContainer = styled.header`
+const StyledHeaderContainer = styled.header(
+  (props) => `
   grid-area: header;
-  position: sticky;
   top: 0;
-  z-index: 10;
-`;
+  margin-top: ${props.hasBanner ? theme.header.bannerHeight : '0px'};
+  z-index: ${theme.zIndexes.header};
+  ${props.template === 'landing' || props.template === 'errorpage' ? '' : 'position: sticky;'}
+  `
+);
 
 const StyledUnifiedNavPlaceholder = styled.nav`
   width: 100%;
   height: ${theme.header.navbarHeight};
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #b8c4c2;
-  background-color: white;
+
+  --background-color: white;
+  --border-color: #b8c4c2;
+  .dark-theme & {
+    --background-color: ${palette.black};
+    --border-color: ${palette.gray.dark2};
+  }
+  background-color: var(--background-color);
+  border-bottom: 1px solid var(--border-color);
 
   @media ${theme.screenSize.upToLarge} {
     height: ${theme.header.navbarMobileHeight};
@@ -34,16 +46,18 @@ const StyledStagingWarning = styled.p`
 `;
 
 const Header = ({ sidenav }) => {
+  const { bannerContent } = useContext(HeaderContext);
+
   return (
-    <StyledHeaderContainer>
+    <>
       <SiteBanner />
-      <>
+      <StyledHeaderContainer hasBanner={!!bannerContent}>
         <StyledUnifiedNavPlaceholder>
           <StyledStagingWarning>This is a staging build.</StyledStagingWarning>
         </StyledUnifiedNavPlaceholder>
         {sidenav && <SidenavMobileMenuDropdown />}
-      </>
-    </StyledHeaderContainer>
+      </StyledHeaderContainer>
+    </>
   );
 };
 
diff --git a/src/styles/global-dark-mode.css b/src/styles/global-dark-mode.css
index 3e34631d5..4f2a9a832 100644
--- a/src/styles/global-dark-mode.css
+++ b/src/styles/global-dark-mode.css
@@ -4,7 +4,7 @@ body {
 }
 
 .dark-theme body {
-  background-color: var(--lg-bg-dark-mode);
+  background-color: var(--black);
   color: var(--lg-color-dark-mode);
 }
 
diff --git a/src/styles/mongodb-docs.css b/src/styles/mongodb-docs.css
index 1f6b79467..425444a71 100644
--- a/src/styles/mongodb-docs.css
+++ b/src/styles/mongodb-docs.css
@@ -560,7 +560,6 @@ th {
   --check-circle: '\f058';
 
   /* Supporting the new dark mode with LG styles */
-  --lg-bg-dark-mode: var(--gray-dark4);
   --lg-color-dark-mode: var(--day-spa);
 } /*!
  * Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com