Refactor MachineAccordion component

frontend/src/features/machines/components/MachineAccordion.js

@@ -7,16 +7,8 @@ import { DataLabel } from "../../../components/common";
 import { useTranslation } from "react-i18next";
 import { useSensitiveInfo } from "../../../hooks";
 import ActionsGroup from "./common/ActionsGroup";
-import { makeStyles } from "@mui/material/styles";
 import { styled } from "@mui/system";
 
-const useStyles = makeStyles(() => ({
-  panel: {
-    justifyContent: "center",
-    alignItems: "center"
-  }
-}));
-
 const IconLeftAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
   root: {
     minHeight: "20px",
@@ -49,7 +41,6 @@ GridCell.propTypes = {
 
 const MachineAccordion = ({ machine, actions, logs, addLog }) => {
   const { t } = useTranslation();
-  const classes = useStyles();
   return (
     <Accordion>
       <IconLeftAccordionSummary
@@ -59,7 +50,13 @@ const MachineAccordion = ({ machine, actions, logs, addLog }) => {
         id="additional-actions1-header"
         IconButtonProps={{ edge: "start" }}
       >
-        <Grid container className={classes.panel}>
+        <Grid
+          container
+          sx={{
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
           <Grid item xs={11}>
             <Grid container>
               <GridCell label={t("Machine.FullName")} value={machine.fullMachineName} />
@@ -69,7 +66,7 @@ const MachineAccordion = ({ machine, actions, logs, addLog }) => {
             </Grid>
           </Grid>
           <Grid item xs={1} style={{ textAlign: "right" }}>
-            <ActionsGroup className={classes.actions} machine={machine} actions={actions} addLog={addLog} />
+            <ActionsGroup machine={machine} actions={actions} addLog={addLog} />
           </Grid>
         </Grid>
       </IconLeftAccordionSummary>