Merge branch 'homepage-mobile' into downloads-mobile

pull/26459/head^2
Corwin Smith 2 years ago
commit b6fc69ab5c
  1. 2
      src/components/UI/homepage/HomeSection.tsx
  2. 51
      src/pages/index.tsx
  3. 16
      src/theme/components/Link.ts
  4. 1
      src/theme/foundations/index.ts
  5. 73
      src/theme/foundations/textStyles.ts
  6. 69
      src/theme/index.ts

@ -51,7 +51,7 @@ export const HomeSection: FC<Props> = ({
<Stack sx={{ mt: '0 !important' }}>
<NextLink href={buttonHref} passHref>
<Link variant='secondary' isExternal={buttonHref.startsWith('http')}>
<Link variant='button-link-secondary' isExternal={buttonHref.startsWith('http')}>
<Text textStyle='home-section-link-label'>{linkLabel}</Text>
</Link>
</NextLink>

@ -31,41 +31,11 @@ const HomePage: NextPage = ({}) => {
>
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
Geth (go-ethereum) is a{' '}
<Link
href='https://go.dev/'
isExternal
textDecoration='underline'
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
<Link href='https://go.dev/' isExternal variant='light'>
Go
</Link>{' '}
implementation of{' '}
<Link
href={ETHEREUM_ORG_URL}
isExternal
textDecoration='underline'
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
<Link href={ETHEREUM_ORG_URL} isExternal variant='light'>
Ethereum
</Link>{' '}
- a gateway into the decentralized web.
@ -139,22 +109,7 @@ const HomePage: NextPage = ({}) => {
We welcome contributions from anyone on the internet, and are grateful for even the
smallest of fixes! If you&apos;d like to contribute to the Geth source code, please
fork the{' '}
<Link
href={GETH_REPO_URL}
isExternal
textDecoration='underline'
color='brand.light.primary'
_hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
_focus={{
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
}}
_pressed={{
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}}
>
<Link href={GETH_REPO_URL} isExternal variant='light'>
Github repository
</Link>
, fix, commit and send a pull request for the maintainers to review and merge into the

@ -1,6 +1,6 @@
export const Link = {
variants: {
secondary: {
'button-link-secondary': {
color: 'brand.light.primary',
bg: 'green.50',
_hover: { textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' },
@ -27,6 +27,20 @@ export const Link = {
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}
},
light: {
textDecoration: 'underline',
color: 'brand.light.primary',
_hover: { color: 'brand.light.body', textDecorationColor: 'brand.light.body' },
_focus: {
color: 'brand.light.primary',
boxShadow: '0 0 0 1px #11866f !important',
textDecoration: 'none'
},
_pressed: {
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}
},
}
};

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

@ -0,0 +1,73 @@
export const textStyles = {
h1: {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
fontSize: '2.75rem',
lineHeight: '3.375rem',
letterSpacing: '5%',
color: 'brand.light.body'
},
h2: {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 400,
fontSize: '1.5rem',
lineHeight: 'auto',
letterSpacing: '4%',
color: 'brand.light.body'
},
'homepage-description': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
lineHeight: '21px',
letterSpacing: '0.05em',
textAlign: { base: 'center', md: 'left' }
},
'homepage-primary-label': {
fontFamily: '"JetBrains Mono", monospace',
color: 'yellow.50',
fontWeight: 700,
textTransform: 'uppercase'
},
'home-section-link-label': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
textTransform: 'uppercase',
textAlign: 'center',
p: 4
},
'quick-link-text': {
fontFamily: '"Inter", sans-serif',
lineHeight: '26px'
},
'quick-link-label': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
textTransform: 'uppercase',
textAlign: 'center',
color: 'brand.light.primary',
_groupHover: { color: 'yellow.50' },
_groupActive: { color: 'yellow.50' },
_groupFocus: { color: 'yellow.50' }
},
'hero-text-small': {
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
'text-light': {}
};

@ -1,6 +1,6 @@
import { extendTheme } from '@chakra-ui/react';
import { colors, shadows, sizes } from './foundations';
import { colors, shadows, sizes, textStyles } from './foundations';
import { Button, Link } from './components';
const overrides = {
@ -18,72 +18,7 @@ const overrides = {
}
})
},
textStyles: {
h1: {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
fontSize: '2.75rem',
lineHeight: '3.375rem',
letterSpacing: '5%',
color: 'brand.light.body'
},
h2: {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 400,
fontSize: '1.5rem',
lineHeight: 'auto',
letterSpacing: '4%',
color: 'brand.light.body'
},
'homepage-description': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
lineHeight: '21px',
letterSpacing: '0.05em',
textAlign: { base: 'center', md: 'left' }
},
'homepage-primary-label': {
fontFamily: '"JetBrains Mono", monospace',
color: 'yellow.50',
fontWeight: 700,
textTransform: 'uppercase'
},
'quick-link-text': {
fontFamily: '"Inter", sans-serif',
lineHeight: '26px'
},
'quick-link-label': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
textTransform: 'uppercase',
textAlign: 'center',
color: 'brand.light.primary',
_groupHover: { color: 'yellow.50' },
_groupActive: { color: 'yellow.50' },
_groupFocus: { color: 'yellow.50' }
},
'hero-text-small': {
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
'text-light': {}
}
textStyles
};
export default extendTheme(overrides);

Loading…
Cancel
Save