interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch 'homepage-mobile' into downloads-mobile

This commit is contained in:
Corwin Smith 2022-10-07 19:13:13 -06:00
parent a1b31a316b 0d0c486240
commit 41d0dc38bc
10 changed files with 112 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/MDXComponents.tsx
View File

@ -43,6 +43,7 @@ const MDXComponents = {
<NextLink href={href} passHref>
<Link
isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
// TODO: move color to theme
color='#18bc9c'
>
{children}

38
src/components/UI/homepage/HomeHero.tsx
View File

@ -39,28 +39,11 @@ export const HomeHero: FC = () => {
alignItems={{ base: 'center', md: 'flex-start' }}
>
<Flex direction='column' alignItems='center' mr={{ md: 6 }}>
{/* TODO: define button variants */}
<NextLink href={DOWNLOADS_PAGE} passHref>
{/* TODO: update text */}
<Button
as='a'
py='8px'
px='32px'
borderRadius={0}
width={{ base: '188px', md: 'auto' }}
// 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' }}
mb={1}
>
<Button variant='primary' as='a' mb={1}>
<Text
// TODO: move to textstyles
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
@ -76,23 +59,12 @@ export const HomeHero: FC = () => {
</Flex>
<Flex direction='column' alignItems='center'>
{/* TODO: define button variants */}
<NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
<Button
as='a'
py='8px'
px='32px'
borderRadius={0}
bg='#11866F'
_hover={{ bg: '#25453f' }}
_focus={{ bg: '#11866f', boxShadow: 'inset 0 0 0 2px #06fece !important' }}
_active={{ borderTop: '4px solid #06fece', pt: '4px' }}
mb={1}
>
<Button variant='primary' as='a' mb={1}>
<Text
// TODO: move to textstyles
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='#F0F2E2'
color='yellow.50'
fontWeight={700}
textTransform='uppercase'
>

34
src/components/UI/homepage/HomeSection.tsx
View File

@ -20,15 +20,20 @@ export const HomeSection: FC<Props> = ({
children
}) => {
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' }}>
<Stack
p={4}
borderBottom='2px solid'
borderColor='brand.light.primary'
sx={{ mt: '0 !important' }}
>
<Heading
// TODO: move text style to theme
as='h2'
@ -37,30 +42,35 @@ export const HomeSection: FC<Props> = ({
fontSize='1.5rem'
lineHeight='auto'
letterSpacing='4%'
// TODO: move to theme colors
color='#1d242c'
color='brand.light.body'
>
{sectionTitle}
</Heading>
</Stack>
<Stack p={4} spacing={4} borderBottom='2px solid #11866f' sx={{ mt: '0 !important' }}>
<Stack
p={4}
spacing={4}
borderBottom='2px solid'
borderColor='brand.light.primary'
sx={{ mt: '0 !important' }}
>
{children}
</Stack>
<Stack sx={{ mt: '0 !important' }}>
<NextLink href={buttonHref} passHref>
<Link
color='#11866f'
bg='#d7f5ef'
_hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
color='brand.light.primary'
bg='green.50'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
_focus={{
textDecoration: 'none',
bg: '#11866f',
color: '#f0f2e2',
bg: 'brand.light.primary',
color: 'yellow.50',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
}}
_active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
_active={{ textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }}
isExternal={buttonHref.startsWith('http')}
>
<Text

65
src/components/UI/homepage/QuickLinks.tsx
View File

@ -6,8 +6,8 @@ import { CONTRIBUTING_PAGE, DOCS_PAGE, FAQ_PAGE } from '../../../constants';
export const QuickLinks: FC = () => {
return (
<Stack border='2px solid #11866f'>
<Stack p={4} borderBottom='2px solid #11866f'>
<Stack border='2px solid' borderColor='brand.light.primary'>
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
<Heading
// TODO: move text style to theme
as='h2'
@ -16,8 +16,7 @@ export const QuickLinks: FC = () => {
fontSize='1.5rem'
lineHeight='auto'
letterSpacing='4%'
// TODO: move to theme colors
color='#1d242c'
color='brand.light.body'
>
Quick Links
</Heading>
@ -25,7 +24,11 @@ export const QuickLinks: FC = () => {
<Grid templateColumns='repeat(2, 1fr)' sx={{ mt: '0 !important' }}>
{/* get started */}
<GridItem borderRight='2px solid #11866f' borderBottom='2px solid #11866f'>
<GridItem
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Stack p={4} h='100%'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
Don&apos;t know where to start?
@ -36,20 +39,24 @@ export const QuickLinks: FC = () => {
</Text>
</Stack>
</GridItem>
<GridItem borderBottom='2px solid #11866f'>
<GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
<NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
<Link _hover={{ textDecoration: 'none' }}>
<Stack
data-group
bg='#d7f5ef'
_hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
bg='green.50'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
_focus={{
textDecoration: 'none',
bg: '#11866f',
color: '#f0f2e2',
bg: 'brand.light.primary',
color: 'yellow.50',
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
}}
_active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
_active={{
textDecoration: 'none',
bg: 'brand.light.secondary',
color: 'yellow.50'
}}
justifyContent='center'
h='100%'
p={4}
@ -60,10 +67,10 @@ export const QuickLinks: FC = () => {
fontWeight={700}
textTransform='uppercase'
textAlign='center'
color='#11866f'
_groupHover={{ color: '#f0f2e2' }}
_groupActive={{ color: '#f0f2e2' }}
_groupFocus={{ color: '#f0f2e2' }}
color='brand.light.primary'
_groupHover={{ color: 'yellow.50' }}
_groupActive={{ color: 'yellow.50' }}
_groupFocus={{ color: 'yellow.50' }}
>
Get started
</Text>
@ -73,7 +80,11 @@ export const QuickLinks: FC = () => {
</GridItem>
{/* faq */}
<GridItem borderRight='2px solid #11866f' borderBottom='2px solid #11866f'>
<GridItem
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Stack p={4} h='100%'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
Have doubts?
@ -84,13 +95,13 @@ export const QuickLinks: FC = () => {
</Text>
</Stack>
</GridItem>
<GridItem borderBottom='2px solid #11866f'>
<GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
<NextLink href={FAQ_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}>
<Stack
data-group
bg='#d7f5ef'
_hover={{ textDecoration: 'none', bg: '#11866F', color: '#f0f2e2' }}
bg='green.50'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
justifyContent='center'
h='100%'
p={4}
@ -101,8 +112,8 @@ export const QuickLinks: FC = () => {
fontWeight={700}
textTransform='uppercase'
textAlign='center'
color='#11866f'
_groupHover={{ color: '#f0f2e2' }}
color='brand.light.primary'
_groupHover={{ color: 'yellow.50' }}
>
Go to the FAQ
</Text>
@ -112,7 +123,7 @@ export const QuickLinks: FC = () => {
</GridItem>
{/* how to contribute */}
<GridItem borderRight='2px solid #11866f'>
<GridItem borderRight='2px solid' borderColor='brand.light.primary'>
<Stack p={4} h='100%'>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
Want to know how to contribute?
@ -128,20 +139,20 @@ export const QuickLinks: FC = () => {
<Link _hover={{ textDecoration: 'none' }}>
<Stack
data-group
bg='#d7f5ef'
_hover={{ textDecoration: 'none', bg: '#11866F', color: '#f0f2e2' }}
bg='green.50'
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
justifyContent='center'
h='100%'
p={4}
>
<Text
fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
// TODO: move to text style
fontWeight={700}
textTransform='uppercase'
textAlign='center'
color='#11866f'
_groupHover={{ color: '#f0f2e2' }}
color='brand.light.primary'
_groupHover={{ color: 'yellow.50' }}
>
How to contribute
</Text>

33
src/pages/index.tsx
View File

@ -35,14 +35,17 @@ const HomePage: NextPage = ({}) => {
href='https://go.dev/'
isExternal
textDecoration='underline'
color='#11866f'
_hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: '#11866f',
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
Go
</Link>{' '}
@ -51,14 +54,17 @@ const HomePage: NextPage = ({}) => {
href={ETHEREUM_ORG_URL}
isExternal
textDecoration='underline'
color='#11866f'
_hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: '#11866f',
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
Ethereum
</Link>{' '}
@ -137,14 +143,17 @@ const HomePage: NextPage = ({}) => {
href={GETH_REPO_URL}
isExternal
textDecoration='underline'
color='#11866f'
_hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: '#11866f',
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
Github repository
</Link>

0
src/theme/components/.delete-me
View File

18
src/theme/components/Button.ts Normal file
View File

@ -0,0 +1,18 @@
export const Button = {
variants: {
primary: {
py: '8px',
px: '32px',
borderRadius: 0,
width: { base: '188px', md: 'auto' },
// 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' }
}
}
};

1
src/theme/components/index.ts Normal file
View File

@ -0,0 +1 @@
export * from './Button';

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

@ -7,6 +7,7 @@ export const colors = {
}
},
green: {
50: '#d7f5ef',
200: '#06fece'
},
yellow: {

8
src/theme/index.ts
View File

@ -1,16 +1,18 @@
import { extendTheme } from '@chakra-ui/react';
import { colors, sizes } from './foundations';
import { Button } from './components';
const overrides = {
colors,
components: {},
components: {
Button
},
sizes,
styles: {
global: () => ({
body: {
// TODO: move color to theme colors
bg: '#f0f2e2'
bg: 'yellow.50'
}
})
},