Start and End set over the clock icons

src/AnnotationCreation.js

@@ -411,20 +411,31 @@ class AnnotationCreation extends Component {
               </Grid>
               <div className={`${classes.paper} ${classes.selectTimeField} `}>
                 <div className={`${classes.paper} ${classes.selectTimeModule} `}>
-                  <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTstartNow} className={classes.timecontrolsbutton}>
+                  <div className={classes.buttonTimeContainer}>
+                    <div>
+                      <p className={classes.textTimeButton}>Start</p>
+                    </div>
+                    <ToggleButton
+                        value="true"
+                        title="Set current time"
+                        size="small"
+                        onClick={this.setTstartNow}
+                        className={classes.timecontrolsbutton}
+                    >
                       <Alarm fontSize="small"/>
                     </ToggleButton>
-                  <div>
-                    <p>Start</p>
                   </div>
                   <HMSInput seconds={tstart} onChange={this.updateTstart}/>
                 </div>
                 <div className={`${classes.paper} ${classes.selectTimeModule}`}>
-                  <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow} className={classes.timecontrolsbutton}>
+                  <div className={classes.buttonTimeContainer}>
+                  <div>
+                    <p className={classes.textTimeButton}>End</p>
+                  </div>
+                  <ToggleButton value="true" title="Set current time" size="small" onClick={this.setTendNow}
+                                className={classes.timecontrolsbutton}>
                     <Alarm fontSize="small"/>
                   </ToggleButton>
-                  <div>
-                    <p>End</p>
                   </div>
                   <HMSInput seconds={tend} onChange={this.updateTend}/>
                 </div>
@@ -606,6 +617,10 @@ class AnnotationCreation extends Component {
 
 /** */
 const styles = (theme) => ({
+  buttonTimeContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
   divider: {
     margin: theme.spacing(1, 0.5),
   },
@@ -647,6 +662,10 @@ const styles = (theme) => ({
     justifyContent: 'center',
     padding: '5px',
   },
+  textTimeButton: {
+    margin:0,
+    fontSize: '15px',
+  },
   timecontrolsbutton: {
     border: 'none',
     height: '30px',

src/HMSInput.js

@@ -48,10 +48,18 @@ class HMSInput extends Component {
     return (
       <div className={classes.root}>
         <div className={classes.root}>
-          <Input className={classes.input}
-          variant="filled" type='number' min='0' pattern name="hours" value={hours} onChange={this.someChange} />
-          <Input className={classes.input} type='number' min='0' max='59' name="minutes" value={minutes} onChange={this.someChange} />
-          <Input className={classes.input} type='number' min='0' max='59' name="seconds" value={seconds} onChange={this.someChange} />
+          <Input
+            className={classes.input}
+            variant="filled"
+            type="number"
+            min="0"
+            pattern
+            name="hours"
+            value={hours}
+            onChange={this.someChange}
+          />
+          <Input className={classes.input} type="number" min="0" max="59" name="minutes" value={minutes} onChange={this.someChange} />
+          <Input className={classes.input} type="number" min="0" max="59" name="seconds" value={seconds} onChange={this.someChange} />
         </div>
       </div>
     );
@@ -79,17 +87,17 @@ const styles = (theme) => ({
     width: '4ch',
     // remove arrow from field for Firefox
     '& input[type=number]': {
-      '-moz-appearance': 'textfield'
+      '-moz-appearance': 'textfield',
     },
     // remove arrow from field for Chrome, Safari and Opera
     '& input[type=number]::-webkit-outer-spin-button': {
       '-webkit-appearance': 'none',
-      margin: 0
+      margin: 0,
     },
     '& input[type=number]::-webkit-inner-spin-button': {
       '-webkit-appearance': 'none',
-      margin: 0
-    }
+      margin: 0,
+    },
   },
 });