Stable Modification Point

src/views/components/CatalogBox.jsx

@@ -9,7 +9,7 @@ import Typography from "@mui/material/Typography";
 
 import IconButton from "@mui/material/IconButton";
 import DeleteIcon from "@mui/icons-material/Delete";
-import NotificationsIcon from "@mui/icons-material/Notifications";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
@@ -21,41 +21,45 @@ export default function CatalogBox(props) {
     name: testName,
     class: testClass,
     repo: testRepo,
-    isCompound, 
-    type: testType
+    isCompound,
+    type: testType,
   } = catalogTest;
 
   const { state: store, updateStore } = useContext(StoreContext);
-  
-  const { state: jobState, jobBuilder} = useContext(JobContext);
+
+  const { state: jobState, jobBuilder } = useContext(JobContext);
 
   const [open, setOpen] = useState(false);
 
   const toggleOpen = () => setOpen(!open);
-  
+
   function Actions() {
     return (
       <React.Fragment>
-        <IconButton aria-label="play" component="span" color="primary">
-          <NotificationsIcon />
-        </IconButton>
-        <IconButton color="error" aria-label="delete" component="span">
-          <DeleteIcon />
+        <IconButton color="success" aria-label="play" component="span">
+          <PlayArrowIcon />
         </IconButton>
       </React.Fragment>
     );
   }
 
   return (
-    <Accordion expanded={open} disableGutters={true}  onChange={toggleOpen}
-      square>
+    <Accordion
+      expanded={open}
+      disableGutters={true}
+      onChange={toggleOpen}
+      square
+    >
       <AccordionSummary
         style={{
           backgroundColor: "rgba(0, 0, 0, .03)",
           flexWrap: "wrap",
         }}
       >
-        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
+        <Typography
+          component={"span"}
+          style={{ wordBreak: "break-word", margin: "auto 0" }}
+        >
           {`${testClass}#`}
           <Box fontWeight="bold" display="inline">
             {testName}
@@ -77,10 +81,12 @@ export default function CatalogBox(props) {
         >
           <Actions />
         </Stack>
-        <AccordionDetails>
-        <Typography>{JSON.stringify(catalogTest)}</Typography>
-      </AccordionDetails>
       </AccordionSummary>
+      <AccordionDetails>
+        <Typography component={"span"} style={{ wordBreak: "break-word" }}>
+          {JSON.stringify(catalogTest)}
+        </Typography>
+      </AccordionDetails>
     </Accordion>
   );
 }