From cc8e7ea2056ae8132ea9eb0565c8e0a07b1077a6 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Date: Thu, 30 May 2019 13:42:06 -0500
Subject: [PATCH] Remove unused avatar sizes

- Update avatars to use only sizes from the 8px grid
---
 .../diffs/components/commit_item.vue          |  2 +-
 app/assets/stylesheets/components/avatar.scss | 34 ++-----------------
 app/assets/stylesheets/pages/commits.scss     |  2 --
 app/views/projects/commits/_commit.html.haml  |  2 +-
 .../diffs/components/commit_item_spec.js      |  4 +--
 5 files changed, 6 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index a767379d662..bd7259ce3ee 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/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">
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 25ee3ca944d..1afa5ed90f4 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/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));
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 66cd113db84..77a36e59b03 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -154,8 +154,6 @@
 }
 
 .avatar-cell {
-  width: 46px;
-
   img {
     margin-right: 0;
   }
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 771e1881e94..87b9920e8b4 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/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
diff --git a/spec/javascripts/diffs/components/commit_item_spec.js b/spec/javascripts/diffs/components/commit_item_spec.js
index 8fc9b10dd0b..cfe0c4bad71 100644
--- a/spec/javascripts/diffs/components/commit_item_spec.js
+++ b/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);
   });