Merge pull request #582 from geichelberger/update-react

Update react and get rid of mui styles

package.json

@@ -6,8 +6,7 @@
   "homepage": "/admin-ui",
   "dependencies": {
     "@hello-pangea/dnd": "^16.5.0",
-    "@mui/material": "^5.15.9",
-    "@mui/styles": "^5.15.19",
+    "@mui/material": "^5.15.19",
     "@mui/x-date-pickers": "^7.6.1",
     "@reduxjs/toolkit": "^2.2.5",
     "@types/dompurify": "^3.0.5",
@@ -27,10 +26,10 @@
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.45",
-    "react": "^17.0.0",
+    "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^6.9.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-hotkeys-hook": "^4.4.4",
     "react-i18next": "^14.1.2",
     "react-icons": "^5.2.1",
@@ -69,6 +68,7 @@
     "@redux-devtools/extension": "^3.3.0",
     "@types/lodash": "^4.17.4",
     "@types/node": "^20.14.1",
+    "@types/react-dom": "^18.3.0",
     "@types/uuid": "^9.0.8",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "prop-types": "^15.8.1",

src/components/shared/wizard/CustomStepIcon.tsx

@@ -1,22 +1,19 @@
-import { useStepIconStyles } from "../../../utils/wizardUtils";
-import cn from "classnames";
+import { stepIcon } from "../../../utils/wizardUtils";
 import { FaCircle, FaDotCircle } from "react-icons/fa";
-import React from "react";
 import { StepIconProps } from "@mui/material";
 
 /**
  * Component that renders icons of Stepper depending on completeness of steps
  */
 const CustomStepIcon = (props: StepIconProps) => {
-	const { completed } = props;
-	const classes = useStepIconStyles(props);
+	const { completed, active } = props;
 
 	return (
-		<div className={cn(classes.root)}>
+		<div style={stepIcon.root}>
 			{completed ? (
-				<FaCircle className={classes.circle} />
+				<FaCircle style={{...stepIcon.circle, ...(active && stepIcon.circleActive),}}/>
 			) : (
-				<FaDotCircle className={classes.circle} />
+				<FaDotCircle style={{...stepIcon.circle, ...(active && stepIcon.circleActive),}} />
 			)}
 		</div>
 	);