tornadocontrib/go-ethereum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor to use theme

Browse Source
This commit is contained in:
Corwin Smith 2022-10-08 09:53:09 -06:00
parent 09e1688ea9
commit 53420ede87
7 changed files with 103 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/components/UI/downloads/DownloadsHero.tsx
View File

@ -1,4 +1,4 @@
import { Box, Button, Heading, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
@ -28,17 +28,12 @@ export const DownloadsHero: FC<DownloadsHero> = ({
</Box>
<Box mb={4}>
<Heading
as='h1' // TODO: move text style to theme
fontFamily='"JetBrains Mono", monospace'
fontWeight={700}
fontSize='2.75rem'
lineHeight='3.375rem'
letterSpacing='5%'
color='brand.light.body'
<Box
as='h1'
textStyle='h1'
>
Download go-ethereum
</Heading>
</Box>
<Text
// TODO: move text style to theme
@ -49,26 +44,16 @@ export const DownloadsHero: FC<DownloadsHero> = ({
{currentBuildName} ({currentBuildVersion})
</Text>
<Text
mb={4}
>
<Text mb={4}>
You can download the latest 64-bit stable release of Geth for our primary platforms below. Packages for all supported platforms, as well as develop builds, can be found further down the page. If you&apos;re looking to install Geth and/or associated tools via your favorite package manager, please check our installation guide.
</Text>
<NextLink href={linuxBuildURL} passHref>
<Button
as='a'
p={8}
borderRadius={0}
variant='primary'
width={{ base: '100%' }}
// TODO: move to theme colors
bg='brand.light.primary'
_hover={{ bg: 'brand.light.secondary' }}
_focus={{
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
}}
_active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
p={8}
mb={4}
>
<HStack spacing={4}>
@ -76,22 +61,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Image m={'auto'} src='/images/pages/linux-penguin.svg' alt='Gopher greeting' />
</Box>
<Box>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
<Text textStyle='downloads-button-label'>
For linux
</Text>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontSize='xs'
textTransform='uppercase'
>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
@ -102,17 +75,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<NextLink href={macOSBuildURL} passHref>
<Button
as='a'
p={8}
borderRadius={0}
variant='primary'
width={{ base: '100%' }}
// TODO: move to theme colors
bg='brand.light.primary'
_hover={{ bg: 'brand.light.secondary' }}
_focus={{
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
}}
_active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
p={8}
mb={4}
>
<HStack spacing={4}>
@ -120,22 +85,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Image m={'auto'} src='/images/pages/macos-logo.svg' alt='Gopher greeting' />
</Box>
<Box>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
<Text textStyle='downloads-button-label'>
For macos
</Text>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontSize='xs'
textTransform='uppercase'
>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
@ -146,17 +99,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<NextLink href={windowsBuildURL} passHref>
<Button
as='a'
p={8}
borderRadius={0}
variant='primary'
width={{ base: '100%' }}
// TODO: move to theme colors
bg='brand.light.primary'
_hover={{ bg: 'brand.light.secondary' }}
_focus={{
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
}}
_active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
p={8}
mb={4}
>
<HStack spacing={4}>
@ -164,22 +109,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Image m={'auto'} src='/images/pages/windows-logo.svg' alt='Gopher greeting' />
</Box>
<Box>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
<Text textStyle='downloads-button-label'>
For windows
</Text>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontSize='xs'
textTransform='uppercase'
>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
@ -190,17 +123,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<NextLink href={sourceCodeURL} passHref>
<Button
as='a'
p={8}
borderRadius={0}
variant='primary'
width={{ base: '100%' }}
// TODO: move to theme colors
bg='brand.light.primary'
_hover={{ bg: 'brand.light.secondary' }}
_focus={{
bg: 'brand.light.primary',
boxShadow: 'inset 0 0 0 2px #06fece !important'
}}
_active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
p={8}
mb={4}
>
<HStack spacing={4}>
@ -208,22 +133,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Image m={'auto'} src='/images/pages/source-branch.svg' alt='Gopher greeting' />
</Box>
<Box>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>
<Text textStyle='downloads-button-label'>
Sources
</Text>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontSize='xs'
textTransform='uppercase'
>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
@ -235,14 +148,14 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Link
href={releaseNotesURL}
isExternal
color='#11866f'
_hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: '#11866f',
boxShadow: '0 0 0 1px #11866f !important',
color: 'brand.light.primary',
boxShadow: 'linkBoxShadow',
textDecoration: 'none'
}}
_pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
_pressed={{ color: 'brand.light.secondary', textDecorationColor: 'brand.light.secondary' }}
>
Release notes for {currentBuildName} {currentBuildVersion}
</Link>

25
src/components/UI/downloads/DownloadsSection.tsx
View File

@ -1,4 +1,4 @@
import { Heading, Image, Stack } from '@chakra-ui/react';
import { Box, Image, Stack } from '@chakra-ui/react';
import { FC } from 'react';
interface Props {
@ -15,28 +15,23 @@ export const DownloadsSection: FC<Props> = ({
sectionTitle,
}) => {
return (
<Stack border='2px solid #11866F'>
<Stack border='2px solid' borderColor='brand.light.primary'>
{!!imgSrc && (
<Stack alignItems='center' p={4} borderBottom='2px solid #11866f'>
<Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
{/* TODO: use NextImage */}
<Image src={imgSrc} alt={imgAltText} />
</Stack>
)}
<Stack p={4} borderBottom='2px solid #11866f' sx={{ mt: '0 !important' }}>
<Heading
// TODO: move text style to theme
as='h2'
fontFamily='"JetBrains Mono", monospace'
fontWeight={400}
fontSize='1.5rem'
lineHeight='auto'
letterSpacing='4%'
// TODO: move to theme colors
color='#1d242c'
<Stack
p={4}
borderBottom='2px solid'
borderColor='brand.light.primary'
sx={{ mt: '0 !important' }}
>
<Box as='h2' textStyle='h2'>
{sectionTitle}
</Heading>
</Box>
</Stack>
<Stack spacing={4}>

88
src/components/UI/downloads/DownloadsTable.tsx
View File

@ -22,27 +22,21 @@ export const DownloadsTable: FC<Props> = ({
<Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'>
<Tabs variant='unstyled'>
<TabList
color='#11866f'
bg='#d7f5ef'
borderBottom='2px solid #11866f'
color='brand.light.primary'
bg='green.50'
>
<Tab
w={'20%'}
p={4}
_selected={{
bg: '#11866f',
color: '#f0f2e2',
bg: 'brand.light.primary',
color: 'yellow.50',
}}
borderRight='2px solid #11866f'
>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Text textStyle='download-tab-label'>
LINUX
</Text>
</Tab>
@ -50,19 +44,14 @@ export const DownloadsTable: FC<Props> = ({
w={'20%'}
p={4}
_selected={{
bg: '#11866f',
color: '#f0f2e2',
bg: 'brand.light.primary',
color: 'yellow.50',
}}
borderRight='2px solid #11866f'
>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Text textStyle='download-tab-label'>
MACOS
</Text>
</Tab>
@ -70,19 +59,14 @@ export const DownloadsTable: FC<Props> = ({
w={'20%'}
p={4}
_selected={{
bg: '#11866f',
color: '#f0f2e2',
bg: 'brand.light.primary',
color: 'yellow.50',
}}
borderRight='2px solid #11866f'
>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Text textStyle='download-tab-label'>
WINDOWS
</Text>
</Tab>
@ -90,19 +74,14 @@ export const DownloadsTable: FC<Props> = ({
w={'20%'}
p={4}
_selected={{
bg: '#11866f',
color: '#f0f2e2',
bg: 'brand.light.primary',
color: 'yellow.50',
}}
borderRight='2px solid #11866f'
>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Text textStyle='download-tab-label'>
IOS
</Text>
</Tab>
@ -110,18 +89,13 @@ export const DownloadsTable: FC<Props> = ({
w={'20%'}
p={4}
_selected={{
bg: '#11866f',
color: '#f0f2e2',
bg: 'brand.light.primary',
color: 'yellow.50',
}}
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
fontWeight={700}
textTransform='uppercase'
textAlign='center'
fontSize='sm'
>
<Text textStyle='download-tab-label'>
ANDROID
</Text>
</Tab>

54
src/pages/downloads.tsx
View File

@ -47,29 +47,29 @@ const DownloadsPage: NextPage = ({}) => {
sectionTitle='Specific Versions'
>
<Stack p={4}>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
If you&apos;re looking for a specific release, operating system or architecture, below you will find:
</Text>
<UnorderedList px={4}>
<ListItem>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
All stable and develop builds of Geth and tools
</Text>
</ListItem>
<ListItem>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
Archives for non-primary processor architectures
</Text>
</ListItem>
<ListItem>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
Android library archives and iOS XCode frameworks
</Text>
</ListItem>
</UnorderedList>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
Please select your desired platform from the lists below and download your bundle of choice. Please be aware that the MD5 checksums are provided by our binary hosting platform (Azure Blobstore) to help check for download errors. For security guarantees please verify any downloads via the attached PGP signature files (see{' '}
<Link
href={''}
@ -92,7 +92,7 @@ const DownloadsPage: NextPage = ({}) => {
<DownloadsSection sectionTitle='Stable releases'>
<Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
These are the current and previous stable releases of go-ethereum, updated automatically when a new version is tagged in our{' '}
<Link
href={GETH_REPO_URL}
@ -115,19 +115,7 @@ const DownloadsPage: NextPage = ({}) => {
<DownloadsTable data={testDownloadData}/>
<Stack sx={{ mt: '0 !important' }}>
<Button
color='#11866f'
bg='#d7f5ef'
_hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
_focus={{
textDecoration: 'none',
bg: '#11866f',
color: '#f0f2e2',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
}}
_active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
h={'100%'}
>
<Link as='button' variant='secondary'>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
@ -138,13 +126,13 @@ const DownloadsPage: NextPage = ({}) => {
>
SHOW OLDER RELEASES
</Text>
</Button>
</Link>
</Stack>
</DownloadsSection>
<DownloadsSection sectionTitle='Develop builds'>
<Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
These are the develop snapshots of go-ethereum, updated automatically when a new commit is pushed into our{' '}
<Link
href={GETH_REPO_URL}
@ -167,19 +155,7 @@ const DownloadsPage: NextPage = ({}) => {
<DownloadsTable data={testDownloadData} />
<Stack sx={{ mt: '0 !important' }}>
<Button
color='#11866f'
bg='#d7f5ef'
_hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
_focus={{
textDecoration: 'none',
bg: '#11866f',
color: '#f0f2e2',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
}}
_active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
h={'100%'}
>
<Link as='button' variant='secondary'>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
@ -190,13 +166,13 @@ const DownloadsPage: NextPage = ({}) => {
>
SHOW OLDER RELEASES
</Text>
</Button>
</Link>
</Stack>
</DownloadsSection>
<DownloadsSection sectionTitle='OpenPGP Signatures'>
<Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
All the binaries available from this page are signed via our build server PGP keys:
</Text>
</Stack>
@ -215,7 +191,7 @@ const DownloadsPage: NextPage = ({}) => {
<DownloadsSection sectionTitle='Importing keys and verifying builds'>
<Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
You can import the build server public keys by grabbing the individual keys directly from the keyserver network:
</Text>
@ -226,7 +202,7 @@ const DownloadsPage: NextPage = ({}) => {
</Stack>
<Stack p={4} borderBottom='2px solid #11866f'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
Similarly you can import all the developer public keys by grabbing them directly from the keyserver network:
</Text>
@ -237,7 +213,7 @@ const DownloadsPage: NextPage = ({}) => {
</Stack>
<Stack p={4}>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
<Text textStyle='quick-link-text'>
From the download listings above you should see a link both to the downloadable archives as well as detached signature files. To verify the authenticity of any downloaded data, grab both files and then run:
</Text>

1
src/theme/foundations/index.ts
View File

@ -1,2 +1,3 @@
export * from './colors';
export * from './shadows';
export * from './sizes';

3
src/theme/foundations/shadows.ts Normal file
View File

@ -0,0 +1,3 @@
export const shadows = {
linkBoxShadow: '0 0 0 1px #11866f !important'
}

16
src/theme/index.ts
View File

@ -1,6 +1,6 @@
import { extendTheme } from '@chakra-ui/react';
import { colors, sizes } from './foundations';
import { colors, shadows, sizes } from './foundations';
import { Button, Link } from './components';
const overrides = {
@ -9,6 +9,7 @@ const overrides = {
Button,
Link
},
shadows,
sizes,
styles: {
global: () => ({
@ -65,6 +66,19 @@ const overrides = {
fontSize: '13px',
fontFamily: '"Inter", sans-serif'
},
'downloads-button-label': {
fontFamily:'"JetBrains Mono", monospace',
color:'yellow.50',
fontSize:'xs',
textTransform:'uppercase',
},
'download-tab-label': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
textTransform: 'uppercase',
textAlign: 'center',
fontSize: 'sm',
},
// TODO: refactor w/ semantic tokens for light/dark mode
'link-light': {},
// TODO: refactor w/ semantic tokens for light/dark mode