From 81e27632becbe1e4b29c655a8a5c6cbc2a3e9c62 Mon Sep 17 00:00:00 2001
From: Frances Berriman <fberriman@gmail.com>
Date: Wed, 31 Aug 2016 12:11:14 -0700
Subject: [PATCH] Made the image upload button stand out as a drag target

---
 src/components/EntryEditor.js          |  5 ++++-
 src/components/Widgets/ImageControl.js | 14 ++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/EntryEditor.js b/src/components/EntryEditor.js
index 1ab0f003..30d405cd 100644
--- a/src/components/EntryEditor.js
+++ b/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%'
   }
diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js
index d80cd80e..f0c5ee06 100644
--- a/src/components/Widgets/ImageControl.js
+++ b/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}>
-          {imageName ? imageName : 'Click or drop image here.'}
+        <span style={styles.imageUpload} onClick={this.handleClick}>
+          {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'
   }
 };