Remove useStyles from HURUMap

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

@@ -1,31 +1,53 @@
-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}>
-            <Image src={icon} layout="fill" />
-          </div>
+          <Box
+            sx={({ typography }) => ({
+              position: "relative",
+              height: typography.pxToRem(32),
+              width: typography.pxToRem(32),
+              marginRight: typography.pxToRem(10),
+              backgroundImage: `url(${icon})`,
+              backgroundSize: "contain",
+              backgroundRepeat: "no-repeat",
+            })}
+          />
         )}
         {title}
       </Typography>
-      <RichTypography variant="body2" className={classes.description}>
-        {description}
-      </RichTypography>
+      {description && (
+        <Typography
+          variant="body2"
+          sx={({ typography }) => ({
+            paddingBottom: typography.pxToRem(20),
+            "& p": {
+              margin: 0,
+            },
+          })}
+        >
+          {description}
+        </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";
@@ -18,26 +17,13 @@
 import LinkedInIcon from "@/climatemappedafrica/assets/icons/LinkedIn.svg";
 import InfoIcon from "@/climatemappedafrica/assets/icons/plus.svg";
 import ShareIcon from "@/climatemappedafrica/assets/icons/share.svg";
-import TwitterIcon from "@/climatemappedafrica/assets/icons/Twitter.svg";
 import WhatsAppIcon from "@/climatemappedafrica/assets/icons/WhatsApp.svg";
+import XLogo from "@/climatemappedafrica/assets/icons/x-logo.svg";
 import cfalogo from "@/climatemappedafrica/assets/logos/cfa.svg";
 import projectlogo from "@/climatemappedafrica/assets/logos/projectLogo.svg";
 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]);
 
@@ -228,7 +213,7 @@
     },
     {
       name: "Twitter",
-      icon: TwitterIcon,
+      icon: XLogo,
       props: { title, via: "Code4Africa", related: ["Code4Africa"] },
     },
     {
@@ -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>
   );
 }
 

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

@@ -1,9 +1,7 @@
-import { Grid, IconButton } from "@mui/material";
+import { Box, Grid, IconButton, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
-import useStyles from "./useStyles";
-
 import CloseIcon from "@/climatemappedafrica/assets/icons/x.svg";
 import Select from "@/climatemappedafrica/components/Select";
 
@@ -17,10 +15,7 @@ function ChartFilter({
   valueText = "Select a value:",
   selectedAttribute: selectedAttributeProp,
   selectedValue: selectedValueProp,
-  ...props
 }) {
-  const classes = useStyles(props);
-
   const [selectedAttribute, setSelectedAttribute] = useState(
     selectedAttributeProp,
   );
@@ -29,6 +24,8 @@ function ChartFilter({
   const [attributeOptions, setAttributeOptions] = useState([]);
   const [valueOptions, setValueOptions] = useState([]);
 
+  const theme = useTheme();
+
   useEffect(() => {
     if (index === "default") {
       setAttributeOptions([selectedAttribute]);
@@ -86,44 +83,97 @@ function ChartFilter({
   }
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={({ typography }) => ({
+        paddingBottom: typography.pxToRem(10),
+      })}
+    >
       <Grid container alignItems="flex-end">
         {attributeOptions?.length > 0 && (
-          <Grid item className={classes.grid}>
+          <Grid
+            sx={({ typography }) => ({
+              marginRight: { md: typography.pxToRem(10) },
+            })}
+          >
             <Select
               helperText={attributeText}
               options={attributeOptions}
               selected={selectedAttribute}
               onChange={onAtrributeChange}
               disabled={index === "default"}
-              classes={{
-                select: classes.select,
-                filled: classes.filled,
-                paper: classes.selectPaper,
+              SelectProps={{
+                width: theme.typography.pxToRem(205),
+                height: theme.typography.pxToRem(40),
+                paddingLeft: 0,
+                "& .MuiSelect-filled": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
+              }}
+              MenuProps={{
+                "& .MuiMenu-paper": {
+                  height: theme.typography.pxToRem(310),
+                  boxShadow: "none",
+                },
+                "& .MuiMenu-list": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
               }}
             />
           </Grid>
         )}
         {valueOptions?.length > 0 && (
-          <Grid item className={classes.grid}>
+          <Grid
+            item
+            sx={({ typography }) => ({
+              marginRight: { md: typography.pxToRem(10) },
+            })}
+          >
             <Select
               helperText={valueText}
               options={valueOptions}
               selected={selectedValue}
               label={selectedValue?.length ? "" : "Select a value"}
               onChange={onValueChange}
-              classes={{
-                select: classes.select,
-                filled: classes.filled,
-                paper: classes.selectPaper,
+              SelectProps={{
+                width: theme.typography.pxToRem(205),
+                height: theme.typography.pxToRem(40),
+                paddingLeft: 0,
+                "& .MuiSelect-filled": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
+              }}
+              MenuProps={{
+                "& .MuiMenu-paper": {
+                  height: theme.typography.pxToRem(310),
+                  boxShadow: "none",
+                },
+                "& .MuiMenu-list": {
+                  padding: `${theme.typography.pxToRem(10)} 0 ${theme.typography.pxToRem(
+                    10,
+                  )} ${theme.typography.pxToRem(15)} !important`,
+                },
               }}
             />
           </Grid>
         )}
         {index !== "default" && index !== 0 && (
           <Grid item>
             <IconButton
-              className={classes.icon}
+              sx={({ palette, typography }) => ({
+                padding: 0,
+                background: palette.background.paper,
+                "& :hover": {
+                  background: palette.background.paper,
+                },
+                height: typography.pxToRem(36),
+                width: typography.pxToRem(36),
+              })}
               onClick={removeFilter}
               size="large"
             >
@@ -132,7 +182,7 @@ function ChartFilter({
           </Grid>
         )}
       </Grid>
-    </div>
+    </Box>
   );
 }