Merge pull request #249 from asaadmahmoodspin/master

Complete signup page UI changes

web/react/components/signup_user_complete.jsx

@@ -117,24 +117,24 @@ module.exports = React.createClass({
 
         var signup_message;
         if (auth_services.indexOf("gitlab") >= 0) {
-            signup_message = <p>{"Choose your username and password for the " + this.props.teamDisplayName + " " + strings.Team} <a href={"/"+this.props.teamName+"/signup/gitlab"+window.location.search}>{"or sign up with GitLab."}</a></p>;
+            signup_message = <div><a className="btn btn-custom-login gitlab" href={"/"+this.props.teamName+"/signup/gitlab"+window.location.search}><span className="icon" />{"with GitLab"}</a>
-        } else {
+            <div className="or__container"><span>or</span></div></div>;
-            signup_message = <p>{"Choose your username and password for the " + this.props.teamDisplayName + " " + strings.Team + "."}</p>;
         }
 
         return (
             <div>
                 <img className="signup-team-logo" src="/static/images/logo.png" />
-                <h4>Welcome to { config.SiteName }</h4>
+                <h3 className="text-center extra-margin">Signup to { config.SiteName }</h3>
                 <div className="form-group form-group--small">
                     <span></span>
                 </div>
                 { signup_message }
-                <p>Your username can be made of lowercase letters and numbers.</p>
                 <label className="control-label">Username</label>
                 <div className={ name_error ? "form-group has-error" : "form-group" }>
                 <input type="text" ref="name" className="form-control" placeholder="" maxLength="128" />
                 { name_error }
+                <p className="form__hint">Your username can be made of lowercase letters and numbers.</p>
+                <p className="form__hint">{"Pick something " + strings.Team + "mates will recognize. Your username is how you will appear to others"}</p>
                 </div>
                 { email }
                 <label className="control-label">Password</label>
@@ -142,7 +142,6 @@ module.exports = React.createClass({
                 <input type="password" ref="password" className="form-control" placeholder="" maxLength="128" />
                 { password_error }
                 </div>
-                <p>{"Pick something " + strings.Team + "mates will recognize. Your username is how you will appear to others"}</p>
                 <p className={ this.state.original_email == "" ? "hidden" : ""}>{ yourEmailIs } You’ll use this address to sign in to {config.SiteName}.</p>
                 <div className="checkbox"><label><input type="checkbox" ref="email_service" /> It's ok to send me occassional email with updates about the {config.SiteName} service. </label></div>
                 <p><button onClick={this.handleSubmit} className="btn-primary btn">Create Account</button></p>

web/sass-files/sass/partials/_signup.scss

@@ -23,6 +23,9 @@
         font-weight: 600;
         margin: 0 0 1.3em 0;
         font-size: 1.4em;
+        &.extra-margin {
+            margin-bottom: 2.5em;
+        }
     }
     h4 {
         font-size: em(18px);
@@ -44,6 +47,11 @@
     form {
         margin-bottom: 0.8em;
     }
+    .form__hint {
+        font-size: 0.95em;
+        color: #999;
+        margin: 10px 0;
+    }
     .external-link {
         position: absolute;
         bottom: 0;
@@ -61,10 +69,53 @@
     .form-control {
         height: em(38px);
     }
+    .or__container {
+        height: 1px;
+        background: #dddddd;
+        text-align: center;
+        margin: 2em 0;
+        span {
+            width: 33px;
+            top: -10px;
+            position: relative;
+            line-height: 20px;
+            font-weight: 600;
+            background: #fff;
+            display: inline-block;
+        }
+    }
     .btn {
         padding: em(7px) em(15px);
         font-weight: 600;
         font-size: em(13px);
+        &.btn-custom-login {
+            display: block;
+            min-width: 200px;
+            width: 200px;
+            padding: 0 1em;
+            margin: 1em auto;
+            height: 40px;
+            line-height: 35px;
+            color: #fff;
+            @include border-radius(2px);
+            &.gitlab {
+                background: #554488;
+                &:hover {
+                    background: darken(#554488, 10%);
+                }
+                span {
+                    vertical-align: middle;
+                }
+                .icon {
+                    background: url("../images/gitlabLogo.png");
+                    width: 18px;
+                    height: 18px;
+                    margin-right: 8px;
+                    @include background-size(100% 100%);
+                    display: inline-block;
+                }
+            }
+        }
         &.btn-default {
             color: #444;
         }
@@ -90,9 +141,20 @@
     }
     .has-error {
         .control-label {
-            margin-top: 5px;
+            background: #f2f2f2;
+            padding: 0.7em 1em;
+            @include border-radius(3px);
+            margin: 1em 0 0;
             font-size: 14px;
-            font-weight: 600;
+            font-weight: normal;
+            color: #999;
+            width: 100%;
+            &:before {
+              @extend .fa;
+              content: "\f071";
+              margin-right: 4px;
+              color: #aaa;
+            }
         }
     }
     .reset-form {