Add env variable to show/hide announcement banner

centrifuge · Sep 15, 2023 · fae68a2 · fae68a2
1 parent cdc8d31
commit fae68a2
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 35 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1,2 @@
 GATSBY_FUNCTIONS_URL=
+SHOW_ANNOUNCEMENT_BANNER=show
diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
@@ -62,6 +62,7 @@ jobs:
       - name: Build
         env:
           GATSBY_FUNCTIONS_URL: ${{ needs.prepare-deploy.outputs.function_URL }}
+          SHOW_ANNOUNCEMENT_BANNER: true
         run: |
           yarn build
 

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -7,7 +7,7 @@ type BannerProps = {
 }
 
 export function Banner({ children }: BannerProps) {
-  return (
+  return process.env.SHOW_ANNOUNCEMENT_BANNER === 'true' ? (
     <Box
       as="div"
       py={1}
@@ -19,5 +19,5 @@ export function Banner({ children }: BannerProps) {
     >
       <Text variant="body2">{children}</Text>
     </Box>
-  )
+  ) : null
 }
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -19,39 +19,48 @@ export function Header({ menuButtonVariant }: HeaderProps) {
   const scrollDirection = useScrollDirection(50)
 
   return (
-    <Root
-      as="header"
-      position="fixed"
-      zIndex={zIndices.sticky}
-      top={0}
-      px={0}
-      height={sizes.headerHeight}
-      isHidden={scrollDirection === 'down'}
-    >
-      <Box>
-        <Banner>
-          Centrifuge is Everywhere. Read the{' '}
-          <Text as="a" href={links.announcements} rel="noopener noreferrer" target="_blank" variant="body2">
-            Announcement
-          </Text>
-        </Banner>
-        <Container
-          px={2}
-          pt={1}
-          as={Shelf}
-          justifyContent="space-between"
-          alignItems="center"
-          height="100%"
-          maxWidth="containerHeader"
+    <>
+      <Banner>
+        Centrifuge is Everywhere. Read the{' '}
+        <Text
+          as="a"
+          style={{ textDecoration: 'underline' }}
+          href={links.announcements}
+          rel="noopener noreferrer"
+          target="_blank"
+          variant="body2"
         >
-          <LogoLink to="/" title="Home page">
-            <Logo />
-          </LogoLink>
+          Announcement
+        </Text>
+      </Banner>
+      <Root
+        as="header"
+        position="sticky"
+        zIndex={zIndices.sticky}
+        top={0}
+        px={0}
+        height={sizes.headerHeight}
+        isHidden={scrollDirection === 'down'}
+      >
+        <Box alignItems="center" justifyContent="center" height="100%">
+          <Container
+            px={2}
+            py={1}
+            as={Shelf}
+            justifyContent="space-between"
+            alignItems="center"
+            height="100%"
+            maxWidth="containerHeader"
+          >
+            <LogoLink to="/" title="Home page">
+              <Logo />
+            </LogoLink>
 
-          <MobileMenu />
-          <DesktopMenu menuButtonVariant={menuButtonVariant} />
-        </Container>
-      </Box>
-    </Root>
+            <MobileMenu />
+            <DesktopMenu menuButtonVariant={menuButtonVariant} />
+          </Container>
+        </Box>
+      </Root>
+    </>
   )
 }
diff --git a/src/theme.ts b/src/theme.ts
@@ -8,7 +8,7 @@ export const theme: DefaultTheme = {
     container: '1430px',
     containerHeader: '1600px',
     containerNarrow: '1140px',
-    headerHeight: [85, 90, 90],
+    headerHeight: [50, 65, 65],
   },
   space: Object.assign([], centrifugeLight.space, {
     layoutSmall: 80,