Use Styled ReactTour

CodeForAfrica · Nov 27, 2024 · cc4e0e8 · cc4e0e8
1 parent d5af9d9
commit cc4e0e8
Showing 1 changed file with 22 additions and 27 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.js
@@ -1,34 +1,27 @@
-import makeStyles from "@mui/styles/makeStyles";
+import { styled } from "@mui/material/styles";
 import { TourProvider, useTour } from "@reactour/tour";
 import PropTypes from "prop-types";
 import React, { useState } from "react";
 
 import Connector from "@/climatemappedafrica/components/HURUmap/Tutorial/Connector";
 import TutorialStep from "@/climatemappedafrica/components/HURUmap/Tutorial/TutorialStep";
 
-const useStyles = makeStyles(({ typography, palette }) => ({
-  tour: {
-    width: typography.pxToRem(1000),
-    maxWidth: "100vw  !important",
-    top: `${typography.pxToRem(200)} !important`,
-    left: "50% !important",
-    transform: "translateX(-50%) !important",
-    paddingBottom: `${typography.pxToRem(48.62)} !important`,
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "column",
-    border: `1px solid ${palette.primary.main}`,
-    borderRadius: typography.pxToRem(10),
-    "--reactour-accent": "#1C2030",
-  },
-  mask: {
-    color: "#666666 !important",
-    opacity: "0.5 !important",
-  },
+const StyledTour = styled(TourProvider)(({ theme }) => ({
+  width: theme.typography.pxToRem(1000),
+  maxWidth: "100vw  !important",
+  top: `${theme.typography.pxToRem(200)} !important`,
+  left: "50% !important",
+  transform: "translateX(-50%) !important",
+  paddingBottom: `${theme.typography.pxToRem(48.62)} !important`,
+  display: "flex",
+  alignItems: "center",
+  flexDirection: "column",
+  border: `1px solid ${theme.palette.primary.main}`,
+  borderRadius: theme.typography.pxToRem(10),
+  "--reactour-accent": "#1C2030",
 }));
 
-function Tutorial({ children, defaultOpen = false, items, ...props }) {
-  const classes = useStyles(props);
+function Tutorial({ children, defaultOpen = false, items }) {
   const { setIsOpen } = useTour();
   setIsOpen(defaultOpen);
 
@@ -42,7 +35,7 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) {
   };
 
   return (
-    <TourProvider
+    <StyledTour
       padding={{ mask: 0 }}
       styles={{
         dot: (base) => ({
@@ -51,26 +44,28 @@ function Tutorial({ children, defaultOpen = false, items, ...props }) {
           height: 16,
           border: "2px solid #1C2030",
         }),
+        maskWrapper: (base) => ({
+          ...base,
+          color: "#666666",
+          opacity: 0.5,
+        }),
       }}
       position="center"
-      className={classes.tour}
       showPrevNextButtons={false}
       showBagde={false}
       defaultOpen={defaultOpen}
       afterOpen={setTourOpened}
       beforeClose={setTourClosed}
       showCloseButton={false}
       accentColor="#fff"
-      maskClassName={classes.mask}
-      highlightedMaskClassName={classes.highlightedMask}
       steps={items?.map((item, index) => ({
         selector: item?.selector,
         content: <TutorialStep activeStep={index} {...item} />,
       }))}
     >
       {children}
       {isOpened && <Connector />}
-    </TourProvider>
+    </StyledTour>
   );
 }