Move faultEventMenu.detailSectionTitle

src/components/dialog/faultEvent/FaultEventCreation.styles.tsx

@@ -2,13 +2,6 @@ import { Theme } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 
 const useStyles = makeStyles()((theme: Theme) => ({
-  menuTitle: {
-    backgroundColor: "#1976D256",
-    marginLeft: "-16px",
-    marginRight: "-16px",
-    paddingLeft: "8px",
-    borderBottom: "inset",
-  },
   divForm: {
     flexGrow: 1,
   },

src/components/dialog/faultEvent/FaultEventCreation.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { FormControl, InputLabel, MenuItem, Select, TextField, Typography } from "@mui/material";
+import { FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
 import useStyles from "@components/dialog/faultEvent/FaultEventCreation.styles";
 import { Controller } from "react-hook-form";
 import { EventType, FaultEvent, GateType, gateTypeValues } from "@models/eventModel";
@@ -101,10 +101,6 @@ const FaultEventCreation = ({
     }
     return (
       <>
-        <Typography variant="h6" className={classes.menuTitle} gutterBottom>
-          {`${t("faultEventMenu.detailSectionTitle")}`}
-        </Typography>
-        <br />
         <ControlledAutocomplete
           control={control}
           name="existingEvent"
@@ -130,6 +126,7 @@ const FaultEventCreation = ({
 
         {selectedEvent && (
           <FormControl className={classes.formControl}>
+            <br />
             <InputLabel id="event-type-select-label">{t("newFtaModal.type")}</InputLabel>
             <Controller
               render={({ field }) => {
@@ -173,6 +170,7 @@ const FaultEventCreation = ({
       <>
         {eventTypeWatch === EventType.INTERMEDIATE && (
           <div className={classes.formControlDiv}>
+            <br />
             <FormControl className={classes.formControl}>
               <InputLabel id="gate-type-select-label">{t("newFtaModal.gateType")}</InputLabel>
               <Controller
@@ -210,6 +208,7 @@ const FaultEventCreation = ({
           !isRootEvent &&
           isEditedEvent && (
             <>
+              <br />
               <TextField
                 margin="dense"
                 label={t("newFtaModal.description")}

src/components/dialog/faultTree/FaultTreeDialog.tsx

@@ -66,6 +66,8 @@ const FaultTreeDialog = ({ open, handleCloseDialog }) => {
           {...register("faultTreeName")}
           helperText={!!useFormMethods.formState.errors.faultTreeName && t("newFtaModal.noSystemError")}
         />
+        <br />
+        <br />
         <ReusableFaultEventsProvider systemUri={selectedSystem?.iri}>
           <FaultEventCreation useFormMethods={useFormMethods} isRootEvent={true} />
         </ReusableFaultEventsProvider>

src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.styles.tsx

@@ -9,6 +9,13 @@ const useStyles = makeStyles()((theme: Theme) => ({
     color: theme.main.grey,
     padding: theme.spacing(10, 2),
   },
+  menuTitle: {
+    backgroundColor: "#1976D256",
+    marginLeft: "-16px",
+    marginRight: "-16px",
+    paddingLeft: "8px",
+    borderBottom: "inset",
+  },
 }));
 
 // TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.

src/components/editor/faultTree/menu/faultEvent/FaultEventShapeToolPane.tsx

@@ -53,6 +53,10 @@ const FaultEventShapeToolPane = ({ data, refreshTree, formMethods }: Props) => {
 
   const editorPane = (isDisabled) => (
     <ReusableFaultEventsProvider treeUri={faultTree?.iri}>
+      <Typography variant="h6" className={classes.menuTitle} gutterBottom>
+        {`${t("faultEventMenu.detailSectionTitle")}`}
+      </Typography>
+      <br />
       <FaultEventCreation
         useFormMethods={formMethods}
         isRootEvent={false}