From f6efa7f7848374cfa35562a8b154920b0d0047ec Mon Sep 17 00:00:00 2001
From: mmeigs <matt.meigs@mongodb.com>
Date: Fri, 10 Feb 2023 15:16:03 -0500
Subject: [PATCH] DOP-3514: Indicator for writer staging in header (#768)

Created simple text indicator for writer staging in header, made mobile responsive, removed unnecessary prop
---
 src/components/Header/preview-header.js | 22 +++++++++++++++++++---
 src/layouts/preview-layout.js           |  2 +-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/Header/preview-header.js b/src/components/Header/preview-header.js
index a739ba8f7..8b5b9a9f1 100644
--- a/src/components/Header/preview-header.js
+++ b/src/components/Header/preview-header.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { SidenavMobileMenuDropdown } from '../Sidenav';
 import SiteBanner from '../Banner/SiteBanner';
+import { theme } from '../../theme/docsTheme';
 
 const StyledHeaderContainer = styled.header`
   grid-area: header;
@@ -13,9 +14,23 @@ const StyledHeaderContainer = styled.header`
 
 const StyledUnifiedNavPlaceholder = styled.nav`
   width: 100%;
-  height: 88px;
+  height: ${theme.header.navbarHeight};
+  display: flex;
+  align-items: center;
   border-bottom: 1px solid #b8c4c2;
   background-color: white;
+
+  @media ${theme.screenSize.upToLarge} {
+    height: ${theme.header.navbarMobileHeight};
+  }
+`;
+
+const StyledStagingWarning = styled.p`
+  margin: 0 20px;
+
+  @media ${theme.screenSize.upToLarge} {
+    font-size: ${theme.fontSize.small};
+  }
 `;
 
 const Header = ({ sidenav }) => {
@@ -23,7 +38,9 @@ const Header = ({ sidenav }) => {
     <StyledHeaderContainer>
       <SiteBanner />
       <>
-        <StyledUnifiedNavPlaceholder />
+        <StyledUnifiedNavPlaceholder>
+          <StyledStagingWarning>This is a staging build.</StyledStagingWarning>
+        </StyledUnifiedNavPlaceholder>
         {sidenav && <SidenavMobileMenuDropdown />}
       </>
     </StyledHeaderContainer>
@@ -32,7 +49,6 @@ const Header = ({ sidenav }) => {
 
 Header.propTypes = {
   sidenav: PropTypes.bool,
-  eol: PropTypes.bool.isRequired,
 };
 
 export default Header;
diff --git a/src/layouts/preview-layout.js b/src/layouts/preview-layout.js
index d03af322d..8aa9f9c28 100644
--- a/src/layouts/preview-layout.js
+++ b/src/layouts/preview-layout.js
@@ -178,7 +178,7 @@ const DefaultLayout = ({
         isAssociatedProduct={isAssociatedProduct}
       >
         <GlobalGrid>
-          <PreviewHeader sidenav={sidenav} eol={eol} />
+          <PreviewHeader sidenav={sidenav} />
           {sidenav && (
             <Sidenav
               chapters={chapters}