[Ivan Diaz] - Update input styling and widget styling

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

@@ -33,7 +33,7 @@ var MainHomePageLoginWidget = React.createClass({
                 <Form className="login-widget--form" onSubmit={this.handleLoginFormSubmit}>
                     <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"/>
+                        <Input placeholder="password" name="password" className="login-widget--input" password/>
                     </div>
                     <Button type="primary">LOG IN</Button>
                 </Form>

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

@@ -1,12 +1,8 @@
 .login-widget {
 
   &--container {
-    margin: 35px auto 0;
+    margin: 0 auto;
     height: 327px;
-    width: 324px;
-  }
-
-  &--inputs {
   }
 
   &--input {
@@ -14,7 +10,8 @@
   }
 
   &--inputs {
-    margin-bottom: 20px;
+    display: inline-block;
+    margin: 0 auto 20px;
   }
 
   &--forgot-password {

src/app/main/main-layout.scss

@@ -6,10 +6,12 @@
   background-color: $grey;
   max-width: 1100px;
   border-radius: 4px;
+  transition: max-height 0.15s ease-out;
 
   &--content {
     text-align: center;
     min-height: 400px;
     width: 1100px;
+    padding: 20px;
   }
 }

src/app/main/main-signup/main-signup-page.js

@@ -19,10 +19,10 @@ var MainSignUpPageWidget = React.createClass({
                     <Widget className="signup-widget" title="Register">
                         <Form className="signup-widget--form" onSubmit={this.handleLoginFormSubmit}>
                             <div className="signup-widget--inputs">
-                                <Input placeholder="Full Name..." name="name" className="signup-widget--input"/>
+                                <Input {...this.getInputProps()} label="Full Name" name="name"/>
-                                <Input placeholder="Email Address..." name="email" className="signup-widget--input"/>
+                                <Input {...this.getInputProps()} label="Email Address" name="email"/>
-                                <Input placeholder="Password..." name="password" type="password" className="signup-widget--input"/>
+                                <Input {...this.getInputProps()} label="Password" name="password" password/>
-                                <Input placeholder="Repeat Password..." name="repeated-password" type="password" className="signup-widget--input"/>
+                                <Input {...this.getInputProps()} label="Repeat Password" name="repeated-password" password/>
                             </div>
                             <Button type="primary">SIGN UP</Button>
                         </Form>
@@ -32,6 +32,13 @@ var MainSignUpPageWidget = React.createClass({
         );
     },
 
+    getInputProps() {
+        return {
+            inputType: 'secondary',
+            className: 'signup-widget-input'
+        }
+    },
+
     handleLoginFormSubmit(formState) {
         UserActions.login(formState.email, formState.password);
     }

src/app/main/main-signup/main-signup-page.scss

@@ -0,0 +1,17 @@
+.main-signup-page {
+  &--widget-container {
+    height: 401px;
+  }
+
+  .signup-widget {
+
+    &--inputs {
+      display: inline-block;
+      margin: 0 auto 20px;
+    }
+
+    &--input {
+      margin-bottom: 5px;
+    }
+  }
+}

src/core-components/input.js

@@ -8,20 +8,21 @@ var Input = React.createClass({
         value: React.PropTypes.string,
         validation: React.PropTypes.func,
         onChange: React.PropTypes.func,
-        type: React.PropTypes.string
+        inputType: React.PropTypes.string,
+        password: React.PropTypes.boolean
     },
 
     getDefaultProps() {
         return {
-            type: 'text'
+            inputType: 'primary'
         };
     },
 
     render() {
         return (
-            <label className="input-label">
+            <label className={this.getClass()}>
-                <span className="input-label--text">{this.props.label}</span>
+                <span className="input--label">{this.props.label}</span>
-                <input {...this.getProps()} />
+                <input {...this.getProps()} className="input--text" />
             </label>
         );
     },
@@ -29,17 +30,18 @@ var Input = React.createClass({
     getProps() {
         var props = _.clone(this.props);
 
-        props.className = this.getClass();
+        props.type = (this.props.password) ? 'password' : 'text';
 
         return props;
     },
 
     getClass() {
         var classes = {
-            'input': true
+            'input': true,
-        };
+            ['input_' + this.props.inputType]: true,
 
-        classes[this.props.className] = (this.props.className);
+            [this.props.className]: (this.props.className)
+        };
 
         return classNames(classes);
     }

src/core-components/input.scss

@@ -1,29 +1,37 @@
 @import "../scss/vars";
 
 .input {
-  border: 1px solid $grey;
+  display: block;
-  border-radius: 3px;
-  padding: 8px;
 
-  &:hover {
+  &--text {
-    border-color: $medium-grey;
+    border: 1px solid $grey;
-  }
+    border-radius: 3px;
+    padding: 8px;
+    width: 100%;
 
-  &:focus {
+    &:hover {
-    outline: none;
+      border-color: $medium-grey;
-    border-color: $primary-blue;
+    }
-  }
 
-  &-label {
+    &:focus {
-    position: relative;
+      outline: none;
-
+      border-color: $primary-blue;
-    &--text {
-      color: $primary-black;
-      font-size: 14px;
-      display: block;
-      position: absolute;
-      top: -26px;
-      left: 2px;
     }
   }
+
+  &--label {
+    color: $primary-black;
+    font-size: 15px;
+    display: block;
+    padding: 3px 0;
+    text-align: left;
+  }
+
+  &_primary {
+    width: 200px;
+  }
+
+  &_secondary {
+    width: 250px;
+  }
 }

src/core-components/widget-transition.scss

@@ -1,6 +1,7 @@
 .widget-transition {
   position: relative;
   display: inline-block;
+  width: 324px;
 
   &--widget {
     display: inline-block;

src/main.scss

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