From fae68a2fb2999cdb1ed91cace145bd44a567f7e9 Mon Sep 17 00:00:00 2001
From: sophian <littlejohn.sophia@gmail.com>
Date: Fri, 15 Sep 2023 16:58:55 -0400
Subject: [PATCH] Add env variable to show/hide announcement banner

---
 .env.example                    |  1 +
 .github/workflows/website.yml   |  1 +
 src/components/Banner.tsx       |  4 +-
 src/components/header/index.tsx | 73 ++++++++++++++++++---------------
 src/theme.ts                    |  2 +-
 5 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/.env.example b/.env.example
index 89c79146..bc71d0e7 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
 GATSBY_FUNCTIONS_URL=
+SHOW_ANNOUNCEMENT_BANNER=show
\ No newline at end of file
diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index f5c0f2f9..66e0dc45 100644
--- 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
index 39e8320b..848362c5 100644
--- 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
index 52157cd8..525d9105 100644
--- 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
index 24680fb6..05c37a25 100644
--- 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,