change requests

src/components/UI/downloads/DownloadsHero.tsx

@@ -53,7 +53,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           gap={4}
           p={4}
         >
-          <Stack flexDirection={{ base: 'column' }} alignItems={{ base: 'flex-start' }}>
+          <Stack>
             <Box as='h1' textStyle='h1'>
               Download go-ethereum
             </Box>
@@ -62,7 +62,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
               // TODO: move text style to theme
               fontFamily='"JetBrains Mono", monospace'
               lineHeight='21px'
-              mb={8}
+              mb={{base: '4 !important', md: '8 !important'}}
             >
               {currentBuildName} ({currentBuildVersion})
             </Text>
@@ -96,19 +96,20 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
             return (
               <NextLink key={key} href={DOWNLOAD_HEADER_BUTTONS[key].buildURL} passHref>
-                <Button as='a' variant='primary' width={{ base: '100%' }} p={8}>
+                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
                       <Image
                         src={DOWNLOAD_HEADER_BUTTONS[key].image}
                         alt={DOWNLOAD_HEADER_BUTTONS[key].imageAlt}
+                        h='44px'
                       />
                     </Stack>
                     <Box>
                       <Text textStyle='downloads-button-label'>
                         For {DOWNLOAD_HEADER_BUTTONS[key].name}
                       </Text>
-                      <Text textStyle='downloads-button-label'>geth {currentBuildName}</Text>
+                      <Text textStyle='downloads-button-sublabel'>geth {currentBuildVersion}</Text>
                     </Box>
                   </HStack>
                 </Button>

src/components/UI/downloads/DownloadsSection.tsx

@@ -41,13 +41,13 @@ export const DownloadsSection: FC<Props> = ({
         </Flex>
 
         {sectionDescription && (
-          <Stack
+          <Center
             p={4}
             borderLeft={{ base: 'none', md: '2px solid #11866f' }}
             borderTop={{ base: '2px solid #11866f', md: 'none' }}
           >
-            <Center>{sectionDescription}</Center>
+            {sectionDescription}
-          </Stack>
+          </Center>
         )}
       </Flex>
 

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' }
     }
   }
 };

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': {