#2 Definitive styles for now

Author: Jonatan Salas

src/components/common/DropZone.js

@@ -191,19 +191,20 @@ export default class DropZone extends Component {
 
 		if (!className && !style && !activeStyle && !rejectStyle) {
 			style = {
+				backgroundColor: "#f5f5f5",
 				width: 'auto',
 				borderWidth: 1,
-				borderColor: '#bdbdbd',
+				borderColor: '#757575',
 				borderStyle: 'dashed',
 				borderRadius: 2
 			};
 			activeStyle = {
 				borderStyle: 'solid',
-				backgroundColor: '#eee'
+				backgroundColor: '#f5f5f5'
 			};
 			rejectStyle = {
 				borderStyle: 'solid',
-				backgroundColor: '#ffdddd'
+				backgroundColor: '#f5f5f5'
 			};
 		}
 

src/components/common/FileInfo.js

@@ -18,11 +18,15 @@ export default class FileUploadItem extends Component {
 	render() {
 		let { file, height, width } = this.props;
 
-		//TODO truncate fileName to keep the Col in the same height
 		const containerStyle = {
-			backgroundColor: "#e0e0e0",
-			paddingTop: "10px",
-			paddingBottom: "10px"
+			margin: "auto",
+			padding: "0px",
+			backgroundColor: "#eeeeee",
+			borderColor: '#757575',
+			borderStyle: 'solid',
+			borderWidth: 2,
+			borderRadius: 6,
+			marginBottom: "10px"
 		};
 
 		const fileNameStyle = {
@@ -35,27 +39,27 @@ export default class FileUploadItem extends Component {
 		};
 
 		const imgStyle = {
+			marginTop: "10px",
 			display: 'block',
 			marginLeft: 'auto',
 			marginRight: 'auto'
 		};
 
-		//TODO check this
-		let image = (file.type.match(/image/))? file.preview : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAVFBMVEW9w8f///+Vpaa8wsbCx8uvubyerK2ksLKqtLeYp6jV2dyQoaKsuLmPoKG4v8Ocqqze4uP2+PjQ19e8xsfEzM34+fni5ObM0dTn6urX2t3u7/Czu7+daS8oAAAD0ElEQVR4nO3dbXOiMBiFYUCB0PBibW139f//z0Wdju5umzyE8HDCnPtrpzXXhLcGRrJ862VrD2DxKEw/CtOPwvSj8Lnzx+H3y5IdVxV+7Pu+3y2baVcTnl5GXbZ4ZbcAUST80OBdhYWNT5QIP3sV31W4AFEg3OtM4F0Yn+gX6gFvwuhEr/BTD3gXxib6hAetffAhjEz0CE+awC9hXKJHqLmNPoRRiW7hq+oUPoQxiW7hi+oUPgkjEt1C3Sl8FsYjOoXnFYXRiE7hQXcj/VsYi+gUKu+G/wgjEZ1C3XPFf8I4RKdQ8ZL0W2EUIrYwBhFcGIGILpxPhBfOJuIL5xITEM4kpiCcR0xCOIuYhnAOMRHhDGIqwnBiMsJgYjrCUGJCwkBiSsIwYlLCIGJawhBiYsIAYmrC6cTkhJOJUMKLRDiVCCXs7QJEKGEmAk4kYgmHBYhYQiMUTiFiCXeyHXESEUuYVVKhnAgmvIgnUUwEE+7lkyglggmznVwoJKIJp2ynMiKcMDORiXjCrI1LBBTK/sUQExGFWT9EPGlACsdpbKJd3YAKx2NqXQiRnsffYYVjfWlqSdVbqkJx+60LdxRSCB+FFOJHYaBQurQZq0FdOGFBJUoVhRRSSCGFKQonrPlFyOoLL6VuF3UhUBRSiB+FFOJHIYX4UUghfhRSiB+FFP5Q1eimv07DOzOx43ophRRSSGGKwtLoVqoLgaKQQvwopBA/CinEj0IK8aOQQvwopPCH6qHSbKjVhbxvETuuJlJIIYVbFG7/bCH7Qod4GXUhUBRSiB+FFOJHIYX4UUghfhRSiB+FFP7Q9lcxtr8Stf3VRAoppJDC5YXbP1ts/0kFoCikED8KKcSPQgrxo5BC/CikED8KKcSPQgrxo5BC/CikED8KXT9MpWBhv/bIhfXBQsd3pEFVBgsdzyFBZYKFjnvnUFXBwiGNzbQcwufQ8XgAUEP4HFbW8R4pmC52hrBo9muP39t+KMKFdVHgH05NUdTBwtYWBfpZvy8K2wYL36/vx8O+Nt2NI7TvwcJDN/5+g0zcNeMIu0Ow8NTdHinDPaBebuPrTsHCvL39BYt6uDH3t0w6d0OP8HCfxKJBvLgpm/vg3BupR5g3Xw8/NgbroNqbx9DcBI/waxKv22pTGaP8as7vM6ZqHm9B9UyhT5jXui9UnZ51nu4FwhO80HkgFQjzX53/U1as++UDeIXPuyJevp1QJESeRf8MioT5a41p7OpXweglwjw/WjxjZ4+iscuEo7HqLM5h1dqukvnkwjw/H9/aqvF/+uI1Vft2PIvH/Qe0D6lLW0grSAAAAABJRU5ErkJggg==";
+		const textContainerStyle = {
+			marginTop: "10px",
+			color: "#212121"
+		};
+
+		let image = (file.type.match(/image/))? file.preview : "http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/file-text-icon.png";
+		let filename = (file.name.length <= 21)? file.name : file.name.substring(0, 20);
 
 		return (
 			<Col xs={4} md={4}>
 				<div style={containerStyle}>
-					<div>
-						<img height={height} width={width} src={image} style={imgStyle}/>
-					</div>
-					<div>
-						<p style={fileNameStyle}>
-							<a>{file.name}</a>
-						</p>
-						<p style={fileSizeStyle}>
-							{filesize(file.size)}
-						</p>
+					<img height={height} width={width} src={image} style={imgStyle}/>
+					<div style={textContainerStyle}>
+						<p style={fileNameStyle}>{filename}</p>
+						<p style={fileSizeStyle}>{filesize(file.size)}</p>
 					</div>
 				</div>
 			</Col>

src/components/field/FileUpload.js

@@ -16,24 +16,11 @@ export default class FileUpload extends Component {
 	};
 
 	onDrop = (files) => {
-		let fileArray = this.filter([...files, ...this.state.files]);
+		let fileArray = [...files, ...this.state.files];
 
 		this.setState({ files: fileArray });
 	};
 
-	//TODO JS: Create a correct filter..
-	filter = (array) => {
-		// let a = [];
-        //
-		// array.forEach((item) => {
-		// 	if (a.indexOf(item) < 0) {
-		// 		a.push(item);
-		// 	}
-		// });
-
-		return Array.from(new Set(array));
-	};
-
 	onClick = () => {
 		// TODO Handle response status for upload service
 		const { files } = this.state;
@@ -54,7 +41,6 @@ export default class FileUpload extends Component {
 	render() {
 		let { files } = this.state;
 
-		//TODO Think how to manage styles correctly
 		const attachmentStyle = {
 			marginTop: "6px",
 			color: "#616161"
@@ -71,10 +57,9 @@ export default class FileUpload extends Component {
 
 		let rowStyle = {};
 
-		//TODO check row
 		if (files) {
 			rowStyle = {
-				padding: "10px"
+				padding: "5px"
 			}
 		}
 
@@ -105,7 +90,7 @@ export default class FileUpload extends Component {
 					</Col>
 				</Row>
 				<Col>
-					<GlyphButton type="submit" glyph="cloud-upload" text="Upload" bsSize="primary" onClick={this.onClick}/>
+					<GlyphButton type="submit" glyph="cloud-upload" text="Upload" bsSize="sm" bsStyle="primary" onClick={this.onClick}/>
 				</Col>
 			</div>
 		);