Use sx props for styling

Fix typo for overflow from hidden to auto
hackforla · Sep 27, 2023 · fcdb666 · fcdb666
1 parent 1f0824d
commit fcdb666
Showing 1 changed file with 5 additions and 21 deletions.
diff --git a/client/src/components/FoodSeeker/SearchResults/layouts/Tablet.js b/client/src/components/FoodSeeker/SearchResults/layouts/Tablet.js
@@ -1,30 +1,14 @@
 import React from "react";
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    height: "100%",
-    overflow: "hidden",
-  },
-  map: {
-    height: "50%",
-  },
-  list: {
-    height: "50%",
-    overflow: "auto",
-  },
-}));
+import { Box } from "@mui/material";
 
 const TabletLayout = ({ filters, list, map }) => {
-  const classes = useStyles();
-
   return (
     <>
       {filters}
-      <div className={classes.container}>
-        <div className={classes.map}>{map}</div>
-        <div className={classes.list}>{list}</div>
-      </div>
+      <Box sx={{ height: "100%", overflow: "hidden"}}>
+        <Box sx={{ height: "50%"}}>{map}</Box>
+        <Box sx={{ height: "50%", overflow: "auto" }}>{list}</Box>
+      </Box>
     </>
   );
 };