forks/go-ethereum
1
0
Fork 1
mirror of https://github.com/ethereum/go-ethereum.git synced 2026-05-24 08:49:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #141 from ethereum/buttons-hover-color

Browse source 
Buttons hover color
This commit is contained in:
Corwin Smith 2022-12-09 03:43:09 +01:00 committed by GitHub
commit a66cffef76
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 56 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/UI/Header.tsx
View file

@ -29,7 +29,9 @@ export const Header: FC = () => {
> >
<NextLink href={'/'} passHref> <NextLink href={'/'} passHref>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Text textStyle='header-font' whiteSpace='nowrap'>go-ethereum</Text> <Text textStyle='header-font' whiteSpace='nowrap'>
go-ethereum
</Text>
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Stack>

8
src/components/UI/docs/DocsLinks.tsx
View file

@ -9,7 +9,7 @@ import {
Stack, Stack,
Text Text
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { AddIcon, MinusIcon } from '../svgs/' import { AddIcon, MinusIcon } from '../svgs/';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
@ -27,7 +27,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
return ( return (
<Stack border='2px' borderColor='primary'> <Stack border='2px' borderColor='primary'>
{navLinks.map(({ id, to, items }, idx) => { {navLinks.map(({ id, to, items }, idx) => {
const split = to?.split('/') const split = to?.split('/');
const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
return ( return (
<Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}> <Accordion key={id} allowToggle mt='0 !important' defaultIndex={[0]}>
@ -62,7 +62,7 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
verticalAlign: '-1.25px', verticalAlign: '-1.25px',
marginInlineEnd: 2, marginInlineEnd: 2,
fontSize: 'lg', fontSize: 'lg',
display: isActive ? 'unset' : 'none', display: isActive ? 'unset' : 'none'
}} }}
_groupHover={{ color: 'bg' }} _groupHover={{ color: 'bg' }}
> >
@ -100,4 +100,4 @@ export const DocsLinks: FC<Props> = ({ navLinks }) => {
})} })}
</Stack> </Stack>
); );
} };

6
src/components/UI/docs/DocumentNav.tsx
View file

@ -36,19 +36,19 @@ export const DocumentNav: FC<Props> = ({ content }) => {
_hover={{ _hover={{
background: 'primary', background: 'primary',
boxShadow: '0 0 0 6px var(--chakra-colors-primary)', boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
color: 'bg', color: 'bg'
}} }}
_focus={{ _focus={{
background: 'primary', background: 'primary',
boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important', boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important',
color: 'bg', color: 'bg',
outline: '2px solid var(--chakra-colors-secondary) !important', outline: '2px solid var(--chakra-colors-secondary) !important',
outlineOffset: '4px', outlineOffset: '4px'
}} }}
_active={{ _active={{
background: 'secondary', background: 'secondary',
boxShadow: '0 0 0 6px var(--chakra-colors-secondary)', boxShadow: '0 0 0 6px var(--chakra-colors-secondary)',
color: 'bg', color: 'bg'
}} }}
> >
{heading?.title} {heading?.title}

14
src/components/UI/docs/LinksList.tsx
View file

@ -15,10 +15,15 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
return ( return (
<Stack px={4}> <Stack px={4}>
{links.map(({ id, to, items }) => { {links.map(({ id, to, items }) => {
const split = to?.split('/') const split = to?.split('/');
const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1]; const isActive = slug && split && split[split.length - 1] === slug[slug.length - 1];
return to ? ( return to ? (
<Stack key={id} pb={items ? 6 : 0} _hover={{ background: 'primary', color: 'bg' }} data-group> <Stack
key={id}
pb={items ? 6 : 0}
_hover={{ background: 'primary', color: 'bg' }}
data-group
>
<NextLink href={to} passHref key={id}> <NextLink href={to} passHref key={id}>
<Link textDecoration='none !important'> <Link textDecoration='none !important'>
<Text <Text
@ -29,12 +34,11 @@ export const LinksList: FC<LinksListProps> = ({ links }) => {
verticalAlign: '-1.25px', verticalAlign: '-1.25px',
marginInlineEnd: 2, marginInlineEnd: 2,
fontSize: 'lg', fontSize: 'lg',
display: isActive ? 'unset' : 'none', display: isActive ? 'unset' : 'none'
}} }}
_groupHover={{ _groupHover={{
color: 'bg', color: 'bg',
boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)', boxShadow: '0 0 0 var(--chakra-space-2) var(--chakra-colors-primary)'
}} }}
> >
{id} {id}

17
src/components/UI/docs/MDComponents.tsx
View file

@ -42,7 +42,7 @@ const MDComponents = {
}, },
// headings // headings
h1: ({ children }: any) => { h1: ({ children }: any) => {
const { children: parsedChildren, headingId} = parseHeadingId(children); const { children: parsedChildren, headingId } = parseHeadingId(children);
return ( return (
<Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}> <Heading as='h1' textAlign='start' mb='5 !important' {...header1} id={headingId}>
@ -51,16 +51,23 @@ const MDComponents = {
); );
}, },
h2: ({ children }: any) => { h2: ({ children }: any) => {
const { children: parsedChildren, headingId} = parseHeadingId(children); const { children: parsedChildren, headingId } = parseHeadingId(children);
return ( return (
<Heading as='h2' textAlign='start' mt={{ base: '12 !important' , md: '16 !important'}} mb='4 !important' {...header2} id={headingId}> <Heading
as='h2'
textAlign='start'
mt={{ base: '12 !important', md: '16 !important' }}
mb='4 !important'
{...header2}
id={headingId}
>
{parsedChildren} {parsedChildren}
</Heading> </Heading>
); );
}, },
h3: ({ children }: any) => { h3: ({ children }: any) => {
const { children: parsedChildren, headingId} = parseHeadingId(children); const { children: parsedChildren, headingId } = parseHeadingId(children);
return ( return (
<Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}> <Heading as='h3' mt='5 !important' mb='2.5 !important' {...header3} id={headingId}>
{parsedChildren} {parsedChildren}
@ -68,7 +75,7 @@ const MDComponents = {
); );
}, },
h4: ({ children }: any) => { h4: ({ children }: any) => {
const { children: parsedChildren, headingId} = parseHeadingId(children); const { children: parsedChildren, headingId } = parseHeadingId(children);
return ( return (
<Heading as='h4' mb='2.5 !important' {...header4} id={headingId}> <Heading as='h4' mb='2.5 !important' {...header4} id={headingId}>

9
src/components/UI/downloads/DownloadsHero.tsx
View file

@ -80,12 +80,17 @@ export const DownloadsHero: FC<DownloadsHero> = ({
<Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4}> <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4}>
{Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key]; const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
return ( return (
<NextLink key={key} href={buildURL} passHref> <NextLink key={key} href={buildURL} passHref>
<Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}> <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16} data-group>
<HStack spacing={4}> <HStack spacing={4}>
<Stack alignItems='center'> <Stack alignItems='center'>
<Svg aria-label={ariaLabel} maxH='44px' /> <Svg
aria-label={ariaLabel}
maxH='44px'
_groupHover={{ color: 'yellow.50' }}
/>
</Stack> </Stack>
<Box> <Box>
<Text textStyle='downloads-button-label'>For {name}</Text> <Text textStyle='downloads-button-label'>For {name}</Text>

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

@ -37,7 +37,7 @@ export const HomeHero: FC = () => {
> >
<Flex direction='column' alignItems='center' mr={{ md: 6 }}> <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
<NextLink href={DOWNLOADS_PAGE} passHref> <NextLink href={DOWNLOADS_PAGE} passHref>
<Button variant='primary' as='a' mb={1}> <Button variant='primary' as='a' mb={1} data-group>
<Text textStyle='homepage-primary-label'>Download</Text> <Text textStyle='homepage-primary-label'>Download</Text>
</Button> </Button>
</NextLink> </NextLink>
@ -49,7 +49,7 @@ export const HomeHero: FC = () => {
<Flex direction='column' alignItems='center'> <Flex direction='column' alignItems='center'>
<NextLink href={DOCS_PAGE} passHref> <NextLink href={DOCS_PAGE} passHref>
<Button variant='primary' as='a' mb={1}> <Button variant='primary' as='a' mb={1} data-group>
<Text textStyle='homepage-primary-label'>Documentation</Text> <Text textStyle='homepage-primary-label'>Documentation</Text>
</Button> </Button>
</NextLink> </NextLink>

6
src/components/UI/svgs/AddIcon.tsx
View file

@ -8,9 +8,9 @@ const Icon = createIcon({
viewBox: `0 0 ${w} ${h}`, viewBox: `0 0 ${w} ${h}`,
path: ( path: (
<svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'> <svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'>
<g fill="currentColor"> <g fill='currentColor'>
<rect height="2" width="20" x="2" y="11"></rect> <rect height='2' width='20' x='2' y='11'></rect>
<rect height="20" width="2" x="11" y="2"></rect> <rect height='20' width='2' x='11' y='2'></rect>
</g> </g>
</svg> </svg>
) )

4
src/components/UI/svgs/MinusIcon.tsx
View file

@ -8,8 +8,8 @@ const Icon = createIcon({
viewBox: `0 0 ${w} ${h}`, viewBox: `0 0 ${w} ${h}`,
path: ( path: (
<svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'> <svg width={w} height={h} fill='none' xmlns='http://www.w3.org/2000/svg'>
<g fill="currentColor"> <g fill='currentColor'>
<rect height="2" width="20" x="2" y="11"></rect> <rect height='2' width='20' x='2' y='11'></rect>
</g> </g>
</svg> </svg>
) )

5
src/pages/[...slug].tsx
View file

@ -116,7 +116,10 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
</Stack> </Stack>
<Flex width='100%' placeContent='space-between' gap={8}> <Flex width='100%' placeContent='space-between' gap={8}>
<Box maxW='min(100%, 768px)' sx={{ '*:first-of-type': { marginTop: '0 !important' } }}> <Box
maxW='min(100%, 768px)'
sx={{ '*:first-of-type': { marginTop: '0 !important' } }}
>
<ReactMarkdown <ReactMarkdown
remarkPlugins={[gfm]} remarkPlugins={[gfm]}
rehypePlugins={[rehypeRaw]} rehypePlugins={[rehypeRaw]}

11
src/theme/foundations/textStyles.ts
View file

@ -77,7 +77,8 @@ export const textStyles = {
fontFamily: 'heading', fontFamily: 'heading',
color: 'bg', color: 'bg',
fontWeight: 700, fontWeight: 700,
textTransform: 'uppercase' textTransform: 'uppercase',
_groupHover: { color: 'yellow.50' }
}, },
'home-section-link-label': { 'home-section-link-label': {
fontFamily: 'heading', fontFamily: 'heading',
@ -124,13 +125,15 @@ export const textStyles = {
fontFamily: 'heading', fontFamily: 'heading',
color: 'bg', color: 'bg',
fontSize: { base: 'md', lg: 'xl' }, fontSize: { base: 'md', lg: 'xl' },
textTransform: 'uppercase' textTransform: 'uppercase',
_groupHover: { color: 'yellow.50' }
}, },
'downloads-button-sublabel': { 'downloads-button-sublabel': {
fontFamily: 'heading', fontFamily: 'heading',
color: 'bg', color: 'bg',
fontSize: { base: 'xs', lg: 'sm' }, fontSize: { base: 'xs', lg: 'sm' },
textTransform: 'uppercase' textTransform: 'uppercase',
_groupHover: { color: 'yellow.50' }
}, },
'download-tab-label': { 'download-tab-label': {
fontFamily: 'heading', fontFamily: 'heading',
@ -190,7 +193,7 @@ export const textStyles = {
fontWeight: 400, fontWeight: 400,
fontSize: '13px', fontSize: '13px',
lineHeight: 5, lineHeight: 5,
letterSpacing: '1%', letterSpacing: '1%'
}, },
'note-text': { 'note-text': {
fontFamily: 'body', fontFamily: 'body',