some linter

src/AnnotationCreation.js

@@ -19,7 +19,6 @@ import StrokeColorIcon from '@material-ui/icons/BorderColor';
 import LineWeightIcon from '@material-ui/icons/LineWeight';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import FormatShapesIcon from '@material-ui/icons/FormatShapes';
-import TextField from '@material-ui/core/TextField';
 import { SketchPicker } from 'react-color';
 import { v4 as uuid } from 'uuid';
 import { withStyles } from '@material-ui/core/styles';
@@ -205,7 +204,7 @@ class AnnotationCreation extends Component {
   handleChangeTime = (event, newValueTime) => {
     const timeStart = newValueTime[0];
     const timeEnd = newValueTime[1];
-    console.log(VideosReferences.valueOf());
+    console.log(newValueTime);
     this.updateTstart(timeStart);
     this.updateTend(timeEnd);
     this.seekToTstart();
@@ -244,7 +243,7 @@ class AnnotationCreation extends Component {
 
   // eslint-disable-next-line require-jsdoc
   valuetextTime() {
-    return `${this.valueTime}°C`;
+    return this.valueTime;
   }
 
   /** */
@@ -389,6 +388,7 @@ class AnnotationCreation extends Component {
           player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)}
         />
         <form onSubmit={this.submitForm} className={classes.section}>
+          <div>
             <Grid item xs={12}>
               <Typography variant="overline">
                 Text Content
@@ -401,7 +401,9 @@ class AnnotationCreation extends Component {
                 updateAnnotationBody={this.updateTextBody}
               />
             </Grid>
-          <Grid container>
+          </div>
+          <div>
+
             { mediaIsVideo && (
             <>
               <Grid item xs={12} className={classes.paper}>
@@ -444,8 +446,13 @@ class AnnotationCreation extends Component {
                     <div>
                       <p className={classes.textTimeButton}>End</p>
                     </div>
-                  <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow}
-                                className={classes.timecontrolsbutton}>
+                    <ToggleButton
+                      value="true"
+                      title="Set current time"
+                      size="small"
+                      onClick={this.setTendNow}
+                      className={classes.timecontrolsbutton}
+                    >
                       <Alarm fontSize="small" />
                     </ToggleButton>
                   </div>
@@ -454,6 +461,10 @@ class AnnotationCreation extends Component {
               </div>
             </>
             )}
+          </div>
+          <div>
+            <Grid container>
+
               <Grid item xs={12}>
                 <Typography variant="overline">
                   Image Content
@@ -463,6 +474,8 @@ class AnnotationCreation extends Component {
                 <ImageFormField value={image} onChange={this.handleImgChange} />
               </Grid>
             </Grid>
+          </div>
+          <div>
             <Grid container>
               <Grid item xs={12}>
                 <Typography variant="overline">
@@ -511,6 +524,8 @@ class AnnotationCreation extends Component {
                 </Paper>
               </Grid>
             </Grid>
+          </div>
+          <div>
             <Grid container>
               <Grid item xs={12}>
                 <Typography variant="overline">
@@ -569,12 +584,15 @@ class AnnotationCreation extends Component {
                 }
               </Grid>
             </Grid>
+          </div>
+          <div>
             <Button onClick={closeCompanionWindow}>
               Cancel
             </Button>
             <Button variant="contained" color="primary" type="submit">
               Save
             </Button>
+          </div>
         </form>
         <Popover
           open={lineWeightPopoverOpen}
@@ -614,7 +632,6 @@ class AnnotationCreation extends Component {
     );
   }
 }
-
 /** */
 const styles = (theme) => ({
   buttonTimeContainer: {
@@ -642,6 +659,9 @@ const styles = (theme) => ({
     flexWrap: 'wrap',
   },
   section: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '20px',
     paddingBottom: theme.spacing(1),
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(1),
@@ -663,8 +683,8 @@ const styles = (theme) => ({
     padding: '5px',
   },
   textTimeButton: {
-    margin:0,
     fontSize: '15px',
+    margin: 0,
   },
   timecontrolsbutton: {
     border: 'none',