Use @hurumap/core/LocationTag in pesayetu

CodeForAfrica · Jul 15, 2024 · dcfc5db · dcfc5db
1 parent 087156a
commit dcfc5db
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 38 deletions.
diff --git a/apps/pesayetu/src/components/HURUmap/Location/index.js b/apps/pesayetu/src/components/HURUmap/Location/index.js
@@ -1,12 +1,11 @@
+import { LocationTag } from "@hurumap/core";
 import { Box } from "@mui/material";
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React from "react";
 
 import useStyles from "./useStyles";
 
 import LocationHighlight from "@/pesayetu/components/HURUmap/LocationHighlight";
-import LocationTag from "@/pesayetu/components/HURUmap/LocationTag";
 
 function Location({ className, highlights, isLoading, tags, ...props }) {
   const classes = useStyles(props);
@@ -34,11 +33,11 @@ function Location({ className, highlights, isLoading, tags, ...props }) {
             {...tag}
             active={index === tags.length - 1}
             variant="highlight"
-            classes={{
-              root: classes.tag,
-              level: classes.tagLevel,
-              name: classes.tagName,
-            }}
+            sx={(theme) => ({
+              "&:not(:first-of-type)": {
+                marginLeft: theme.typography.pxToRem(10),
+              },
+            })}
           />
         ))}
       </Box>

diff --git a/apps/pesayetu/src/components/HURUmap/Location/useStyles.js b/apps/pesayetu/src/components/HURUmap/Location/useStyles.js
@@ -12,13 +12,6 @@ const useStyles = makeStyles(({ palette, typography }) => ({
     )} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`,
     width: typography.pxToRem(600),
   },
-  tag: {
-    "&:not(:first-of-type)": {
-      marginLeft: typography.pxToRem(10),
-    },
-  },
-  tagLevel: {},
-  tagName: {},
   highlights: {
     borderTop: `1px solid ${palette.grey.main}`,
     marginTop: 4.5,

diff --git a/apps/pesayetu/src/components/HURUmap/Map/Layers.js b/apps/pesayetu/src/components/HURUmap/Map/Layers.js
@@ -1,6 +1,5 @@
 import { LocationTag } from "@hurumap/core";
 import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
 import L from "leaflet";
 import PropTypes from "prop-types";
 import React, { useCallback, useEffect, useRef } from "react";
@@ -13,14 +12,6 @@ import theme, {
   CHART_SECONDARY_COLOR_SCHEME,
 } from "@/pesayetu/theme";
 
-const useStyles = makeStyles(() => ({
-  locationtag: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-  },
-}));
-
 const primaryGeoStyles = {
   inactive: {
     color: CHART_PRIMARY_COLOR_SCHEME[3],
@@ -100,27 +91,37 @@ function Layers({
   parentsGeometries,
   secondaryGeography,
   selectedBoundary,
-  ...props
 }) {
   const map = useMap();
   const groupRef = useRef();
   const siblingRef = useRef();
-  const classes = useStyles(props);
 
   const pinIcon = L.divIcon({
     html: ReactDOMServer.renderToStaticMarkup(
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
           <LocationTag
-            IconButtonProps={{
-              children: <CancelIcon />,
+            MarkerProps={{
+              children: <CancelIcon sx={{ fill: "currentColor" }} />,
+              sx: {
+                "&:hover": {
+                  color: "#666666",
+                  "& .Component108-4_svg__b": {
+                    stroke: theme.palette.text?.secondary,
+                  },
+                },
+              },
             }}
             level={geography?.level}
             name={geography?.name?.toLowerCase()}
             code={geography?.code}
-            classes={{ root: classes.locationtag }}
             color="primary"
             variant="marker"
+            sx={{
+              left: 0,
+              position: "absolute",
+              top: 0,
+            }}
           />
         </ThemeProvider>
       </StyledEngineProvider>,
@@ -141,10 +142,14 @@ function Layers({
             <StyledEngineProvider injectFirst>
               <ThemeProvider theme={theme}>
                 <LocationTag
+                  color={isPinOrCompare ? "secondary" : "primary"}
                   level={level}
                   name={name.toLowerCase()}
-                  classes={{ root: classes.locationtag }}
-                  color={isPinOrCompare ? "secondary" : "primary"}
+                  sx={{
+                    left: 0,
+                    position: "absolute",
+                    top: 0,
+                  }}
                 />
               </ThemeProvider>
             </StyledEngineProvider>,
@@ -206,14 +211,7 @@ function Layers({
         }
       }
     },
-    [
-      classes.locationtag,
-      geography,
-      isPinOrCompare,
-      secondaryGeography,
-      locationCodes,
-      onClick,
-    ],
+    [geography, isPinOrCompare, secondaryGeography, locationCodes, onClick],
   );
 
   useEffect(() => {