Add annoucement banner

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 (
+    <Box
+      as="div"
+      py={1}
+      display="flex"
+      backgroundColor={theme.colors.accentSecondary}
+      justifyContent="center"
+      height="100%"
+      width="100%"
+    >
+      <Text variant="body2">{children}</Text>
+    </Box>
+  )
+}

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
@@ -22,18 +24,34 @@ export function Header({ menuButtonVariant }: HeaderProps) {
       position="fixed"
       zIndex={zIndices.sticky}
       top={0}
-      px={2}
+      px={0}
       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>
+      <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"
+        >
+          <LogoLink to="/" title="Home page">
+            <Logo />
+          </LogoLink>
 
-        <MobileMenu />
-        <DesktopMenu menuButtonVariant={menuButtonVariant} />
-      </Container>
+          <MobileMenu />
+          <DesktopMenu menuButtonVariant={menuButtonVariant} />
+        </Container>
+      </Box>
     </Root>
   )
 }

src/theme.ts

@@ -8,7 +8,7 @@ export const theme: DefaultTheme = {
     container: '1430px',
     containerHeader: '1600px',
     containerNarrow: '1140px',
-    headerHeight: [50, 65, 65],
+    headerHeight: [85, 90, 90],
   },
   space: Object.assign([], centrifugeLight.space, {
     layoutSmall: 80,