From 6a0fc11ab3bc3fd58be14bccdb4f8e2f33162db5 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sun, 24 Nov 2019 17:32:59 +0200
Subject: [PATCH] Event/task edit: improve design.

---
 src/components/EventEdit.tsx | 39 +++++++++++++++++++-----------------
 src/components/TaskEdit.tsx  | 39 +++++++++++++++++++-----------------
 2 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/components/EventEdit.tsx b/src/components/EventEdit.tsx
index 20fe45e..4709375 100644
--- a/src/components/EventEdit.tsx
+++ b/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"
diff --git a/src/components/TaskEdit.tsx b/src/components/TaskEdit.tsx
index 92fde0f..27fae16 100644
--- a/src/components/TaskEdit.tsx
+++ b/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"