From 7df809c3e542dc63acd9ae48ebd6be16f66ac60b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 25 Nov 2024 20:53:03 +0300
Subject: [PATCH] Remove useStyles from PanelItem

---
 .../components/HURUmap/Panel/ProfileItems.js  | 55 +++++++------------
 1 file changed, 21 insertions(+), 34 deletions(-)

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
index e7562f518..88c1c86e8 100644
--- 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}>