[Ivan Diaz] - Add layout header style

src/app/main/main-layout-header.js

@@ -0,0 +1,17 @@
+import React              from 'react/addons';
+import Button             from 'core-components/button';
+
+var MainLayoutHeader = React.createClass({
+
+    render() {
+        return (
+            <div className="main-layout-header">
+                <div className="main-layout-header--login-links">
+                   <Button type="light">Sign up</Button>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default MainLayoutHeader;

src/app/main/main-layout-header.scss

@@ -0,0 +1,16 @@
+@import "../../scss/vars";
+
+.main-layout-header {
+  background-color: $primary-blue;
+  border-radius: 4px 4px 0 0;
+  height: 32px;
+  width: 100%;
+
+  &--login-links {
+    border-top-left-radius: 4px;
+    color: white;
+    display: inline-block;
+    height: 32px;
+    padding: 5px 20px 0 10px;
+  }
+}

src/app/main/main-layout.js

@@ -1,23 +1,24 @@
 import React              from 'react/addons';
-import {ListenerMixin}    from 'reflux';
 import {RouteHandler}     from 'react-router';
 
+import MainHeader         from 'app/main/main-layout-header';
+
 var MainLayout = React.createClass({
 
-	render() {
-		return (
-			<div className="main-layout">
+    render() {
+        return (
+            <div className="main-layout">
 
-				MainHeader
+                <MainHeader />
 
-				<RouteHandler params={this.props.params}
-					query={this.props.query} />
+                <RouteHandler params={this.props.params}
+                    query={this.props.query} />
 
-				MainFooter
+                MainFooter
 
-			</div>
-		);
-	}
+            </div>
+        );
+    }
 });
 
 export default MainLayout;

src/core-components/button.js

@@ -11,7 +11,8 @@ var Button = React.createClass({
     propTypes: {
         children: React.PropTypes.node,
         type: React.PropTypes.oneOf([
-            'primary'
+            'primary',
+            'light'
         ])
     },
 

src/core-components/button.scss

@@ -15,4 +15,9 @@
     text-transform: uppercase;
     width: 239px;
   }
+
+  &-light {
+    background: none;
+    border: none;
+  }
 }

src/main.scss

@@ -4,4 +4,4 @@
 @import 'scss/base';
 
 @import 'core-components/*';
-@import 'app/*';
+@import 'app/main/*';

src/scss/_vars.scss

@@ -8,6 +8,12 @@ $green: #1fe27b;
 $red: #e21f3f;
 
 $primary-red: #DD5555;
+$secondary-red: #FB6362;
+
+$primary-blue: #414A59;
+
+$grey: #F4F4F4;
+$dark-grey: #D9D9D9;
 
 // spacing
 $full-space: 40px;