DOP-3514: Indicator for writer staging in header (#768)

Created simple text indicator for writer staging in header, made mobile responsive, removed unnecessary prop
mongodb · Feb 10, 2023 · f6efa7f · f6efa7f
1 parent 6b24c85
commit f6efa7f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git 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,17 +14,33 @@ 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 }) => {
   return (
     <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
@@ -178,7 +178,7 @@ const DefaultLayout = ({
         isAssociatedProduct={isAssociatedProduct}
       >
         <GlobalGrid>
-          <PreviewHeader sidenav={sidenav} eol={eol} />
+          <PreviewHeader sidenav={sidenav} />
           {sidenav && (
             <Sidenav
               chapters={chapters}