From dbedae78ca106dcb2c8d4f1ae3eedd7cefabe730 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 27 Nov 2021 12:46:24 +0100
Subject: [PATCH] Fix broken hover state on mobile

---
 components/roadmap/home-roadmap-item.tsx | 14 +++++++++++++-
 pages/index.tsx                          | 12 +++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/components/roadmap/home-roadmap-item.tsx b/components/roadmap/home-roadmap-item.tsx
index 5bb56b1e5..0eeb2a4de 100644
--- a/components/roadmap/home-roadmap-item.tsx
+++ b/components/roadmap/home-roadmap-item.tsx
@@ -31,7 +31,19 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
     <Box
       as={Link}
       href={url}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)', opacity: '1 !important' }}
+      _hover={{
+        textDecoration: 'none',
+        transform: 'scale(1.02)',
+        opacity: '1 !important'
+      }}
+      sx={{
+        // On mobile devices, don't change the scale
+        '@media (hover: none)': {
+          '&:hover': {
+            transform: 'scale(1)'
+          }
+        }
+      }}
       flex={1}
       shadow='2xl'
       className={'home-roadmap-item'}
diff --git a/pages/index.tsx b/pages/index.tsx
index 2dd763138..127496ad6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Container, Heading, Link, SimpleGrid, Text } 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';
@@ -53,6 +53,16 @@ export default function Home(props: HomeProps) {
           <SimpleGrid
             columns={[1, 2, 3]}
             spacing={['10px', '10px', '15px']}
+            sx={{
+              // Don't change the opacity on mobile devices
+              '@media (hover: none)': {
+                '&:hover': {
+                  '.home-roadmap-item': {
+                    opacity: 1
+                  }
+                }
+              }
+            }}
             _hover={{ '& .home-roadmap-item': { opacity: '0.5'} }}
           >
             {roadmaps.map((roadmap: RoadmapType, counter: number) => (