From 793e8d0bce733bb6de98e7b523613db5e9099ad3 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Fri, 14 Jul 2023 18:38:45 -0300
Subject: [PATCH 1/9] remove console log

---
 src/routes/FoodOfTheMonth.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index d7479df..c4f9767 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -8,7 +8,6 @@ import { useTranslation } from "react-i18next"
 
 export default function FoodOfTheMonth({food} : {food: FoodList}) {
   const { selectedMonthNum  } = useParams();
-  console.log(selectedMonthNum)
   const { t } = useTranslation()
   const monthNum = Number(selectedMonthNum) - 1
 

From 62df17db4c438dbc80de8433a79a07c90fe411a8 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Sat, 15 Jul 2023 11:26:12 -0300
Subject: [PATCH 2/9] put fruit ans vegetable number on badge

---
 src/routes/FoodOfTheMonth.tsx | 82 ++++++++++++++---------------------
 src/routes/Layout.tsx         |  3 --
 2 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index c4f9767..6c1312b 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -1,28 +1,28 @@
 import type { FoodList, FoodCategory, FoodObject } from "../types/food";
 import { ChangeEvent, useState, useEffect } from "react";
 import { useParams, Link, useNavigate } from "react-router-dom";
-import { Box, Tab, Tabs, styled, alpha } from "@mui/material";
+import { Box, Tab, Tabs, styled, alpha, Badge, BadgeProps, Chip, Typography, Stack } from "@mui/material";
 import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 import RenderFoods from "../components/RenderFoods";
-import { useTranslation } from "react-i18next"
+import { useTranslation } from "react-i18next";
 
-export default function FoodOfTheMonth({food} : {food: FoodList}) {
-  const { selectedMonthNum  } = useParams();
-  const { t } = useTranslation()
-  const monthNum = Number(selectedMonthNum) - 1
+export default function FoodOfTheMonth({ food }: { food: FoodList }) {
+  const { selectedMonthNum } = useParams();
+  const { t } = useTranslation();
+  const monthNum = Number(selectedMonthNum) - 1;
 
   //month change arrows function
   const navigate = useNavigate();
   useEffect(() => {
-    if(monthNum < 0 || monthNum > 11) {
+    if (monthNum < 0 || monthNum > 11) {
       return navigate("/NotFound");
     }
-  })
+  });
 
   const monthFood = [] as FoodObject[];
-  food.forEach(item => {
-    if(item.season[monthNum] === true) monthFood.push(item);
-  })
+  food.forEach((item) => {
+    if (item.season[monthNum] === true) monthFood.push(item);
+  });
 
   //filters the fruits and vegetables
   const filterFoodType = (monthFood: FoodList, foodCategory: FoodCategory) =>
@@ -37,7 +37,7 @@ export default function FoodOfTheMonth({food} : {food: FoodList}) {
   //variables to handle the changing tabs
   const [foodType, setFoodType] = useState("Fruits" as FoodCategory);
   // @ts-ignore
-  const handleChange = (event: ChangeEvent<EventTarget>, newFoodCategory: FoodCategory) => {
+  const handleChange = (newFoodCategory: FoodCategory) => {
     setFoodType(newFoodCategory);
   };
 
@@ -68,46 +68,30 @@ export default function FoodOfTheMonth({food} : {food: FoodList}) {
     },
   }));
 
-  const ItemsBox = styled(Box)(({ theme }) => ({
-    borderRadius: theme.shape.borderRadius,
-    margin: "0",
-    display: "flex",
-  }));
   return (
     <Box>
-      <div className="month-container">
-        <div className="selected-month">
-          <ArrowButton to={`/month/${prevMonth + 1}`}>
-            <ArrowLeft />
-          </ArrowButton>
-          <div className="month-title">
-            <h4>{t(`month_${monthNum}`)}</h4>
-          </div>
-          <ArrowButton to={`/month/${nextMonth + 1}`}>
-            <ArrowRight />
-          </ArrowButton>
-        </div>
-            <p className="food-counter-text">
-              {t('FoodOfTheMonth_fruitsNumber', { count: fruitsList.length, fruits: fruitsList.length})
-               + ' ' + t('FoodOfTheMonth_veggiesNumber', { count: veggiesList.length, veggies: veggiesList.length})}
-            </p>
-         
-        <div className="button-wrapper">
-          <Tabs
-            value={foodType}
-            onChange={(e, value) => handleChange(e, value)}
-            sx={{ fontWeight: 700 }}
-            aria-label="tabs for the selection of fruits, vegetables or others"
-          >
-            <Tab label={t('FoodOfTheMonth_fruitsTabText')} value="Fruits" />
-            <Tab label={t('FoodOfTheMonth_vegetablesTabText')} value="Veggies"  />
-          </Tabs>
+      <Stack direction="row" justifyContent="space-between" sx={{mt: 2}}>
+        <ArrowButton to={`/month/${prevMonth + 1}`}>
+          <ArrowLeft />
+        </ArrowButton>
+        <div className="month-title">
+          <Typography variant="h6">{t(`month_${monthNum}`)}</Typography>
         </div>
-        <ItemsBox>{changeTab(foodType)}</ItemsBox>
-      </div>
-      
+        <ArrowButton to={`/month/${nextMonth + 1}`}>
+          <ArrowRight />
+        </ArrowButton>
+      </Stack>
+      <Tabs
+        value={foodType}
+        onChange={(e, value) => handleChange(value)}
+        variant="fullWidth"
+        sx={{ fontWeight: 700 }}
+        aria-label="tabs for the selection of fruits, vegetables or others"
+      >
+        <Tab label={<span><Chip label={fruitsList.length} sx={{mr: 1}} size="small" />{t("FoodOfTheMonth_fruitsTabText")}</span>} value="Fruits" />
+        <Tab label={<span><Chip label={veggiesList.length} sx={{mr: 1}} size="small" />{t("FoodOfTheMonth_vegetablesTabText")}</span>} value="Veggies" />
+      </Tabs>
+      {changeTab(foodType)}
     </Box>
   );
-  
 }
-
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 563ff76..ee3a41c 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -53,10 +53,7 @@ const theme = createTheme({
 function Layout({ food }: { food: FoodList }) {
   const MainBox = styled(Box)(() => ({
     width: "100%",
-    maxWidth: "450px",
     display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
     margin: "0 auto",
     paddingBottom: "1em",
     minHeight: "100%",

From e608d4eb449ca6d18963da3389c80cf941f4ac0c Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Sat, 15 Jul 2023 11:58:27 -0300
Subject: [PATCH 3/9] fix(Layout): add key to SelectLang items

---
 src/routes/Layout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index ee3a41c..27b0133 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -81,7 +81,7 @@ function Layout({ food }: { food: FoodList }) {
   const lngs = {
     en: { nativeName: "English" },
     it: { nativeName: "Italiano" },
-  } as { [key: string]: any };
+  } as { [key: string]: { nativeName: string } };
 
   const SelectLang = (
     <FormControl sx={{ minWidth: '100%' }} size="small">
@@ -94,7 +94,7 @@ function Layout({ food }: { food: FoodList }) {
         onChange={(event: SelectChangeEvent) => i18n.changeLanguage(event.target.value)}
       >
         {Object.keys(lngs).map((lng) => (
-          <MenuItem selected={i18n.resolvedLanguage === lng} value={lng}>{lngs[lng].nativeName}</MenuItem>
+          <MenuItem key={lng} selected={i18n.resolvedLanguage === lng} value={lng}>{lngs[lng].nativeName}</MenuItem>
         ))}
       </Select>
     </FormControl>

From c063a45ffb512bb78ec6a437b76b10bcb47b652e Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Sat, 15 Jul 2023 18:49:03 -0300
Subject: [PATCH 4/9] fix(RenderFoods): fix layout, centering food boxes

---
 src/components/RenderFoods.tsx | 25 +++++++--------
 src/main.css                   |  5 ++-
 src/routes/FoodOfTheMonth.tsx  | 58 ++++++++++++++++++++++------------
 src/routes/Layout.tsx          | 11 +------
 4 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/src/components/RenderFoods.tsx b/src/components/RenderFoods.tsx
index abc2e7b..beca466 100644
--- a/src/components/RenderFoods.tsx
+++ b/src/components/RenderFoods.tsx
@@ -1,28 +1,27 @@
 
 import type { FoodList } from "../types/food";
 import Item from "./Item";
-import { Grid, styled } from "@mui/material";
+import { Box, Stack } from "@mui/material";
+import { FunctionComponent } from "react";
 
-const StyledGrid = styled(Grid)(() => ({
-  display: "flex",
-  justifyContent: "space-around",
-  alignItems: "center",
-  margin: "0.25em",
-}));
+interface RenderFoodProps {
+  foodList: FoodList
+}
 
 //render the grid of foods
-function RenderFoods(foodList: FoodList) {
+const RenderFoods:FunctionComponent<RenderFoodProps> = (props:RenderFoodProps) => {
+  const foodList = props.foodList
   const foodItems = foodList.map((item, key) => {
     return (
-      <Grid item xs={4} key={key}>
-        <Item key={key} {...item} />
-      </Grid>
+      <Box sx={{m: 2, display: 'flex', flexGrow: 1, justifyContent: "center"}} key={key}>
+        <Item {...item} />
+      </Box>
     );
   });
   return (
-    <StyledGrid container spacing={2}>
+    <Stack direction="row" flexWrap="wrap">
       {foodItems}
-    </StyledGrid>
+    </Stack>
   );
 }
 
diff --git a/src/main.css b/src/main.css
index 805fd35..0b2578b 100644
--- a/src/main.css
+++ b/src/main.css
@@ -66,7 +66,6 @@ a {
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
- 
 }
 
 /* FOODPAGE COMPONENT LAYOUT */
@@ -99,12 +98,12 @@ a {
   display: flex;
   justify-content: flex-start;
   gap:1em;
-  
+
 }
 .wiki-logo{
   height: 2rem;
   color:#0b7b5c;
-  
+
 }
 
 .months-in-season-title{
diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index 6c1312b..abf58f2 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -1,7 +1,18 @@
 import type { FoodList, FoodCategory, FoodObject } from "../types/food";
 import { ChangeEvent, useState, useEffect } from "react";
 import { useParams, Link, useNavigate } from "react-router-dom";
-import { Box, Tab, Tabs, styled, alpha, Badge, BadgeProps, Chip, Typography, Stack } from "@mui/material";
+import {
+  Box,
+  Tab,
+  Tabs,
+  styled,
+  alpha,
+  Badge,
+  BadgeProps,
+  Chip,
+  Typography,
+  Stack,
+} from "@mui/material";
 import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 import RenderFoods from "../components/RenderFoods";
 import { useTranslation } from "react-i18next";
@@ -10,6 +21,7 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
   const { selectedMonthNum } = useParams();
   const { t } = useTranslation();
   const monthNum = Number(selectedMonthNum) - 1;
+  const filteredFood:{[foodType:string]: FoodList} = {'Fruits': [], 'Veggies': []}
 
   //month change arrows function
   const navigate = useNavigate();
@@ -27,12 +39,10 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
   //filters the fruits and vegetables
   const filterFoodType = (monthFood: FoodList, foodCategory: FoodCategory) =>
     monthFood.filter((item) => item.category === foodCategory);
-  const fruitsList = filterFoodType(monthFood, "Fruits");
-  const veggiesList = filterFoodType(monthFood, "Veggies");
-
-  //renders the fruits, veggies and others
-  const RenderFruits = () => RenderFoods(fruitsList);
-  const RenderVeggies = () => RenderFoods(veggiesList);
+  filteredFood["Fruits"] = filterFoodType(monthFood, "Fruits");
+  filteredFood["Veggies"] = filterFoodType(monthFood, "Veggies");
+  const num_fruits = filteredFood["Fruits"].length;
+  const num_veggies = filteredFood["Veggies"].length;
 
   //variables to handle the changing tabs
   const [foodType, setFoodType] = useState("Fruits" as FoodCategory);
@@ -41,16 +51,6 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
     setFoodType(newFoodCategory);
   };
 
-  //function to render the different types according to the tab
-  const changeTab = (foodType: FoodCategory) => {
-    switch (foodType) {
-      case "Fruits":
-        return <RenderFruits />;
-      case "Veggies":
-        return <RenderVeggies />;
-    }
-  };
-
   //variables to change month when pressing the arrows
   const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
   const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
@@ -70,7 +70,7 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
 
   return (
     <Box>
-      <Stack direction="row" justifyContent="space-between" sx={{mt: 2}}>
+      <Stack direction="row" justifyContent="space-between" sx={{ mt: 2 }}>
         <ArrowButton to={`/month/${prevMonth + 1}`}>
           <ArrowLeft />
         </ArrowButton>
@@ -88,10 +88,26 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
         sx={{ fontWeight: 700 }}
         aria-label="tabs for the selection of fruits, vegetables or others"
       >
-        <Tab label={<span><Chip label={fruitsList.length} sx={{mr: 1}} size="small" />{t("FoodOfTheMonth_fruitsTabText")}</span>} value="Fruits" />
-        <Tab label={<span><Chip label={veggiesList.length} sx={{mr: 1}} size="small" />{t("FoodOfTheMonth_vegetablesTabText")}</span>} value="Veggies" />
+        <Tab
+          label={
+            <span>
+              <Chip label={num_fruits} sx={{ mr: 1 }} size="small" />
+              {t("FoodOfTheMonth_fruitsTabText")}
+            </span>
+          }
+          value="Fruits"
+        />
+        <Tab
+          label={
+            <span>
+              <Chip label={num_veggies} sx={{ mr: 1 }} size="small" />
+              {t("FoodOfTheMonth_vegetablesTabText")}
+            </span>
+          }
+          value="Veggies"
+        />
       </Tabs>
-      {changeTab(foodType)}
+      <RenderFoods foodList={filteredFood[foodType]}/>
     </Box>
   );
 }
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 27b0133..29fa429 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -38,16 +38,7 @@ const theme = createTheme({
       main: "#ff7664", //red
       dark: "#4071d8", //blue
     },
-  },
-  breakpoints: {
-    values: {
-      xs: 450,
-      sm: 600,
-      md: 900,
-      lg: 1200,
-      xl: 1536,
-    },
-  },
+  }
 });
 
 function Layout({ food }: { food: FoodList }) {

From fade8a535a76c14d39654729f705f5fa43b2cc2a Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Sat, 15 Jul 2023 18:52:46 -0300
Subject: [PATCH 5/9] fix(Headerbar): fix layout braks from removing
 breakpoints

---
 src/components/HeaderBar.tsx | 37 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index c584d67..193f94a 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -56,8 +56,8 @@ export default function HeaderBar(props: Props) {
     "&:hover": {
       backgroundColor: alpha(theme.palette.common.white, 0.25),
     },
-    marginLeft: 'auto',
-    width: "auto"
+    marginLeft: "auto",
+    width: "auto",
   }));
 
   const SearchIconWrapper = styled("div")(({ theme }) => ({
@@ -76,13 +76,10 @@ export default function HeaderBar(props: Props) {
       padding: theme.spacing(1, 1, 1, 0),
       // vertical padding + font size from searchIcon
       paddingLeft: `calc(1em + ${theme.spacing(4)})`,
-      transition: theme.transitions.create('width'),
-      width: "100%",
-      [theme.breakpoints.up("sm")]: {
-        width: "12ch",
-        "&:focus": {
-          width: "20ch",
-        },
+      transition: theme.transitions.create("width"),
+      width: "12ch",
+      "&:focus": {
+        width: "20ch",
       },
     },
   }));
@@ -97,18 +94,18 @@ export default function HeaderBar(props: Props) {
   const location = useLocation();
 
   function leftButton() {
-    if(location.pathname.split("/")[1] === "foodpage") {
+    if (location.pathname.split("/")[1] === "foodpage") {
       return (
         <IconButton
-        size="large"
-        edge="start"
-        color="inherit"
-        aria-label="open drawer"
-        onClick={() => navigate(-1)}
-      >
-        <ArrowBackIosNew />
-      </IconButton>
-      )
+          size="large"
+          edge="start"
+          color="inherit"
+          aria-label="open drawer"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowBackIosNew />
+        </IconButton>
+      );
     }
     return (
       <IconButton
@@ -120,7 +117,7 @@ export default function HeaderBar(props: Props) {
       >
         <MenuIcon />
       </IconButton>
-    )
+    );
   }
 
   return (

From c15f62f88998739afe75e59f498c6383937f5a52 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Sat, 15 Jul 2023 18:53:48 -0300
Subject: [PATCH 6/9] fix(FoodOfTheMonth): fix layout braks from removing
 breakpoints

---
 src/routes/FoodOfTheMonth.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index abf58f2..fed7199 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -21,7 +21,10 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
   const { selectedMonthNum } = useParams();
   const { t } = useTranslation();
   const monthNum = Number(selectedMonthNum) - 1;
-  const filteredFood:{[foodType:string]: FoodList} = {'Fruits': [], 'Veggies': []}
+  const filteredFood: { [foodType: string]: FoodList } = {
+    Fruits: [],
+    Veggies: [],
+  };
 
   //month change arrows function
   const navigate = useNavigate();
@@ -58,14 +61,11 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
   //styled MUI arrows
   const ArrowButton = styled(Link)(({ theme }) => ({
     color: alpha(theme.palette.common.black, 0.75),
-    width: "2em",
     "&:hover": {
       color: alpha(theme.palette.common.black, 0.95),
     },
-    [theme.breakpoints.up("sm")]: {
-      marginLeft: theme.spacing(1),
-      width: "auto",
-    },
+    marginLeft: theme.spacing(1),
+    width: "auto",
   }));
 
   return (
@@ -107,7 +107,7 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
           value="Veggies"
         />
       </Tabs>
-      <RenderFoods foodList={filteredFood[foodType]}/>
+      <RenderFoods foodList={filteredFood[foodType]} />
     </Box>
   );
 }

From a6b3b37156fff53360e1bfd4091003c7486f9978 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Sat, 15 Jul 2023 19:36:10 -0300
Subject: [PATCH 7/9] fix(FoodPage): Improve layout responsibility

---
 src/main.css            |  8 ++------
 src/routes/FoodPage.tsx | 45 +++++++++++++++++------------------------
 2 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/src/main.css b/src/main.css
index 0b2578b..aa8c2b2 100644
--- a/src/main.css
+++ b/src/main.css
@@ -8,7 +8,6 @@ body {
 }
 
 .App {
-  text-align: center;
   width:100%;
   margin: 0 auto;
 
@@ -71,12 +70,9 @@ a {
 /* FOODPAGE COMPONENT LAYOUT */
 
 .foodPage-image {
-  align-items: end;
-  border-radius: 8px;
-  box-shadow: 3px 4px 8px #888888;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  width:100%;
-  height: 160px;
   }
 
 .season-status{
diff --git a/src/routes/FoodPage.tsx b/src/routes/FoodPage.tsx
index 56662e7..8c65d58 100644
--- a/src/routes/FoodPage.tsx
+++ b/src/routes/FoodPage.tsx
@@ -2,7 +2,7 @@ import type { FoodList } from "../types/food";
 import { currentMonth } from "../utils/utils";
 import { useParams, useNavigate, Link } from "react-router-dom";
 import { useEffect } from "react";
-import { Box, Typography, Grid } from "@mui/material";
+import { Box, Typography, Grid, Stack } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
@@ -63,43 +63,33 @@ export default function FoodPage({ food }: { food: FoodList }) {
   }));
 
   const ImgBox = styled(Box)(() => ({
-    objectFit: "cover",
-    margin: "1em",
-    width: "40%",
-    maxHeight: "160px",
+    position: "relative",
+    overflow: "hidden",
+    width: "8rem",
+    height: "8rem",
+    borderRadius: "1rem",
+    boxShadow: "3px 4px 8px #888888"
   }));
 
   const renderMonths = () => {
     return months.map((month) => {
       let userNumber = Number(month) + 1
       return (
-        <Grid item
-          className="grid-item"
-          xs={4}
-          key={month.toString()}
-        >
           <GridBox
-            sx={monthColor(month)}>
+            sx={{...monthColor(month), m: 1}}>
             <Link to={`/month/${userNumber}`}>
               {t(`month_${month}`)}
             </Link>
           </GridBox>
-        </Grid>
       );
     });
   }
 
   return (
     <Box
-      marginX={1}
       justifyContent="space-between"
       alignItems="center">
-      <Box
-        display='flex'
-        justifyContent='center'
-        textAlign='left'
-        marginTop='1.5em'
-      >
+      <Stack direction="row" padding={2}>
         <ImgBox>
           <img className='foodPage-image' src={`../images/${image}.png`} alt={`photo of ${image}`} />
         </ImgBox>
@@ -111,27 +101,28 @@ export default function FoodPage({ food }: { food: FoodList }) {
           alignItems="left"
           justifyContent="center"
           width="50%">
-          <Typography variant="h6"> {/* typescript problem */}
-            {t(selectedFood?selectedFood.description[0].name:'FOOD NOT FOUND')}:
+          <Typography variant="h5" sx={{fontWeight: 700}}> {/* typescript problem */}
+            {t(selectedFood?selectedFood.description[0].name:'FOOD NOT FOUND')}
           </Typography>
           <Typography>{t(seasonStatus)}</Typography>
-        </Box>
       </Box>
+      </Stack>
 
       {/* BOTTOM GRID WITH MONTHS */}
       <Box
         sx={{
           margin: '1em ',
         }}>
-        <Typography marginY={2} variant="h6" >
+        {/* <Typography marginY={2} variant="h6" >
           {t('FoodPage_monthsInSeason')}
-        </Typography>
-        <Grid container
+        </Typography> */}
+        <Stack
           direction="row"
-          spacing={3}
+          flexWrap="wrap"
+          justifyContent="space-around"
         >
           {renderMonths()}
-        </Grid>
+        </Stack>
       </Box>
     </Box>
   );

From 1c7e150179254a913f69ba049b0b7a81d9e2ed62 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Sat, 15 Jul 2023 19:39:05 -0300
Subject: [PATCH 8/9] fix build errors

---
 src/routes/FoodOfTheMonth.tsx | 6 ++----
 src/routes/FoodPage.tsx       | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index fed7199..1897bc7 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -1,5 +1,5 @@
 import type { FoodList, FoodCategory, FoodObject } from "../types/food";
-import { ChangeEvent, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useParams, Link, useNavigate } from "react-router-dom";
 import {
   Box,
@@ -7,8 +7,6 @@ import {
   Tabs,
   styled,
   alpha,
-  Badge,
-  BadgeProps,
   Chip,
   Typography,
   Stack,
@@ -83,7 +81,7 @@ export default function FoodOfTheMonth({ food }: { food: FoodList }) {
       </Stack>
       <Tabs
         value={foodType}
-        onChange={(e, value) => handleChange(value)}
+        onChange={(_, value) => handleChange(value)}
         variant="fullWidth"
         sx={{ fontWeight: 700 }}
         aria-label="tabs for the selection of fruits, vegetables or others"
diff --git a/src/routes/FoodPage.tsx b/src/routes/FoodPage.tsx
index 8c65d58..24690bb 100644
--- a/src/routes/FoodPage.tsx
+++ b/src/routes/FoodPage.tsx
@@ -2,7 +2,7 @@ import type { FoodList } from "../types/food";
 import { currentMonth } from "../utils/utils";
 import { useParams, useNavigate, Link } from "react-router-dom";
 import { useEffect } from "react";
-import { Box, Typography, Grid, Stack } from "@mui/material";
+import { Box, Typography, Stack } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 

From 3ae34b1394e1957257d7b9b2e289188ac150b166 Mon Sep 17 00:00:00 2001
From: Edgar Zanella Alvarenga <e@vaz.io>
Date: Mon, 17 Jul 2023 15:11:35 +0200
Subject: [PATCH 9/9] Remove unused food props. Now it's beign used from the
 FoodDBContext

---
 src/routes/FoodOfTheMonth.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index ca1d648..23ff8f0 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -18,7 +18,7 @@ import { FoodDBContext } from "../contexts/FoodDB"
 import React from "react"
 
 
-export default function FoodOfTheMonth({ food }: { food: FoodList }) {
+export default function FoodOfTheMonth() {
   const [food, _] = React.useContext(FoodDBContext)
   const { selectedMonthNum } = useParams();
   const { t } = useTranslation();