Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

9 files changed, 63 insertions, 20 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 2c72c4b0f65..1192c51b9aa 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -244,9 +244,13 @@
 // above will be deprecated once all instances of "award emoji" are
 // migrated to Vue.
 
-.gl-button .award-emoji-block gl-emoji {
-  margin-top: -1px;
-  margin-bottom: -1px;
+.gl-button .award-emoji-block {
+  display: contents;
+
+  gl-emoji {
+    margin-top: -1px;
+    margin-bottom: -1px;
+  }
 }
 
 .add-reaction-button {
diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index b8934d2797a..58f986ec0ae 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -15,6 +15,10 @@
 
 .broadcast-banner-message {
   text-align: center;
+
+  p {
+    margin-bottom: 0;
+  }
 }
 
 .broadcast-notification-message {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 36a0d3ca3ca..be8a890320f 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -254,10 +254,9 @@ li.note {
 }
 
 img.emoji {
-  height: 20px;
+  height: 16px;
   vertical-align: top;
   width: 20px;
-  margin-top: 1px;
 }
 
 .chart {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 7f960e3da51..5c6d9266f7c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -503,6 +503,7 @@
 
         &.dropdown-menu-user-link::before {
           top: 50%;
+          transform: translateY(-50%);
         }
       }
 
@@ -520,8 +521,22 @@
       }
 
       &.is-active {
-        /* stylelint-disable-next-line function-url-quotes */
-        background: url(asset_path('checkmark.png')) no-repeat 14px center;
+        position: relative;
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          top: 0.5rem;
+          left: 1rem;
+          width: 1rem;
+          height: 1rem;
+          mask-image: asset_url('icons-stacked.svg#check');
+          mask-repeat: no-repeat;
+          mask-size: cover;
+          mask-position: center center;
+          background: $black-normal;
+        }
       }
     }
   }
@@ -692,7 +707,7 @@
 
 .dropdown-label-box {
   position: relative;
-  top: 3px;
+  top: 0;
   margin-right: 5px;
   display: inline-block;
   width: 15px;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 1004383cfd3..f44123fc2ed 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -1,5 +1,3 @@
-$top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important;
-
 .navbar-gitlab {
   padding: 0 16px;
   z-index: $header-zindex;
@@ -54,7 +52,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
       white-space: nowrap;
 
       img {
-        height: 28px;
+        height: 24px;
 
         + .logo-text {
           margin-left: 8px;
@@ -460,7 +458,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
       vertical-align: text-top;
     }
 
-    a.upgrade-plan-link gl-emoji,
     a.ci-minutes-emoji gl-emoji,
     a.trial-link gl-emoji {
       font-size: $gl-font-size;
@@ -574,7 +571,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   }
 
   .frequent-items-list-item-container > a:hover {
-    background-color: $top-nav-hover-bg;
+    background-color: $nav-active-bg;
   }
 }
 
@@ -589,11 +586,9 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 }
 
 .top-nav-menu-item {
-  color: var(--indigo-900, $theme-indigo-900) !important;
-
   &.active,
   &:hover {
-    background-color: $top-nav-hover-bg;
+    background-color: $nav-active-bg;
   }
 
   .gl-icon {
@@ -603,7 +598,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 
 .top-nav-responsive {
   @include gl-display-none;
-  color: var(--indigo-900, $theme-indigo-900);
 }
 
 .top-nav-responsive-open {
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 7731ec751c9..7522f791b8e 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -72,7 +72,6 @@
     @include media-breakpoint-down(xs) {
       .nav-item {
         flex: 1;
-        border-bottom: 1px solid $border-color;
       }
 
       .gl-tab-nav-item {
@@ -84,7 +83,8 @@
         width: 100%;
         display: flex;
         flex-wrap: wrap;
-        margin-top: $gl-padding-8;
+        padding-top: $gl-padding-8;
+        border-top: 1px solid $border-color;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e77971d5280..d270f802c56 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -226,3 +226,29 @@
 .edit-link {
   margin-right: -$gl-spacing-scale-2;
 }
+
+.assignee-grid {
+  grid-template-areas: ' attention   user';
+  grid-template-columns: min-content 1fr;
+}
+
+.reviewer-grid {
+  grid-template-areas: ' user approval    rerequest';
+  grid-template-columns: 1fr  min-content min-content;
+
+  &.attention-requests {
+    grid-template-areas: ' attention   user approval';
+    grid-template-columns: min-content 1fr  min-content;
+  }
+}
+
+.assignee-grid,
+.reviewer-grid {
+  [data-css-area='attention'] {
+    grid-area: attention;
+  }
+
+  [data-css-area='user'] {
+    grid-area: user;
+  }
+}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index c6bc8fa0eac..6348703e9e1 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -48,7 +48,7 @@ table {
       th {
         padding: 10px $gl-padding;
         line-height: 20px;
-        vertical-align: middle;
+        vertical-align: top;
       }
 
       th {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 31ef5ae0646..8e3b34e4eaf 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -363,6 +363,7 @@ $well-expand-item: #e8f2f7 !default;
 $well-inner-border: #eef0f2 !default;
 $well-light-border: #f1f1f1;
 $well-light-text-color: #5b6169;
+$nav-active-bg: var(--nav-active-bg, rgba($black, 0.08)) !important;
 
 /*
  * Text