[DEV-3024] Improve guides and guides' menu typography

.changeset/cruel-webs-take.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Change guides' fontSize, fontWeight and paddings to improve readability

apps/nextjs-website/src/components/atoms/GuideMenu/Menu.tsx

@@ -101,7 +101,12 @@ const components: RenderingComponents<React.ReactNode> = {
         variant='sidenav'
         component={NextLink}
         href={href}
-        style={{ textDecoration: 'none' }}
+        color='text.secondary'
+        style={{
+          textDecoration: 'none',
+          fontSize: '.938rem',
+          fontWeight: 400,
+        }}
       >
         {title}
       </Typography>
@@ -121,14 +126,14 @@ const components: RenderingComponents<React.ReactNode> = {
   },
   Title: ({ children }) => (
     <Typography
-      color='text.secondary'
+      color='text.primary'
       style={{
         paddingLeft: 32,
-        paddingTop: 24,
-        paddingBottom: 0,
+        paddingTop: 16,
+        paddingBottom: 4,
         textDecoration: 'none',
-        fontSize: 14,
-        fontWeight: 700,
+        fontSize: '.875rem',
+        fontWeight: 600,
       }}
       textTransform='uppercase'
     >

apps/nextjs-website/src/components/organisms/GitBookContent/components/Heading.tsx

@@ -23,21 +23,21 @@ const asVariant = (level: number) => {
 
 const asFontSize = (level: number) =>
   level === 1
-    ? '38px'
+    ? '2.375rem'
     : level === 2
-    ? '28px'
+    ? '1.875rem'
     : level === 3
-    ? '18px'
+    ? '1.5rem'
     : level === 4
-    ? '16px'
+    ? '1.25rem'
     : level === 5
-    ? '14px'
-    : '12px';
+    ? '1rem'
+    : '0.75rem';
 
 const asFontWeight = (level: number) => (level === 1 ? 700 : 600);
 
 const asLineHeight = (level: number) =>
-  level === 1 || level === 2 ? '42px' : '24px';
+  level === 1 || level === 2 ? '2.625rem' : '1.5rem';
 
 const scrollOffset = SITE_HEADER_HEIGHT + PRODUCT_HEADER_HEIGHT;
 
@@ -67,7 +67,8 @@ export const SubHeading = ({
       <Typography
         variant={asVariant(level)}
         sx={{
-          py: 3,
+          paddingTop: 3,
+          paddingBottom: 1,
           fontSize: { xs: asFontSize(level) },
           fontWeight: { xs: asFontWeight(level) },
           lineHeight: { xs: asLineHeight(level) },
@@ -87,7 +88,8 @@ const Heading = ({ level, id, children }: HeadingProps<ReactNode>) => (
     <Typography
       variant={asVariant(level)}
       sx={{
-        py: 3,
+        paddingTop: 3,
+        paddingBottom: 1,
         fontSize: { xs: asFontSize(level) },
         fontWeight: { xs: asFontWeight(level) },
         lineHeight: { xs: asLineHeight(level) },

apps/nextjs-website/src/components/organisms/GitBookContent/components/Paragraph.tsx

@@ -6,7 +6,7 @@ const Paragraph = ({ children }: ParagraphProps<ReactNode>) => (
   <Typography
     variant={'body1'}
     component='div'
-    sx={{ my: 2, fontSize: '18px', fontWeight: 400, lineHeight: '24px' }}
+    sx={{ my: 2, fontSize: '1rem', fontWeight: 400, lineHeight: '24px' }}
   >
     {children}
   </Typography>

apps/nextjs-website/src/components/organisms/GitBookContent/components/StyledText.tsx

@@ -26,7 +26,7 @@ const StyledText = ({ style, children }: StyledTextProps) => {
           variant='body1'
           fontWeight='bold'
           component='span'
-          sx={{ fontSize: '18px' }}
+          sx={{ fontSize: '1rem' }}
         >
           {children}
         </Typography>
@@ -37,7 +37,7 @@ const StyledText = ({ style, children }: StyledTextProps) => {
           variant='body1'
           fontStyle='italic'
           component='span'
-          sx={{ fontSize: '18px' }}
+          sx={{ fontSize: '1rem' }}
         >
           {children}
         </Typography>

apps/nextjs-website/src/components/organisms/GitBookContent/components/Swagger/Swagger.tsx

@@ -71,15 +71,18 @@ const Swagger = ({
               color: 'white',
               padding: '2px 8px',
               borderRadius: '40px',
-              fontSize: 14,
+              fontSize: '0.875rem',
               fontWeight: 700,
               marginBottom: '16px',
               textTransform: 'uppercase',
             }}
           >
             {method}
           </Typography>
-          <Typography component={'div'} sx={{ fontWeight: 700, fontSize: 18 }}>
+          <Typography
+            component={'div'}
+            sx={{ fontWeight: 700, fontSize: '1.125rem' }}
+          >
             {summary}
           </Typography>
         </div>
@@ -88,15 +91,19 @@ const Swagger = ({
         {children ? (
           <>
             <Typography
-              sx={{ fontWeight: 700, fontSize: 18, marginBottom: '16px' }}
+              sx={{
+                fontWeight: 700,
+                fontSize: '1.125rem',
+                marginBottom: '16px',
+              }}
             >
               {t('parameters.header')}
             </Typography>
             <div>{children}</div>
           </>
         ) : (
           <Typography
-            sx={{ fontWeight: 700, fontSize: 18, marginBottom: '16px' }}
+            sx={{ fontWeight: 700, fontSize: '1.125rem', marginBottom: '16px' }}
           >
             {t('parameters.empty')}
           </Typography>

apps/nextjs-website/src/components/organisms/GitBookContent/components/Swagger/SwaggerParameter.tsx

@@ -13,11 +13,11 @@ const SwaggerParameter = ({
     <>
       <Typography
         component={'div'}
-        sx={{ fontWeight: 700, fontSize: '14px', marginBottom: '8px' }}
+        sx={{ fontWeight: 700, fontSize: '0.875rem', marginBottom: '8px' }}
       >
         {inProp}
       </Typography>
-      <Box display={'flex'} fontSize={14}>
+      <Box display='flex' fontSize='0.875rem'>
         <Box flex={1}>
           {name}
           <span style={{ color: 'red' }}>{required && ' *'}</span>