forks/go-ethereum
1
0
Fork 1
mirror of https://github.com/ethereum/go-ethereum.git synced 2026-07-18 19:00:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: buttons :active/:focus styles (#173)

Browse source 
* chore: update Button component styles

* chore: update textStyles

* chore: remove redundant styles
This commit is contained in:
Nicolás Quiroz 2022-12-15 19:37:21 -03:00 committed by GitHub
parent 8b0d037f6a
commit a688f81afe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -83,13 +83,15 @@ export const DownloadsHero: FC<DownloadsHero> = ({
return ( return (
<NextLink key={key} href={buildURL} passHref legacyBehavior> <NextLink key={key} href={buildURL} passHref legacyBehavior>
<Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16} data-group> <Button as='a' variant='primary' width={{ base: '100%' }} h={16} data-group>
<HStack spacing={4}> <HStack spacing={4}>
<Stack alignItems='center'> <Stack alignItems='center'>
<Svg <Svg
aria-label={ariaLabel} aria-label={ariaLabel}
maxH='44px' maxH='44px'
_groupHover={{ color: 'yellow.50' }} _groupHover={{ color: 'yellow.50' }}
_groupFocus={{ color: 'yellow.50' }}
_groupActive={{ color: 'yellow.50' }}
/> />
</Stack> </Stack>
<Box> <Box>

15
src/theme/components/Button.ts
View file

@ -13,23 +13,10 @@ export const Button = {
}, },
_active: { _active: {
bg: 'secondary', bg: 'secondary',
borderTop: '4px', borderTop: '4px solid',
borderColor: 'primary', borderColor: 'primary',
pt: '4px' pt: '4px'
} }
},
downloadsHeader: {
py: '8px',
px: '32px',
borderRadius: 0,
width: { base: '188px', md: 'auto' },
bg: 'primary',
_hover: { bg: 'secondary' },
_focus: {
bg: 'primary',
boxShadow: 'inset 0 0 0 2px var(--chakra-colors-green-200) !important'
},
_active: { borderTop: '4px solid', borderColor: 'green.200' }
} }
} }
}; };

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

@ -63,7 +63,9 @@ export const textStyles = {
color: 'bg', color: 'bg',
fontWeight: 700, fontWeight: 700,
textTransform: 'uppercase', textTransform: 'uppercase',
_groupHover: { color: 'yellow.50' } _groupHover: { color: 'yellow.50' },
_groupFocus: { color: 'yellow.50' },
_groupActive: { color: 'yellow.50' }
}, },
'home-section-link-label': { 'home-section-link-label': {
fontFamily: 'heading', fontFamily: 'heading',
@ -111,14 +113,18 @@ export const textStyles = {
color: 'bg', color: 'bg',
fontSize: { base: 'md', lg: 'xl' }, fontSize: { base: 'md', lg: 'xl' },
textTransform: 'uppercase', textTransform: 'uppercase',
_groupHover: { color: 'yellow.50' } _groupHover: { color: 'yellow.50' },
_groupFocus: { color: 'yellow.50' },
_groupActive: { 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' } _groupHover: { color: 'yellow.50' },
_groupFocus: { color: 'yellow.50' },
_groupActive: { color: 'yellow.50' }
}, },
'download-tab-label': { 'download-tab-label': {
fontFamily: 'heading', fontFamily: 'heading',