diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index a3de237aa1..397357cb14 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -53,7 +53,7 @@ export const DownloadsHero: FC = ({ gap={4} p={4} > - + Download go-ethereum @@ -62,7 +62,7 @@ export const DownloadsHero: FC = ({ // TODO: move text style to theme fontFamily='"JetBrains Mono", monospace' lineHeight='21px' - mb={8} + mb={{base: '4 !important', md: '8 !important'}} > {currentBuildName} ({currentBuildVersion}) @@ -96,19 +96,20 @@ export const DownloadsHero: FC = ({ {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { return ( - diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx index 7a948f7705..adf55abe6e 100644 --- a/src/components/UI/downloads/DownloadsSection.tsx +++ b/src/components/UI/downloads/DownloadsSection.tsx @@ -41,13 +41,13 @@ export const DownloadsSection: FC = ({ {sectionDescription && ( - -
{sectionDescription}
-
+ {sectionDescription} + )} diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts index 5d953f46c0..db07f8e61c 100644 --- a/src/theme/components/Button.ts +++ b/src/theme/components/Button.ts @@ -12,6 +12,19 @@ export const Button = { boxShadow: 'inset 0 0 0 2px #06fece !important' }, _active: { borderTop: '4px solid', borderColor: 'green.200', pt: '4px' } + }, + downloadsHeader: { + py: '8px', + px: '32px', + borderRadius: 0, + width: { base: '188px', md: 'auto' }, + 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' } } } }; diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index df3252d467..954b49638f 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -67,7 +67,13 @@ export const textStyles = { 'downloads-button-label': { fontFamily: '"JetBrains Mono", monospace', color: 'yellow.50', - fontSize: 'xs', + fontSize: {base: 'md', lg: 'xl'}, + textTransform: 'uppercase' + }, + 'downloads-button-sublabel': { + fontFamily: '"JetBrains Mono", monospace', + color: 'yellow.50', + fontSize: {base: 'xs', lg: 'sm'}, textTransform: 'uppercase' }, 'download-tab-label': {