From d93e1b5d4d628d6562fe7219275965b0de569693 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 15 Nov 2022 17:37:15 -0800 Subject: [PATCH 01/21] setup color palette from design system --- src/theme/foundations/colors.ts | 13 ++++++++++++- src/theme/index.ts | 15 +++++++++++++-- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts index 2fc5df88a2..a72fc5861a 100644 --- a/src/theme/foundations/colors.ts +++ b/src/theme/foundations/colors.ts @@ -8,7 +8,18 @@ export const colors = { }, green: { 50: '#d7f5ef', - 200: '#06fece' + 100: '#98FFEB', + 200: '#06fece', + 300: '#23EDC5', + 400: '#1FD3B0', + 500: '#2EBDA1', + 600: '#11866f', + 700: '#08715C', + 800: '#25453f', + 900: '#02211B' + }, + gray: { + 800: '#1d242c' }, yellow: { 50: '#f0f2e2' diff --git a/src/theme/index.ts b/src/theme/index.ts index 746344cbd2..04d88facfd 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -14,11 +14,22 @@ const overrides = { styles: { global: () => ({ body: { - bg: 'yellow.50' + bg: 'bg' } }) }, - textStyles + textStyles, + semanticTokens: { + colors: { + primary: { _light: 'green.600', _dark: 'green.200' }, + secondary: { _light: 'green.800', _dark: 'green.600' }, + 'button-bg': { _light: 'green.50', _dark: 'green.900' }, + body: { _light: 'gray.800', _dark: 'yellow.50' }, + 'code-bg': { _light: 'gray.200', _dark: 'gray.700' }, + 'code-bg-contrast': { _light: 'gray.800', _dark: 'gray.900' }, + bg: { _light: 'yellow.50', _dark: 'gray.800' } + } + } }; export default extendTheme(overrides); From e77c1507f5529c058e490850004823e10cbfdd7b Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 15 Nov 2022 17:50:02 -0800 Subject: [PATCH 02/21] fix hamburger spelling switch fill color to "currentColor" to allow using dark mode responsive "color" prop --- src/components/UI/Header.tsx | 6 +++--- .../UI/icons/{HamburguerIcon.tsx => HamburgerIcon.tsx} | 6 +++--- src/components/UI/icons/index.ts | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) rename src/components/UI/icons/{HamburguerIcon.tsx => HamburgerIcon.tsx} (76%) diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 300c38116f..4d38b9fd89 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -2,7 +2,7 @@ import { Box, Flex, Input, InputGroup, Link, Stack, Text } from '@chakra-ui/reac import { FC } from 'react'; import NextLink from 'next/link'; -import { HamburguerIcon, LensIcon, MoonIcon } from '../UI/icons'; +import { HamburgerIcon, LensIcon, MoonIcon } from '../UI/icons'; import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; export const Header: FC = () => { @@ -103,9 +103,9 @@ export const Header: FC = () => { - {/* HAMBURGUER MENU */} + {/* HAMBURGER MENU */} - + diff --git a/src/components/UI/icons/HamburguerIcon.tsx b/src/components/UI/icons/HamburgerIcon.tsx similarity index 76% rename from src/components/UI/icons/HamburguerIcon.tsx rename to src/components/UI/icons/HamburgerIcon.tsx index e352774f86..954b9f57c9 100644 --- a/src/components/UI/icons/HamburguerIcon.tsx +++ b/src/components/UI/icons/HamburgerIcon.tsx @@ -1,7 +1,7 @@ import { createIcon } from '@chakra-ui/icons'; -export const HamburguerIcon = createIcon({ - displayName: 'HamburguerIcon', +export const HamburgerIcon = createIcon({ + displayName: 'HamburgerIcon', viewBox: '0 0 22 14', path: ( @@ -9,7 +9,7 @@ export const HamburguerIcon = createIcon({ fillRule='evenodd' clipRule='evenodd' d='M0 .5h22v.97H0V.5Zm0 6.017h22v.97H0v-.97Zm22 6.013H0v.97h22v-.97Z' - fill='#11866F' + fill='currentColor' /> ) diff --git a/src/components/UI/icons/index.ts b/src/components/UI/icons/index.ts index 9759dcea9b..d7ecb2cde5 100644 --- a/src/components/UI/icons/index.ts +++ b/src/components/UI/icons/index.ts @@ -1,6 +1,6 @@ export * from './DiscordIcon' export * from './GitHubIcon' -export * from './HamburguerIcon'; +export * from './HamburgerIcon'; export * from './LensIcon'; export * from './MoonIcon'; export * from './TwitterIcon' From d43682359fcab3136fa7eb5f002a30c1ba5866f1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 15 Nov 2022 17:52:53 -0800 Subject: [PATCH 03/21] update icon svg colors to use currentColor enabled color-mode responsiveness with "color" prop --- src/components/UI/Header.tsx | 4 ++-- src/components/UI/icons/DiscordIcon.tsx | 2 +- src/components/UI/icons/GitHubIcon.tsx | 2 +- src/components/UI/icons/LensIcon.tsx | 2 +- src/components/UI/icons/MoonIcon.tsx | 2 +- src/components/UI/icons/TwitterIcon.tsx | 2 +- src/components/UI/icons/index.ts | 6 +++--- src/components/layouts/Footer.tsx | 21 ++++++--------------- 8 files changed, 16 insertions(+), 25 deletions(-) diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 4d38b9fd89..490951ca7b 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -90,7 +90,7 @@ export const Header: FC = () => { /> - + @@ -100,7 +100,7 @@ export const Header: FC = () => { p={4} borderRight={{ base: '2px solid #11866f', md: 'none' }} > - + {/* HAMBURGER MENU */} diff --git a/src/components/UI/icons/DiscordIcon.tsx b/src/components/UI/icons/DiscordIcon.tsx index cea1987697..1d075a0f8e 100644 --- a/src/components/UI/icons/DiscordIcon.tsx +++ b/src/components/UI/icons/DiscordIcon.tsx @@ -5,7 +5,7 @@ export const DiscordIcon = createIcon({ viewBox:"0 0 32 24", path: ( - + ) }); \ No newline at end of file diff --git a/src/components/UI/icons/GitHubIcon.tsx b/src/components/UI/icons/GitHubIcon.tsx index 42d2da8667..56ee5b64de 100644 --- a/src/components/UI/icons/GitHubIcon.tsx +++ b/src/components/UI/icons/GitHubIcon.tsx @@ -5,7 +5,7 @@ export const GitHubIcon = createIcon({ viewBox:"0 0 26 24", path: ( - + ) }); \ No newline at end of file diff --git a/src/components/UI/icons/LensIcon.tsx b/src/components/UI/icons/LensIcon.tsx index b38e00a37c..d13c13776d 100644 --- a/src/components/UI/icons/LensIcon.tsx +++ b/src/components/UI/icons/LensIcon.tsx @@ -7,7 +7,7 @@ export const LensIcon = createIcon({ ) diff --git a/src/components/UI/icons/MoonIcon.tsx b/src/components/UI/icons/MoonIcon.tsx index 75153bd354..aa5db596a5 100644 --- a/src/components/UI/icons/MoonIcon.tsx +++ b/src/components/UI/icons/MoonIcon.tsx @@ -7,7 +7,7 @@ export const MoonIcon = createIcon({ ) diff --git a/src/components/UI/icons/TwitterIcon.tsx b/src/components/UI/icons/TwitterIcon.tsx index c544ba6041..02ea41f45a 100644 --- a/src/components/UI/icons/TwitterIcon.tsx +++ b/src/components/UI/icons/TwitterIcon.tsx @@ -5,7 +5,7 @@ export const TwitterIcon = createIcon({ viewBox:"0 0 28 22", path: ( - + ) }); \ No newline at end of file diff --git a/src/components/UI/icons/index.ts b/src/components/UI/icons/index.ts index d7ecb2cde5..3ebd814f42 100644 --- a/src/components/UI/icons/index.ts +++ b/src/components/UI/icons/index.ts @@ -1,6 +1,6 @@ -export * from './DiscordIcon' -export * from './GitHubIcon' +export * from './DiscordIcon'; +export * from './GitHubIcon'; export * from './HamburgerIcon'; export * from './LensIcon'; export * from './MoonIcon'; -export * from './TwitterIcon' +export * from './TwitterIcon'; diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx index 2d88d6d638..a5b5ebe24b 100644 --- a/src/components/layouts/Footer.tsx +++ b/src/components/layouts/Footer.tsx @@ -99,11 +99,8 @@ export const Footer: FC = () => { @@ -126,11 +123,8 @@ export const Footer: FC = () => { @@ -150,11 +144,8 @@ export const Footer: FC = () => { From c71e2e2e2329b2907e5caa3a40863698f8dcb4f1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 15 Nov 2022 18:00:31 -0800 Subject: [PATCH 04/21] refactor colors to use semantic tokens --- src/components/MDXComponents.tsx | 5 +- src/components/UI/DataTable.tsx | 8 +-- src/components/UI/Header.tsx | 32 ++++++----- src/components/UI/downloads/DownloadsHero.tsx | 2 +- .../UI/downloads/DownloadsSection.tsx | 6 +-- .../UI/downloads/DownloadsTable.tsx | 10 ++-- src/components/UI/homepage/Gopher.tsx | 2 +- src/components/UI/homepage/HomeHero.tsx | 2 +- src/components/UI/homepage/HomeSection.tsx | 8 +-- src/components/UI/homepage/QuickLinks.tsx | 54 +++++++++---------- src/components/UI/homepage/WhatIsEthereum.tsx | 23 ++++---- src/components/UI/homepage/WhyRunANode.tsx | 18 ++++--- src/components/layouts/Footer.tsx | 32 +++++------ src/pages/downloads.tsx | 12 ++--- src/theme/components/Button.ts | 15 ++++-- src/theme/components/Link.ts | 26 ++++----- src/theme/foundations/colors.ts | 7 --- src/theme/foundations/textStyles.ts | 16 +++--- 18 files changed, 139 insertions(+), 139 deletions(-) diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx index 27b2e65aa8..bfc92fc18c 100644 --- a/src/components/MDXComponents.tsx +++ b/src/components/MDXComponents.tsx @@ -43,8 +43,7 @@ const MDXComponents = { {children} @@ -97,7 +96,7 @@ const MDXComponents = { // as={'span'} // padding='0.125em 0.25em' // color='red.300' - // background='#1c1e2d' + // background='code-bg-contrast' // borderRadius='0.25em' // fontFamily='code' // fontSize='sm' diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx index c94cbc2d4d..12fe2f9af6 100644 --- a/src/components/UI/DataTable.tsx +++ b/src/components/UI/DataTable.tsx @@ -12,11 +12,11 @@ export const DataTable: FC = ({ columnHeaders, data }) => { // Note: This wont work on firefox, we are ok with this. css={{ '&::-webkit-scrollbar': { - borderTop: '2px solid #11866f', + borderTop: '2px solid var(--chakra-colors-primary)', height: 18 }, '&::-webkit-scrollbar-thumb': { - background: '#11866f' + background: 'var(--chakra-colors-primary)' } }} pt={4} @@ -32,7 +32,7 @@ export const DataTable: FC = ({ columnHeaders, data }) => { fontFamily='"JetBrains Mono", monospace' fontWeight={700} fontSize='md' - color='#868b87' + color='#868b87' //? Use theme color? Or add to theme? > {columnHeader} @@ -48,7 +48,7 @@ export const DataTable: FC = ({ columnHeaders, data }) => { key={idx} // TODO: Get new background color from nuno for hover transition={'all 0.5s'} - _hover={{ background: 'green.50', transition: 'all 0.5s' }} + _hover={{ background: 'button-bg', transition: 'all 0.5s' }} > {columnHeaders.map((columnHeader, idx) => { // TODO: Make the font size smaller (refer to design system) diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 490951ca7b..47c92d811c 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -10,14 +10,15 @@ export const Header: FC = () => { @@ -34,14 +35,14 @@ export const Header: FC = () => { @@ -57,13 +58,14 @@ export const Header: FC = () => { @@ -79,14 +81,15 @@ export const Header: FC = () => { @@ -98,7 +101,8 @@ export const Header: FC = () => { {/* DARK MODE SWITCH */} diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 2c01270953..15e71a9571 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -29,7 +29,7 @@ export const DownloadsHero: FC = ({ DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL; return ( - + Gopher plugged in diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx index 365bb49411..9e0a8bb500 100644 --- a/src/components/UI/downloads/DownloadsSection.tsx +++ b/src/components/UI/downloads/DownloadsSection.tsx @@ -11,9 +11,9 @@ interface Props { export const DownloadsSection: FC = ({ children, imgSrc, imgAltText, sectionTitle, id }) => { return ( - + {!!imgSrc && ( - + {/* TODO: use NextImage */} {imgAltText} @@ -22,7 +22,7 @@ export const DownloadsSection: FC = ({ children, imgSrc, imgAltText, sect diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx index 7dd5e52aac..a8b69925d2 100644 --- a/src/components/UI/downloads/DownloadsTable.tsx +++ b/src/components/UI/downloads/DownloadsTable.tsx @@ -11,9 +11,9 @@ interface Props { export const DownloadsTable: FC = ({ data }) => { return ( - + - + {DOWNLOAD_TABS.map((tab, idx) => { return ( = ({ data }) => { w={'20%'} p={4} _selected={{ - bg: 'brand.light.primary', - color: 'yellow.50' + bg: 'primary', + color: 'bg' }} borderBottom='2px solid' borderRight={idx === DOWNLOAD_TABS.length - 1 ? 'none' : '2px solid'} - borderColor='brand.light.primary' + borderColor='primary' > {tab} diff --git a/src/components/UI/homepage/Gopher.tsx b/src/components/UI/homepage/Gopher.tsx index 1a4cb47e7e..788cfa1ece 100644 --- a/src/components/UI/homepage/Gopher.tsx +++ b/src/components/UI/homepage/Gopher.tsx @@ -8,7 +8,7 @@ export const Gopher: FC = () => { alignItems='center' p={4} border='2px solid' - borderColor='brand.light.primary' + borderColor='primary' h='100%' > Gopher greeting diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx index 600c6715de..dd7531d1d0 100644 --- a/src/components/UI/homepage/HomeHero.tsx +++ b/src/components/UI/homepage/HomeHero.tsx @@ -8,7 +8,7 @@ export const HomeHero: FC = () => { return ( = ({ children }) => { return ( - + {!!imgSrc && ( - + {/* TODO: use NextImage */} {imgAltText} @@ -31,7 +31,7 @@ export const HomeSection: FC = ({ @@ -43,7 +43,7 @@ export const HomeSection: FC = ({ p={4} spacing={4} borderBottom='2px solid' - borderColor='brand.light.primary' + borderColor='primary' sx={{ mt: '0 !important' }} h='100%' > diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx index bd7df05b9a..28e6d5e895 100644 --- a/src/components/UI/homepage/QuickLinks.tsx +++ b/src/components/UI/homepage/QuickLinks.tsx @@ -6,8 +6,8 @@ import { CONTRIBUTING_PAGE, DOCS_PAGE, FAQ_PAGE } from '../../../constants'; export const QuickLinks: FC = () => { return ( - - + + Quick Links @@ -21,7 +21,7 @@ export const QuickLinks: FC = () => { @@ -31,23 +31,23 @@ export const QuickLinks: FC = () => { We can help. - + { @@ -73,23 +73,23 @@ export const QuickLinks: FC = () => { Check the FAQ section in the documentation. - + { {/* how to contribute */} - + Want to know how to contribute? @@ -116,18 +116,18 @@ export const QuickLinks: FC = () => { = ({ children }) => { return ( - + @@ -30,12 +32,7 @@ export const WhatIsEthereum: FC = ({ children }) => { - + {children} @@ -45,8 +42,8 @@ export const WhatIsEthereum: FC = ({ children }) => { justifyContent='center' alignItems='center' p={4} - borderBottom={{ base: '2px solid', md: 'none' }} - borderColor='brand.light.primary' + borderBottom={{ base: '2px', md: 'none' }} + borderColor='primary' h='100%' > {/* TODO: use NextImage */} diff --git a/src/components/UI/homepage/WhyRunANode.tsx b/src/components/UI/homepage/WhyRunANode.tsx index f9cb05c75b..59e773a25b 100644 --- a/src/components/UI/homepage/WhyRunANode.tsx +++ b/src/components/UI/homepage/WhyRunANode.tsx @@ -10,16 +10,17 @@ interface Props { export const WhyRunANode: FC = ({ children }) => { return ( - + @@ -29,8 +30,8 @@ export const WhyRunANode: FC = ({ children }) => { {children} @@ -42,8 +43,9 @@ export const WhyRunANode: FC = ({ children }) => { justifyContent='center' alignItems='center' p={4} - borderBottom={{ base: '2px solid #11866f', md: 'none' }} - borderRight={{ base: 'none', md: '2px solid #11866f' }} + borderBottom={{ base: '2px', md: 'none' }} + borderRight={{ base: 'none', md: '2px' }} + borderColor='primary !important' h='100%' > {/* TODO: use NextImage */} diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx index a5b5ebe24b..01e3d64a65 100644 --- a/src/components/layouts/Footer.tsx +++ b/src/components/layouts/Footer.tsx @@ -26,7 +26,7 @@ export const Footer: FC = () => { direction={{ base: 'column', md: 'row'}} justifyContent={{md: 'space-between'}} border='2px solid' - borderColor='brand.light.primary' + borderColor='primary' > { base: '2px solid', md: 'none' }} - borderColor='brand.light.primary' + borderColor='primary' > @@ -57,17 +57,17 @@ export const Footer: FC = () => { @@ -87,9 +87,9 @@ export const Footer: FC = () => { md: '2px solid', lg: 'none' }} - borderColor='brand.light.primary !important' + borderColor='primary !important' _hover={{ - bg: 'brand.light.primary', + bg: 'primary', }} alignItems='center' p={4} @@ -110,12 +110,12 @@ export const Footer: FC = () => { data-group flex={1} _hover={{ - bg: 'brand.light.primary', + bg: 'primary', }} alignItems='center' borderWidth='2px' borderStyle='none solid' - borderColor='brand.light.primary' + borderColor='primary' p={4} > @@ -134,7 +134,7 @@ export const Footer: FC = () => { data-group flex={1} _hover={{ - bg: 'brand.light.primary', + bg: 'primary', }} alignItems='center' p={4} @@ -162,7 +162,7 @@ export const Footer: FC = () => { base: 'none solid solid solid', lg: 'solid solid solid none' }} - borderColor='brand.light.primary' + borderColor='primary' flex={1} > {`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`} diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx index c612af2d6c..e3eb8e941a 100644 --- a/src/pages/downloads.tsx +++ b/src/pages/downloads.tsx @@ -95,7 +95,7 @@ const DownloadsPage: NextPage = () => { - + These are the current and previous stable releases of go-ethereum, updated automatically when a new version is tagged in our{' '} @@ -124,7 +124,7 @@ const DownloadsPage: NextPage = () => { - + These are the develop snapshots of go-ethereum, updated automatically when a new commit is pushed into our{' '} @@ -153,14 +153,14 @@ const DownloadsPage: NextPage = () => { - + All the binaries available from this page are signed via our build server PGP keys: {/* TODO: swap for real data */} - + @@ -174,7 +174,7 @@ const DownloadsPage: NextPage = () => { - + You can import the build server public keys by grabbing the individual keys directly from the keyserver network: @@ -184,7 +184,7 @@ const DownloadsPage: NextPage = () => { gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC - + Similarly you can import all the developer public keys by grabbing them directly from the keyserver network: diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts index 5d953f46c0..69fc5c3183 100644 --- a/src/theme/components/Button.ts +++ b/src/theme/components/Button.ts @@ -5,13 +5,18 @@ export const Button = { px: '32px', borderRadius: 0, width: { base: '188px', md: 'auto' }, - bg: 'brand.light.primary', - _hover: { bg: 'brand.light.secondary' }, + bg: 'primary', + _hover: { bg: 'secondary' }, _focus: { - bg: 'brand.light.primary', - boxShadow: 'inset 0 0 0 2px #06fece !important' + bg: 'secondary', + boxShadow: 'inset 0 0 0 2px var(--chakra-colors-primary) !important' }, - _active: { borderTop: '4px solid', borderColor: 'green.200', pt: '4px' } + _active: { + bg: 'secondary', + borderTop: '4px', + borderColor: 'primary', + pt: '4px' + } } } }; diff --git a/src/theme/components/Link.ts b/src/theme/components/Link.ts index 295f82f5ff..7c70f4ce18 100644 --- a/src/theme/components/Link.ts +++ b/src/theme/components/Link.ts @@ -1,29 +1,29 @@ export const Link = { variants: { 'button-link-secondary': { - color: 'brand.light.primary', - bg: 'green.50', - _hover: { textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }, + color: 'primary', + bg: 'button-bg !important', + _hover: { textDecoration: 'none', bg: 'primary', color: 'bg' }, _focus: { textDecoration: 'none', - bg: 'brand.light.primary', - color: 'yellow.50', - boxShadow: 'inset 0 0 0 3px #f0f2e2 !important' + bg: 'primary', + color: 'bg', + boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important' }, - _active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' } + _active: { textDecoration: 'none', bg: 'secondary', color: 'bg' } }, light: { textDecoration: 'underline', - color: 'brand.light.primary', - _hover: { color: 'brand.light.body', textDecorationColor: 'brand.light.body' }, + color: 'primary', + _hover: { color: 'body', textDecorationColor: 'body' }, _focus: { - color: 'brand.light.primary', - boxShadow: '0 0 0 1px #11866f !important', + color: 'primary', + boxShadow: '0 0 0 1px var(--chakra-colors-primary) !important', textDecoration: 'none' }, _pressed: { - color: 'brand.light.secondary', - textDecorationColor: 'brand.light.secondary' + color: 'secondary', + textDecorationColor: 'secondary' } } } diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts index a72fc5861a..ed3fef3533 100644 --- a/src/theme/foundations/colors.ts +++ b/src/theme/foundations/colors.ts @@ -1,11 +1,4 @@ export const colors = { - brand: { - light: { - primary: '#11866f', - secondary: '#25453f', - body: '#1d242c' - } - }, green: { 50: '#d7f5ef', 100: '#98FFEB', diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index df3252d467..38b9386ac2 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -5,7 +5,7 @@ export const textStyles = { fontSize: '2.75rem', lineHeight: '3.375rem', letterSpacing: '5%', - color: 'brand.light.body' + color: 'body' }, h2: { fontFamily: '"JetBrains Mono", monospace', @@ -13,7 +13,7 @@ export const textStyles = { fontSize: '1.5rem', lineHeight: 'auto', letterSpacing: '4%', - color: 'brand.light.body' + color: 'body' }, 'header-font': { fontFamily: '"JetBrains Mono", monospace', @@ -29,7 +29,7 @@ export const textStyles = { }, 'homepage-primary-label': { fontFamily: '"JetBrains Mono", monospace', - color: 'yellow.50', + color: 'bg', fontWeight: 700, textTransform: 'uppercase' }, @@ -49,10 +49,10 @@ export const textStyles = { fontWeight: 700, textTransform: 'uppercase', textAlign: 'center', - color: 'brand.light.primary', - _groupHover: { color: 'yellow.50' }, - _groupActive: { color: 'yellow.50' }, - _groupFocus: { color: 'yellow.50' } + color: 'primary', + _groupHover: { color: 'bg' }, + _groupActive: { color: 'bg' }, + _groupFocus: { color: 'bg' } }, 'hero-text-small': { fontSize: '13px', @@ -66,7 +66,7 @@ export const textStyles = { }, 'downloads-button-label': { fontFamily: '"JetBrains Mono", monospace', - color: 'yellow.50', + color: 'bg', fontSize: 'xs', textTransform: 'uppercase' }, From fe4014c03c2beda235e7d85e84f450ec5db46950 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 15 Nov 2022 18:00:50 -0800 Subject: [PATCH 05/21] enable light/dark mode toggle button --- src/components/UI/Header.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index 47c92d811c..e0e435f266 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -1,4 +1,4 @@ -import { Box, Flex, Input, InputGroup, Link, Stack, Text } from '@chakra-ui/react'; +import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@chakra-ui/react'; import { FC } from 'react'; import NextLink from 'next/link'; @@ -6,6 +6,7 @@ import { HamburgerIcon, LensIcon, MoonIcon } from '../UI/icons'; import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; export const Header: FC = () => { + const { toggleColorMode } = useColorMode(); return ( { {/* DARK MODE SWITCH */} From 384ecd0248cc58c954f785d00e117b5d2babeb21 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 15 Nov 2022 20:55:48 -0800 Subject: [PATCH 06/21] add sun icon when in dark mode --- src/components/UI/Header.tsx | 7 ++++--- src/components/UI/icons/SunIcon.tsx | 19 +++++++++++++++++++ src/components/UI/icons/index.ts | 1 + 3 files changed, 24 insertions(+), 3 deletions(-) create mode 100644 src/components/UI/icons/SunIcon.tsx diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx index e0e435f266..b8bc168946 100644 --- a/src/components/UI/Header.tsx +++ b/src/components/UI/Header.tsx @@ -2,11 +2,12 @@ import { Box, Flex, Input, InputGroup, Link, Stack, Text, useColorMode } from '@ import { FC } from 'react'; import NextLink from 'next/link'; -import { HamburgerIcon, LensIcon, MoonIcon } from '../UI/icons'; +import { HamburgerIcon, LensIcon, MoonIcon, SunIcon } from '../UI/icons'; import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; export const Header: FC = () => { - const { toggleColorMode } = useColorMode(); + const { colorMode, toggleColorMode } = useColorMode(); + const isDark = colorMode === 'dark'; return ( { borderColor='primary' onClick={toggleColorMode} > - + {isDark ? : } {/* HAMBURGER MENU */} diff --git a/src/components/UI/icons/SunIcon.tsx b/src/components/UI/icons/SunIcon.tsx new file mode 100644 index 0000000000..d866d86daf --- /dev/null +++ b/src/components/UI/icons/SunIcon.tsx @@ -0,0 +1,19 @@ +import { createIcon } from '@chakra-ui/icons'; + +export const SunIcon = createIcon({ + displayName: 'SunIcon', + viewBox: '0 0 44 44', + path: ( + + + + + + + + + + + + ) +}); diff --git a/src/components/UI/icons/index.ts b/src/components/UI/icons/index.ts index 3ebd814f42..5bbac7fd7a 100644 --- a/src/components/UI/icons/index.ts +++ b/src/components/UI/icons/index.ts @@ -3,4 +3,5 @@ export * from './GitHubIcon'; export * from './HamburgerIcon'; export * from './LensIcon'; export * from './MoonIcon'; +export * from './SunIcon'; export * from './TwitterIcon'; From 483a82225194bf6356cf9dd711f15d907a4b32d1 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 16 Nov 2022 12:11:17 -0800 Subject: [PATCH 07/21] build homepage svg components --- src/components/UI/svgs/GlyphHome.tsx | 21 + src/components/UI/svgs/GopherHomeFront.tsx | 466 +++++++++++++++++++++ src/components/UI/svgs/GopherHomeLinks.tsx | 430 +++++++++++++++++++ src/components/UI/svgs/GopherHomeNodes.tsx | 311 ++++++++++++++ src/components/UI/svgs/index.ts | 4 + 5 files changed, 1232 insertions(+) create mode 100644 src/components/UI/svgs/GlyphHome.tsx create mode 100644 src/components/UI/svgs/GopherHomeFront.tsx create mode 100644 src/components/UI/svgs/GopherHomeLinks.tsx create mode 100644 src/components/UI/svgs/GopherHomeNodes.tsx create mode 100644 src/components/UI/svgs/index.ts diff --git a/src/components/UI/svgs/GlyphHome.tsx b/src/components/UI/svgs/GlyphHome.tsx new file mode 100644 index 0000000000..6abf1fbe1f --- /dev/null +++ b/src/components/UI/svgs/GlyphHome.tsx @@ -0,0 +1,21 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [180, 278]; + +const Icon = createIcon({ + displayName: 'GlyphHome', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + + + + + + ) +}); + +export const GlyphHome: React.FC = (props) => ; diff --git a/src/components/UI/svgs/GopherHomeFront.tsx b/src/components/UI/svgs/GopherHomeFront.tsx new file mode 100644 index 0000000000..6695320581 --- /dev/null +++ b/src/components/UI/svgs/GopherHomeFront.tsx @@ -0,0 +1,466 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [144, 272]; + +const Icon = createIcon({ + displayName: 'GopherHomeFront', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +}); + +export const GopherHomeFront: React.FC = (props) => ; diff --git a/src/components/UI/svgs/GopherHomeLinks.tsx b/src/components/UI/svgs/GopherHomeLinks.tsx new file mode 100644 index 0000000000..0660ea53b2 --- /dev/null +++ b/src/components/UI/svgs/GopherHomeLinks.tsx @@ -0,0 +1,430 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [164, 252]; + +const Icon = createIcon({ + displayName: 'GopherHomeLinks', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +}); + +export const GopherHomeLinks: React.FC = (props) => ; \ No newline at end of file diff --git a/src/components/UI/svgs/GopherHomeNodes.tsx b/src/components/UI/svgs/GopherHomeNodes.tsx new file mode 100644 index 0000000000..17f798a13b --- /dev/null +++ b/src/components/UI/svgs/GopherHomeNodes.tsx @@ -0,0 +1,311 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [214, 243]; + +const Icon = createIcon({ + displayName: 'GopherHomeNodes', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +}); + +export const GopherHomeNodes: React.FC = (props) => ; \ No newline at end of file diff --git a/src/components/UI/svgs/index.ts b/src/components/UI/svgs/index.ts new file mode 100644 index 0000000000..51437dfe18 --- /dev/null +++ b/src/components/UI/svgs/index.ts @@ -0,0 +1,4 @@ +export * from './GlyphHome'; +export * from './GopherHomeFront'; +export * from './GopherHomeLinks'; +export * from './GopherHomeNodes'; From 0bbb61cfb2193cebb8431aed4e4f92dbe142547d Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 16 Nov 2022 12:14:48 -0800 Subject: [PATCH 08/21] replace homepage images with SVG components allows color of SVGs to be dynamically styled based on color mode choice --- public/images/pages/glyph-home-light.svg | 8 - public/images/pages/gopher-home-front.svg | 453 ------------------ public/images/pages/gopher-home-nodes.svg | 298 ------------ .../images/pages/gopher-home-side-mobile.svg | 9 - src/components/UI/homepage/Gopher.tsx | 17 - src/components/UI/homepage/HomeSection.tsx | 10 +- src/components/UI/homepage/WhatIsEthereum.tsx | 6 +- src/components/UI/homepage/WhyRunANode.tsx | 4 +- src/components/UI/homepage/index.ts | 1 - src/pages/index.tsx | 16 +- 10 files changed, 24 insertions(+), 798 deletions(-) delete mode 100644 public/images/pages/glyph-home-light.svg delete mode 100644 public/images/pages/gopher-home-front.svg delete mode 100644 public/images/pages/gopher-home-nodes.svg delete mode 100644 public/images/pages/gopher-home-side-mobile.svg delete mode 100644 src/components/UI/homepage/Gopher.tsx diff --git a/public/images/pages/glyph-home-light.svg b/public/images/pages/glyph-home-light.svg deleted file mode 100644 index 36fed55efc..0000000000 --- a/public/images/pages/glyph-home-light.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/public/images/pages/gopher-home-front.svg b/public/images/pages/gopher-home-front.svg deleted file mode 100644 index 5729375b7d..0000000000 --- a/public/images/pages/gopher-home-front.svg +++ /dev/null @@ -1,453 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/pages/gopher-home-nodes.svg b/public/images/pages/gopher-home-nodes.svg deleted file mode 100644 index 6c412aa7d1..0000000000 --- a/public/images/pages/gopher-home-nodes.svg +++ /dev/null @@ -1,298 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/pages/gopher-home-side-mobile.svg b/public/images/pages/gopher-home-side-mobile.svg deleted file mode 100644 index a4bfbbd93c..0000000000 --- a/public/images/pages/gopher-home-side-mobile.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/components/UI/homepage/Gopher.tsx b/src/components/UI/homepage/Gopher.tsx deleted file mode 100644 index 788cfa1ece..0000000000 --- a/src/components/UI/homepage/Gopher.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { Image, Stack } from '@chakra-ui/react'; -import { FC } from 'react'; - -export const Gopher: FC = () => { - return ( - - Gopher greeting - - ); -}; diff --git a/src/components/UI/homepage/HomeSection.tsx b/src/components/UI/homepage/HomeSection.tsx index 10c8d6e623..38a6544196 100644 --- a/src/components/UI/homepage/HomeSection.tsx +++ b/src/components/UI/homepage/HomeSection.tsx @@ -2,6 +2,8 @@ import { Box, Image, Link, Stack, Text } from '@chakra-ui/react'; import { FC } from 'react'; import NextLink from 'next/link'; +import { GopherHomeFront } from '../svgs/'; + interface Props { imgSrc?: string; imgAltText?: string; @@ -9,6 +11,7 @@ interface Props { linkLabel: string; buttonHref: string; children?: React.ReactNode; + showGopher?: boolean; } export const HomeSection: FC = ({ @@ -17,17 +20,18 @@ export const HomeSection: FC = ({ sectionTitle, linkLabel, buttonHref, + showGopher, children }) => { return ( - {!!imgSrc && ( + {imgSrc || showGopher && ( {/* TODO: use NextImage */} - {imgAltText} + {imgSrc && {imgAltText}} + {showGopher && } )} - = ({ children }) => { borderColor='primary' h='100%' > - {/* TODO: use NextImage */} - Ethereum glyph + diff --git a/src/components/UI/homepage/WhyRunANode.tsx b/src/components/UI/homepage/WhyRunANode.tsx index 59e773a25b..5bbfad5101 100644 --- a/src/components/UI/homepage/WhyRunANode.tsx +++ b/src/components/UI/homepage/WhyRunANode.tsx @@ -2,6 +2,7 @@ import { Box, Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react' import { FC } from 'react'; import NextLink from 'next/link'; +import { GopherHomeNodes } from '../svgs/GopherHomeNodes'; import { ETHEREUM_ORG_RUN_A_NODE_URL } from '../../../constants'; interface Props { @@ -48,8 +49,7 @@ export const WhyRunANode: FC = ({ children }) => { borderColor='primary !important' h='100%' > - {/* TODO: use NextImage */} - Gopher staring at nodes + diff --git a/src/components/UI/homepage/index.ts b/src/components/UI/homepage/index.ts index 95f8371b8c..278ac8a77a 100644 --- a/src/components/UI/homepage/index.ts +++ b/src/components/UI/homepage/index.ts @@ -1,4 +1,3 @@ -export * from './Gopher'; export * from './HomeHero'; export * from './HomeSection'; export * from './WhatIsEthereum'; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c95046c86c..9aed48222a 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,13 +2,13 @@ import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react'; import type { NextPage } from 'next'; import { - Gopher, HomeHero, HomeSection, QuickLinks, WhatIsEthereum, WhyRunANode } from '../components/UI/homepage'; +import { GopherHomeLinks } from '../components/UI/svgs'; import { CONTRIBUTING_PAGE, @@ -32,11 +32,10 @@ const HomePage: NextPage = ({}) => { {/* SECTION: What is Geth */} Geth (go-ethereum) is a{' '} @@ -142,7 +141,16 @@ const HomePage: NextPage = ({}) => { {/* TODO: replace with animated/video version */} - + + + From 980255ebcf0efacbe4e33482c84e75e4977ad1e3 Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 16 Nov 2022 12:57:49 -0800 Subject: [PATCH 09/21] build downloads svg components --- src/components/UI/icons/LinuxPenguin.tsx | 16 + src/components/UI/icons/MacosLogo.tsx | 16 + src/components/UI/icons/SourceBranch.tsx | 16 + src/components/UI/icons/WindowsLogo.tsx | 16 + src/components/UI/icons/index.ts | 4 + src/components/UI/svgs/GopherDownloads.tsx | 503 +++++++++++++++++++++ src/components/UI/svgs/index.ts | 1 + 7 files changed, 572 insertions(+) create mode 100644 src/components/UI/icons/LinuxPenguin.tsx create mode 100644 src/components/UI/icons/MacosLogo.tsx create mode 100644 src/components/UI/icons/SourceBranch.tsx create mode 100644 src/components/UI/icons/WindowsLogo.tsx create mode 100644 src/components/UI/svgs/GopherDownloads.tsx diff --git a/src/components/UI/icons/LinuxPenguin.tsx b/src/components/UI/icons/LinuxPenguin.tsx new file mode 100644 index 0000000000..338d18b220 --- /dev/null +++ b/src/components/UI/icons/LinuxPenguin.tsx @@ -0,0 +1,16 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [27, 36]; + +const Icon = createIcon({ + displayName: 'LinuxPenguin', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + ) +}); + +export const LinuxPenguin: React.FC = (props) => ; // #F0F2E2 diff --git a/src/components/UI/icons/MacosLogo.tsx b/src/components/UI/icons/MacosLogo.tsx new file mode 100644 index 0000000000..d5f892674d --- /dev/null +++ b/src/components/UI/icons/MacosLogo.tsx @@ -0,0 +1,16 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [25, 30]; + +const Icon = createIcon({ + displayName: 'MacosLogo', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + ) +}); + +export const MacosLogo: React.FC = (props) => ; // #F0F2E2 diff --git a/src/components/UI/icons/SourceBranch.tsx b/src/components/UI/icons/SourceBranch.tsx new file mode 100644 index 0000000000..9ce89fb5f2 --- /dev/null +++ b/src/components/UI/icons/SourceBranch.tsx @@ -0,0 +1,16 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [22, 30]; + +const Icon = createIcon({ + displayName: 'SourceBranch', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + ) +}); + +export const SourceBranch: React.FC = (props) => ; // #F0F2E2 diff --git a/src/components/UI/icons/WindowsLogo.tsx b/src/components/UI/icons/WindowsLogo.tsx new file mode 100644 index 0000000000..4a38f2cde4 --- /dev/null +++ b/src/components/UI/icons/WindowsLogo.tsx @@ -0,0 +1,16 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [25, 24]; + +const Icon = createIcon({ + displayName: 'WindowsLogo', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + ) +}); + +export const WindowsLogo: React.FC = (props) => ; // #F0F2E2 diff --git a/src/components/UI/icons/index.ts b/src/components/UI/icons/index.ts index 5bbac7fd7a..c46214e12a 100644 --- a/src/components/UI/icons/index.ts +++ b/src/components/UI/icons/index.ts @@ -5,3 +5,7 @@ export * from './LensIcon'; export * from './MoonIcon'; export * from './SunIcon'; export * from './TwitterIcon'; +export * from './SourceBranch'; +export * from './MacosLogo'; +export * from './LinuxPenguin'; +export * from './WindowsLogo'; diff --git a/src/components/UI/svgs/GopherDownloads.tsx b/src/components/UI/svgs/GopherDownloads.tsx new file mode 100644 index 0000000000..56a86936db --- /dev/null +++ b/src/components/UI/svgs/GopherDownloads.tsx @@ -0,0 +1,503 @@ +import { IconProps } from '@chakra-ui/react'; +import { createIcon } from '@chakra-ui/icons'; + +const [w, h] = [276, 268]; + +const Icon = createIcon({ + displayName: 'GopherDownloads', + viewBox: `0 0 ${w} ${h}`, + path: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +}); + +export const GopherDownloads: React.FC = (props) => ; diff --git a/src/components/UI/svgs/index.ts b/src/components/UI/svgs/index.ts index 51437dfe18..c1a85f7e2c 100644 --- a/src/components/UI/svgs/index.ts +++ b/src/components/UI/svgs/index.ts @@ -1,4 +1,5 @@ export * from './GlyphHome'; +export * from './GopherDownloads'; export * from './GopherHomeFront'; export * from './GopherHomeLinks'; export * from './GopherHomeNodes'; From d791e0a1a330ee477832e3e66c2353f6a63a4d9c Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Wed, 16 Nov 2022 12:59:39 -0800 Subject: [PATCH 10/21] replace downloads images with SVG components --- .../pages/gopher-downloads-front-light.svg | 9 - .../images/pages/gopher-home-side-desktop.svg | 417 ------------------ public/images/pages/linux-penguin.svg | 3 - public/images/pages/macos-logo.svg | 3 - public/images/pages/source-branch.svg | 3 - public/images/pages/windows-logo.svg | 3 - src/components/UI/downloads/DownloadsHero.tsx | 16 +- .../UI/downloads/DownloadsSection.tsx | 9 +- src/constants.ts | 27 +- src/pages/downloads.tsx | 3 +- 10 files changed, 33 insertions(+), 460 deletions(-) delete mode 100644 public/images/pages/gopher-downloads-front-light.svg delete mode 100644 public/images/pages/gopher-home-side-desktop.svg delete mode 100644 public/images/pages/linux-penguin.svg delete mode 100644 public/images/pages/macos-logo.svg delete mode 100644 public/images/pages/source-branch.svg delete mode 100644 public/images/pages/windows-logo.svg diff --git a/public/images/pages/gopher-downloads-front-light.svg b/public/images/pages/gopher-downloads-front-light.svg deleted file mode 100644 index 41c2984306..0000000000 --- a/public/images/pages/gopher-downloads-front-light.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/public/images/pages/gopher-home-side-desktop.svg b/public/images/pages/gopher-home-side-desktop.svg deleted file mode 100644 index e823d8927b..0000000000 --- a/public/images/pages/gopher-home-side-desktop.svg +++ /dev/null @@ -1,417 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/pages/linux-penguin.svg b/public/images/pages/linux-penguin.svg deleted file mode 100644 index f66b859b43..0000000000 --- a/public/images/pages/linux-penguin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/pages/macos-logo.svg b/public/images/pages/macos-logo.svg deleted file mode 100644 index 6c6180ff5e..0000000000 --- a/public/images/pages/macos-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/pages/source-branch.svg b/public/images/pages/source-branch.svg deleted file mode 100644 index 0ae94f6e20..0000000000 --- a/public/images/pages/source-branch.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/public/images/pages/windows-logo.svg b/public/images/pages/windows-logo.svg deleted file mode 100644 index 13729fe7ff..0000000000 --- a/public/images/pages/windows-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 15e71a9571..487dea11c1 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -1,7 +1,9 @@ -import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react'; +import { Box, Button, Link, Stack, HStack, Text } from '@chakra-ui/react'; import { FC } from 'react'; import NextLink from 'next/link'; +import { GopherDownloads } from '../svgs' + import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants'; interface DownloadsHero { @@ -31,7 +33,7 @@ export const DownloadsHero: FC = ({ return ( - Gopher plugged in + @@ -56,19 +58,17 @@ export const DownloadsHero: FC = ({ {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { + const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key]; return ( - +