Merge branch 'remove-non-compliant-avatar-sizes' into 'master'

Remove non-compliant Avatar sizes (Commits, deprecated notes)

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/166602



Merged-by: Alex Pennells <apennells@gitlab.com>
Approved-by: Chad Lavimoniere <clavimoniere@gitlab.com>
Approved-by: Doug Stull <dstull@gitlab.com>
Approved-by: Alex Pennells <apennells@gitlab.com>
Reviewed-by: Doug Stull <dstull@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Reviewed-by: Alex Pennells <apennells@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/deprecated_notes.js

@@ -1536,7 +1536,7 @@ export default class Notes {
          <div class="timeline-entry-inner">
             <div class="timeline-icon">
                <a href="/${escape(currentUsername)}">
-                 <img class="avatar s40" src="${currentUserAvatar}" />
+                 <img class="avatar s32" src="${currentUserAvatar}" />
                </a>
             </div>
             <div class="timeline-content ${discussionClass}">

app/assets/stylesheets/components/avatar.scss

@@ -67,7 +67,7 @@ $avatar-sizes: (
 .avatar,
 .avatar-container {
   float: left;
-  margin-right: $gl-padding;
+  margin-right: $gl-padding-8;
   border-radius: 50%;
   @each $size, $size-config in $avatar-sizes {
@@ -79,8 +79,8 @@ $avatar-sizes: (
 .avatar {
   transition-property: none;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   background: var(--gl-background-color-subtle);
   overflow: hidden;

app/assets/stylesheets/framework/page_header.scss

@@ -21,6 +21,11 @@
     @include media-breakpoint-up(sm) {
       margin-left: 4px;
     }
+
+    &.s24 {
+      margin-top: -2px;
+      margin-right: 4px;
+    }
   }
   .commit-committer-link,

app/views/projects/commit/_commit_box.html.haml

@@ -11,14 +11,13 @@
     %span.gl-hidden.sm:gl-inline= _('authored')
     #{time_ago_with_tooltip(@commit.authored_date)}
     %span= s_('ByAuthor|by')
-    = author_avatar(@commit, size: 24, has_tooltip: false)
     %strong
+      = author_avatar(@commit, size: 24, has_tooltip: false)
       = commit_author_link(@commit, avatar: true, size: 24)
     = user_status(@commit.author)
     - if @commit.different_committer?
-      %span.light= _('Committed by')
-      %strong
-        = commit_committer_link(@commit, avatar: true, size: 24)
+      %span.gl-text-subtle= _('Committed by')
+      = commit_committer_link(@commit, avatar: true, size: 24)
       #{time_ago_with_tooltip(@commit.committed_date)}
   = link_button_to _('Browse files'), project_tree_path(@project, @commit), class: 'gl-mr-3 gl-w-full sm:gl-w-auto gl-mb-3 sm:gl-mb-0'

app/views/projects/commits/_commit.html.haml

@@ -26,7 +26,7 @@
 %li{ class: ["commit flex-row", ("js-toggle-container" if collapsible)], id: "commit-#{commit.short_id}" }
   .gl-self-start.gl-hidden.sm:gl-block
-    = author_avatar(commit, size: 40, has_tooltip: false)
+    = author_avatar(commit, size: 32, has_tooltip: false)
   .commit-detail.flex-list.gl-flex.gl-justify-between.gl-items-center.gl-grow.gl-min-w-0
     .commit-content{ data: { testid: 'commit-content' } }

app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml

@@ -49,7 +49,7 @@
         %span.pipeline-id ##{generic_commit_status.pipeline.id}
       %span by
       - if generic_commit_status.pipeline.user
-        = user_avatar(user: generic_commit_status.pipeline.user, size: 20)
+        = user_avatar(user: generic_commit_status.pipeline.user, size: 24)
       - else
         %span.monospace API

spec/models/concerns/avatarable_spec.rb

@@ -58,7 +58,7 @@
         expect(project.avatar).to receive(:local_url).twice.and_call_original
         expect(project.avatar_path).to eq(avatar_path)
-        expect(project.avatar_path(size: 40)).to eq(avatar_path + "?width=40")
+        expect(project.avatar_path(size: 32)).to eq(avatar_path + "?width=32")
       end
       it 'handles unpersisted objects' do