Remove useStyles partially from KeyMetrics

CodeForAfrica · Nov 25, 2024 · 4a20ee5 · 4a20ee5
1 parent a767c81
commit 4a20ee5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 64 deletions.
diff --git 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
diff --git 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>
                           )}