Merge pull request #66 from netlify/apply-theme

Apply theme

src/components/Cards/ImageCard.js

@@ -9,7 +9,7 @@ export default class ImageCard extends React.Component {
     return (
       <Card onClick={onClick} className={styles.root}>
         <img src={image} onLoad={onImageLoaded} />
-        <h1>{text}</h1>
+        <h2>{text}</h2>
 
         {description ? <p>{description}</p> : null}
       </Card>

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,11 @@ const styles = {
   container: {
     display: 'flex'
   },
+  controlPane: {
+    width: '50%',
+    paddingLeft: '10px',
+    paddingRight: '10px'
+  },
   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}>
-          {imageName ? imageName : 'Click or drop image here.'}
+        <span style={styles.imageUpload} onClick={this.handleClick}>
+          {imageName ? imageName : 'Tip: Click here to upload an image 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: '#fff',
+    textAlign: 'center',
+    color: '#999',
+    padding: '20px',
+    display: 'block',
+    border: '1px dashed #eee',
+    cursor: 'pointer',
+    fontSize: '12px'
   }
 };