Remove useStyles from Tutorial Line

CodeForAfrica · Nov 27, 2024 · d5af9d9 · d5af9d9
1 parent f69ca3e
commit d5af9d9
Showing 1 changed file with 27 additions and 8 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js b/apps/climatemappedafrica/src/components/HURUmap/Tutorial/Line.js
@@ -1,18 +1,37 @@
+import { Box, useTheme } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";
 
-import useStyles from "./useStyles";
-
-function Line({ x1, x2, y1, y2, ...props }) {
-  const classes = useStyles(props);
+function Line({ x1, x2, y1, y2 }) {
+  const theme = useTheme();
 
   return (
-    <div className={classes.lineContainer}>
-      <svg className={classes.line} height="100vh" width="100vw">
-        <line x1={x1} y1={y1} x2={x2} y2={y2} />
+    <Box
+      sx={{
+        position: "fixed",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999999,
+        pointerEvents: "none",
+      }}
+    >
+      <svg height="100vh" width="100vw">
+        <line
+          x1={x1}
+          y1={y1}
+          x2={x2}
+          y2={y2}
+          style={{
+            strokeWidth: theme.typography.pxToRem(1),
+            stroke: theme.palette.primary.main,
+            fill: theme.palette.primary.main,
+          }}
+        />
         <circle cx={x2} cy={y2} r="9" strokeWidth={2} stroke="white" />
       </svg>
-    </div>
+    </Box>
   );
 }