Merge branch '44943-update-presentation-for-sso-providers-on-log-in-page' into 'master'

Resolve "Update presentation for SSO providers on log in page"

Closes #44943

See merge request gitlab-org/gitlab-ce!21233

app/assets/stylesheets/framework/awards.scss

@@ -229,8 +229,8 @@
 
     svg {
       margin-bottom: 1px;
-      height: 18px;
-      width: 18px;
+      height: $default-icon-size;
+      width: $default-icon-size;
       border-radius: 50%;
 
       path {

app/assets/stylesheets/framework/buttons.scss

@@ -149,7 +149,8 @@
   &.btn-success,
   &.btn-new,
   &.btn-create,
-  &.btn-save {
+  &.btn-save,
+  &.btn-register {
     @include btn-green;
   }
 
@@ -172,8 +173,7 @@
   }
 
   &.btn-info,
-  &.btn-primary,
-  &.btn-register {
+  &.btn-primary {
     @include btn-blue;
   }
 
@@ -248,7 +248,7 @@
 .btn-terminal {
   svg {
     height: 14px;
-    width: 18px;
+    width: $default-icon-size;
   }
 }
 

app/assets/stylesheets/framework/filters.scss

@@ -216,8 +216,8 @@
     vertical-align: inherit;
 
     img {
-      height: 18px;
-      width: 18px;
+      height: $default-icon-size;
+      width: $default-icon-size;
     }
   }
 

app/assets/stylesheets/framework/toggle.scss

@@ -56,8 +56,8 @@
 
     &,
     .toggle-icon-svg {
-      width: 18px;
-      height: 18px;
+      width: $default-icon-size;
+      height: $default-icon-size;
     }
 
     .toggle-icon-svg {

app/assets/stylesheets/framework/variables.scss

@@ -250,7 +250,7 @@ $container-text-max-width: 540px;
 $gl-avatar-size: 40px;
 $border-radius-default: 4px;
 $border-radius-small: 2px;
-$settings-icon-size: 18px;
+$default-icon-size: 18px;
 $layout-link-gray: #7e7c7c;
 $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;

app/assets/stylesheets/pages/login.scss

@@ -100,6 +100,22 @@
     p {
       margin: 0;
     }
+
+    .omniauth-btn {
+      margin-bottom: $gl-padding;
+      width: 48%;
+      padding: $gl-padding-8;
+
+      @include media-breakpoint-down(md) {
+        width: 100%;
+      }
+
+      img {
+        width: $default-icon-size;
+        height: $default-icon-size;
+        margin-right: $gl-padding;
+      }
+    }
   }
 
   .new-session-tabs {
@@ -169,10 +185,6 @@
     }
   }
 
-  label {
-    font-weight: $gl-font-weight-normal;
-  }
-
   .submit-container {
     margin-top: 16px;
   }
@@ -200,15 +212,6 @@
   }
 }
 
-.oauth-image-link {
-  margin-right: 10px;
-
-  img {
-    width: 32px;
-    height: 32px;
-  }
-}
-
 .devise-layout-html {
   margin: 0;
   padding: 0;

app/assets/stylesheets/pages/settings.scss

@@ -106,7 +106,7 @@
 
 .settings-list-icon {
   color: $gl-text-color-secondary;
-  font-size: $settings-icon-size;
+  font-size: $default-icon-size;
   line-height: 42px;
 }
 

app/views/devise/sessions/_new_base.html.haml

 = form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
   .form-group
-    = f.label "Username or email", for: "user_login"
+    = f.label "Username or email", for: "user_login", class: 'label-bold'
     = f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required."
   .form-group
-    = f.label :password
+    = f.label :password, class: 'label-bold'
     = f.password_field :password, class: "form-control bottom", required: true, title: "This field is required."
   - if devise_mapping.rememberable?
     .remember-me

app/views/devise/shared/_omniauth_box.html.haml

-.omniauth-container
-  %p
-    %span.light
-      Sign in with  
-    - providers = enabled_button_based_providers
+.omniauth-container.prepend-top-15
+  %label.label-bold.d-block
+    Sign in with
+  - providers = enabled_button_based_providers
+  .d-flex.justify-content-between.flex-wrap
     - providers.each do |provider|
-      %span.light
-        - has_icon = provider_has_icon?(provider)
-        = link_to provider_image_tag(provider), omniauth_authorize_path(:user, provider), method: :post, class: 'oauth-login' + (has_icon ? ' oauth-image-link' : ' btn'), id: "oauth-login-#{provider}"
-    %fieldset.prepend-top-10.remember-me
-      %label
-        = check_box_tag :remember_me, nil, false, class: 'remember-me-checkbox'
+      - has_icon = provider_has_icon?(provider)
+      = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'btn d-flex align-items-center omniauth-btn text-left oauth-login', id: "oauth-login-#{provider}" do
+        - if has_icon
+          = provider_image_tag(provider)
         %span
-          Remember me
+          = label_for_provider(provider)
+  %fieldset.remember-me
+    %label
+      = check_box_tag :remember_me, nil, false, class: 'remember-me-checkbox'
+      %span
+        Remember me

app/views/devise/shared/_signup_box.html.haml

@@ -4,24 +4,24 @@
       .devise-errors
         = devise_error_messages!
       .form-group
-        = f.label :name, 'Full name'
+        = f.label :name, 'Full name', class: 'label-bold'
         = f.text_field :name, class: "form-control top", required: true, title: "This field is required."
       .username.form-group
-        = f.label :username
+        = f.label :username, class: 'label-bold'
         = f.text_field :username, class: "form-control middle", pattern: Gitlab::PathRegex::NAMESPACE_FORMAT_REGEX_JS, required: true, title: 'Please create a username with only alphanumeric characters.'
         %p.validation-error.hide Username is already taken.
         %p.validation-success.hide Username is available.
         %p.validation-pending.hide Checking username availability...
       .form-group
-        = f.label :email
+        = f.label :email, class: 'label-bold'
         = f.email_field :email, class: "form-control middle", required: true, title: "Please provide a valid email address."
       .form-group
-        = f.label :email_confirmation
+        = f.label :email_confirmation, class: 'label-bold'
         = f.email_field :email_confirmation, class: "form-control middle", required: true, title: "Please retype the email address."
       .form-group.append-bottom-20#password-strength
-        = f.label :password
+        = f.label :password, class: 'label-bold'
         = f.password_field :password, class: "form-control bottom", required: true, pattern: ".{#{@minimum_password_length},}", title: "Minimum length is #{@minimum_password_length} characters."
-        %p.gl-field-hint Minimum length is #{@minimum_password_length} characters
+        %p.gl-field-hint.text-secondary Minimum length is #{@minimum_password_length} characters
       - if Gitlab::CurrentSettings.current_application_settings.enforce_terms?
         .form-group
           = check_box_tag :terms_opt_in, '1', false, required: true
@@ -34,8 +34,3 @@
         = recaptcha_tags
       .submit-container
         = f.submit "Register", class: "btn-register btn"
-.clearfix.submit-container
-  %p
-    %span.light Didn't receive a confirmation email?
-    = succeed '.' do
-      = link_to "Request a new one", new_confirmation_path(:user)

app/views/profiles/show.html.haml

@@ -77,7 +77,7 @@
           = f.text_field :name, required: true, readonly: true, wrapper: { class: 'col-md-9' },
           help: "Your name was automatically set based on your #{ attribute_provider_label(:name) } account, so people you know can recognize you."
         - else
-          = f.text_field :name, required: true, wrapper: { class: 'col-md-9' }, help: "Enter your name, so people you know can recognize you."
+          = f.text_field :name, label: 'Full name', required: true, wrapper: { class: 'col-md-9' }, help: "Enter your name, so people you know can recognize you."
         = f.text_field :id, readonly: true, label: 'User ID', wrapper: { class: 'col-md-3' }
 
       - if @user.read_only_attribute?(:email)

changelogs/unreleased/44943-update-presentation-for-sso-providers-on-log-in-page.yml

+---
+title: Update presentation for SSO providers on log in page
+merge_request: 21233
+author:
+type: other