Remove useStyles from ClimateMapped

apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js

@@ -73,7 +73,7 @@ function DropdownSearch({
     iconComponent = IconProp;
     iconBorder = {
       borderRadius: "50%",
-      border: "2px solid #fff",
+      border: "none",
     };
   }
   const searchIconButton = (

apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js

@@ -29,7 +29,7 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-12ddcnt-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />

apps/climatemappedafrica/src/components/ExplorePage/index.js

@@ -1,13 +1,12 @@
 import { Location } from "@hurumap/core";
 import { Map } from "@hurumap/next";
-import { useTheme } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
 import useExplore from "./useExplore";
 import useProfileGeography from "./useProfileGeography";
-import useStyles from "./useStyles";
 
 import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
 
@@ -45,7 +44,6 @@ function ExplorePage({
     rootGeographyHasData,
   } = rootGeography;
   const theme = useTheme();
-  const classes = useStyles(props);
   // NOTE: This setState and the corresponding useEffect are "hacks" since at
   //       this point, useReducer hasn't been called yet so we can't use
   //       dispatch directly but we need handleClickTag for initializer.
@@ -160,7 +158,48 @@ function ExplorePage({
   }
   return (
     <>
-      <div className={classes.root}>
+      <Box
+        sx={({ palette, typography }) => ({
+          display: {
+            xs: "none",
+            lg: "flex",
+          },
+          height: "calc(100vh - 88px)",
+          position: "fixed",
+          left: 0,
+          right: 0,
+          "& .tooltipPop": {
+            background: palette.background.default,
+            boxShadow: "0px 3px 6px #00000029",
+            height: typography.pxToRem(36),
+            width: typography.pxToRem(88),
+            "& .level": {
+              background: palette.primary.main,
+              borderRadius: typography.pxToRem(4),
+              color: palette.text.secondary,
+              display: "flex",
+              fontSize: typography.pxToRem(7),
+              fontWeight: "bold",
+              height: typography.pxToRem(17),
+              justifyContent: "center",
+              lineHeight: 10 / 7,
+              margin: "0 auto",
+              marginTop: typography.pxToRem(-15),
+              paddingTop: typography.pxToRem(2),
+              textTransform: "uppercase",
+              width: typography.pxToRem(62),
+            },
+            "& .name": {
+              textAlign: "center",
+              fontSize: typography.pxToRem(9),
+              fontWeight: "bold",
+              lineHeight: 13 / 9,
+              marginTop: typography.pxToRem(5),
+              textTransform: "capitalize",
+            },
+          },
+        })}
+      >
         <Map
           center={center}
           geography={geography}
@@ -188,7 +227,7 @@ function ExplorePage({
             },
           }}
         />
-      </div>
+      </Box>
       <Panel
         {...props}
         isCompare={state.isCompare}

apps/climatemappedafrica/src/components/HURUmap/CategoryHeader/index.js

@@ -1,31 +1,52 @@
-import { RichTypography } from "@commons-ui/legacy";
-import { Typography } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 import Image from "@/climatemappedafrica/components/Image";
 
 function CategoryHeader({ title, description, icon, ...props }) {
-  const classes = useStyles();
-
   if (!title) {
     return null;
   }
   return (
-    <div className={classes.root}>
-      <Typography {...props} variant="h3" className={classes.title}>
+    <div>
+      <Typography
+        {...props}
+        variant="h3"
+        sx={({ typography }) => ({
+          fontSize: typography.pxToRem(28),
+          display: "flex",
+          alignItems: "center",
+          scrollMarginTop: typography.pxToRem(110),
+          paddingTop: typography.pxToRem(40),
+          paddingBottom: typography.pxToRem(20),
+        })}
+      >
         {icon && (
-          <div className={classes.icon}>
+          <Box
+            sx={({ typography }) => ({
+              position: "relative",
+              height: typography.pxToRem(32),
+              width: typography.pxToRem(32),
+              marginRight: typography.pxToRem(10),
+            })}
+          >
             <Image src={icon} layout="fill" />
-          </div>
+          </Box>
         )}
         {title}
       </Typography>
-      <RichTypography variant="body2" className={classes.description}>
+      <Typography
+        variant="body2"
+        sx={({ typography }) => ({
+          paddingBottom: typography.pxToRem(20),
+          "& p": {
+            margin: 0,
+          },
+        })}
+      >
         {description}
-      </RichTypography>
+      </Typography>
     </div>
   );
 }

apps/climatemappedafrica/src/components/HURUmap/Chart/Filters.js

@@ -1,27 +1,18 @@
-import { ButtonBase } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { Box, ButtonBase } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useEffect, useState, useCallback } from "react";
 
 import { idify } from "./utils";
 
 import ChartFilter from "@/climatemappedafrica/components/HURUmap/ChartFilter";
 
-const useStyles = makeStyles(({ typography }) => ({
-  root: {
-    paddingBottom: typography.pxToRem(18),
-  },
-}));
-
 function Filters({
   filterGroups,
   defaultFilters,
   filterSelectProps,
   setFilterSelectProps,
   view,
-  ...props
 }) {
-  const classes = useStyles(props);
   const [availableGroups, setAvailableGroups] = useState([]);
 
   const handleFilterSelectProps = (v) => {
@@ -122,7 +113,11 @@ function Filters({
   }
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={({ typography }) => ({
+        paddingBottom: typography.pxToRem(18),
+      })}
+    >
       {
         // default filters cannot be deleted
         // & their attributes cannot be changes, but values can
@@ -149,7 +144,7 @@ function Filters({
       {availableGroups?.length > 0 && (
         <ButtonBase onClick={addFilter}>Add new filter</ButtonBase>
       )}
-    </div>
+    </Box>
   );
 }
 

apps/climatemappedafrica/src/components/HURUmap/Chart/index.js

@@ -1,8 +1,7 @@
 import { RichTypography } from "@commons-ui/legacy";
 import { ChartTooltip, IndicatorTitle, Download, Share } from "@hurumap/core";
 import { Source } from "@hurumap/next";
-import { useMediaQuery, useTheme } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
+import { Box, useMediaQuery, useTheme } from "@mui/material";
 import React, { useState, useRef, useCallback, useEffect } from "react";
 import * as vega from "vega";
 import embed from "vega-embed";
@@ -25,19 +24,6 @@
 import config, { hurumapArgs } from "@/climatemappedafrica/config";
 import site from "@/climatemappedafrica/utils/site";
 
-const useStyles = makeStyles(({ typography }) => ({
-  root: {
-    position: "relative",
-    width: "100%",
-    "&:last-of-type": {
-      marginBottom: typography.pxToRem(32),
-    },
-  },
-  chart: {
-    width: "100%",
-  },
-}));
-
 function Chart({
   indicator,
   indicatorTitle,
@@ -48,7 +34,6 @@
   isCompare,
   ...props
 }) {
-  const classes = useStyles(props);
   const chartRef = useRef();
   const tooltipRef = useRef();
   const [view, setView] = useState(null);
@@ -108,7 +93,7 @@
 
           setView(newView.view);
         } catch (error) {
           console.error("Error rendering chart", error);
         }
       }
     }
@@ -127,7 +112,7 @@
       const viewProp = new vega.View(vega.parse(cSpec), { renderer: "none" });
       setDownloadView(viewProp);
     } catch (error) {
       console.error("Error creating view", error);
     }
   }, [cSpec]);
 
@@ -328,7 +313,16 @@
   ];
 
   return (
-    <div className={classes.root} id={`chart-${id}-${geoCode}`}>
+    <Box
+      id={`chart-${id}-${geoCode}`}
+      sx={({ typography }) => ({
+        position: "relative",
+        width: "100%",
+        "&:last-of-type": {
+          marginBottom: typography.pxToRem(32),
+        },
+      })}
+    >
       <IndicatorTitle
         title={title}
         description={description}
@@ -357,7 +351,12 @@
           view={view}
         />
       )}
-      <div ref={chartRef} className={classes.chart} />
+      <Box
+        ref={chartRef}
+        sx={{
+          width: "100%",
+        }}
+      />
       <RichTypography
         variant="body2"
         sx={(theme) => ({
@@ -393,7 +392,7 @@
           }
         />
       )}
-    </div>
+    </Box>
   );
 }