review fix

Signed-off-by: Kipruto <[email protected]>
CodeForAfrica · Jul 22, 2024 · e7a12a5 · e7a12a5
1 parent 5eb7571
commit e7a12a5
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 84 deletions.
diff --git a/apps/climatemappedafrica/jsconfig.json b/apps/climatemappedafrica/jsconfig.json
@@ -2,11 +2,11 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@/climatemappedafrica/*": ["./src/*"],
       "@/commons-ui/core/*": ["../../packages/commons-ui-core/src/*"],
       "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
       "@/hurumap/core/*": ["../../packages/hurumap-core/src/*"],
-      "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"],
-      "@/climatemappedafrica/*": ["./src/*"]
+      "@/hurumap/next/*": ["../../packages/hurumap-next/src/*"]
     }
   },
   "exclude": ["node_modules"]

diff --git a/packages/hurumap-core/jsconfig.json b/packages/hurumap-core/jsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/hurumap/core/*": ["./src/*"]
+      "@/hurumap/core/*": ["src/*"]
     }
   },
   "exclude": ["node_modules"]

diff --git a/packages/hurumap-core/src/Location/Location.js b/packages/hurumap-core/src/Location/Location.js
@@ -1,66 +1,61 @@
-import { Box, Grid, styled, useTheme } from "@mui/material";
+import { Box, Grid, useTheme } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import React from "react";
 
 import LocationHighlight from "@/hurumap/core/LocationHighlight";
 import LocationTag from "@/hurumap/core/LocationTag";
 
-const LocationRoot = styled(Grid)(({ theme }) => {
-  const { typography } = theme;
-
-  return {
-    background: alpha("#FFFFFF", 0.9),
-    borderRadius: typography.pxToRem(5),
-    bottom: "auto",
-    boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`,
-    padding: `${typography.pxToRem(4.12)} ${typography.pxToRem(19)} ${typography.pxToRem(12)} ${typography.pxToRem(21)}`,
-    width: typography.pxToRem(600),
-  };
-});
-
-const HighlightRoot = styled(Box)(({ theme }) => {
-  return {
-    borderTop: `1px solid ${theme.palette.grey.main}`,
-    marginTop: 4.5,
-    width: "100%",
-  };
-});
-
 const Location = React.forwardRef(function Location(
   { highlights, isLoading, tags, ...props },
   ref,
 ) {
   const theme = useTheme();
   return (
-    <LocationRoot container ref={ref} {...props}>
-      <Grid item xs={12}>
-        <Grid container justifyContent="center">
-          {tags.map((tag, index) => (
-            <Grid
-              item
-              key={`${tag.level}-${tag.name}`}
-              sx={{
-                "&:not(:first-of-type)": {
-                  marginLeft: theme.typography.pxToRem(10),
-                },
-              }}
-            >
-              <LocationTag
-                isLoading={isLoading}
-                {...tag}
-                active={index === tags.length - 1}
-                variant="highlight"
-              />
-            </Grid>
-          ))}
-        </Grid>
+    <Grid
+      container
+      ref={ref}
+      {...props}
+      sx={{
+        background: alpha("#FFFFFF", 0.9),
+        borderRadius: theme.typography.pxToRem(5),
+        bottom: "auto",
+        boxShadow: `0px 3px 6px ${alpha("#000000", 0.16)}`,
+        padding: `${theme.typography.pxToRem(4.12)} ${theme.typography.pxToRem(19)} ${theme.typography.pxToRem(12)} ${theme.typography.pxToRem(21)}`,
+        width: theme.typography.pxToRem(600),
+        ...props.sx,
+      }}
+    >
+      <Grid item xs={12} container justifyContent="center">
+        {tags.map((tag, index) => (
+          <Grid
+            item
+            key={`${tag.level}-${tag.name}`}
+            sx={{
+              "&:not(:first-of-type)": {
+                marginLeft: theme.typography.pxToRem(10),
+              },
+            }}
+          >
+            <LocationTag
+              isLoading={isLoading}
+              {...tag}
+              active={index === tags.length - 1}
+              variant="highlight"
+            />
+          </Grid>
+        ))}
       </Grid>
       <Grid item xs={12}>
         {highlights?.length > 0 ? (
-          <HighlightRoot
+          <Box
             display="flex"
             flexWrap="nowrap"
             justifyContent="center"
+            sx={{
+              borderTop: `1px solid ${theme.palette.grey.main}`,
+              marginTop: 4.5,
+              width: "100%",
+            }}
           >
             {highlights.map((highlight) => (
               <LocationHighlight
@@ -75,10 +70,10 @@ const Location = React.forwardRef(function Location(
                 }}
               />
             ))}
-          </HighlightRoot>
+          </Box>
         ) : null}
       </Grid>
-    </LocationRoot>
+    </Grid>
   );
 });
 

diff --git a/packages/hurumap-core/src/Location/Location.snap.js b/packages/hurumap-core/src/Location/Location.snap.js
@@ -3,59 +3,55 @@
 exports[`Location renders unchanged 1`] = `
 <div>
   <div
-    class="MuiGrid-root MuiGrid-container css-r0conc-MuiGrid-root"
+    class="MuiGrid-root MuiGrid-container css-i1hvcb-MuiGrid-root"
   >
     <div
-      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1idn90j-MuiGrid-root"
+      class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 css-s2k0j8-MuiGrid-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-1lym95h-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-item css-1dran7o-MuiGrid-root"
       >
         <div
-          class="MuiGrid-root MuiGrid-item css-1dran7o-MuiGrid-root"
+          class="MuiBox-root css-1gxyb0r"
+          href="/explore"
         >
-          <div
-            class="MuiBox-root css-1gxyb0r"
-            href="/explore"
+          <h6
+            class="css-pxh4k6"
           >
-            <h6
-              class="css-pxh4k6"
-            >
-              Country
-            </h6>
-            <span
-              class="css-k6p9om"
-            >
-              Kenya
-            </span>
-          </div>
+            Country
+          </h6>
+          <span
+            class="css-k6p9om"
+          >
+            Kenya
+          </span>
         </div>
+      </div>
+      <div
+        class="MuiGrid-root MuiGrid-item css-1dran7o-MuiGrid-root"
+      >
         <div
-          class="MuiGrid-root MuiGrid-item css-1dran7o-MuiGrid-root"
+          class="MuiBox-root css-tv63qx"
+          href="/explore/county-11"
         >
-          <div
-            class="MuiBox-root css-tv63qx"
-            href="/explore/county-11"
+          <h6
+            class="css-pxh4k6"
+          >
+            County
+          </h6>
+          <span
+            class="css-k6p9om"
           >
-            <h6
-              class="css-pxh4k6"
-            >
-              County
-            </h6>
-            <span
-              class="css-k6p9om"
-            >
-              Isiolo
-            </span>
-          </div>
+            Isiolo
+          </span>
         </div>
       </div>
     </div>
     <div
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-1idn90j-MuiGrid-root"
     >
       <div
-        class="MuiBox-root css-8eix93"
+        class="MuiBox-root css-143znge"
       >
         <div
           class="MuiBox-root css-w6ptp5"