Add close button button.

bikeshop_project/assets/js/bikes/components/BikeForm/index.jsx

@@ -25,6 +25,7 @@ class BikeForm extends React.Component {
   static propTypes = {
     bike: PropTypes.object,
     editing: PropTypes.bool,
+    handleClose: PropTypes.func,
   }
   constructor({ bike, editing = false }) {
     super();
@@ -244,8 +245,9 @@ class BikeForm extends React.Component {
           }
         </div>
         <div className="mdl-grid">
-          <div className="mdl-cell right">
-            <RaisedButton label="Save" onTouchTap={this.handleSave} />
+          <div style={{ textAlign: 'right' }} className="mdl-cell mdl-cell--12-col">
+            <RaisedButton label="Cancel" onTouchTap={this.props.handleClose} secondary />
+            <RaisedButton label="Save" onTouchTap={this.props.handleSave} default />
           </div>
         </div>
       </div>

bikeshop_project/assets/js/bikes/components/BikeModal/index.jsx

@@ -37,20 +37,6 @@ export default class BikeModal extends React.Component {
   };
 
   render() {
-    const actions = [
-      <FlatButton
-        label="Cancel"
-        primary
-        onTouchTap={this.handleClose}
-      />,
-      <FlatButton
-        label="Submit"
-        primary
-        disabled
-        onTouchTap={this.handleClose}
-      />,
-    ];
-
     const title = this.state.bike && this.state.bike.stolen ?
       (<div>
         <h3>{this.props.editing ? 'Edit Bike' : 'Add Bike'}</h3>
@@ -61,8 +47,6 @@ export default class BikeModal extends React.Component {
     return (<div>
       <Dialog
         title={title}
-        actions={actions}
-        modal
         open={this.state.open}
         autoScrollBodyContent
       >
@@ -71,6 +55,7 @@ export default class BikeModal extends React.Component {
             bike={this.state.bike}
             editing={this.state.editing}
             getBikes={this.props.getBikes}
+            handleClose={this.handleClose}
           /> :
           <div>Unable to edit bike.</div>
         }