Event/task edit: improve design.

src/components/EventEdit.tsx

@@ -9,6 +9,7 @@ import TextField from '@material-ui/core/TextField';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
 import InputLabel from '@material-ui/core/InputLabel';
 import * as colors from '@material-ui/core/colors';
 
@@ -258,37 +259,39 @@ class EventEdit extends React.PureComponent<PropsType> {
             </Select>
           </FormControl>
 
-          <FormGroup>
-            <FormControlLabel
-              control={
-                <Switch
-                  name="allDay"
-                  checked={this.state.allDay}
-                  onChange={this.toggleAllDay}
-                  color="primary"
-                />
-              }
-              label="All Day"
-            />
-          </FormGroup>
-
-          <div>
+          <FormControl>
+            <FormHelperText>FROM</FormHelperText>
             <DateTimePicker
               dateOnly={this.state.allDay}
               placeholder="Start"
               value={this.state.start}
               onChange={(date?: Date) => this.setState({ start: date })}
             />
-          </div>
+          </FormControl>
 
-          <div>
+          <FormControl>
+            <FormHelperText>TO</FormHelperText>
             <DateTimePicker
               dateOnly={this.state.allDay}
               placeholder="End"
               value={this.state.end}
               onChange={(date?: Date) => this.setState({ end: date })}
             />
-          </div>
+          </FormControl>
+
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  name="allDay"
+                  checked={this.state.allDay}
+                  onChange={this.toggleAllDay}
+                  color="primary"
+                />
+              }
+              label="All Day"
+            />
+          </FormGroup>
 
           <TextField
             name="location"

src/components/TaskEdit.tsx

@@ -9,6 +9,7 @@ import TextField from '@material-ui/core/TextField';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
 import InputLabel from '@material-ui/core/InputLabel';
 import * as colors from '@material-ui/core/colors';
 
@@ -262,6 +263,26 @@ class TaskEdit extends React.PureComponent<PropsType> {
             </Select>
           </FormControl>
 
+          <FormControl>
+            <FormHelperText>Start</FormHelperText>
+            <DateTimePicker
+              dateOnly={this.state.allDay}
+              placeholder="Start"
+              value={this.state.start}
+              onChange={(date?: Date) => this.setState({ start: date })}
+            />
+          </FormControl>
+
+          <FormControl>
+            <FormHelperText>Due</FormHelperText>
+            <DateTimePicker
+              dateOnly={this.state.allDay}
+              placeholder="Due"
+              value={this.state.due}
+              onChange={(date?: Date) => this.setState({ due: date })}
+            />
+          </FormControl>
+
           <FormGroup>
             <FormControlLabel
               control={
@@ -276,24 +297,6 @@ class TaskEdit extends React.PureComponent<PropsType> {
             />
           </FormGroup>
 
-          <div>
-            <DateTimePicker
-              dateOnly={this.state.allDay}
-              placeholder="Start"
-              value={this.state.start}
-              onChange={(date?: Date) => this.setState({ start: date })}
-            />
-          </div>
-
-          <div>
-            <DateTimePicker
-              dateOnly={this.state.allDay}
-              placeholder="End"
-              value={this.state.due}
-              onChange={(date?: Date) => this.setState({ due: date })}
-            />
-          </div>
-
           <TextField
             name="location"
             placeholder="Add location"