Merge pull request #707 from centrifuge/announcement-banner

Add announcement banner

.env.example

@@ -1 +1,2 @@
 GATSBY_FUNCTIONS_URL=
+SHOW_ANNOUNCEMENT_BANNER=true

.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
 

config/links.ts

@@ -14,4 +14,5 @@ export const links = {
   prime: 'https://forms.gle/kt1GShLcWapMGzjs7',
   primeBlogPost: 'https://centrifuge.mirror.xyz/KyrMWLKMccFCNfSlvjxe7uyhba7oLrUzlBuZ7GQTn6s',
   podcast: 'https://linktr.ee/centrifugeconversations',
+  announcements: '@devin, please add link here',
 }

src/components/Banner.tsx

@@ -0,0 +1,23 @@
+import { Box, Text } from '@centrifuge/fabric'
+import * as React from 'react'
+import { theme } from '../theme'
+
+type BannerProps = {
+  children: React.ReactNode
+}
+
+export function Banner({ children }: BannerProps) {
+  return process.env.SHOW_ANNOUNCEMENT_BANNER === 'true' ? (
+    <Box
+      as="div"
+      py={1}
+      display="flex"
+      backgroundColor={theme.colors.accentSecondary}
+      justifyContent="center"
+      height="100%"
+      width="100%"
+    >
+      <Text variant="body2">{children}</Text>
+    </Box>
+  ) : null
+}

src/components/header/index.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
-import { Container, Shelf } from '@centrifuge/fabric'
+import { Box, Container, Shelf, Text } from '@centrifuge/fabric'
 import { useTheme } from 'styled-components'
 import type { ButtonVariant } from '../desktop-menu/SubMenu'
 import { useScrollDirection } from '../../hooks/use-scroll-direction'
 import { Logo } from '../Logo'
 import { MobileMenu } from '../mobile-menu'
 import { DesktopMenu } from '../desktop-menu'
 import { Root, LogoLink } from './styles'
+import { Banner } from '../Banner'
+import { links } from '../../../config/links'
 
 type HeaderProps = {
   menuButtonVariant: ButtonVariant
@@ -17,23 +19,48 @@ export function Header({ menuButtonVariant }: HeaderProps) {
   const scrollDirection = useScrollDirection(50)
 
   return (
-    <Root
-      as="header"
-      position="fixed"
-      zIndex={zIndices.sticky}
-      top={0}
-      px={2}
-      height={sizes.headerHeight}
-      isHidden={scrollDirection === 'down'}
-    >
-      <Container as={Shelf} justifyContent="space-between" alignItems="center" height="100%" maxWidth="containerHeader">
-        <LogoLink to="/" title="Home page">
-          <Logo />
-        </LogoLink>
+    <>
+      <Banner>
+        Centrifuge is Everywhere. Read the{' '}
+        <Text
+          as="a"
+          style={{ textDecoration: 'underline' }}
+          href={links.announcements}
+          rel="noopener noreferrer"
+          target="_blank"
+          variant="body2"
+        >
+          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>
-    </Root>
+            <MobileMenu />
+            <DesktopMenu menuButtonVariant={menuButtonVariant} />
+          </Container>
+        </Box>
+      </Root>
+    </>
   )
 }