Merge branch '61988-collapse-icon-on-merge-request-diff-larger-than-profile-picture' into 'master'

Change collapse icon size to size of profile picture

Closes #61988

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

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

@@ -86,7 +86,6 @@ export default {
         :key="note.id"
         :img-src="note.author.avatar_url"
         :tooltip-text="getTooltipText(note)"
-        :size="19"
         class="diff-comment-avatar js-diff-comment-avatar"
         @click.native="toggleDiscussions"
       />

app/assets/stylesheets/framework/buttons.scss

 @mixin btn-comment-icon {
   border-radius: 50%;
   background: $white-light;
-  padding: 1px 5px;
+  padding: 1px;
   font-size: 12px;
   color: $blue-500;
+  border: 1px solid $blue-500;
   width: 24px;
   height: 24px;
-  border: 1px solid $blue-500;
   &:hover,
   &.inverted {

app/assets/stylesheets/framework/mixins.scss

@@ -385,3 +385,8 @@
   height: $size;
   margin-right: $margin-right;
 }
+
+@mixin code-icon-size() {
+  width: $gl-font-size * $code-line-height * 0.9;
+  height: $gl-font-size * $code-line-height * 0.9;
+}

app/assets/stylesheets/pages/diff.scss

@@ -615,10 +615,9 @@ table.code {
 .diff-comment-avatar-holders {
   position: absolute;
-  height: 19px;
-  width: 19px;
-  margin-left: -15px;
+  margin-left: -$gl-padding;
   z-index: 100;
+  @include code-icon-size();
   &:hover {
     .diff-comment-avatar,
@@ -652,26 +651,28 @@ table.code {
 .diff-comments-more-count {
   position: absolute;
   left: 0;
-  width: 19px;
-  height: 19px;
   margin-right: 0;
   border-color: $white-light;
   cursor: pointer;
   transition: all 0.1s ease-out;
+  @include code-icon-size();
   @for $i from 1 through 4 {
     &:nth-child(#{$i}) {
       z-index: (4 - $i);
     }
   }
+
+  .avatar {
+    @include code-icon-size();
+  }
 }
 .diff-comments-more-count {
-  width: 19px;
-  min-width: 19px;
   padding-left: 0;
   padding-right: 0;
   overflow: hidden;
+  @include code-icon-size();
 }
 .diff-comments-more-count,
@@ -680,12 +681,15 @@ table.code {
 }
 .diff-notes-collapse {
-  width: 24px;
-  height: 24px;
+  border: 0;
   border-radius: 50%;
   padding: 0;
   transition: transform 0.1s ease-out;
   z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  @include code-icon-size();
   .collapse-icon {
     height: 50%;

app/assets/stylesheets/pages/notes.scss

@@ -437,7 +437,9 @@ $note-form-margin-left: 72px;
 .diff-file {
   .is-over {
     .add-diff-note {
-      display: inline-block;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
     }
   }
@@ -741,7 +743,7 @@ $note-form-margin-left: 72px;
 .add-diff-note {
   @include btn-comment-icon;
   opacity: 0;
-  margin-left: -50px;
+  margin-left: -52px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -900,10 +902,6 @@ $note-form-margin-left: 72px;
   .diff-comment-form {
     display: block;
   }
-
-  .add-diff-note svg {
-    margin-top: 4px;
-  }
 }
 .discussion-filter-container {

changelogs/unreleased/61988-collapse-icon-on-merge-request-diff-larger-than-profile-picture.yml

+---
+title: Change collapse icon size to size of profile picture 
+merge_request: 28512
+author: Marcel van Remmerden
+type: other