From bfb5cd574c9a9b5ebfbd16708fe3c7cd06526dc9 Mon Sep 17 00:00:00 2001
From: Elena Volpato <talkto@elenavolpato.me>
Date: Wed, 16 Aug 2023 12:24:37 +0200
Subject: [PATCH] FIX(): the whole area of the button is now clickable

---
 src/routes/FoodPage.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/routes/FoodPage.tsx b/src/routes/FoodPage.tsx
index c49abd2..d74d3c9 100644
--- a/src/routes/FoodPage.tsx
+++ b/src/routes/FoodPage.tsx
@@ -55,13 +55,19 @@ export default function FoodPage() {
     }
   };
 
-  const GridBox = styled(Box)(() => ({
-    width: "24%",
+  const GridBox = styled(Box)(({ theme }) => ({
+    width: 80,
+    padding: 10,
     aspectRatio: 2,
-    borderRadius: ".25em",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
+    fontFamily: "Sans",
+    [theme.breakpoints.up('md')]: {
+      width: 200,
+      fontSize: '1.125rem',
+      fontWeight: '400'
+    },
   }));
 
   const ImgBox = styled(Box)(() => ({
@@ -71,18 +77,17 @@ export default function FoodPage() {
     minWidth: 100,
     aspectRatio: 1,
     mx: "0.5em",
-
-  }));
+   }));
 
   const renderMonths = () => {
     return months.map((month) => {
       let userNumber = Number(month) + 1;
       return (
-        <GridBox sx={{ ...monthColor(month), mb: 1 }}>
           <Link to={`/month/${userNumber}`}>
-            <Typography>{t(`month_${month}`)}</Typography>
+            <GridBox sx={{ ...monthColor(month), m: 1 }}>
+              <div >{t(`month_${month}`)}</div>
+            </GridBox>
           </Link>
-        </GridBox>
       );
     });
   };
@@ -125,12 +130,11 @@ export default function FoodPage() {
         </Stack>
       </Stack>
       <Typography
-        variant="h6"
+        variant="h5"
         textAlign="center"
         mt={3}
         sx={{ fontWeight: 700 }}
         color="secondary.dark"
-        
       >
         {t("FoodPage_monthsInSeason")}
       </Typography>