Merge pull request #44 from fuzue/38-review-layout

38 review layout

src/components/HeaderBar.tsx

@@ -68,8 +68,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 }) => ({
@@ -88,13 +88,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",
       },
     },
   }));
@@ -109,18 +106,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
@@ -132,7 +129,7 @@ export default function HeaderBar(props: Props) {
       >
         <MenuIcon />
       </IconButton>
-    )
+    );
   }
 
   return (

src/components/RenderFoods.tsx

@@ -1,14 +1,11 @@
 import type { FoodList } from "../types/food";
 import Item from "./Item";
-import { Grid, styled } from "@mui/material";
-import { FunctionComponent } from "react"
+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
+}
 
 interface RenderFoodProps {
   foodList: FoodList
@@ -19,15 +16,15 @@ 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>
   );
 }
 

src/main.css

@@ -8,7 +8,6 @@ body {
 }
 
 .App {
-  text-align: center;
   width:100%;
   margin: 0 auto;
 
@@ -66,18 +65,14 @@ a {
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
-
 }
 
 /* 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{
@@ -99,12 +94,12 @@ a {
   display: flex;
   justify-content: flex-start;
   gap:1em;
-  
+
 }
 .wiki-logo{
   height: 2rem;
   color:#0b7b5c;
-  
+
 }
 
 .months-in-season-title{

src/routes/FoodOfTheMonth.tsx

@@ -1,48 +1,61 @@
 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, Tab, Tabs, styled, alpha } from "@mui/material";
+import {
+  Box,
+  Tab,
+  Tabs,
+  styled,
+  alpha,
+  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";
 import { FoodDBContext } from "../contexts/FoodDB"
 import React from "react"
 
+
 export default function FoodOfTheMonth() {
   const [food, _] = React.useContext(FoodDBContext)
-  const { selectedMonthNum  } = useParams();
-  const { t } = useTranslation()
-  const monthNum = Number(selectedMonthNum) - 1
-  const filteredFood:{[foodType:string]: FoodList} = {'Fruits': [], 'Veggies': []}
+  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();
   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) =>
     monthFood.filter((item) => item.category === foodCategory);
   filteredFood["Fruits"] = filterFoodType(monthFood, "Fruits");
   filteredFood["Veggies"] = filterFoodType(monthFood, "Veggies");
-  const num_fruits = filteredFood["Fruits"].length
-  const num_veggies = filteredFood["Veggies"].length
+  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);
   // @ts-ignore
-  const handleChange = (event: ChangeEvent<EventTarget>, newFoodCategory: FoodCategory) => {
+  const handleChange = (newFoodCategory: FoodCategory) => {
     setFoodType(newFoodCategory);
-
   };
 
   //variables to change month when pressing the arrows
@@ -52,56 +65,54 @@ export default function FoodOfTheMonth() {
   //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",
   }));
 
-  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: num_fruits, fruits: num_fruits})
-               + ' ' + t('FoodOfTheMonth_veggiesNumber', { count: num_veggies, veggies: num_veggies})}
-            </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><RenderFoods foodList={filteredFood[foodType]}/></ItemsBox>
-      </div>
-
+        <ArrowButton to={`/month/${nextMonth + 1}`}>
+          <ArrowRight />
+        </ArrowButton>
+      </Stack>
+      <Tabs
+        value={foodType}
+        onChange={(_, value) => handleChange(value)}
+        variant="fullWidth"
+        sx={{ fontWeight: 700 }}
+        aria-label="tabs for the selection of fruits, vegetables or others"
+      >
+        <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>
+      <RenderFoods foodList={filteredFood[foodType]} />
+
     </Box>
   );
-
 }
-