Update button variants and avatar layout

Update button variants to align with Pajamas conventions
and clean up the layout and behavior of the avatar section.

Changelog: added

app/assets/stylesheets/pages/profile.scss

@@ -5,6 +5,12 @@
 }
 
 .avatar-image {
+  margin-bottom: $grid-size;
+
+  .avatar {
+    float: none;
+  }
+
   @include media-breakpoint-up(sm) {
     float: left;
     margin-bottom: 0;

app/views/profiles/show.html.haml

@@ -11,7 +11,7 @@
   .row.js-search-settings-section
     .col-lg-4.profile-settings-sidebar
       %h4.gl-mt-0
-        = s_("Profiles|Public Avatar")
+        = s_("Profiles|Public avatar")
       %p
         - if @user.avatar?
           - if gravatar_enabled?
@@ -27,18 +27,17 @@
           .md
             = brand_profile_image_guidelines
     .col-lg-8
-      .clearfix.avatar-image.gl-mb-3
+      .avatar-image
         = link_to avatar_icon_for_user(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
-          = image_tag avatar_icon_for_user(@user, 160), alt: '', class: 'avatar s160'
+          = image_tag avatar_icon_for_user(@user, 96), alt: '', class: 'avatar s96'
       %h5.gl-mt-0= s_("Profiles|Upload new avatar")
-      .gl-mt-2.gl-mb-3
-        %button.gl-button.btn.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
+      .gl-my-3
+        %button.gl-button.btn.btn-default.js-choose-user-avatar-button{ type: 'button' }= s_("Profiles|Choose file...")
         %span.avatar-file-name.gl-ml-3.js-avatar-filename= s_("Profiles|No file chosen.")
         = f.file_field_without_bootstrap :avatar, class: 'js-user-avatar-input hidden', accept: 'image/*'
-      .form-text.text-muted= s_("Profiles|The maximum file size allowed is 200KB.")
+      .gl-text-gray-500= s_("Profiles|The maximum file size allowed is 200KB.")
       - if @user.avatar?
-        %hr
-        = link_to s_("Profiles|Remove avatar"), profile_avatar_path, data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") }, method: :delete, class: 'gl-button btn btn-danger btn-inverted'
+        = link_to s_("Profiles|Remove avatar"), profile_avatar_path, data: { confirm: s_("Profiles|Avatar will be removed. Are you sure?") }, method: :delete, class: 'gl-button btn btn-danger-secondary btn-sm gl-mt-5'
     .col-lg-12
       %hr
   .row.js-search-settings-section
@@ -124,10 +123,10 @@
       = f.check_box :include_private_contributions, label: s_('Profiles|Include private contributions on my profile'), wrapper_class: 'mb-2', inline: true
       .help-block
         = s_("Profiles|Choose to show contributions of private projects on your public profile without any project, repository or organization information")
-  .row.gl-mt-3.gl-mb-3.gl-justify-content-end
-    .col-lg-8
-      = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-confirm'
-      = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-cancel'
+  .row.gl-justify-content-end.gl-mt-5
+    .col-lg-8.gl-display-flex
+      = f.submit s_("Profiles|Update profile settings"), class: 'gl-button btn btn-confirm gl-mr-3'
+      = link_to _("Cancel"), user_path(current_user), class: 'gl-button btn btn-default btn-cancel'
 
 .modal.modal-profile-crop{ data: { cropper_css_path: ActionController::Base.helpers.stylesheet_path('lazy_bundles/cropper.css') } }
   .modal-dialog

changelogs/unreleased/273315-fy21q4-foundations-kr2-audit-and-update-buttons-on-profilescontrol.yml

+---
+title: Update button variants and alignment to align with the Pajamas Design System
+  and modify the avatar layout to have better flow.
+merge_request: 61504
+author:
+type: other

locale/gitlab.pot

@@ -25051,7 +25051,7 @@ msgstr ""
 msgid "Profiles|Profile was successfully updated"
 msgstr ""
 
-msgid "Profiles|Public Avatar"
+msgid "Profiles|Public avatar"
 msgstr ""
 
 msgid "Profiles|Public email"

spec/features/profiles/user_search_settings_spec.rb

@@ -14,7 +14,7 @@ RSpec.describe 'User searches their settings', :js do
       visit profile_path
     end
 
-    it_behaves_like 'can search settings', 'Public Avatar', 'Main settings'
+    it_behaves_like 'can search settings', 'Public avatar', 'Main settings'
   end
 
   context 'in preferences page' do