From 2c0d1ef77f60f330345b40ac975ecc06b33ba3fb Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 28 Aug 2021 13:38:29 +0200
Subject: [PATCH] Make homepage responsive

---
 components/global-header.tsx   | 35 +++++++++++++++++++---------------
 components/links-list-item.tsx |  9 ++++++---
 components/updates-banner.tsx  |  8 ++++----
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/components/global-header.tsx b/components/global-header.tsx
index b04fbdaa0..9441c4658 100644
--- a/components/global-header.tsx
+++ b/components/global-header.tsx
@@ -49,7 +49,7 @@ function DesktopMenuLinks() {
 
 function MobileMenuLinks() {
   return (
-    <Menu>
+    <Menu autoSelect={false}>
       <MenuButton
         d={['block', 'none', 'none']}
         as={HamburgerIcon}
@@ -59,9 +59,12 @@ function MobileMenuLinks() {
         cursor='pointer'
       />
       <MenuList py={'4px'} rounded='3px' minWidth='150px'>
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Roadmaps</MenuItem>
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Guides</MenuItem>
-        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px' color='gray.600'>Videos</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+                  color='gray.600'>Roadmaps</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+                  color='gray.600'>Guides</MenuItem>
+        <MenuItem py='4px' borderColor='gray.100' borderBottomWidth={1} fontSize='13px'
+                  color='gray.600'>Videos</MenuItem>
         <MenuItem py='4px' borderColor='gray.100' fontSize='13px' color='gray.600'>Subscribe</MenuItem>
       </MenuList>
     </Menu>
@@ -73,17 +76,19 @@ export function GlobalHeader() {
     <Box bg='gray.900' p='20px 0'>
       <Container maxW='container.md'>
         <Flex justifyContent='space-between' alignItems='center'>
-          <Link w='100%'
-                d='flex'
-                href='/'
-                alignItems='center'
-                color='white'
-                fontWeight={600}
-                _hover={{ textDecoration: 'none' }}
-                fontSize='18px'>
-            <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
-            <Text d={['none', 'none', 'block']} as='span'>roadmap.sh</Text>
-          </Link>
+          <Box>
+            <Link w='100%'
+                  d='flex'
+                  href='/'
+                  alignItems='center'
+                  color='white'
+                  fontWeight={600}
+                  _hover={{ textDecoration: 'none' }}
+                  fontSize='18px'>
+              <Image h='30px' w='30px' src='/logo.svg' mr='10px' />
+              <Text d={['none', 'none', 'block']} as='span'>roadmap.sh</Text>
+            </Link>
+          </Box>
           <DesktopMenuLinks />
           <MobileMenuLinks />
         </Flex>
diff --git a/components/links-list-item.tsx b/components/links-list-item.tsx
index 14e7b117d..9fa6fda63 100644
--- a/components/links-list-item.tsx
+++ b/components/links-list-item.tsx
@@ -16,9 +16,10 @@ export function LinksListItem(props: LinksListItemProps) {
       fontSize='15px'
       py='9px'
       d='flex'
+      flexDirection={['column', 'row', 'row']}
       fontWeight={500}
       color='gray.600'
-      alignItems='center'
+      alignItems={['flex-start', 'center']}
       justifyContent={'space-between'}
       _hover={{
         textDecoration: 'none',
@@ -27,14 +28,16 @@ export function LinksListItem(props: LinksListItemProps) {
           transform: 'translateX(10px)'
         }
       }}
+      isTruncated
+      maxWidth='100%'
     >
       <Flex alignItems='center' className='list-item-title' transition={'200ms'}>
         {icon}
-        <Text as='span'>{title}</Text>
+        <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
         {badgeText &&
         <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
       </Flex>
-      <Text as='span' fontSize='13px' color='gray.500'>{subtitle}</Text>
+      <Text mt={['4px', 0]} as='span' fontSize='12px' color='gray.500'>{subtitle}</Text>
     </Link>
   );
 }
diff --git a/components/updates-banner.tsx b/components/updates-banner.tsx
index a7129a07b..2acd0b040 100644
--- a/components/updates-banner.tsx
+++ b/components/updates-banner.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Container, Heading, Stack, Text } from '@chakra-ui/react';
+import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/react';
 
 export function UpdatesBanner() {
   return (
@@ -8,8 +8,8 @@ export function UpdatesBanner() {
         <Text color='gray.400' lineHeight='26px' fontSize='16px' mb='20px'>Subscribe yourself to get updates, new
           guides, videos and roadmaps in your inbox.</Text>
 
-        <Stack isInline spacing='15px'>
-          <Box>
+        <Flex flexDirection={['column', 'column', 'row']}>
+          <Box mr='20px' mb={['15px', '15px', 0]}>
             <Button variant='outline' borderWidth={2} colorScheme='green' _hover={{ color: 'green.200' }}>
               Subscribe to Updates
             </Button>
@@ -21,7 +21,7 @@ export function UpdatesBanner() {
                                                                                                              fontWeight={600}>5$
               per month</Text></Text>
           </Box>
-        </Stack>
+        </Flex>
       </Container>
     </Box>
   );