Made the image upload button stand out as a drag target

src/components/EntryEditor.js

@@ -8,7 +8,7 @@ export default function EntryEditor({ collection, entry, getMedia, onChange, onA
     <h1>Entry in {collection.get('label')}</h1>
     <h2>{entry && entry.get('title')}</h2>
     <div className="cms-container" style={styles.container}>
-      <div className="cms-control-pane" style={styles.pane}>
+      <div className="cms-control-pane" style={styles.controlPane}>
         <ControlPane
             collection={collection}
             entry={entry}
@@ -30,6 +30,9 @@ const styles = {
   container: {
     display: 'flex'
   },
+  controlPane: {
+    width: '50%'
+  },
   pane: {
     width: '50%'
   }

src/components/Widgets/ImageControl.js

@@ -78,8 +78,8 @@ export default class ImageControl extends React.Component {
           onDragOver={this.handleDragOver}
           onDrop={this.handleChange}
       >
-        <span onClick={this.handleClick}>
+        <span style={styles.imageUpload} onClick={this.handleClick}>
-          {imageName ? imageName : 'Click or drop image here.'}
+          {imageName ? imageName : 'Click here to upload from your file browser, or drag an image directly into this box from your desktop'}
         </span>
         <input
             type="file"
@@ -96,6 +96,16 @@ export default class ImageControl extends React.Component {
 const styles = {
   input: {
     display: 'none'
+  },
+  imageUpload: {
+    backgroundColor: '#3ab7a5',
+    textAlign: 'center',
+    color: '#fff',
+    padding: '10px',
+    display: 'block',
+    margin: '10px',
+    boxShadow: '0px 9px 8px -5px rgba(0,0,0,0.75)',
+    cursor: 'pointer'
   }
 };