From 8574274f30215b02dd038a0a7657c2cef5674d23 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Mon, 25 Nov 2024 21:39:09 +0300
Subject: [PATCH] Remove useStyles from TutorialStep

---
 .../HURUmap/Tutorial/TutorialStep/index.js    | 45 ++++++++++---------
 .../Tutorial/TutorialStep/useStyles.js        | 30 -------------
 2 files changed, 23 insertions(+), 52 deletions(-)
 delete mode 100644 apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js

diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
index 1613f2e3f..2cf007a75 100644
--- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
+++ b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/index.js
@@ -1,46 +1,43 @@
 import { RichText } from "@commons-ui/payload";
-import { Grid, Typography, IconButton, Avatar } from "@mui/material";
+import { Grid, Typography, IconButton, Avatar, Box } from "@mui/material";
 import { useTour } from "@reactour/tour";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 import CloseIcon from "@/climatemappedafrica/assets/icons/close.svg";
 import Image from "@/climatemappedafrica/components/Image";
 
-function TutorialStep({ description, title, image, selector, ...props }) {
-  const classes = useStyles(props);
+function TutorialStep({ description, title, image }) {
   const { setIsOpen, currentStep } = useTour();
   const handleClose = () => {
     setIsOpen(false);
   };
 
   return (
-    <div className={classes.root}>
+    <Box
+      sx={({ typography }) => ({
+        paddingLeft: typography.pxToRem(34),
+        paddingTop: typography.pxToRem(25),
+        paddingRight: typography.pxToRem(39),
+        width: typography.pxToRem(964),
+      })}
+    >
       <Grid
-        className={classes.header}
+        sx={({ typography }) => ({
+          marginBottom: typography.pxToRem(48),
+        })}
         container
         justifyContent="space-between"
         alignItems="center"
       >
         <Grid item>
-          <Typography
-            id={`tutorial-title-${currentStep}`}
-            className={classes.title}
-            variant="h4"
-          >
+          <Typography id={`tutorial-title-${currentStep}`} variant="h4">
             {title}
           </Typography>
         </Grid>
         {handleClose && (
           <Grid item>
-            <IconButton
-              aria-label="close"
-              className={classes.closeButton}
-              onClick={handleClose}
-              size="large"
-            >
+            <IconButton aria-label="close" onClick={handleClose} size="large">
               <CloseIcon />
             </IconButton>
           </Grid>
@@ -49,7 +46,13 @@ function TutorialStep({ description, title, image, selector, ...props }) {
       <Grid container justifyContent="space-between">
         <Grid item xs={12} md={5} container wrap="nowrap">
           <Grid item>
-            <Avatar className={classes.currentStep}>
+            <Avatar
+              sx={({ palette, typography }) => ({
+                background: palette.primary.main,
+                width: typography.pxToRem(48),
+                height: typography.pxToRem(48),
+              })}
+            >
               <Typography color="textSecondary" variant="h3">
                 {currentStep + 1}
               </Typography>
@@ -74,16 +77,14 @@ function TutorialStep({ description, title, image, selector, ...props }) {
           <Image width={376} height={325} src={image} />
         </Grid>
       </Grid>
-    </div>
+    </Box>
   );
 }
 
 TutorialStep.propTypes = {
   description: PropTypes.arrayOf(PropTypes.shape({})),
   image: PropTypes.string,
-  onClose: PropTypes.func,
   title: PropTypes.string,
-  selector: PropTypes.string,
 };
 
 export default TutorialStep;
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js
deleted file mode 100644
index e6059fd98..000000000
--- a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/TutorialStep/useStyles.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ typography, palette }) => ({
-  root: {
-    paddingLeft: typography.pxToRem(34),
-    paddingTop: typography.pxToRem(25),
-    paddingRight: typography.pxToRem(39),
-    width: typography.pxToRem(964),
-  },
-  header: {
-    marginBottom: typography.pxToRem(48),
-  },
-  description: {
-    marginLeft: typography.pxToRem(16),
-    width: typography.pxToRem(278),
-    lineHeight: 30 / 16,
-    "& p": {
-      marginTop: 0,
-      marginBottom: typography.pxToRem(32),
-    },
-  },
-  currentStep: {
-    background: palette.primary.main,
-    width: typography.pxToRem(48),
-    height: typography.pxToRem(48),
-  },
-  title: {},
-}));
-
-export default useStyles;