Use react-toolbox buttons. Added Cancel button for the entry editor.

src/actions/editor.js

@@ -1,8 +1,16 @@
+import history from '../routing/history';
+
 export const SWITCH_VISUAL_MODE = 'SWITCH_VISUAL_MODE';
 
 export function switchVisualMode(useVisualMode) {
   return {
     type: SWITCH_VISUAL_MODE,
-    payload: useVisualMode
+    payload: useVisualMode,
+  };
+}
+
+export function cancelEdit() {
+  return () => {
+    history.goBack();
   };
 }

src/components/EntryEditor/EntryEditor.css

@@ -1,3 +1,8 @@
+:root {
+  --defaultColorLight: #eee;
+  --backgroundColor: #fff;
+}
+
 .root {
   position: absolute;
   top: 64px;
@@ -5,23 +10,27 @@
   display: flex;
   flex-direction: column;
 }
+
 .container {
-  flex: 1;
   display: flex;
+  flex: 1;
 }
+
 .footer {
   flex: 0;
-  background: #fff;
-  height: 45px;
-  border-top: 1px solid #e8eae8;
   padding: 10px 20px;
+  border-top: 1px solid var(--defaultColorLight);
+  background: var(--backgroundColor);
+  text-align: right;
 }
+
 .controlPane {
   flex: 1;
   overflow: auto;
   padding: 0 20px;
-  border-right: 1px solid #e8eae8;
+  border-right: 1px solid var(--defaultColorLight);
 }
+
 .previewPane {
   flex: 1;
 }

src/components/EntryEditor/EntryEditor.js

@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Button } from 'react-toolbox/lib/button';
 import { ScrollSync, ScrollSyncPane } from '../ScrollSync';
 import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
@@ -7,7 +8,14 @@ import styles from './EntryEditor.css';
 
 export default function EntryEditor(
   {
-    collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist
+    collection,
+    entry,
+    getMedia,
+    onChange,
+    onAddMedia,
+    onRemoveMedia,
+    onPersist,
+    onCancelEdit,
   }) {
   return (
     <div className={styles.root}>
@@ -35,7 +43,17 @@ export default function EntryEditor(
         </div>
       </ScrollSync>
       <div className={styles.footer}>
-        <button onClick={onPersist}>Save</button>
+        <Button
+          primary
+          raised
+          onClick={onPersist}
+        >
+          Save
+        </Button>
+        {' '}
+        <Button onClick={onCancelEdit}>
+          Cancel
+        </Button>
       </div>
     </div>
   );
@@ -49,4 +67,5 @@ EntryEditor.propTypes = {
   onChange: PropTypes.func.isRequired,
   onPersist: PropTypes.func.isRequired,
   onRemoveMedia: PropTypes.func.isRequired,
+  onCancelEdit: PropTypes.func.isRequired,
 };

src/containers/EntryPage.js

@@ -7,12 +7,13 @@ import {
   createEmptyDraft,
   discardDraft,
   changeDraft,
-  persistEntry
+  persistEntry,
 } from '../actions/entries';
+import { cancelEdit } from '../actions/editor';
 import { addMedia, removeMedia } from '../actions/media';
 import { selectEntry, getMedia } from '../reducers';
 import EntryEditor from '../components/EntryEditor/EntryEditor';
-import EntryPageHOC from './editorialWorkflow/EntryPageHOC';
+import entryPageHOC from './editorialWorkflow/EntryPageHOC';
 
 class EntryPage extends React.Component {
   static propTypes = {
@@ -28,6 +29,7 @@ class EntryPage extends React.Component {
     loadEntry: PropTypes.func.isRequired,
     persistEntry: PropTypes.func.isRequired,
     removeMedia: PropTypes.func.isRequired,
+    cancelEdit: PropTypes.func.isRequired,
     slug: PropTypes.string,
     newEntry: PropTypes.bool.isRequired,
   };
@@ -56,7 +58,7 @@ class EntryPage extends React.Component {
     this.props.discardDraft();
   }
 
-  createDraft = entry => {
+  createDraft = (entry) => {
     if (entry) this.props.createDraftFromEntry(entry);
   };
 
@@ -66,10 +68,19 @@ class EntryPage extends React.Component {
 
   render() {
     const {
-      entry, entryDraft, boundGetMedia, collection, changeDraft, addMedia, removeMedia
+      entry,
+      entryDraft,
+      boundGetMedia,
+      collection,
+      changeDraft,
+      addMedia,
+      removeMedia,
+      cancelEdit,
     } = this.props;
 
-    if (entryDraft == null || entryDraft.get('entry') == undefined || entry && entry.get('isFetching')) {
+    if (entryDraft == null
+      || entryDraft.get('entry') === undefined
+      || (entry && entry.get('isFetching'))) {
       return <div>Loading...</div>;
     }
     return (
@@ -81,18 +92,12 @@ class EntryPage extends React.Component {
         onAddMedia={addMedia}
         onRemoveMedia={removeMedia}
         onPersist={this.handlePersistEntry}
+        onCancelEdit={cancelEdit}
       />
     );
   }
 }
 
-
-/*
- * Instead of checking the publish mode everywhere to dispatch & render the additional editorial workflow stuff,
- * We delegate it to a Higher Order Component
- */
-EntryPage = EntryPageHOC(EntryPage);
-
 function mapStateToProps(state, ownProps) {
   const { collections, entryDraft } = state;
   const collection = collections.get(ownProps.params.name);
@@ -113,6 +118,7 @@ export default connect(
     createDraftFromEntry,
     createEmptyDraft,
     discardDraft,
-    persistEntry
+    persistEntry,
+    cancelEdit,
   }
-)(EntryPage);
+)(entryPageHOC(EntryPage));