diff --git a/app/assets/stylesheets/forgot_password.scss b/app/assets/stylesheets/forgot_password.scss new file mode 100644 index 000000000..321ba6be5 --- /dev/null +++ b/app/assets/stylesheets/forgot_password.scss @@ -0,0 +1,33 @@ +// scss-lint:disable SelectorDepth NestingDepth IdSelector + +.forgot-password-layout { + #content-wrapper { + margin-left: 0; + + .container:first-child { + padding: 0; + } + } + + .forgot-password-container { + display: flex; + + .forgot-password-form-wrapper { + flex-basis: 50%; + flex-grow: 1; + + .center-block-narrow { + margin-top: 72px; + padding: 0 50px; + } + + .forgot-password-title { + margin-bottom: 24px; + } + + .sci-input-container { + margin-bottom: 24px; + } + } + } +} diff --git a/app/assets/stylesheets/shared_styles/constants.scss b/app/assets/stylesheets/shared_styles/constants.scss new file mode 100644 index 000000000..7f9e34667 --- /dev/null +++ b/app/assets/stylesheets/shared_styles/constants.scss @@ -0,0 +1 @@ +@import "constants/*"; diff --git a/app/assets/stylesheets/shared_styles/elements/input_fields.scss b/app/assets/stylesheets/shared_styles/elements/input_fields.scss index 368883d14..12f121c36 100644 --- a/app/assets/stylesheets/shared_styles/elements/input_fields.scss +++ b/app/assets/stylesheets/shared_styles/elements/input_fields.scss @@ -3,6 +3,7 @@ .sci-input-container { display: inline-block; position: relative; + width: 100%; label { @include font-small; @@ -14,8 +15,8 @@ .sci-input-field { @include font-button; animation-timing-function: $timing-function-sharp; - border: $border-default; - border-radius: $border-radius-default; + border: $border-secondary; + border-radius: $border-radius-default !important; box-shadow: none; height: 36px; outline: 0; diff --git a/app/assets/stylesheets/sign_up.scss b/app/assets/stylesheets/sign_up.scss new file mode 100644 index 000000000..385f93697 --- /dev/null +++ b/app/assets/stylesheets/sign_up.scss @@ -0,0 +1,61 @@ +// scss-lint:disable SelectorDepth NestingDepth IdSelector + +.sign-up-layout { + #content-wrapper { + margin-left: 0; + + .container:first-child { + padding: 0; + } + } + + .sign-up-container { + display: flex; + + .sign-up-form-wrapper { + flex-basis: 50%; + flex-grow: 1; + + .center-block-narrow { + margin-top: 72px; + padding: 0 50px; + } + + .sign-up-title { + margin-bottom: 24px; + } + + .sci-input-container { + margin-bottom: 24px; + + .minimum-password-length { + @include font-small; + } + } + + .sign-up-button { + padding: 7px 32px; + } + + .linkedin-container { + margin-bottom: 24px; + + .linkedin-link { + margin-right: 15px; + + &:hover { + text-decoration: none; + } + } + + .linkedin-signin-button { + margin: 0; + } + + span { + font-weight: bold; + } + } + } + } +} diff --git a/app/assets/stylesheets/sing_in.scss b/app/assets/stylesheets/sing_in.scss new file mode 100644 index 000000000..d6f2b5576 --- /dev/null +++ b/app/assets/stylesheets/sing_in.scss @@ -0,0 +1,73 @@ +// scss-lint:disable SelectorDepth NestingDepth IdSelector + +.sign-in-layout { + #content-wrapper { + margin-left: 0; + + .container:first-child { + padding: 0; + } + } + + .sign-in-container { + display: flex; + + .sign-in-form-wrapper { + flex-basis: 50%; + flex-grow: 1; + + .center-block-narrow { + margin-top: 72px; + padding: 0 50px; + } + + .log-in-title { + margin-bottom: 24px; + } + + .remember-me { + align-items: center; + display: flex; + margin-bottom: 24px; + + label { + margin-left: 8px; + margin-bottom: 0; + } + } + + .sci-input-container { + margin-bottom: 24px; + } + + .linkedin-container { + margin-bottom: 24px; + + .linkedin-link { + margin-right: 15px; + + &:hover { + text-decoration: none; + } + } + + .linkedin-signin-button { + margin: 0; + } + + span { + font-weight: bold; + } + } + + .log-in-button { + padding: 7px 32px; + } + + .forgot-password-link { + display: inline-block; + margin-bottom: 16px; + } + } + } +} diff --git a/app/helpers/form_tag_helper.rb b/app/helpers/form_tag_helper.rb index 0d16834cf..7fd67bf08 100644 --- a/app/helpers/form_tag_helper.rb +++ b/app/helpers/form_tag_helper.rb @@ -1,9 +1,10 @@ module FormTagHelper def recaptcha_input_tag if Rails.configuration.x.enable_recaptcha - res = "
" + res << label_tag(:recaptcha_label, I18n.t('users.registrations.new.captcha_description')) res << recaptcha_tags if flash[:recaptcha_error] res << "" diff --git a/app/views/users/passwords/new.html.erb b/app/views/users/passwords/new.html.erb index 4598aa0e4..b79cc615f 100644 --- a/app/views/users/passwords/new.html.erb +++ b/app/views/users/passwords/new.html.erb @@ -1,25 +1,29 @@ <% provide(:head_title, t("devise.passwords.new.head_title")) %> +<% content_for(:body_class, 'forgot-password-layout') %> +
+
+
+

<%=t "devise.passwords.new.title" %>

-
-

<%=t "devise.passwords.new.title" %>

+ <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> - <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> + <% if not resource.errors.empty? %> +
+ <%= devise_error_messages! %> +
+ <% end %> - <% if not resource.errors.empty? %> -
- <%= devise_error_messages! %> +
+ <%= f.label :email %>
+ <%= f.email_field :email, autofocus: true, class: "form-control sci-input-field" %> +
+ +
+ <%= f.submit t("devise.passwords.new.submit"), class: "btn btn-primary" %> +
+ <% end %> + + <%= render partial: 'users/shared/links', locals: {linkedin_skip: true} %>
- <% end %> - -
- <%= f.label :email %>
- <%= f.email_field :email, autofocus: true, class: "form-control" %> -
- -
- <%= f.submit t("devise.passwords.new.submit"), class: "btn btn-primary" %> -
- <% end %> - - <%= render "users/shared/links" %> +
diff --git a/app/views/users/registrations/new.html.erb b/app/views/users/registrations/new.html.erb index afe7eabcc..162fa6ebb 100644 --- a/app/views/users/registrations/new.html.erb +++ b/app/views/users/registrations/new.html.erb @@ -1,53 +1,64 @@ <% provide(:head_title, t('users.registrations.new.head_title')) %> +<% content_for(:body_class, 'sign-up-layout') %> +