From 0996106d6585ed47e4afef200670df8ab0cfb0df Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 24 Jul 2015 19:51:41 +0500
Subject: Complete signup page UI changes

---
 web/react/components/signup_user_complete.jsx |  10 ++--
 web/sass-files/sass/partials/_signup.scss     |  66 +++++++++++++++++++++++++-
 web/static/images/gitlabLogo.png              | Bin 0 -> 3306 bytes
 3 files changed, 68 insertions(+), 8 deletions(-)
 create mode 100644 web/static/images/gitlabLogo.png

diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index dc5ba64aa..0dafd943d 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -117,24 +117,23 @@ 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>;
-        } else {
-            signup_message = <p>{"Choose your username and password for the " + this.props.teamDisplayName + " " + strings.Team + "."}</p>;
+            signup_message = <div className="signup-custom__container"><a className="btn btn-custom-login gitlab" href={"/"+this.props.teamName+"/signup/gitlab"+window.location.search}><span className="icon" />{"with GitLab"}</a>
+            <div className="or__container"><span>or</span></div></div>;
         }
 
         return (
             <div>
                 <img className="signup-team-logo" src="/static/images/logo.png" />
-                <h4>Welcome to { config.SiteName }</h4>
+                <h3 className="text-center">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">{"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 +141,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>
diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss
index db22718d2..1867bc89f 100644
--- a/web/sass-files/sass/partials/_signup.scss
+++ b/web/sass-files/sass/partials/_signup.scss
@@ -44,6 +44,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 +66,56 @@
     .form-control {
         height: em(38px);
     }
+    .signup-custom__container {
+        margin-top: 3em;
+    }
+    .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 {
diff --git a/web/static/images/gitlabLogo.png b/web/static/images/gitlabLogo.png
new file mode 100644
index 000000000..9004a8f0c
Binary files /dev/null and b/web/static/images/gitlabLogo.png differ
-- 
cgit v1.2.3-1-g7c22


From 464158e0f222ea84a4b5f23b09a86b1b43797c83 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 24 Jul 2015 20:50:48 +0500
Subject: Minor class changes

---
 web/react/components/signup_user_complete.jsx | 4 ++--
 web/sass-files/sass/partials/_signup.scss     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index 0dafd943d..393dc397e 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -117,14 +117,14 @@ module.exports = React.createClass({
 
         var signup_message;
         if (auth_services.indexOf("gitlab") >= 0) {
-            signup_message = <div className="signup-custom__container"><a className="btn btn-custom-login gitlab" href={"/"+this.props.teamName+"/signup/gitlab"+window.location.search}><span className="icon" />{"with GitLab"}</a>
+            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>
             <div className="or__container"><span>or</span></div></div>;
         }
 
         return (
             <div>
                 <img className="signup-team-logo" src="/static/images/logo.png" />
-                <h3 className="text-center">Signup to { config.SiteName }</h3>
+                <h3 className="text-center extra-margin">Signup to { config.SiteName }</h3>
                 <div className="form-group form-group--small">
                     <span></span>
                 </div>
diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss
index 1867bc89f..826394a10 100644
--- a/web/sass-files/sass/partials/_signup.scss
+++ b/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);
@@ -66,9 +69,6 @@
     .form-control {
         height: em(38px);
     }
-    .signup-custom__container {
-        margin-top: 3em;
-    }
     .or__container {
         height: 1px;
         background: #dddddd;
-- 
cgit v1.2.3-1-g7c22


From 9c2d4d39ccb4a3a3134a5bcabbbe43a266653662 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 24 Jul 2015 21:04:11 +0500
Subject: Adding hint text for username back in

---
 web/react/components/signup_user_complete.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx
index 393dc397e..bbf1f670c 100644
--- a/web/react/components/signup_user_complete.jsx
+++ b/web/react/components/signup_user_complete.jsx
@@ -133,6 +133,7 @@ module.exports = React.createClass({
                 <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 }
-- 
cgit v1.2.3-1-g7c22