Refactor AboutSystemContainer component

frontend/src/features/about/system/AboutSystemContainer.js

@@ -1,35 +1,32 @@
 import React from "react";
-import { makeStyles } from "@mui/material/styles";
+import { Box } from "@mui/material";
 import AboutSystemComponent from "./AboutSystemComponent";
 import SystemVersionContainer from "./SystemVersionContainer";
 
-const useStyles = makeStyles(theme => {
-  return {
+const styles = {
   page: {
     display: "flex",
     flexDirection: "column"
   },
   element: {
-      marginTop: theme.spacing(1)
+    marginTop: 1
   }
-  };
-});
+};
 
 const AboutSystemContainer = () => {
-  const classes = useStyles();
-
   const handleOpenInNewTab = url => event => {
     window.open(url, "_blank");
     event.preventDefault();
   };
 
   return (
-    <div className={classes.page}>
+    <Box sx={styles.page}>
       <AboutSystemComponent handleOpenInNewTab={handleOpenInNewTab} />
-      <div className={classes.element}>
+      <Box sx={styles.element}>
         <SystemVersionContainer />
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };
+
 export default AboutSystemContainer;