From cdc8d31d7452ea8374077a9902096f1414522ced Mon Sep 17 00:00:00 2001 From: sophian Date: Fri, 15 Sep 2023 15:45:39 -0400 Subject: [PATCH 1/3] Add annoucement banner --- config/links.ts | 1 + src/components/Banner.tsx | 23 +++++++++++++++++++++ src/components/header/index.tsx | 36 ++++++++++++++++++++++++--------- src/theme.ts | 2 +- 4 files changed, 52 insertions(+), 10 deletions(-) create mode 100644 src/components/Banner.tsx diff --git a/config/links.ts b/config/links.ts index 8f5e0e0e..34224d88 100644 --- a/config/links.ts +++ b/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', } diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx new file mode 100644 index 00000000..39e8320b --- /dev/null +++ b/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 ( + + {children} + + ) +} diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index 2829c385..52157cd8 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -1,5 +1,5 @@ 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' @@ -7,6 +7,8 @@ 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'} > - - - - + + + Centrifuge is Everywhere. Read the{' '} + + Announcement + + + + + + - - - + + + + ) } diff --git a/src/theme.ts b/src/theme.ts index 05c37a25..24680fb6 100644 --- a/src/theme.ts +++ b/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, From fae68a2fb2999cdb1ed91cace145bd44a567f7e9 Mon Sep 17 00:00:00 2001 From: sophian Date: Fri, 15 Sep 2023 16:58:55 -0400 Subject: [PATCH 2/3] 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' ? ( {children} - ) + ) : 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 ( - - - - Centrifuge is Everywhere. Read the{' '} - - Announcement - - - + + Centrifuge is Everywhere. Read the{' '} + - - - + Announcement + + + + + + + + - - - - - + + + + + + ) } 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, From 63942601b6b6084d3f5151c94d0fa52b257af854 Mon Sep 17 00:00:00 2001 From: sophian Date: Fri, 15 Sep 2023 16:59:36 -0400 Subject: [PATCH 3/3] Update env example --- .env.example | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.example b/.env.example index bc71d0e7..38863ee8 100644 --- a/.env.example +++ b/.env.example @@ -1,2 +1,2 @@ GATSBY_FUNCTIONS_URL= -SHOW_ANNOUNCEMENT_BANNER=show \ No newline at end of file +SHOW_ANNOUNCEMENT_BANNER=true \ No newline at end of file