From 773a0a1c12a1c293c9756ce7193e2f8e3d5f3b7d Mon Sep 17 00:00:00 2001
From: andyarensman <86622025+andyarensman@users.noreply.github.com>
Date: Mon, 28 Aug 2023 17:54:55 -0700
Subject: [PATCH] 1784 stylinng ResultsList.js

---
 .../SearchResults/ResultsList/ResultsList.js  | 76 ++++++++-----------
 1 file changed, 33 insertions(+), 43 deletions(-)

diff --git a/client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.js b/client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.js
index 95c1432fd..65a2169e9 100644
--- a/client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.js
+++ b/client/src/components/FoodSeeker/SearchResults/ResultsList/ResultsList.js
@@ -1,46 +1,19 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import { Button, CircularProgress, Stack } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Stack,
+  Typography,
+} from "@mui/material";
 import StakeholderPreview from "../StakeholderPreview/StakeholderPreview";
 import StakeholderDetails from "../StakeholderDetails/StakeholderDetails";
 import * as analytics from "services/analytics";
 import { useSelectedOrganization } from "../../../../appReducer";
 import { Virtuoso } from "react-virtuoso";
 
-const useStyles = makeStyles((theme) => ({
-  listContainer: {
-    textAlign: "center",
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    [theme.breakpoints.down("sm")]: {
-      fontSize: 12,
-    },
-    padding: "1px", // This keeps the control width from infintely switching widths back and forth - have no idea why
-  },
-  list: {
-    width: "100%",
-    margin: 0,
-    flex: 1,
-  },
-  preview: {
-    width: "100%",
-    borderBottom: " .2em solid #f1f1f1",
-    padding: "0",
-  },
-  emptyResult: {
-    padding: "1em 0",
-    display: "flex",
-    flexDirection: "column",
-    alignContent: "center",
-  },
-}));
-
 const ResultsList = ({ stakeholders, loading, handleReset }) => {
-  const classes = useStyles();
   const selectedOrganization = useSelectedOrganization();
 
   useEffect(() => {
@@ -48,37 +21,54 @@ const ResultsList = ({ stakeholders, loading, handleReset }) => {
   }, []);
 
   return (
-    <div className={classes.listContainer}>
+    <Stack
+      alignItems="center"
+      sx={{
+        width: 1,
+        height: 1,
+        padding: "1px",
+        textAlign: "center",
+        fontSize: { sm: 12 },
+      }}
+    >
       {loading && (
         <Stack justifyContent="center" alignContent="center">
           <CircularProgress />
         </Stack>
       )}
       {!loading && stakeholders.length === 0 && (
-        <div className={classes.emptyResult}>
-          <p>Sorry, we don&apos;t have any results for this area.</p>
+        <Stack sx={{ padding: "1em 0", alignContent: "center" }}>
+          <Typography>
+            Sorry, we don&apos;t have any results for this area.
+          </Typography>
           <Button variant="outlined" onClick={handleReset} disableElevation>
             Click here to reset the search
           </Button>
-        </div>
+        </Stack>
       )}
       {stakeholders &&
       selectedOrganization &&
       !selectedOrganization.inactive ? (
         <StakeholderDetails />
       ) : (
-        <div className={classes.list}>
+        <Box sx={{ width: 1, margin: 0, flex: 1 }}>
           <Virtuoso
             data={stakeholders}
             itemContent={(index) => (
-              <div className={classes.preview}>
+              <Box
+                sx={{
+                  width: 1,
+                  borderBottom: ".2em solid #f1f1f1",
+                  padding: "0",
+                }}
+              >
                 <StakeholderPreview stakeholder={stakeholders[index]} />
-              </div>
+              </Box>
             )}
           />
-        </div>
+        </Box>
       )}
-    </div>
+    </Stack>
   );
 };