From 05899341697a08cac9aff833ce298f8e33f26cfc Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@shawn.works>
Date: Fri, 19 May 2017 13:00:53 -0400
Subject: [PATCH] update file widget to match image widget

---
 .../{ImageControl.css => FileControl.css}     |  0
 src/components/Widgets/FileControl.js         | 31 +++++--------------
 src/components/Widgets/ImageControl.js        |  2 +-
 3 files changed, 8 insertions(+), 25 deletions(-)
 rename src/components/Widgets/{ImageControl.css => FileControl.css} (100%)

diff --git a/src/components/Widgets/ImageControl.css b/src/components/Widgets/FileControl.css
similarity index 100%
rename from src/components/Widgets/ImageControl.css
rename to src/components/Widgets/FileControl.css
diff --git a/src/components/Widgets/FileControl.js b/src/components/Widgets/FileControl.js
index 04ce1761..468b4107 100644
--- a/src/components/Widgets/FileControl.js
+++ b/src/components/Widgets/FileControl.js
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
+import styles from './FileControl.css';
 
 const MAX_DISPLAY_LENGTH = 50;
 
@@ -77,8 +78,8 @@ export default class FileControl extends React.Component {
     const fileName = this.renderFileName();
     if (processing) {
       return (
-        <div style={styles.imageUpload}>
-          <span style={styles.message}>
+        <div className={styles.imageUpload}>
+          <span className={styles.message}>
             <Loader active />
           </span>
         </div>
@@ -86,18 +87,18 @@ export default class FileControl extends React.Component {
     }
     return (
       <div
-        style={styles.imageUpload}
+        className={styles.imageUpload}
         onDragEnter={this.handleDragEnter}
         onDragOver={this.handleDragOver}
         onDrop={this.handleChange}
       >
-        <span style={styles.message} onClick={this.handleClick}>
-          {fileName ? fileName : 'Tip: Click here to select a file to upload, or drag an image directly into this box from your desktop'}
+        <span className={styles.message} onClick={this.handleClick}>
+          {fileName ? fileName : 'Click here to upload a file from your computer, or drag and drop a file directly into this box'}
         </span>
         <input
           type="file"
           onChange={this.handleChange}
-          style={styles.input}
+          className={styles.input}
           ref={this.handleFileInputRef}
         />
       </div>
@@ -105,24 +106,6 @@ export default class FileControl extends React.Component {
   }
 }
 
-const styles = {
-  input: {
-    display: 'none',
-  },
-  message: {
-    padding: '20px',
-    display: 'block',
-    fontSize: '12px',
-  },
-  imageUpload: {
-    backgroundColor: '#fff',
-    textAlign: 'center',
-    color: '#999',
-    border: '1px dashed #eee',
-    cursor: 'pointer',
-  },
-};
-
 FileControl.propTypes = {
   onAddAsset: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
diff --git a/src/components/Widgets/ImageControl.js b/src/components/Widgets/ImageControl.js
index f81f1f29..cd8fb46b 100644
--- a/src/components/Widgets/ImageControl.js
+++ b/src/components/Widgets/ImageControl.js
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { truncateMiddle } from '../../lib/textHelper';
 import { Loader } from '../UI';
 import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
-import styles from './ImageControl.css';
+import styles from './FileControl.css';
 
 const MAX_DISPLAY_LENGTH = 50;