fix(FoodPage): Improve layout responsibility

fuzue · Jul 15, 2023 · a6b3b37 · a6b3b37
1 parent c15f62f
commit a6b3b37
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 33 deletions.
diff --git 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
@@ -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>
   );