From 7f451eac5cfff69f566d6c296ae4250dcb6139ea Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Sep 2021 22:32:12 +0200
Subject: [PATCH] Fix responsiveness issues

---
 components/global-header.tsx |  2 +-
 components/page-header.tsx   |  4 ++--
 components/sticky-banner.tsx | 11 +++++++++--
 pages/[roadmap]/index.tsx    |  9 ++++-----
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/components/global-header.tsx b/components/global-header.tsx
index 3e1249387..164c1221e 100644
--- a/components/global-header.tsx
+++ b/components/global-header.tsx
@@ -87,7 +87,7 @@ function MobileMenuLinks() {
 
 export function GlobalHeader() {
   return (
-    <Box bg='gray.900' p='20px 0'>
+    <Box bg='gray.900' p='58px 0 20px'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
           <Box>
diff --git a/components/page-header.tsx b/components/page-header.tsx
index 6a97df0e9..cb5cd5396 100644
--- a/components/page-header.tsx
+++ b/components/page-header.tsx
@@ -16,13 +16,13 @@ export function PageHeader(props: PageHeaderProps) {
         <Heading
           as='h1'
           color='black'
-          fontSize={['33px', '33px', '40px']}
+          fontSize={['28px', '33px', '40px']}
           fontWeight={700}
           mb={['2px', '2px', '5px']}
         >
           {title}
         </Heading>
-        <Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
+        <Text fontSize={['13px', '14px', '15px']}>{subtitle}</Text>
       </Container>
 
       {children && (
diff --git a/components/sticky-banner.tsx b/components/sticky-banner.tsx
index 88fb8a79c..288a1549d 100644
--- a/components/sticky-banner.tsx
+++ b/components/sticky-banner.tsx
@@ -8,10 +8,17 @@ export function StickyBanner() {
           href={siteConfig.url.youtube}
           bg={'yellow.300'}
           color='gray.900'
+      // bg={'teal.900'}
+      // color='gray.300'
           alignItems='center'
+          position='fixed'
+          left={0}
+          right={0}
+          zIndex={999}
           justifyContent='center'
-          py='7px'
-          _hover={{ textDecoration: 'none', bg: 'yellow.400', }}
+          py='8px'
+          _hover={{ textDecoration: 'none', bg: 'yellow.400' }}
+      // _hover={{ textDecoration: 'none', bg: 'teal.800', color: 'gray.100' }}
           target='_blank'
     >
       <YouTubeLogo style={{ height: '20px', display: 'inline-block', marginRight: '7px' }} />
diff --git a/pages/[roadmap]/index.tsx b/pages/[roadmap]/index.tsx
index 2d6f0ff2f..4d8e136d6 100644
--- a/pages/[roadmap]/index.tsx
+++ b/pages/[roadmap]/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Container, Link, Stack } from '@chakra-ui/react';
+import { Box, Button,  Text, Container, Link, Stack } from '@chakra-ui/react';
 import { ArrowBackIcon, AtSignIcon, DownloadIcon } from '@chakra-ui/icons';
 import { GlobalHeader } from '../../components/global-header';
 import { OpensourceBanner } from '../../components/opensource-banner';
@@ -64,10 +64,9 @@ export default function Roadmap(props: RoadmapProps) {
           subtitle={roadmap.description}
         >
           <Stack mt='20px' isInline>
-            <Button d={['none', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
-                    leftIcon={<ArrowBackIcon />}
+            <Button d={['flex', 'flex']} as={Link} href={'/roadmaps'} size='xs' py='14px' px='10px'
                     colorScheme='teal' variant='solid' _hover={{ textDecoration: 'none' }}>
-              All Roadmaps
+              &larr; <Text as='span' d={['none', 'inline']} ml='5px'>All Roadmaps</Text>
             </Button>
 
             {roadmap.pdfUrl && (
@@ -81,7 +80,7 @@ export default function Roadmap(props: RoadmapProps) {
                       colorScheme='yellow'
                       variant='solid'
                       _hover={{ textDecoration: 'none' }}>
-                Download PDF
+                Download
               </Button>
             )}
             <Button as={Link} href={'/signup'} size='xs' py='14px' px='10px' leftIcon={<AtSignIcon />}