From 4a20ee5a1515dcbf25cd2024ede08f67e4d8aea7 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 25 Nov 2024 17:39:36 +0300
Subject: [PATCH] Remove useStyles partially from KeyMetrics

---
 .../src/components/HURUmap/KeyMetric/index.js | 60 +++++++++++++------
 .../components/HURUmap/KeyMetric/useStyles.js | 39 ------------
 .../components/HURUmap/Panel/ProfileItems.js  | 16 +++--
 3 files changed, 51 insertions(+), 64 deletions(-)
 delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js

diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js
index 5257ff0e9..bbe83b62b 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/index.js
@@ -1,13 +1,9 @@
 import { Source } from "@hurumap/next";
-import { Tooltip, Typography, LinearProgress } from "@mui/material";
-import clsx from "clsx";
+import { Tooltip, Typography, LinearProgress, Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 function KeyMetric({
-  className,
   formattedValue: formattedValueProp,
   value: valueProp,
   title,
@@ -17,10 +13,8 @@ function KeyMetric({
   parentName,
   parentFormattedValue,
   metadata: { source, url } = {},
-  ...props
+  sx,
 }) {
-  const classes = useStyles(props);
-
   if (!((valueProp || formattedValueProp) && title)) {
     return null;
   }
@@ -33,13 +27,37 @@ function KeyMetric({
   const tooltipTitle = `${title}: ${formattedValue}`;
 
   return (
-    <div className={clsx(classes.root, className)}>
-      <div className={classes.metric}>
+    <Box
+      sx={({ typography }) => ({
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        marginBottom: typography.pxToRem(20),
+        ...sx,
+      })}
+    >
+      <Box
+        sx={({ palette, typography }) => ({
+          backgroundColor: palette.background.paper,
+          padding: `${typography.pxToRem(10)} ${typography.pxToRem(
+            20,
+          )} ${typography.pxToRem(14)} ${typography.pxToRem(20)}`,
+        })}
+      >
         <Typography variant="h3">{formattedValue}</Typography>
         <Tooltip title={tooltipTitle}>
           <Typography
             variant="caption"
-            className={clsx(classes.text, classes.title)}
+            sx={({ typography }) => ({
+              fontSize: typography.pxToRem(11),
+              overflow: "hidden",
+              display: "-webkit-box",
+              WebkitLineClamp: 1,
+              WebkitBoxOrient: "vertical",
+              textOverflow: "ellipsis",
+              marginBottom: typography.pxToRem(8),
+            })}
           >
             {title}
           </Typography>
@@ -48,20 +66,25 @@ function KeyMetric({
           sensitivity: "accent",
         }) === 0 ? (
           <LinearProgress
-            classes={{
-              root: classes.progressBar,
-              determinate: classes.progressBarDeterminate,
-            }}
+            sx={({ palette }) => ({
+              "&.MuiLinearProgress-determinate": {
+                backgroundColor: palette.grey.main,
+              },
+            })}
             value={parseFloat(`${value}`.replace(",", ""))}
             color={color}
             variant="determinate"
           />
         ) : null}
-      </div>
+      </Box>
       {parentValue && (
         <Typography
           variant="caption"
-          className={clsx(classes.text, classes.description)}
+          sx={({ typography }) => ({
+            fontSize: typography.pxToRem(11),
+            padding: `${typography.pxToRem(6)} 0 0 ${typography.pxToRem(20)}`,
+            color: "#666666",
+          })}
         >
           {parentValue}
         </Typography>
@@ -74,12 +97,11 @@ function KeyMetric({
       >
         {source}
       </Source>
-    </div>
+    </Box>
   );
 }
 
 KeyMetric.propTypes = {
-  className: PropTypes.string,
   color: PropTypes.string,
   description: PropTypes.string,
   displayFormat: PropTypes.string,
diff --git a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js
deleted file mode 100644
index 035b5d260..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/KeyMetric/useStyles.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette }) => ({
-  root: {
-    width: "100%",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-between",
-    marginBottom: typography.pxToRem(20),
-  },
-  metric: {
-    backgroundColor: palette.background.paper,
-    padding: `${typography.pxToRem(10)} ${typography.pxToRem(
-      20,
-    )} ${typography.pxToRem(14)} ${typography.pxToRem(20)}`,
-  },
-
-  progressBar: {},
-  progressBarDeterminate: {
-    backgroundColor: palette.grey.main,
-  },
-  text: {
-    fontSize: typography.pxToRem(11),
-  },
-  title: {
-    overflow: "hidden",
-    display: "-webkit-box",
-    WebkitLineClamp: 1,
-    WebkitBoxOrient: "vertical",
-    textOverflow: "ellipsis",
-    marginBottom: typography.pxToRem(8),
-  },
-  description: {
-    padding: `${typography.pxToRem(6)} 0 0 ${typography.pxToRem(20)}`,
-    color: "#666666",
-  },
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
index 09342406a..e7562f518 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Panel/ProfileItems.js
@@ -132,11 +132,11 @@ const ProfileItems = memo(
                               value={value}
                               displayFormat={displayFormat}
                               metadata={metadata}
-                              classes={{
-                                root: clsx({
-                                  [classes.secondaryMetric]: secondaryProfile,
-                                }),
-                              }}
+                              sx={({ typography }) => ({
+                                maxWidth: {
+                                  lg: typography.pxToRem(350),
+                                },
+                              })}
                             />
                           </Grid>
                           {secondaryMetric && (
@@ -152,7 +152,11 @@ const ProfileItems = memo(
                                 value={secondaryValue}
                                 displayFormat={secondaryDisplayFormat}
                                 metadata={secondaryMetric.metric}
-                                className={classes.secondaryMetric}
+                                sx={({ typography }) => ({
+                                  maxWidth: {
+                                    lg: typography.pxToRem(350),
+                                  },
+                                })}
                               />
                             </Grid>
                           )}