Merge pull request #122 from ethereum/document-nav-spacing

Fix spacing for DocumentNav links [Fixes #87]

src/components/UI/docs/DocumentNav.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Divider, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Divider, Link, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
 
 import { parseHeadingId } from '../../../utils/parseHeadingId';
@@ -20,7 +20,7 @@ export const DocumentNav: FC<Props> = ({ content }) => {
   const activeHash = useActiveHash(parsedHeadings.map(heading => heading!.headingId));
 
   return (
-    <Stack position='sticky' top='4'>
+    <Box position='sticky' top='4'>
       <Text as='h5' textStyle='document-nav-title'>
         on this page
       </Text>
@@ -32,6 +32,7 @@ export const DocumentNav: FC<Props> = ({ content }) => {
               <Text
                 color={activeHash === heading?.headingId ? 'body' : 'primary'}
                 textStyle='document-nav-link'
+                mb={3.5}
                 _hover={{
                   background: 'primary',
                   boxShadow: '0 0 0 6px var(--chakra-colors-primary)',
@@ -56,6 +57,6 @@ export const DocumentNav: FC<Props> = ({ content }) => {
           </NextLink>
         );
       })}
-    </Stack>
+    </Box>
   );
 };

src/theme/foundations/textStyles.ts

@@ -191,7 +191,6 @@ export const textStyles = {
     fontSize: '13px',
     lineHeight: 5,
     letterSpacing: '1%',
-    mb: 4
   },
   'note-text': {
     fontFamily: 'body',