From 3fe41d2071987980cfe472b5d272ec75bbbba88b Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 8 Dec 2021 19:10:44 +0100
Subject: [PATCH] Change hover interactions for mobile

---
 components/links-list-item.tsx           |   9 ++
 components/roadmap/home-roadmap-item.tsx |   4 +-
 pages/index.tsx                          | 109 +++++++++++++++--------
 3 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/components/links-list-item.tsx b/components/links-list-item.tsx
index 06aefa826..5577a09e1 100644
--- a/components/links-list-item.tsx
+++ b/components/links-list-item.tsx
@@ -26,6 +26,15 @@ export function LinksListItem(props: LinksListItemProps) {
       color='gray.600'
       alignItems={['flex-start', 'center']}
       justifyContent={'space-between'}
+      sx={{
+        '@media (hover: none)': {
+          '&:hover': {
+            '& .list-item-title': {
+              transform: 'none'
+            }
+          }
+        }
+      }}
       _hover={{
         textDecoration: 'none',
         color: 'blue.400',
diff --git a/components/roadmap/home-roadmap-item.tsx b/components/roadmap/home-roadmap-item.tsx
index c1e35485e..bed4a6c9a 100644
--- a/components/roadmap/home-roadmap-item.tsx
+++ b/components/roadmap/home-roadmap-item.tsx
@@ -40,13 +40,13 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
       href={url}
       _hover={{
         textDecoration: 'none',
-        bg: 'rgba(255,255,255,.10)'
+        bg: 'rgba(255,255,255,.10)',
       }}
       sx={{
         // On mobile devices, don't change the scale
         '@media (hover: none)': {
           '&:hover': {
-            transform: 'scale(1)',
+            bg: 'rgba(255,255,255,.05)',
           },
         },
       }}
diff --git a/pages/index.tsx b/pages/index.tsx
index 8fb05a162..73ca295fd 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,12 @@
-import { Box, Container, Heading, Link, SimpleGrid, Text, useMediaQuery } from '@chakra-ui/react';
+import {
+  Box,
+  Container,
+  Heading,
+  Link,
+  SimpleGrid,
+  Text,
+  useMediaQuery,
+} from '@chakra-ui/react';
 import { GlobalHeader } from '../components/global-header';
 import { Footer } from '../components/footer';
 import { UpdatesBanner } from '../components/updates-banner';
@@ -20,7 +28,7 @@ type HomeProps = {
   roadmaps: RoadmapType[];
   guides: GuideType[];
   videos: VideoType[];
-}
+};
 
 export default function Home(props: HomeProps) {
   const { roadmaps, guides, videos } = props;
@@ -28,32 +36,47 @@ export default function Home(props: HomeProps) {
   return (
     <PageWrapper>
       <GlobalHeader variant={'transparent'} />
-      <Helmet title='Developer Roadmaps' />
+      <Helmet title="Developer Roadmaps" />
       <Box>
-        <Container maxW='container.md' pb='90px'>
-          <Box py={['23px', '23px', '35px']} color='gray.200' >
-            <Heading color='gray.50' fontSize={['22px', '22px', '28px']} mb={['8px', '8px', '15px']}>Hey there! 👋</Heading>
-            <Text fontSize={['14px', '14px', '16px']} mb='10px'>
-              <Text fontWeight={500} as='span'>roadmap.sh</Text> is a community effort to create roadmaps, guides and
-              other educational content
-              to help guide the developers in picking up the path and guide their learnings.
+        <Container maxW="container.md" pb="90px">
+          <Box py={['23px', '23px', '35px']} color="gray.200">
+            <Heading
+              color="gray.50"
+              fontSize={['22px', '22px', '28px']}
+              mb={['8px', '8px', '15px']}
+            >
+              Hey there! 👋
+            </Heading>
+            <Text fontSize={['14px', '14px', '16px']} mb="10px">
+              <Text fontWeight={500} as="span">
+                roadmap.sh
+              </Text>{' '}
+              is a community effort to create roadmaps, guides and other
+              educational content to help guide the developers in picking up the
+              path and guide their learnings.
             </Text>
 
-            <Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'}
-                                                                           href={siteConfig.url.youtube}
-                                                                           onClick={() => event({
-                                                                             category: 'Subscription',
-                                                                             action: 'Clicked the YouTube link',
-                                                                             label: 'YouTube link on home'
-                                                                           })}
-                                                                           target='_blank'
-                                                                           fontWeight={600}>YouTube
-              channel</Link> which we hope you are going to love.</Text>
+            <Text fontSize={['14px', '14px', '16px']}>
+              We also have a{' '}
+              <Link
+                textDecoration={'underline'}
+                href={siteConfig.url.youtube}
+                onClick={() =>
+                  event({
+                    category: 'Subscription',
+                    action: 'Clicked the YouTube link',
+                    label: 'YouTube link on home',
+                  })
+                }
+                target="_blank"
+                fontWeight={600}
+              >
+                YouTube channel
+              </Link>{' '}
+              which we hope you are going to love.
+            </Text>
           </Box>
-          <SimpleGrid
-            columns={[1, 2, 3]}
-            spacing={['10px', '10px', '15px']}
-          >
+          <SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
             {roadmaps.map((roadmap: RoadmapType, counter: number) => (
               <HomeRoadmapItem
                 isUpcoming={roadmap.isUpcoming}
@@ -69,14 +92,20 @@ export default function Home(props: HomeProps) {
         </Container>
       </Box>
 
-      <Box bg='white'>
-        <Container maxW='container.md'>
-          <Box  pt='60px' mb={['10px', '15px', '20px']}>
-            <Heading color='green.500' fontSize={['20px', '20px', '25px']} mb='5px'>Video Explanations</Heading>
+      <Box bg="white">
+        <Container maxW="container.md">
+          <Box pt="60px" mb={['10px', '15px', '20px']}>
+            <Heading
+              color="green.500"
+              fontSize={['20px', '20px', '25px']}
+              mb="5px"
+            >
+              Video Explanations
+            </Heading>
           </Box>
 
           <LinksList>
-            {videos.map(video => (
+            {videos.map((video) => (
               <LinksListItem
                 target={'_blank'}
                 key={video.id}
@@ -91,25 +120,27 @@ export default function Home(props: HomeProps) {
                       marginRight: '7px',
                       width: '18px',
                       height: '18px',
-                      color: '#9c9c9c'
+                      color: '#9c9c9c',
                     }}
                   />
                 }
               />
             ))}
-            <DimmedMore href='/watch' text={'View all Videos'} />
+            <DimmedMore href="/watch" text={'View all Videos'} />
           </LinksList>
         </Container>
       </Box>
 
-      <Box pb='80px' bg='white'>
-        <Container maxW='container.md' position='relative'>
-          <Box pt='40px' mb='20px'>
-            <Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
+      <Box pb="80px" bg="white">
+        <Container maxW="container.md" position="relative">
+          <Box pt="40px" mb="20px">
+            <Heading color="green.500" fontSize="25px" mb="5px">
+              Visual Guides
+            </Heading>
           </Box>
 
           <LinksList>
-            {guides.map(guide => (
+            {guides.map((guide) => (
               <LinksListItem
                 key={guide.id}
                 href={`/guides/${guide.id}`}
@@ -118,7 +149,7 @@ export default function Home(props: HomeProps) {
                 subtitle={guide.formattedUpdatedAt!}
               />
             ))}
-            <DimmedMore href={'/guides'} text='View all Guides' />
+            <DimmedMore href={'/guides'} text="View all Guides" />
           </LinksList>
         </Container>
       </Box>
@@ -135,7 +166,7 @@ export async function getStaticProps() {
     props: {
       roadmaps: getFeaturedRoadmaps(),
       guides: getAllGuides(10),
-      videos: getAllVideos(10)
-    }
+      videos: getAllVideos(10),
+    },
   };
 }