#2 Keep on Fix over styles

Author: jonisaa

src/components/common/DropZone.js

@@ -191,6 +191,7 @@ export default class DropZone extends Component {
 
 		if (!className && !style && !activeStyle && !rejectStyle) {
 			style = {
+				width: 'auto',
 				borderWidth: 1,
 				borderColor: '#bdbdbd',
 				borderStyle: 'dashed',

src/components/field/FileUpload.js

@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import DropZone from '../common/DropZone';
 import GlyphButton from '../common/GlyphButton';
 import FileInfo from '../common/FileInfo';
+import { Grid, Col, Row } from 'react-bootstrap';
 
 import fetch from 'isomorphic-fetch';
 
@@ -43,27 +44,32 @@ export default class FileUpload extends Component {
 	render() {
 		let { files } = this.state;
 
-		console.log("URL ---->> " + this.props.url);
 		return (
 			<div>
-				<label>Files</label>
+				<Row>
+					<Col xs={2} md={2}>
+						<p align="center">
+							<b>Attachments</b>
+						</p>
+					</Col>
+					<Col xs={10} md={10}>
+						<DropZone onDrop={this.onDrop}>
+							<div>
+								<p>Drop files to attach, or <a>browse</a></p>
+								<ul>{
+									files.map((file, index) => (
+										<FileInfo key={index} file={file}/>
+									))
+								}
+								</ul>
+							</div>
+						</DropZone>
+					</Col>
+				</Row>
 				<div>
-					<DropZone onDrop={this.onDrop}>
-						<div>
-							Try dropping some files here, or click to select files to upload.
-						</div>
-						<ul>{
-							files.map((file, index) => (
-								<FileInfo key={index} file={file}/>
-							))
-						}
-						</ul>
-					</DropZone>
-					<div>
-						<button onClick={this.onClick}>
-							Upload
-						</button>
-					</div>
+					<span>
+                        <GlyphButton glyph="cloud-upload" text="Upload" bsSize="primary" onClick={this.onClick}/>
+                    </span>
 				</div>
 			</div>
 		);