forks/go-ethereum
1
0
Fork 1
mirror of https://github.com/ethereum/go-ethereum.git synced 2026-05-04 23:32:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: move colors to theme

Browse source
This commit is contained in:
Nicolás Quiroz 2022-10-07 20:05:00 -05:00
parent 57809bef2a
commit b60e17150b
8 changed files with 93 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> <NextLink href={href} passHref>
<Link <Link
isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')} isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
// TODO: move color to theme
color='#18bc9c' color='#18bc9c'
> >
{children} {children}

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

@ -39,28 +39,11 @@ export const HomeHero: FC = () => {
alignItems={{ base: 'center', md: 'flex-start' }} alignItems={{ base: 'center', md: 'flex-start' }}
> >
<Flex direction='column' alignItems='center' mr={{ md: 6 }}> <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
{/* TODO: define button variants */}
<NextLink href={DOWNLOADS_PAGE} passHref> <NextLink href={DOWNLOADS_PAGE} passHref>
{/* TODO: update text */} <Button variant='primary' as='a' mb={1}>
<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}
>
<Text <Text
// TODO: move to textstyles
fontFamily='"JetBrains Mono", monospace' fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors
color='yellow.50' color='yellow.50'
fontWeight={700} fontWeight={700}
textTransform='uppercase' textTransform='uppercase'
@ -76,23 +59,12 @@ export const HomeHero: FC = () => {
</Flex> </Flex>
<Flex direction='column' alignItems='center'> <Flex direction='column' alignItems='center'>
{/* TODO: define button variants */}
<NextLink href={`${DOCS_PAGE}/getting-started`} passHref> <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
<Button <Button variant='primary' as='a' mb={1}>
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}
>
<Text <Text
// TODO: move to textstyles
fontFamily='"JetBrains Mono", monospace' fontFamily='"JetBrains Mono", monospace'
// TODO: move to theme colors color='yellow.50'
color='#F0F2E2'
fontWeight={700} fontWeight={700}
textTransform='uppercase' textTransform='uppercase'
> >

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

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

33
src/pages/index.tsx
View file

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

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

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

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

8
src/theme/index.ts
View file

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