refactor signup form

js/components/ascribe_forms/input_checkbox.js

@@ -31,7 +31,7 @@ let InputCheckbox = React.createClass({
                 <input type="checkbox" ref="checkbox"/>
                 <span className="checkbox">
                     <span>
-                        {getLangText('I agree to the Terms of Service') + ' '}
+                        {' ' + getLangText('I agree to the Terms of Service') + ' '}
                         (<a href="/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
                             {getLangText('read')}
                         </a>)

js/components/ascribe_forms/property.js

@@ -25,7 +25,8 @@ let Property = React.createClass({
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ])
+        ]),
+        style: React.PropTypes.object
     },
 
     getDefaultProps() {
@@ -166,7 +167,8 @@ let Property = React.createClass({
             <div
                 className={'ascribe-settings-wrapper ' + this.getClassName()}
                 onClick={this.handleFocus}
-                onFocus={this.handleFocus}>
+                onFocus={this.handleFocus}
+                style={this.props.style}>
                 <OverlayTrigger
                     delay={500}
                     placement="top"

js/components/signup_container.js

@@ -13,6 +13,7 @@ import GlobalNotificationActions from '../actions/global_notification_actions';
 
 import Form from './ascribe_forms/form';
 import Property from './ascribe_forms/property';
+import FormPropertyHeader from './ascribe_forms/form_property_header';
 import InputCheckbox from './ascribe_forms/input_checkbox';
 
 
@@ -67,9 +68,6 @@ let SignupContainer = React.createClass({
         return (
             <div className="ascribe-login-wrapper">
                 <br/>
-                <div className="ascribe-login-text ascribe-login-header">
-                    {getLangText('Welcome to')} ascribe...
-                </div>
                 <SignupForm handleSuccess={this.handleSuccess}/>
             </div>
         );
@@ -99,6 +97,7 @@ let SignupForm = React.createClass({
             getLangText('Store it in a safe place') + '!';
         return (
             <Form
+                className="ascribe-form-bordered"
                 ref='form'
                 url={apiUrls.users_signup}
                 handleSuccess={this.handleSuccess}
@@ -111,6 +110,9 @@ let SignupForm = React.createClass({
                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                     </button>
                     }>
+                <FormPropertyHeader>
+                    <h3>{getLangText('Welcome to ascribe')}</h3>
+                </FormPropertyHeader>
                 <Property
                     name='email'
                     label={getLangText('Email')}>
@@ -149,7 +151,8 @@ let SignupForm = React.createClass({
                 </Property>
                 <Property
                     name="terms"
-                    className="ascribe-settings-property-collapsible-toggle">
+                    className="ascribe-settings-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
                     <InputCheckbox />
                 </Property>
             </Form>

sass/ascribe_settings.scss

@@ -28,13 +28,13 @@
 .is-error {
     background-color: rgba(169, 68, 66, 0.05);
     border-left: 3px solid rgba(169, 68, 66, 1);
-    div {
+    > div {
-        span {
+        > span {
             color: rgba(169, 68, 66, 1);
             font-size: 0.9em;
             margin-right: 1em;
         }
-        input, textarea {
+        > input, > textarea {
             color: #666;
         }
     }
@@ -46,12 +46,12 @@
 
 .is-fixed {
     cursor: default;
-    div {
+    > div {
         cursor: default;
-        span {
+        > span {
             cursor: default;
         }
-        input, div, pre, textarea {
+        > input, > div, > pre, > textarea {
             cursor: default;
             color: #666;
         }
@@ -70,19 +70,19 @@
 
     cursor:pointer;
     
-    input, div, span:not(.glyphicon), pre, textarea, select {
+    > input, > div, > span:not(.glyphicon), > pre, > textarea, > select {
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
    
-    span {
+    > span {
         font-weight: normal;
         font-size: 0.9em;
         color: rgba(0,0,0,.5);
     }
 
-    div {
+    > div {
         /* margin-top: 10px; */
-        div:not(.file-drag-and-drop div) {
+        > div:not(.file-drag-and-drop div) {
           padding-left: 0;
           font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
           font-weight: normal;
@@ -92,11 +92,11 @@
         }
     }
 
-    .progressbar-container, .progressbar-progress {
+    > .progressbar-container, .progressbar-progress {
         margin-top: 0 !important;
     }
 
-    input, pre, textarea, select {
+    > input, > pre, > textarea, > select {
         font-weight: 400;
         font-size: 1.1em;
         width:100%;
@@ -119,7 +119,7 @@
 
     }
 
-    textarea{
+    > textarea{
         color: #666;
         margin-top: 1em;
         padding: 0;
@@ -143,7 +143,7 @@
     cursor:pointer;
 
     /* Taken from: http://www.htmllion.com/css3-checkbox.html */
-    > .checkbox {
+    .checkbox {
         display: inline-block;
         cursor: pointer;