Merge branch '62429-remove-unused-avatar-sizes' into 'master'

Remove unused avatar sizes

Closes #62429

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

app/assets/javascripts/diffs/components/commit_item.vue

@@ -69,7 +69,7 @@ export default {
       :link-href="authorUrl"
       :img-src="authorAvatar"
       :img-alt="authorName"
-      :img-size="36"
+      :img-size="40"
       class="avatar-cell d-none d-sm-block"
     />
     <div class="commit-detail flex-list">

app/assets/stylesheets/components/avatar.scss

@@ -7,9 +7,6 @@ $avatar-sizes: (
   18: (
     border-radius: $border-radius-small
   ),
-  19: (
-    border-radius: $border-radius-small
-  ),
   20: (
     border-radius: $border-radius-small
   ),
@@ -28,17 +25,11 @@ $avatar-sizes: (
     line-height: 32px,
     border-radius: $border-radius-default
   ),
-  36: (
-    border-radius: $border-radius-default
-  ),
   40: (
     font-size: 16px,
     line-height: 38px,
     border-radius: $border-radius-default
   ),
-  46: (
-    border-radius: $border-radius-default
-  ),
   48: (
     font-size: 20px,
     line-height: 48px,
@@ -54,37 +45,16 @@ $avatar-sizes: (
     line-height: 64px,
     border-radius: $border-radius-large
   ),
-  70: (
-    font-size: 34px,
-    line-height: 70px,
-    border-radius: $border-radius-large
-  ),
   90: (
     font-size: 36px,
     line-height: 88px,
     border-radius: $border-radius-large
   ),
-  96: (
-    font-size: 48px,
-    line-height: 96px,
-    border-radius: $border-radius-large
-  ),
   100: (
     font-size: 36px,
     line-height: 98px,
     border-radius: $border-radius-large
   ),
-  110: (
-    font-size: 40px,
-    line-height: 108px,
-    font-weight: $gl-font-weight-normal,
-    border-radius: $border-radius-large
-  ),
-  140: (
-    font-size: 72px,
-    line-height: 138px,
-    border-radius: $border-radius-large
-  ),
   160: (
     font-size: 96px,
     line-height: 158px,
@@ -97,13 +67,13 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
 .avatar-circle {
   float: left;
-  margin-right: 15px;
+  margin-right: $gl-padding;
   border-radius: $avatar-radius;
   border: 1px solid $gray-normal;
   @each $size, $size-config in $avatar-sizes {
     &.s#{$size} {
-      @include avatar-size(#{$size}px, if($size < 36, 8px, 16px));
+      @include avatar-size(#{$size}px, if($size < 48, 8px, 16px));
     }
   }
 }

app/assets/stylesheets/pages/commits.scss

@@ -154,8 +154,6 @@
 }
 .avatar-cell {
-  width: 46px;
-
   img {
     margin-right: 0;
   }

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

@@ -15,7 +15,7 @@
 %li.commit.flex-row.js-toggle-container{ id: "commit-#{commit.short_id}" }
   .avatar-cell.d-none.d-sm-block
-    = author_avatar(commit, size: 36, has_tooltip: false)
+    = author_avatar(commit, size: 40, has_tooltip: false)
   .commit-detail.flex-list
     .commit-content.qa-commit-content

spec/javascripts/diffs/components/commit_item_spec.js

@@ -8,7 +8,7 @@ import getDiffWithCommit from '../mock_data/diff_with_commit';
 const TEST_AUTHOR_NAME = 'test';
 const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com';
-const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=36`;
+const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=40`;
 const TEST_SIGNATURE_HTML = '<a>Legit commit</a>';
 const TEST_PIPELINE_STATUS_PATH = `${TEST_HOST}/pipeline/status`;
@@ -65,7 +65,7 @@ describe('diffs/components/commit_item', () => {
     const imgElement = avatarElement.querySelector('img');
     expect(avatarElement).toHaveAttr('href', commit.author.web_url);
-    expect(imgElement).toHaveClass('s36');
+    expect(imgElement).toHaveClass('s40');
     expect(imgElement).toHaveAttr('alt', commit.author.name);
     expect(imgElement).toHaveAttr('src', commit.author.avatar_url);
   });