Merge pull request #1770 from hackforla/1765-styling-searchCriteria

1765 Update Styling System for SearchCriteria.js
hackforla · Aug 22, 2023 · 71e8f9c · 71e8f9c
2 parents cb0345c + b574a04
commit 71e8f9c
Showing 1 changed file with 22 additions and 25 deletions.
diff --git a/client/src/components/Admin/SearchCriteria.js b/client/src/components/Admin/SearchCriteria.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import makeStyles from "@mui/styles/makeStyles";
 import {
   Card,
   CardContent,
@@ -14,6 +13,8 @@ import {
   RadioGroup,
   Radio,
   TextField,
+  Box,
+  Divider,
 } from "@mui/material";
 import RadioTrueFalseEither from "./ui/RadioTrueFalseEither";
 import LocationAutocomplete from "./LocationAutocomplete";
@@ -28,15 +29,6 @@ import Label from "./ui/Label";
 // this problem.
 // import { Input } from "../UI";
 
-const useStyles = makeStyles(() => ({
-  card: {
-    margin: "0px",
-  },
-  formLabel: {
-    margin: "1rem 0 .5rem",
-  },
-}));
-
 const closeTo = (lat1, lon1, lat2, lon2) => {
   return Math.abs(lat1 - lat2) + Math.abs(lon1 - lon2) < 0.01;
 };
@@ -103,8 +95,6 @@ const SearchCriteria = ({
     console.log(criteria);
   };
 
-  const classes = useStyles();
-
   const handleRadioChange = (evt) => {
     const val = evt.target.value;
     setUseMyLocation(val);
@@ -139,7 +129,7 @@ const SearchCriteria = ({
   };
 
   return (
-    <Card className={classes.card}>
+    <Card>
       <CardContent>
         <Grid container spacing={4}>
           <Grid item xs={12} sm={6}>
@@ -184,14 +174,15 @@ const SearchCriteria = ({
                 variant="outlined"
                 placeholder="Category(ies)"
                 fullWidth
+                labelId="select-multiple-chip"
                 value={criteria.categoryIds}
                 onChange={(event) => {
                   const categoryIds = event.target.value;
                   setCriteria({ ...criteria, categoryIds });
                 }}
                 inputProps={{ id: "select-categories" }}
                 renderValue={(ids) => (
-                  <div>
+                  <Typography>
                     {ids &&
                     ids.length > 0 &&
                     categories &&
@@ -205,11 +196,13 @@ const SearchCriteria = ({
                           )
                           .join(", ")
                       : "(Any)"}
-                  </div>
+                  </Typography>
                 )}
               >
                 <MenuItem disabled value="">
-                  <em>(All Categories)</em>
+                  <Typography sx={{ fontStyle: "italic" }}>
+                    (All Categories)
+                  </Typography>
                 </MenuItem>
                 {categories.map((category) => (
                   <MenuItem key={category.id} value={category.id}>
@@ -370,7 +363,9 @@ const SearchCriteria = ({
             <Grid container>
               <Label id="radius" label="Location" />
               <Grid item container alignItems="center">
-                <div style={{ marginRight: "0.5rem" }}>{"Within "}</div>
+                <Typography sx={{ marginRight: "0.5rem" }}>
+                  {"Within "}
+                </Typography>
                 <Select
                   name="radius"
                   variant="outlined"
@@ -404,7 +399,9 @@ const SearchCriteria = ({
                     50
                   </MenuItem>
                 </Select>
-                <div style={{ margin: "0 1rem 0 .5rem" }}>{"miles of"}</div>
+                <Typography sx={{ margin: "0 1rem 0 .5rem" }}>
+                  {"miles of"}
+                </Typography>
               </Grid>
               <Grid item xs={12}>
                 {/* If we got location from browser, allow using current location */}
@@ -419,21 +416,21 @@ const SearchCriteria = ({
                       control={<Radio color="primary" />}
                       style={{ alignItems: "flex-start" }}
                       label={
-                        <div>
+                        <Box>
                           <Typography>My Location: </Typography>
                           <Typography>{`(${userLatitude.toFixed(
                             6
                           )}, ${userLongitude.toFixed(6)})`}</Typography>
-                        </div>
+                        </Box>
                       }
                     />
                     <FormControlLabel
                       value="custom"
                       control={<Radio color="primary" />}
                       style={{ alignItems: "flex-start" }}
                       label={
-                        <div>
-                          <hr />
+                        <Box>
+                          <Divider />
                           <Typography>{`Custom Location:`} </Typography>
                           {customPlaceName ? (
                             <Typography>{customPlaceName}</Typography>
@@ -448,12 +445,12 @@ const SearchCriteria = ({
                             fullWidth
                             setLocation={setLocation}
                           />
-                        </div>
+                        </Box>
                       }
                     />
                   </RadioGroup>
                 ) : (
-                  <div>
+                  <Box>
                     {customPlaceName ? (
                       <Typography>{customPlaceName}</Typography>
                     ) : null}
@@ -468,7 +465,7 @@ const SearchCriteria = ({
                       fullWidth
                       setLocation={setLocation}
                     />
-                  </div>
+                  </Box>
                 )}
               </Grid>
             </Grid>