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

chore: move colors to theme

Browse Source
pull/26459/head^2
Nicolás Quiroz 2 years ago
parent 57809bef2a
commit b60e17150b
8 changed files with 93 additions and 87 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      src/components/MDXComponents.tsx
  2. 38
      src/components/UI/homepage/HomeHero.tsx
  3. 34
      src/components/UI/homepage/HomeSection.tsx
  4. 65
      src/components/UI/homepage/QuickLinks.tsx
  5. 33
      src/pages/index.tsx
  6. 0
      src/theme/components/.delete-me
  7. 1
      src/theme/foundations/colors.ts
  8. 8
      src/theme/index.ts

1
src/components/MDXComponents.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape View File

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

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

8
src/theme/index.ts
Unescape 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'
}
})
},

Write Preview
Loading…
Cancel
Save