Use sx props when styling Desktop.js (#1829)

hackforla · Oct 3, 2023 · 3bed830 · 3bed830
1 parent 1b4d05e
commit 3bed830
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/client/src/components/FoodSeeker/SearchResults/layouts/Desktop.js b/client/src/components/FoodSeeker/SearchResults/layouts/Desktop.js
@@ -1,32 +1,32 @@
 import React from "react";
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    flex: "auto",
-    overflowY: "hidden",
-    display: "flex",
-  },
-  list: {
-    width: "35%",
-    overflow: "auto",
-  },
-  map: {
-    height: "100%",
-    flex: 1,
-  },
-}));
+import { Box } from "@mui/material";
 
 const DesktopLayout = ({ filters, list, map }) => {
-  const classes = useStyles();
 
   return (
     <>
       {filters}
-      <div className={classes.container}>
-        <div className={classes.list}>{list}</div>
-        <div className={classes.map}>{map}</div>
-      </div>
+      <Box 
+        sx={{ 
+          flex: "auto",
+          overflowY: "hidden",
+          display: "flex",
+        }}>
+        <Box 
+          sx={{
+            width: "35%",
+            overflow: "auto",            
+          }}>
+          {list}
+        </Box>
+        <Box 
+          sx={{
+            height: "100%",
+            flex: 1,
+          }}>
+          {map}
+        </Box>
+      </Box>
     </>
   );
 };