Remove useStyles from PanelItem

CodeForAfrica · Nov 25, 2024 · 7df809c · 7df809c
1 parent d0fb430
commit 7df809c
Showing 1 changed file with 21 additions and 34 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
@@ -1,6 +1,4 @@
 import { Grid } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
-import clsx from "clsx";
 import dynamic from "next/dynamic";
 import PropTypes from "prop-types";
 import React, { Fragment, memo } from "react";
@@ -20,33 +18,6 @@ const Chart = dynamic(
   },
 );
 
-const useStyles = makeStyles(({ typography, breakpoints }) => ({
-  metrics: {
-    marginTop: typography.pxToRem(24),
-  },
-  metricRow: {
-    [breakpoints.up("lg")]: {
-      marginBottom: typography.pxToRem(14),
-      marginLeft: typography.pxToRem(18),
-      maxWidth: typography.pxToRem(224),
-      "&:first-of-type": {
-        marginLeft: 0,
-      },
-    },
-  },
-  secondaryMetricRow: {
-    [breakpoints.up("lg")]: {
-      maxWidth: "100%",
-      marginLeft: 0,
-    },
-  },
-  secondaryMetric: {
-    [breakpoints.up("lg")]: {
-      maxWidth: typography.pxToRem(350),
-    },
-  },
-}));
-
 const ProfileItems = memo(
   function ProfileItems({
     categories,
@@ -57,8 +28,6 @@ const ProfileItems = memo(
     secondaryProfile,
     geoCode,
   }) {
-    const classes = useStyles();
-
     return (
       <>
         {categories.map((category, categoryIndex) => (
@@ -76,7 +45,12 @@ const ProfileItems = memo(
                   id={slugify(`${category.title}-${child.title}`)}
                   title={child.title}
                 />
-                <Grid container className={classes.metrics}>
+                <Grid
+                  container
+                  sx={({ typography }) => ({
+                    marginTop: typography.pxToRem(24),
+                  })}
+                >
                   {child?.metrics?.map(
                     (
                       {
@@ -116,8 +90,21 @@ const ProfileItems = memo(
                           container
                           lg={secondaryProfile ? 12 : 4}
                           key={label}
-                          className={clsx(classes.metricRow, {
-                            [classes.secondaryMetricRow]: secondaryProfile,
+                          sx={({ typography }) => ({
+                            marginBottom: {
+                              lg: typography.pxToRem(14),
+                            },
+                            marginLeft: {
+                              lg: secondaryProfile ? typography.pxToRem(18) : 0,
+                            },
+                            maxWidth: {
+                              lg: secondaryProfile
+                                ? typography.pxToRem(224)
+                                : "100%",
+                            },
+                            "&:first-of-type": {
+                              marginLeft: 0,
+                            },
                           })}
                         >
                           <Grid item xs={12} lg={secondaryProfile ? 6 : 12}>