Event Edit: upgrade material-ui.

src/components/EventEdit.tsx

@@ -1,14 +1,20 @@
 import * as React from 'react';
-import RaisedButton from 'material-ui/RaisedButton';
-import Toggle from 'material-ui/Toggle';
-import TextField from 'material-ui/TextField';
-import SelectField from 'material-ui/SelectField';
-import MenuItem from 'material-ui/MenuItem';
-import { red500, fullWhite } from 'material-ui/styles/colors';
-import IconDelete from 'material-ui/svg-icons/action/delete';
 
-import IconCancel from 'material-ui/svg-icons/content/clear';
-import IconSave from 'material-ui/svg-icons/content/save';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Switch from '@material-ui/core/Switch';
+
+import Button from '@material-ui/core/Button';
+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 InputLabel from '@material-ui/core/InputLabel';
+import * as colors from '@material-ui/core/colors';
+
+import IconDelete from '@material-ui/icons/Delete';
+import IconCancel from '@material-ui/icons/Clear';
+import IconSave from '@material-ui/icons/Save';
 
 import DateTimePicker from '../widgets/DateTimePicker';
 
@@ -197,6 +203,7 @@ class EventEdit extends React.PureComponent {
       fullWidth: {
         width: '100%',
         boxSizing: 'border-box' as any,
+        marginTop: 16,
       },
       submit: {
         marginTop: 40,
@@ -225,30 +232,40 @@ class EventEdit extends React.PureComponent {
         <form style={styles.form} onSubmit={this.onSubmit}>
           <TextField
             name="title"
-            hintText="Enter title"
+            placeholder="Enter title"
             style={styles.fullWidth}
             value={this.state.title}
             onChange={this.handleInputChange}
           />
 
-          <SelectField
-            style={styles.fullWidth}
+          <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth} >
+            <InputLabel>
+              Saving to
+            </InputLabel>
+            <Select
               value={this.state.journalUid}
-            floatingLabelText="Saving to"
               disabled={this.props.item !== undefined}
-            onChange={(event: object, key: number, payload: any) => this.handleChange('journalUid', payload)}
+              onChange={this.handleInputChange}
             >
               {this.props.collections.map((x) => (
-              <MenuItem key={x.uid} value={x.uid} primaryText={x.displayName} />
+                <MenuItem key={x.uid} value={x.uid}>{x.displayName}</MenuItem>
               ))}
-          </SelectField>
+            </Select>
+          </FormControl>
 
-          <Toggle
-            label="All Day"
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
                   name="allDay"
-            toggled={this.state.allDay}
-            onToggle={this.toggleAllDay}
+                  checked={this.state.allDay}
+                  onChange={this.toggleAllDay}
+                  color="primary"
+                />
+              }
+              label="All Day"
             />
+          </FormGroup>
 
           <div>
             <DateTimePicker
@@ -270,7 +287,7 @@ class EventEdit extends React.PureComponent {
 
           <TextField
             name="location"
-            hintText="Add location"
+            placeholder="Add location"
             style={styles.fullWidth}
             value={this.state.location}
             onChange={this.handleInputChange}
@@ -278,38 +295,42 @@ class EventEdit extends React.PureComponent {
 
           <TextField
             name="description"
-            hintText="Add description"
-            multiLine={true}
+            placeholder="Add description"
+            multiline={true}
             style={styles.fullWidth}
             value={this.state.description}
             onChange={this.handleInputChange}
           />
 
           <div style={styles.submit}>
-            <RaisedButton
-              label="Cancel"
-              icon={<IconCancel />}
+            <Button
+              variant="raised"
               onClick={this.props.onCancel}
-            />
+            >
+             <IconCancel style={{marginRight: 8}} />
+              Cancel
+            </Button>
 
             {this.props.item &&
-              <RaisedButton
-                label="Delete"
-                labelColor={fullWhite}
-                backgroundColor={red500}
-                style={{marginLeft: 15}}
-                icon={<IconDelete color={fullWhite} />}
+              <Button
+                variant="raised"
+                style={{marginLeft: 15, backgroundColor: colors.red[500], color: 'white'}}
                 onClick={this.onDeleteRequest}
-              />
+              >
+                <IconDelete style={{marginRight: 8}} />
+                Delete
+              </Button>
             }
 
-            <RaisedButton
+            <Button
               type="submit"
-              label="Save"
-              secondary={true}
-              icon={<IconSave />}
+              variant="raised"
+              color="secondary"
               style={{marginLeft: 15}}
-            />
+            >
+              <IconSave style={{marginRight: 8}} />
+              Save
+            </Button>
           </div>
 
           <div>