From 0996106d6585ed47e4afef200670df8ab0cfb0df Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Fri, 24 Jul 2015 19:51:41 +0500 Subject: [PATCH] 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 dc5ba64aac..0dafd943d7 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 =

{"Choose your username and password for the " + this.props.teamDisplayName + " " + strings.Team} {"or sign up with GitLab."}

; - } else { - signup_message =

{"Choose your username and password for the " + this.props.teamDisplayName + " " + strings.Team + "."}

; + signup_message =
{"with GitLab"} +
or
; } return (
-

Welcome to { config.SiteName }

+

Signup to { config.SiteName }

{ signup_message } -

Your username can be made of lowercase letters and numbers.

{ name_error } +

{"Pick something " + strings.Team + "mates will recognize. Your username is how you will appear to others"}

{ email } @@ -142,7 +141,6 @@ module.exports = React.createClass({ { password_error }
-

{"Pick something " + strings.Team + "mates will recognize. Your username is how you will appear to others"}

{ yourEmailIs } You’ll use this address to sign in to {config.SiteName}.

diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss index db22718d29..1867bc89f3 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 0000000000000000000000000000000000000000..9004a8f0c74e090abfdf1e23363678ec49246176 GIT binary patch literal 3306 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 literal 0 HcmV?d00001