9 files changed, 48 insertions, 11 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index a1e757afe56..0ada5fabde9 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -123,6 +123,10 @@
     justify-content: center;
     text-align: center;
   }
+
+  .blank-state-icon {
+    min-width: 215px;
+  }
 }
 
 $experiment-new-project-indigo-700: #41419f;
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 48252762546..745d469e3e8 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -436,11 +436,7 @@
   padding: 6px 16px;
   margin: 0 0 0 -15px;
   height: 46px;
-
-  i {
-    font-size: 20px;
-    color: $gl-text-color-secondary;
-  }
+  color: $gl-text-color;
 
   @include media-breakpoint-down(sm) {
     display: flex;
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index cf9363b77be..499b9c00116 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -588,6 +588,12 @@ table.code {
 
 // Merge request diff grid layout
 .diff-grid {
+  .diff-td {
+    // By default min-width is auto with 1fr which causes some overflow problems
+    // https://gitlab.com/gitlab-org/gitlab/-/issues/296222
+    min-width: 0;
+  }
+
   .diff-grid-row {
     display: grid;
     grid-template-columns: 1fr 1fr;
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index e2335c184b0..41fc4d3dd4e 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -567,14 +567,13 @@
   margin-bottom: 10px;
   padding: 0 10px;
 
-  .fa,
   .input-icon,
   .dropdown-input-clear,
   .dropdown-input-search {
     position: absolute;
     top: $gl-padding-8;
     right: 20px;
-    color: $dropdown-input-fa-color;
+    color: $gray-500;
     font-size: 12px;
     pointer-events: none;
   }
@@ -796,6 +795,14 @@
   .navbar-gitlab {
     li.dropdown {
       position: static;
+
+      &.user-counter {
+        margin-left: 8px !important;
+
+        > a {
+          padding: 0 4px !important;
+        }
+      }
     }
   }
 
@@ -979,6 +986,8 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 
 .labels-select-wrapper {
   &.is-standalone {
+    min-width: $input-md-width;
+
     .labels-select-dropdown-contents {
       max-height: 350px;
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index a6a01c7b090..730e10114c3 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -172,7 +172,7 @@
       }
 
       li {
-        .badge.badge-pill {
+        .badge.badge-pill:not(.merge-request-badge) {
           box-shadow: none;
           font-weight: $gl-font-weight-bold;
         }
@@ -438,7 +438,7 @@
 
 .title-container,
 .navbar-nav {
-  .badge.badge-pill {
+  .badge.badge-pill:not(.merge-request-badge) {
     position: inherit;
     font-weight: $gl-font-weight-normal;
     margin-left: -6px;
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 73a2170fc68..28577e2801e 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -45,7 +45,8 @@
 
     a {
       font-family: $monospace-font;
-      display: block;
+      display: flex;
+      justify-content: flex-end;
       font-size: $code-font-size !important;
       white-space: nowrap;
 
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 7ba9236b833..e3d02d01496 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -99,6 +99,10 @@
     line-height: $list-text-height;
     color: $gl-text-color-secondary;
 
+    @include media-breakpoint-down(xs) {
+      padding-top: $gl-padding-6;
+    }
+
     span {
       margin-right: 15px;
     }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index d867cc96dbc..bef33bd2ef0 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -58,6 +58,19 @@
       height: $gl-padding;
     }
   }
+
+  .copy-email-button { // TODO: replace with utility
+    @include gl-w-full;
+    @include gl-h-full;
+  }
+
+  .copy-email-address {
+    height: 60px;
+
+    &:hover {
+      background: $gray-100;
+    }
+  }
 }
 
 .right-sidebar-expanded {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 808813599c5..674ba1a307b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -516,9 +516,12 @@ $line-removed-dark-transparent: rgba(246, 53, 85, 0.2);
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $line-number-select: #fbf2da;
+$line-number-commented: #dae5fb;
 $line-target-blue: $blue-50;
 $line-select-yellow: #fcf8e7;
 $line-select-yellow-dark: #f0e2bd;
+$line-commented-blue: #e8effc;
+$line-commented-blue-dark: #bccef0;
 $dark-diff-match-bg: rgba($white, 0.3);
 $dark-diff-match-color: rgba($white, 0.1);
 $diff-image-info-color: #808080;
@@ -546,7 +549,6 @@ $dropdown-vertical-offset: 4px;
 $dropdown-empty-row-bg: rgba(#000, 0.04);
 $dropdown-shadow-color: rgba(#000, 0.1);
 $dropdown-title-btn-color: #bfbfbf;
-$dropdown-input-fa-color: #c7c7c7;
 $dropdown-input-focus-shadow: rgba($blue-300, 0.4);
 $dropdown-loading-bg: rgba($white, 0.6);
 $dropdown-chevron-size: 10px;
@@ -629,12 +631,14 @@ $note-icon-gutter-width: 55px;
 /*
 * Identicon
 */
+$identicon-text-color: #525252 !default;
 $identicon-red: #ffebee !default;
 $identicon-purple: #f3e5f5 !default;
 $identicon-indigo: #e8eaf6 !default;
 $identicon-blue: #e3f2fd !default;
 $identicon-teal: #e0f2f1 !default;
 $identicon-orange: #fbe9e7 !default;
+$identicon-gray: #eee !default;
 
 /*
 * Calendar