Helpers & Icon

example/example.css

@@ -23,4 +23,8 @@ div.intro {
     width: 700px;
     margin-left: 20px;
     color: #000;
+}
+
+div#content {
+    width: 500px;
 }

src/filepicker.js

@@ -1,11 +1,18 @@
 'use strict';
 var React = require('react');
 
+var Helpers = require('./helpers');
+var IconComponent = require('./icon');
+
 var Filepicker = React.createClass({
 
     render: function () {
+        var icon = (this.props.fileicon) ? <IconComponent filetype="txt" /> : null;
+
         return (
-            <div className="filepicker" />
+            <div className="filepicker">
+                {icon}
+            </div>
         );
     }
 

src/helpers.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var Helpers = {
+    /**
+     * Creates a random 5-character id
+     * @return {string} [Somewhat random id]
+     */
+    createGuid: function()
+    {
+        var text = '',
+            possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (var i = 0; i < 5; i = i + 1) {
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+
+        return text;
+    }
+}
+
+module.exports = Helpers;

src/icon.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+
+var Icon = React.createClass({
+
+    render: function() {
+        return (
+            <div data-filetype={this.props.filetype}
+                 className="filepicker-file-icon" />
+        );
+    }
+
+});
+
+module.exports = Icon;

styles/filepicker.css

@@ -1,8 +1,73 @@
 /* Filepicker CSS */
+.filepicker {
+    font-family: sans-serif;
+}
+
 div.filepicker {
     text-align: center;
-    padding: 10px;
-    background-color: #DDD;
-    margin-bottom: 5px;
+    padding: 5px;
+    background-color: #E1E1E1;
     border-radius: 5px;
-}
+    min-height: 60px;
+    border: 2px dashed #C7C7C7;
+}
+
+/* Icon */
+.filepicker-file-icon
+{
+    position: relative;
+
+    display: inline-block;
+
+    margin: 1.5em 0 2.5em 0;
+    padding-left: 45px;
+
+    color: black;
+}
+.filepicker-file-icon::before
+{
+    position: absolute;
+    top: -7px;
+    left: 0;
+
+    width: 29px;
+    height: 34px;
+
+    content: '';
+
+    border: solid 2px #7F7F7F;
+    border-radius: 2px;
+}
+.filepicker-file-icon::after
+{
+    font-size: 11px;
+    line-height: 1.3;
+
+    position: absolute;
+    top: 9px;
+    left: -4px;
+
+    padding: 0 2px;
+
+    content: 'file';
+    content: attr(data-filetype);
+    text-align: right;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+
+    color: #fff;
+    background-color: #000;
+}
+.filepicker-file-icon .fileCorner
+{
+    position: absolute;
+    top: -7px;
+    left: 22px;
+
+    width: 0;
+    height: 0;
+
+    border-width: 11px 0 0 11px;
+    border-style: solid;
+    border-color: white transparent transparent #920035;
+}