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: (
)
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 (
-
+
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 */}
@@ -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%'
>
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 */}
@@ -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 (
-
-
-
- );
-};
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 */}
-
+ {imgSrc && }
+ {showGopher && }
)}
-
= ({ children }) => {
borderColor='primary'
h='100%'
>
- {/* TODO: use NextImage */}
-
+
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 */}
-
+
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 (
-
+
@@ -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 (
-
+
-
-
-
- Learn more on Ethereum.org
-
-
-
+ Learn more on Ethereum.org
);
};
diff --git a/src/components/UI/homepage/WhyRunANode.tsx b/src/components/UI/homepage/WhyRunANode.tsx
index 5bbfad5101..bed89b8eec 100644
--- a/src/components/UI/homepage/WhyRunANode.tsx
+++ b/src/components/UI/homepage/WhyRunANode.tsx
@@ -1,7 +1,7 @@
-import { Box, Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Grid, GridItem, Stack } from '@chakra-ui/react';
import { FC } from 'react';
-import NextLink from 'next/link';
+import { ButtonLinkSecondary } from '..'
import { GopherHomeNodes } from '../svgs/GopherHomeNodes';
import { ETHEREUM_ORG_RUN_A_NODE_URL } from '../../../constants';
@@ -18,12 +18,7 @@ export const WhyRunANode: FC = ({ children }) => {
borderColor='primary !important'
>
-
+
Why run a node?
@@ -54,13 +49,9 @@ export const WhyRunANode: FC = ({ children }) => {
-
-
-
- Read more about running a node
-
-
-
+
+ Read more about running a node
+
);
};
diff --git a/src/theme/components/Link.ts b/src/theme/components/Link.ts
index 7c70f4ce18..ca8aaf93c1 100644
--- a/src/theme/components/Link.ts
+++ b/src/theme/components/Link.ts
@@ -2,13 +2,13 @@ export const Link = {
variants: {
'button-link-secondary': {
color: 'primary',
- bg: 'button-bg !important',
+ bg: 'button-bg',
_hover: { textDecoration: 'none', bg: 'primary', color: 'bg' },
_focus: {
textDecoration: 'none',
bg: 'primary',
color: 'bg',
- boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important'
+ boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg)'
},
_active: { textDecoration: 'none', bg: 'secondary', color: 'bg' }
},
@@ -18,7 +18,7 @@ export const Link = {
_hover: { color: 'body', textDecorationColor: 'body' },
_focus: {
color: 'primary',
- boxShadow: '0 0 0 1px var(--chakra-colors-primary) !important',
+ boxShadow: '0 0 0 1px var(--chakra-colors-primary)',
textDecoration: 'none'
},
_pressed: {
From 4e25c6bf94d75cae6d6920419ecc1cb45bc4684d Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 16 Nov 2022 15:06:56 -0800
Subject: [PATCH 15/21] linting
---
src/components/UI/Header.tsx | 15 ++----
src/components/UI/downloads/DownloadsHero.tsx | 10 ++--
src/components/UI/icons/LinuxPenguin.tsx | 11 +++--
src/components/UI/icons/MacosLogo.tsx | 9 ++--
src/components/UI/icons/SourceBranch.tsx | 11 +++--
src/components/UI/icons/TwitterIcon.tsx | 11 +++--
src/components/UI/icons/WindowsLogo.tsx | 9 ++--
src/components/layouts/Footer.tsx | 48 +++++--------------
src/pages/downloads.tsx | 4 +-
9 files changed, 58 insertions(+), 70 deletions(-)
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index b8bc168946..78bd77f3be 100644
--- a/src/components/UI/Header.tsx
+++ b/src/components/UI/Header.tsx
@@ -9,12 +9,7 @@ export const Header: FC = () => {
const { colorMode, toggleColorMode } = useColorMode();
const isDark = colorMode === 'dark';
return (
-
+
{
>
-
- go-ethereum
-
+ go-ethereum
@@ -108,12 +101,12 @@ export const Header: FC = () => {
borderColor='primary'
onClick={toggleColorMode}
>
- {isDark ? : }
+ {isDark ? : }
{/* HAMBURGER MENU */}
-
+
diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 487dea11c1..1ca47587be 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -2,7 +2,7 @@ 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 { GopherDownloads } from '../svgs';
import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants';
@@ -33,7 +33,7 @@ export const DownloadsHero: FC = ({
return (
-
+
@@ -58,7 +58,7 @@ export const DownloadsHero: FC = ({
{Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
- const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
+ const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
return (
-
- For {name}
-
+ For {name}
geth {currentBuildName}
diff --git a/src/components/UI/icons/LinuxPenguin.tsx b/src/components/UI/icons/LinuxPenguin.tsx
index 338d18b220..377fb62376 100644
--- a/src/components/UI/icons/LinuxPenguin.tsx
+++ b/src/components/UI/icons/LinuxPenguin.tsx
@@ -7,10 +7,15 @@ const Icon = createIcon({
displayName: 'LinuxPenguin',
viewBox: `0 0 ${w} ${h}`,
path: (
-