update file widget to match image widget

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,

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;