From 30c59d86654a611f909ae16e39b355c548187513 Mon Sep 17 00:00:00 2001
From: Ivan Diaz <ivan@opensupports.com>
Date: Wed, 14 Oct 2015 20:54:36 -0300
Subject: [PATCH] [Ivan Diaz] - Update input styling and widget styling

---
 .../main-home/main-home-page-login-widget.js  |  2 +-
 .../main-home-page-login-widget.scss          |  9 ++--
 src/app/main/main-layout.scss                 |  2 +
 src/app/main/main-signup/main-signup-page.js  | 15 ++++--
 .../main/main-signup/main-signup-page.scss    | 17 +++++++
 src/core-components/input.js                  | 20 ++++----
 src/core-components/input.scss                | 48 +++++++++++--------
 src/core-components/widget-transition.scss    |  1 +
 src/main.scss                                 |  2 +-
 9 files changed, 75 insertions(+), 41 deletions(-)
 create mode 100644 src/app/main/main-signup/main-signup-page.scss

diff --git a/src/app/main/main-home/main-home-page-login-widget.js b/src/app/main/main-home/main-home-page-login-widget.js
index 2c9892d2..0caea47c 100644
--- a/src/app/main/main-home/main-home-page-login-widget.js
+++ b/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>
diff --git a/src/app/main/main-home/main-home-page-login-widget.scss b/src/app/main/main-home/main-home-page-login-widget.scss
index 00502273..95ee3bc7 100644
--- a/src/app/main/main-home/main-home-page-login-widget.scss
+++ b/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 {
diff --git a/src/app/main/main-layout.scss b/src/app/main/main-layout.scss
index 4a9c408a..9b4999e1 100644
--- a/src/app/main/main-layout.scss
+++ b/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;
   }
 }
diff --git a/src/app/main/main-signup/main-signup-page.js b/src/app/main/main-signup/main-signup-page.js
index 301040ae..8551ee07 100644
--- a/src/app/main/main-signup/main-signup-page.js
+++ b/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 placeholder="Email Address..." name="email" className="signup-widget--input"/>
-                                <Input placeholder="Password..." name="password" type="password" className="signup-widget--input"/>
-                                <Input placeholder="Repeat Password..." name="repeated-password" type="password" className="signup-widget--input"/>
+                                <Input {...this.getInputProps()} label="Full Name" name="name"/>
+                                <Input {...this.getInputProps()} label="Email Address" name="email"/>
+                                <Input {...this.getInputProps()} label="Password" name="password" password/>
+                                <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);
     }
diff --git a/src/app/main/main-signup/main-signup-page.scss b/src/app/main/main-signup/main-signup-page.scss
new file mode 100644
index 00000000..5acac087
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/core-components/input.js b/src/core-components/input.js
index 1ac75e33..6b33186b 100644
--- a/src/core-components/input.js
+++ b/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">
-                <span className="input-label--text">{this.props.label}</span>
-                <input {...this.getProps()} />
+            <label className={this.getClass()}>
+                <span className="input--label">{this.props.label}</span>
+                <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);
     }
diff --git a/src/core-components/input.scss b/src/core-components/input.scss
index bbc000e3..989d22b8 100644
--- a/src/core-components/input.scss
+++ b/src/core-components/input.scss
@@ -1,29 +1,37 @@
 @import "../scss/vars";
 
 .input {
-  border: 1px solid $grey;
-  border-radius: 3px;
-  padding: 8px;
+  display: block;
 
-  &:hover {
-    border-color: $medium-grey;
-  }
+  &--text {
+    border: 1px solid $grey;
+    border-radius: 3px;
+    padding: 8px;
+    width: 100%;
 
-  &:focus {
-    outline: none;
-    border-color: $primary-blue;
-  }
+    &:hover {
+      border-color: $medium-grey;
+    }
 
-  &-label {
-    position: relative;
-
-    &--text {
-      color: $primary-black;
-      font-size: 14px;
-      display: block;
-      position: absolute;
-      top: -26px;
-      left: 2px;
+    &:focus {
+      outline: none;
+      border-color: $primary-blue;
     }
   }
+
+  &--label {
+    color: $primary-black;
+    font-size: 15px;
+    display: block;
+    padding: 3px 0;
+    text-align: left;
+  }
+
+  &_primary {
+    width: 200px;
+  }
+
+  &_secondary {
+    width: 250px;
+  }
 }
\ No newline at end of file
diff --git a/src/core-components/widget-transition.scss b/src/core-components/widget-transition.scss
index 9ff3c9d6..7ca2331a 100644
--- a/src/core-components/widget-transition.scss
+++ b/src/core-components/widget-transition.scss
@@ -1,6 +1,7 @@
 .widget-transition {
   position: relative;
   display: inline-block;
+  width: 324px;
 
   &--widget {
     display: inline-block;
diff --git a/src/main.scss b/src/main.scss
index c80e5910..a99a1844 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -4,4 +4,4 @@
 @import 'scss/base';
 
 @import 'core-components/*';
-@import 'app/main/*';
\ No newline at end of file
+@import 'app/main/*';