[Ivan Diaz] - Styling tweaks

src/app/main/main-home/main-home-page-login-widget.js

@@ -13,13 +13,15 @@ import Button             from 'core-components/button';
 var MainHomePageLoginWidget = React.createClass({
     render() {
         return (
-            <Widget className="main-home-page--widget">
-                <h3>Login</h3>
-                <Form onSubmit={this.handleSubmit} ref="form">
-                    <Input placeholder="email" name="email" className="login-widget--input"/>
-                    <Input placeholder="password" name="password" className="login-widget--input"/>
+            <Widget className="main-home-page--widget" title="Login">
+                <Form className="login-widget--form" onSubmit={this.handleSubmit}>
+                    <div className="login-widget--inputs">
+                        <Input placeholder="email" name="email" className="login-widget--input"/>
+                        <Input placeholder="password" name="password" type="password" className="login-widget--input"/>
+                    </div>
                     <Button type="primary">LOG IN</Button>
                 </Form>
+                <Button type="link">{'Forgot your password?'}</Button>
             </Widget>
         );
     },

src/app/main/main-home/main-home-page-login-widget.scss

@@ -1,5 +1,11 @@
 .login-widget {
+  &--inputs {
+  }
+
   &--input {
     margin: 10px 0;
   }
+
+  &--form {
+  }
 }

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

@@ -7,8 +7,8 @@ var MainLayoutHeader = React.createClass({
         return (
             <div className="main-layout-header">
                 <div className="main-layout-header--login-links">
-                   <Button type="light" route={{to:'home'}}>Log in</Button>
-                   <Button type="light" route={{to:'signup'}}>Sign up</Button>
+                   <Button type="clean" route={{to:'home'}}>Log in</Button>
+                   <Button type="clean" route={{to:'signup'}}>Sign up</Button>
                 </div>
             </div>
         );

src/core-components/__tests__/button-test.js

@@ -21,7 +21,9 @@ describe('Button', () => {
 
 	it('should add passed types to class', () => {
 		var types = [
-			'primary'
+			'primary',
+            'clean',
+            'link'
 		];
 
 		types.forEach((type) => {

src/core-components/button.js

@@ -12,7 +12,8 @@ var Button = React.createClass({
         children: React.PropTypes.node,
         type: React.PropTypes.oneOf([
             'primary',
-            'light'
+            'clean',
+            'link'
         ]),
         route: React.PropTypes.shape({
             to: React.PropTypes. string.isRequired,

src/core-components/button.scss

@@ -12,8 +12,19 @@
     width: 239px;
   }
 
-  &-light {
+  &-clean {
     background: none;
     border: none;
   }
+
+  &-link {
+    background: none;
+    border: none;
+    color: $dark-grey;
+    text-decoration: underline;
+
+    &:focus {
+      outline: none;
+    }
+  }
 }

src/core-components/input.js

@@ -7,7 +7,14 @@ var Input = React.createClass({
     propTypes: {
         value: React.PropTypes.string,
         validation: React.PropTypes.func,
-        onChange: React.PropTypes.func
+        onChange: React.PropTypes.func,
+        type: React.PropTypes.string
+    },
+
+    getDefaultProps() {
+        return {
+            type: 'text'
+        };
     },
 
     render() {
@@ -20,7 +27,6 @@ var Input = React.createClass({
         var props = _.clone(this.props);
 
         props.className = this.getClass();
-        props.type = 'text';
 
         return props;
     },

src/core-components/input.scss

@@ -6,7 +6,7 @@
   padding: 8px;
 
   &:hover {
-    border-color: $dark-grey;
+    border-color: $medium-grey;
   }
 
   &:focus {

src/core-components/widget.js

@@ -3,17 +3,35 @@ import classNames from 'classnames';
 
 var Widget = React.createClass({
     propTypes: {
+        title: React.PropTypes.string,
         children: React.PropTypes.node.isRequired
     },
 
+    getDefaultProps() {
+        return {
+            title: ''
+        };
+    },
+
     render() {
         return (
             <div className={this.getClass()}>
+                {this.renderTitle()}
                 {this.props.children}
             </div>
         );
     },
 
+    renderTitle() {
+        var titleNode = null;
+
+        if (this.props.title) {
+            titleNode = <h2 className="widget--title">{this.props.title}</h2>;
+        }
+
+        return titleNode;
+    },
+
     getClass() {
         var classes = {
             'widget': true

src/core-components/widget.scss

@@ -1,7 +1,16 @@
+@import "../scss/vars";
+
 .widget {
   background-color: white;
   border-radius: 4px;
   text-align: center;
-  padding: 27px;
+  padding: 20px;
   width: 324px;
+
+  &--title {
+    text-transform: uppercase;
+    color: $primary-black;
+    font-size: 17px;
+    margin-bottom: 20px;
+  }
 }

src/scss/_vars.scss

@@ -6,7 +6,10 @@ $primary-blue: #414A59;
 
 $light-grey: #EEEEEE;
 $grey: #E7E7E7;
-$dark-grey: #D9D9D9;
+$medium-grey: #D9D9D9;
+$dark-grey: #8D8D8D;
+
+$primary-black: #4D4D4D;
 
 // SPACING
 $full-space: 40px;