Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

43 files changed, 565 insertions, 233 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index f56665553ba..42d15635566 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -10,7 +10,6 @@
 @import './pages/events';
 @import './pages/groups';
 @import './pages/help';
-@import './pages/incident_management_list';
 @import './pages/issuable';
 @import './pages/issues/issue_count_badge';
 @import './pages/issues';
@@ -28,6 +27,7 @@
 @import './pages/profiles/preferences';
 @import './pages/projects';
 @import './pages/prometheus';
+@import './pages/registry';
 @import './pages/runners';
 @import './pages/search';
 @import './pages/service_desk';
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 67213eedca8..3c8abe43070 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -68,7 +68,7 @@ $avatar-sizes: (
 );
 
 $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
-  $identicon-orange, $gray-darker;
+  $identicon-orange, $identicon-gray;
 
 %avatar-circle {
   float: left;
@@ -125,8 +125,8 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: $gray-700;
-  background-color: $gray-darker;
+  color: $identicon-text-color;
+  background-color: $identicon-gray;
 
   // Sizes
   @each $size, $size-config in $avatar-sizes {
diff --git a/app/assets/stylesheets/components/deployment_instance.scss b/app/assets/stylesheets/components/deployment_instance.scss
new file mode 100644
index 00000000000..a8c3400deca
--- /dev/null
+++ b/app/assets/stylesheets/components/deployment_instance.scss
@@ -0,0 +1,91 @@
+.deployment-instance {
+  width: $gl-padding;
+  height: $gl-padding;
+  margin: 1px;
+  border: 1px solid;
+  border-radius: $border-radius-small;
+  position: relative;
+
+  &-succeeded {
+    background-color: $green-600;
+    border-color: $green-800;
+
+    &.link:hover {
+      background-color: $green-800;
+      border-color: $green-950;
+    }
+  }
+
+  &-running {
+    background-color: $green-300;
+    border-color: $green-600;
+
+    &.link:hover {
+      background-color: $green-500;
+      border-color: $green-800;
+    }
+  }
+
+  &-failed {
+    background-color: $red-600;
+    border-color: $red-800;
+
+    &::before {
+      content: '';
+      border: 1px solid $white;
+      background: $white;
+      transform: rotate(45deg);
+      position: absolute;
+      border-radius: 1px;
+      top: -2px;
+      bottom: -2px;
+    }
+
+    &.link:hover {
+      background-color: $red-800;
+      border-color: $red-950;
+    }
+  }
+
+  &-pending {
+    background-color: $gray-200;
+    border-color: $gray-500;
+
+    &.link:hover {
+      background-color: $gray-300;
+      border-color: $gray-900;
+    }
+  }
+
+  &-unknown {
+    background-color: $white;
+    border-color: $gray-500;
+
+    &.link:hover {
+      background-color: $white;
+      border-color: $gray-900;
+    }
+  }
+
+  &.deployment-instance-canary {
+    &::after {
+      width: 7px;
+      height: 7px;
+      border: 1px solid $white;
+      background-color: $orange-300;
+      border-radius: 50%;
+      content: '';
+      z-index: 1;
+    }
+  }
+
+  &-canary-icon {
+    background-color: transparent;
+    border: 0;
+
+    &::after {
+      width: $gl-padding !important;
+      height: $gl-padding !important;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index 51bf2686be2..3e9060e869b 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -57,7 +57,7 @@
 }
 
 .whats-new-modal-backdrop {
-  z-index: 9;
+  z-index: 699;
 }
 
 .whats-new-notification-count {
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
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index d9b9f3694c1..6c050f33b07 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -1,4 +1,5 @@
 @import '../framework/variables';
+@import './conflict_colors';
 
 @mixin diff-background($background, $idiff, $border) {
   background: $background;
@@ -35,11 +36,11 @@
   transition: border-left 0.1s ease-out;
 
   &.coverage {
-    border-left: 3px solid $coverage;
+    border-left: 4px solid $coverage;
   }
 
   &.no-coverage {
-    border-left: 3px solid $no-coverage;
+    border-left: 2px solid $no-coverage;
   }
 }
 
@@ -51,3 +52,44 @@
     color: darken($color, 15%);
   }
 }
+
+@mixin conflict-colors($theme) {
+  .diff-line-num {
+    &.conflict_marker_our,
+    &.conflict_our {
+      background-color: map-get($conflict-colors, #{$theme}-header-head-neutral);
+      border-color: map-get($conflict-colors, #{$theme}-header-head-neutral);
+    }
+
+    &.conflict_marker_their,
+    &.conflict_their {
+      background-color: map-get($conflict-colors, #{$theme}-header-origin-neutral);
+      border-color: map-get($conflict-colors, #{$theme}-header-origin-neutral);
+    }
+  }
+
+  .line_holder {
+    .line_content,
+    .line-coverage {
+      &.conflict_marker_our {
+        background-color: map-get($conflict-colors, #{$theme}-header-head-neutral);
+        border-color: map-get($conflict-colors, #{$theme}-header-head-neutral);
+      }
+
+      &.conflict_marker_their {
+        background-color: map-get($conflict-colors, #{$theme}-header-origin-neutral);
+        border-color: map-get($conflict-colors, #{$theme}-header-origin-neutral);
+      }
+
+      &.conflict_our {
+        background-color: map-get($conflict-colors, #{$theme}-line-head-neutral);
+        border-color: map-get($conflict-colors, #{$theme}-line-head-neutral);
+      }
+
+      &.conflict_their {
+        background-color: map-get($conflict-colors, #{$theme}-line-origin-neutral);
+        border-color: map-get($conflict-colors, #{$theme}-line-origin-neutral);
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/highlight/conflict_colors.scss b/app/assets/stylesheets/highlight/conflict_colors.scss
new file mode 100644
index 00000000000..98ca3775b72
--- /dev/null
+++ b/app/assets/stylesheets/highlight/conflict_colors.scss
@@ -0,0 +1,119 @@
+// Disabled to use the color map for creating color schemes
+// scss-lint:disable ColorVariable
+$conflict-colors: (
+  white-header-head-neutral   : #e1fad7,
+  white-line-head-neutral     : #effdec,
+  white-button-head-neutral   : #9adb84,
+
+  white-header-head-chosen    : #baf0a8,
+  white-line-head-chosen      : #e1fad7,
+  white-button-head-chosen    : #52c22d,
+
+  white-header-origin-neutral : #e0f0ff,
+  white-line-origin-neutral   : #f2f9ff,
+  white-button-origin-neutral : #87c2fa,
+
+  white-header-origin-chosen  : #add8ff,
+  white-line-origin-chosen    : #e0f0ff,
+  white-button-origin-chosen  : #268ced,
+
+  white-header-not-chosen     : #f0f0f0,
+  white-line-not-chosen       : $gray-light,
+
+  dark-header-head-neutral   : rgba(#3f3, 0.2),
+  dark-line-head-neutral     : rgba(#3f3, 0.1),
+  dark-button-head-neutral   : #40874f,
+
+  dark-header-head-chosen    : rgba(#3f3, 0.33),
+  dark-line-head-chosen      : rgba(#3f3, 0.2),
+  dark-button-head-chosen    : #258537,
+
+  dark-header-origin-neutral : rgba(#2878c9, 0.4),
+  dark-line-origin-neutral   : rgba(#2878c9, 0.3),
+  dark-button-origin-neutral : #2a5c8c,
+
+  dark-header-origin-chosen  : rgba(#2878c9, 0.6),
+  dark-line-origin-chosen    : rgba(#2878c9, 0.4),
+  dark-button-origin-chosen  : #1d6cbf,
+
+  dark-header-not-chosen     : rgba(#fff, 0.25),
+  dark-line-not-chosen       : rgba(#fff, 0.1),
+
+  monokai-header-head-neutral   : rgba(#a6e22e, 0.25),
+  monokai-line-head-neutral     : rgba(#a6e22e, 0.1),
+  monokai-button-head-neutral   : #376b20,
+
+  monokai-header-head-chosen    : rgba(#a6e22e, 0.4),
+  monokai-line-head-chosen      : rgba(#a6e22e, 0.25),
+  monokai-button-head-chosen    : #39800d,
+
+  monokai-header-origin-neutral : rgba(#60d9f1, 0.35),
+  monokai-line-origin-neutral   : rgba(#60d9f1, 0.15),
+  monokai-button-origin-neutral : #38848c,
+
+  monokai-header-origin-chosen  : rgba(#60d9f1, 0.5),
+  monokai-line-origin-chosen    : rgba(#60d9f1, 0.35),
+  monokai-button-origin-chosen  : #3ea4b2,
+
+  monokai-header-not-chosen     : rgba(#76715d, 0.24),
+  monokai-line-not-chosen       : rgba(#76715d, 0.1),
+
+  solarized-light-header-head-neutral   : rgba(#859900, 0.37),
+  solarized-light-line-head-neutral     : rgba(#859900, 0.2),
+  solarized-light-button-head-neutral   : #afb262,
+
+  solarized-light-header-head-chosen    : rgba(#859900, 0.5),
+  solarized-light-line-head-chosen      : rgba(#859900, 0.37),
+  solarized-light-button-head-chosen    : #94993d,
+
+  solarized-light-header-origin-neutral : rgba(#2878c9, 0.37),
+  solarized-light-line-origin-neutral   : rgba(#2878c9, 0.15),
+  solarized-light-button-origin-neutral : #60a1bf,
+
+  solarized-light-header-origin-chosen  : rgba(#2878c9, 0.6),
+  solarized-light-line-origin-chosen    : rgba(#2878c9, 0.37),
+  solarized-light-button-origin-chosen  : #2482b2,
+
+  solarized-light-header-not-chosen     : rgba(#839496, 0.37),
+  solarized-light-line-not-chosen       : rgba(#839496, 0.2),
+
+  solarized-dark-header-head-neutral   : rgba(#859900, 0.35),
+  solarized-dark-line-head-neutral     : rgba(#859900, 0.15),
+  solarized-dark-button-head-neutral   : #376b20,
+
+  solarized-dark-header-head-chosen    : rgba(#859900, 0.5),
+  solarized-dark-line-head-chosen      : rgba(#859900, 0.35),
+  solarized-dark-button-head-chosen    : #39800d,
+
+  solarized-dark-header-origin-neutral : rgba(#2878c9, 0.35),
+  solarized-dark-line-origin-neutral   : rgba(#2878c9, 0.15),
+  solarized-dark-button-origin-neutral : #086799,
+
+  solarized-dark-header-origin-chosen  : rgba(#2878c9, 0.6),
+  solarized-dark-line-origin-chosen    : rgba(#2878c9, 0.35),
+  solarized-dark-button-origin-chosen  : #0082cc,
+
+  solarized_dark_header_not_chosen     : rgba(#839496, 0.25),
+  solarized_dark_line_not_chosen       : rgba(#839496, 0.15),
+
+  none_header_head_neutral   : $gray-normal,
+  none_line_head_neutral     : $gray-normal,
+  none_button_head_neutral   : $gray-normal,
+
+  none_header_head_chosen    : $gray-darker,
+  none_line_head_chosen      : $gray-darker,
+  none_button_head_chosen    : $gray-darker,
+
+  none_header_origin_neutral : $gray-normal,
+  none_line_origin_neutral   : $gray-normal,
+  none_button_origin_neutral : $gray-normal,
+
+  none_header_origin_chosen  : $gray-darker,
+  none_line_origin_chosen    : $gray-darker,
+  none_button_origin_chosen  : $gray-darker,
+
+  none_header_not_chosen     : $gray-light,
+  none_line_not_chosen       : $gray-light
+
+);
+// scss-lint:enable ColorVariable
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index d51d5b7137d..64387fbce09 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -24,8 +24,8 @@ $dark-pre-hll-bg: #373b41;
 $dark-hll-bg: #373b41;
 $dark-over-bg: #9f9ab5;
 $dark-expanded-bg: #3e3e3e;
-$dark-coverage: #b5bd68;
-$dark-no-coverage: #de935f;
+$dark-coverage: #b3e841;
+$dark-no-coverage: #ff4f33;
 $dark-c: #969896;
 $dark-err: #c66;
 $dark-k: #b294bb;
@@ -198,6 +198,8 @@ $dark-il: #de935f;
     }
   }
 
+  @include conflict-colors('dark');
+
   // highlight line via anchor
   pre .hll {
     background-color: $dark-pre-hll-bg !important;
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index e690f9c7c74..119908ffba8 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -198,6 +198,8 @@ $monokai-gi: #a6e22e;
     }
   }
 
+  @include conflict-colors('monokai');
+
   // highlight line via anchor
   pre .hll {
     background-color: $monokai-hll !important;
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index 8c532f53182..f95f5393323 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -202,6 +202,8 @@ $solarized-dark-il: #2aa198;
     }
   }
 
+  @include conflict-colors('solarized-dark');
+
   // highlight line via anchor
   pre .hll {
     background-color: $solarized-dark-hll-bg !important;
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 1f9042a9534..dc4bc2f32c2 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -210,6 +210,8 @@ $solarized-light-il: #2aa198;
     }
   }
 
+  @include conflict-colors('solarized-light');
+
   // highlight line via anchor
   pre .hll {
     background-color: $solarized-light-hll-bg !important;
diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss
index 6362dd734f6..ed1d9c924c0 100644
--- a/app/assets/stylesheets/highlight/themes/white.scss
+++ b/app/assets/stylesheets/highlight/themes/white.scss
@@ -1,3 +1,5 @@
 .code.white {
   @import '../white_base';
+
+  @include conflict-colors('white');
 }
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index bb5ca94af33..777332881f3 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -81,6 +81,17 @@ $white-gc-bg: #eaf2f5;
 .line-numbers,
 .diff-line-num {
   background-color: $gray-light;
+
+  &.conflict_marker,
+  &.conflict_our {
+    background-color: map-get($conflict-colors, 'white-header-head-neutral');
+    border-color: map-get($conflict-colors, 'white-header-head-neutral');
+  }
+
+  &.conflict_their {
+    background-color: map-get($conflict-colors, 'white-header-origin-neutral');
+    border-color: map-get($conflict-colors, 'white-header-origin-neutral');
+  }
 }
 
 .diff-line-num,
@@ -115,7 +126,7 @@ pre.code,
 
   .diff-grid-left:hover,
   .diff-grid-right:hover {
-    .diff-line-num:not(.empty-cell) {
+    .diff-line-num:not(.empty-cell):not(.conflict_marker_their):not(.conflict_marker_our) {
       @include line-number-hover($white-over-bg);
     }
   }
@@ -203,7 +214,7 @@ pre.code,
   }
 
   .line-coverage {
-    @include line-coverage-border-color($green-500, $orange-500);
+    @include line-coverage-border-color($green-400, $red-400);
 
     &.old {
       background-color: $line-removed;
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index 52cc7d3449e..093cba3560f 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -85,13 +85,12 @@
     color: var(--ide-input-border, $gl-text-color-tertiary);
   }
 
-  .dropdown-input .fa,
   .dropdown-input .dropdown-input-clear {
-    color: var(--ide-input-border, $dropdown-input-fa-color);
+    color: var(--ide-input-border, $gray-500);
   }
 
   .ide-nav-form .input-icon {
-    color: var(--ide-input-border, $dropdown-input-fa-color);
+    color: var(--ide-input-border, $gray-500);
   }
 
   code {
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index cc876c9a635..72e2a45565e 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -148,18 +148,13 @@
 
       &:hover {
         box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color;
-        background-color: $gray-darker;
-
-        svg {
-          fill: $gl-text-color;
-        }
+        background-color: var(--gray-50, $gray-50);
       }
 
       .spinner,
       svg {
         width: $ci-action-dropdown-svg-size;
         height: $ci-action-dropdown-svg-size;
-        fill: $gl-text-color-secondary;
         position: relative;
         top: 1px;
         vertical-align: initial;
diff --git a/app/assets/stylesheets/page_bundles/environments.scss b/app/assets/stylesheets/page_bundles/environments.scss
index 871f118ea9d..7d5f501d633 100644
--- a/app/assets/stylesheets/page_bundles/environments.scss
+++ b/app/assets/stylesheets/page_bundles/environments.scss
@@ -129,3 +129,92 @@
     width: 38px;
   }
 }
+
+/**
+ * Deploy boards
+*/
+.deploy-board {
+  background-color: var(--gray-50, $gray-50);
+  min-height: 20px;
+
+  > .loading-icon,
+  > .deploy-board-empty,
+  > .deploy-board-information {
+    padding: 10px;
+  }
+
+  .deploy-board-information {
+    display: flex;
+    justify-content: space-between;
+
+    .deploy-board-status {
+      order: 1;
+      display: flex;
+      width: 70px;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: 20px 0 0 5px;
+    }
+
+    .deploy-board-instances {
+      order: 2;
+      margin-left: 20px;
+      width: 100%;
+    }
+
+    .deploy-board-canary-ingress {
+      order: 7;
+    }
+
+    .deploy-board-actions {
+      order: 3;
+      align-self: center;
+      min-width: 150px;
+      margin-left: 10px;
+    }
+
+    &.deploy-board-error-message {
+      justify-content: center;
+    }
+
+    .deploy-board-empty-state-svg {
+      order: 1;
+      width: 90px;
+      margin: auto 0 auto 20px;
+    }
+
+    .deploy-board-empty-state-text {
+      order: 2;
+      flex-wrap: wrap;
+      margin: auto auto 15px 0;
+    }
+
+    .deploy-board-empty-state-title {
+      order: 1;
+      font-size: 17px;
+      line-height: 40px;
+    }
+  }
+
+  .deploy-board-legend .legend-text {
+    color: var(--gray-900, $gray-900);
+    font-size: $gl-font-size-small;
+    font-weight: $gl-font-weight-bold;
+    line-height: $gl-line-height-14;
+  }
+}
+
+.deploy-board-icon {
+  display: none;
+
+  @include media-breakpoint-up(md) {
+    float: left;
+    display: block;
+  }
+
+  i {
+    cursor: pointer;
+    color: var(--gray-200, $gray-200);
+    padding-right: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/error_tracking_index.scss b/app/assets/stylesheets/page_bundles/error_tracking_index.scss
index 65bddfb7890..5c49bcc0348 100644
--- a/app/assets/stylesheets/page_bundles/error_tracking_index.scss
+++ b/app/assets/stylesheets/page_bundles/error_tracking_index.scss
@@ -5,6 +5,10 @@
     min-width: auto;
   }
 
+  .filtered-search-box .form-control {
+    min-width: unset;
+  }
+
   .sort-control {
     .btn {
       padding-right: 2rem;
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 15cc10d1532..f6b9473d235 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -179,6 +179,10 @@ $ide-commit-header-height: 48px;
     overflow: auto;
     padding: $gl-padding;
     background-color: var(--ide-empty-state-background, transparent);
+
+    .md {
+      max-width: $limited-layout-width;
+    }
   }
 
   .file-container {
diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/page_bundles/incident_management_list.scss
index ba363e2d119..30a75103c30 100644
--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/app/assets/stylesheets/page_bundles/incident_management_list.scss
@@ -1,11 +1,13 @@
+@import 'mixins_and_variables_and_functions';
+
 .incident-management-list {
   .new-alert {
-    background-color: $issues-today-bg;
+    background-color: var(--green-50, $green-50);
   }
 
   // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
   table {
-    @include gl-text-gray-500;
+    color: var(--gray-500, $gray-500);
 
     tbody {
       tr:not(.b-table-busy-slot):not(.b-table-empty-row) {
@@ -34,7 +36,8 @@
       th {
         @include gl-bg-transparent;
         @include gl-font-weight-bold;
-        @include gl-text-gray-400;
+        color: var(--gray-400, $gray-400);
+
 
         &[aria-sort='none']:hover {
           background-image: url('data:image/svg+xml, %3csvg   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"%3e   %3cpath style="fill: %23BABABA;" fill-rule="evenodd" d="M11.707085,11.7071   L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375,   10.6834 4.292875,10.2929 C4.683375,9.90237   5.316575,9.90237 5.707075,10.2929 L6.999975,   11.5858 L6.999975,2 C6.999975,1.44771   7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771   8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395   ,9.90237 11.316555,9.90237 11.707085,10.2929   C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/%3e   %3c/svg%3e');
@@ -67,7 +70,7 @@
         }
 
         &:hover {
-          @include gl-bg-white;
+          background-color: var(--white, $white);
           @include gl-border-none;
         }
 
@@ -80,7 +83,7 @@
       &.alert-management-table {
         .table-col {
           &:last-child {
-            @include gl-bg-gray-10;
+            background-color: var(--gray-10, $gray-10);
 
             &::before {
               content: none !important;
@@ -120,12 +123,12 @@
     @include gl-border-b-0;
 
     .gl-tab-nav-item {
-      @include gl-text-gray-500;
+      color: var(--gray-500, $gray-500);
 
       > .gl-tab-counter-badge {
         @include gl-reset-color;
         @include gl-font-sm;
-        @include gl-bg-gray-50;
+        background-color: var(--gray-50, $gray-50);
       }
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index c3e49da92a6..231723ca4e3 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -1,6 +1,23 @@
 @import 'mixins_and_variables_and_functions';
+
+@import '@gitlab/ui/src/scss/bootstrap';
+@import 'bootstrap-vue/src/index';
+
+@import '@gitlab/ui/src/scss/utilities';
+@import '@gitlab/ui/src/components/base/alert/alert';
+
 // We should only import styles that we actually use.
-// @import '@gitlab/ui/src/scss/gitlab_ui';
+@import '@gitlab/ui/src/components/base/alert/alert';
+@import '@gitlab/ui/src/components/base/avatar/avatar';
+@import '@gitlab/ui/src/components/base/badge/badge';
+@import '@gitlab/ui/src/components/base/button/button';
+@import '@gitlab/ui/src/components/base/icon/icon';
+@import '@gitlab/ui/src/components/base/link/link';
+@import '@gitlab/ui/src/components/base/loading_icon/loading_icon';
+@import '@gitlab/ui/src/components/base/modal/modal';
+@import '@gitlab/ui/src/components/base/pagination/pagination';
+@import '@gitlab/ui/src/components/base/tabs/tabs/tabs';
+@import '@gitlab/ui/src/components/base/tooltip/tooltip';
 
 $atlaskit-border-color: #dfe1e6;
 
@@ -40,14 +57,16 @@ $header-height: 40px;
 }
 
 .jira-connect-user {
-  float: right;
-  position: relative;
-  top: -30px;
+  font-size: $gl-font-size;
+  position: fixed;
+  top: 10px;
+  right: 20px;
 }
 
 .jira-connect-app {
   margin-top: $header-height;
   max-width: 600px;
+  min-height: 95vh;
   padding-top: 48px;
   padding-left: 16px;
   padding-right: 16px;
@@ -108,5 +127,6 @@ svg {
 }
 
 .browser-limitations-notice {
+  font-size: $gl-font-size;
   margin-top: 32px;
 }
diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
index a26affb10a9..d7473d2c942 100644
--- a/app/assets/stylesheets/page_bundles/merge_conflicts.scss
+++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
@@ -1,183 +1,65 @@
 @import 'mixins_and_variables_and_functions';
-// Disabled to use the color map for creating color schemes
-// scss-lint:disable ColorVariable
-$colors: (
-  white-header-head-neutral   : #e1fad7,
-  white-line-head-neutral     : #effdec,
-  white-button-head-neutral   : #9adb84,
-
-  white-header-head-chosen    : #baf0a8,
-  white-line-head-chosen      : #e1fad7,
-  white-button-head-chosen    : #52c22d,
-
-  white-header-origin-neutral : #e0f0ff,
-  white-line-origin-neutral   : #f2f9ff,
-  white-button-origin-neutral : #87c2fa,
-
-  white-header-origin-chosen  : #add8ff,
-  white-line-origin-chosen    : #e0f0ff,
-  white-button-origin-chosen  : #268ced,
-
-  white-header-not-chosen     : #f0f0f0,
-  white-line-not-chosen       : $gray-light,
-
-  dark-header-head-neutral   : rgba(#3f3, 0.2),
-  dark-line-head-neutral     : rgba(#3f3, 0.1),
-  dark-button-head-neutral   : #40874f,
-
-  dark-header-head-chosen    : rgba(#3f3, 0.33),
-  dark-line-head-chosen      : rgba(#3f3, 0.2),
-  dark-button-head-chosen    : #258537,
-
-  dark-header-origin-neutral : rgba(#2878c9, 0.4),
-  dark-line-origin-neutral   : rgba(#2878c9, 0.3),
-  dark-button-origin-neutral : #2a5c8c,
-
-  dark-header-origin-chosen  : rgba(#2878c9, 0.6),
-  dark-line-origin-chosen    : rgba(#2878c9, 0.4),
-  dark-button-origin-chosen  : #1d6cbf,
-
-  dark-header-not-chosen     : rgba(#fff, 0.25),
-  dark-line-not-chosen       : rgba(#fff, 0.1),
-
-  monokai-header-head-neutral   : rgba(#a6e22e, 0.25),
-  monokai-line-head-neutral     : rgba(#a6e22e, 0.1),
-  monokai-button-head-neutral   : #376b20,
-
-  monokai-header-head-chosen    : rgba(#a6e22e, 0.4),
-  monokai-line-head-chosen      : rgba(#a6e22e, 0.25),
-  monokai-button-head-chosen    : #39800d,
-
-  monokai-header-origin-neutral : rgba(#60d9f1, 0.35),
-  monokai-line-origin-neutral   : rgba(#60d9f1, 0.15),
-  monokai-button-origin-neutral : #38848c,
-
-  monokai-header-origin-chosen  : rgba(#60d9f1, 0.5),
-  monokai-line-origin-chosen    : rgba(#60d9f1, 0.35),
-  monokai-button-origin-chosen  : #3ea4b2,
-
-  monokai-header-not-chosen     : rgba(#76715d, 0.24),
-  monokai-line-not-chosen       : rgba(#76715d, 0.1),
-
-  solarized-light-header-head-neutral   : rgba(#859900, 0.37),
-  solarized-light-line-head-neutral     : rgba(#859900, 0.2),
-  solarized-light-button-head-neutral   : #afb262,
-
-  solarized-light-header-head-chosen    : rgba(#859900, 0.5),
-  solarized-light-line-head-chosen      : rgba(#859900, 0.37),
-  solarized-light-button-head-chosen    : #94993d,
-
-  solarized-light-header-origin-neutral : rgba(#2878c9, 0.37),
-  solarized-light-line-origin-neutral   : rgba(#2878c9, 0.15),
-  solarized-light-button-origin-neutral : #60a1bf,
-
-  solarized-light-header-origin-chosen  : rgba(#2878c9, 0.6),
-  solarized-light-line-origin-chosen    : rgba(#2878c9, 0.37),
-  solarized-light-button-origin-chosen  : #2482b2,
-
-  solarized-light-header-not-chosen     : rgba(#839496, 0.37),
-  solarized-light-line-not-chosen       : rgba(#839496, 0.2),
-
-  solarized-dark-header-head-neutral   : rgba(#859900, 0.35),
-  solarized-dark-line-head-neutral     : rgba(#859900, 0.15),
-  solarized-dark-button-head-neutral   : #376b20,
-
-  solarized-dark-header-head-chosen    : rgba(#859900, 0.5),
-  solarized-dark-line-head-chosen      : rgba(#859900, 0.35),
-  solarized-dark-button-head-chosen    : #39800d,
-
-  solarized-dark-header-origin-neutral : rgba(#2878c9, 0.35),
-  solarized-dark-line-origin-neutral   : rgba(#2878c9, 0.15),
-  solarized-dark-button-origin-neutral : #086799,
-
-  solarized-dark-header-origin-chosen  : rgba(#2878c9, 0.6),
-  solarized-dark-line-origin-chosen    : rgba(#2878c9, 0.35),
-  solarized-dark-button-origin-chosen  : #0082cc,
-
-  solarized_dark_header_not_chosen     : rgba(#839496, 0.25),
-  solarized_dark_line_not_chosen       : rgba(#839496, 0.15),
-
-  none_header_head_neutral   : $gray-normal,
-  none_line_head_neutral     : $gray-normal,
-  none_button_head_neutral   : $gray-normal,
-
-  none_header_head_chosen    : $gray-darker,
-  none_line_head_chosen      : $gray-darker,
-  none_button_head_chosen    : $gray-darker,
-
-  none_header_origin_neutral : $gray-normal,
-  none_line_origin_neutral   : $gray-normal,
-  none_button_origin_neutral : $gray-normal,
-
-  none_header_origin_chosen  : $gray-darker,
-  none_line_origin_chosen    : $gray-darker,
-  none_button_origin_chosen  : $gray-darker,
-
-  none_header_not_chosen     : $gray-light,
-  none_line_not_chosen       : $gray-light
-
-);
-// scss-lint:enable ColorVariable
+@import '../highlight/conflict_colors';
 
 @mixin color-scheme($color) {
   .header.line_content,
   .diff-line-num {
     &.origin {
-      background-color: map-get($colors, #{$color}-header-origin-neutral);
-      border-color: map-get($colors, #{$color}-header-origin-neutral);
+      background-color: map-get($conflict-colors, #{$color}-header-origin-neutral);
+      border-color: map-get($conflict-colors, #{$color}-header-origin-neutral);
 
       button {
-        background-color: map-get($colors, #{$color}-button-origin-neutral);
-        border-color: darken(map-get($colors, #{$color}-button-origin-neutral), 15);
+        background-color: map-get($conflict-colors, #{$color}-button-origin-neutral);
+        border-color: darken(map-get($conflict-colors, #{$color}-button-origin-neutral), 15);
       }
 
       &.selected {
-        background-color: map-get($colors, #{$color}-header-origin-chosen);
-        border-color: map-get($colors, #{$color}-header-origin-chosen);
+        background-color: map-get($conflict-colors, #{$color}-header-origin-chosen);
+        border-color: map-get($conflict-colors, #{$color}-header-origin-chosen);
 
         button {
-          background-color: map-get($colors, #{$color}-button-origin-chosen);
-          border-color: darken(map-get($colors, #{$color}-button-origin-chosen), 15);
+          background-color: map-get($conflict-colors, #{$color}-button-origin-chosen);
+          border-color: darken(map-get($conflict-colors, #{$color}-button-origin-chosen), 15);
         }
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}-header-not-chosen);
-        border-color: map-get($colors, #{$color}-header-not-chosen);
+        background-color: map-get($conflict-colors, #{$color}-header-not-chosen);
+        border-color: map-get($conflict-colors, #{$color}-header-not-chosen);
 
         button {
-          background-color: lighten(map-get($colors, #{$color}-button-origin-neutral), 15);
-          border-color: map-get($colors, #{$color}-button-origin-neutral);
+          background-color: lighten(map-get($conflict-colors, #{$color}-button-origin-neutral), 15);
+          border-color: map-get($conflict-colors, #{$color}-button-origin-neutral);
         }
       }
     }
 
     &.head {
-      background-color: map-get($colors, #{$color}-header-head-neutral);
-      border-color: map-get($colors, #{$color}-header-head-neutral);
+      background-color: map-get($conflict-colors, #{$color}-header-head-neutral);
+      border-color: map-get($conflict-colors, #{$color}-header-head-neutral);
 
       button {
-        background-color: map-get($colors, #{$color}-button-head-neutral);
-        border-color: darken(map-get($colors, #{$color}-button-head-neutral), 15);
+        background-color: map-get($conflict-colors, #{$color}-button-head-neutral);
+        border-color: darken(map-get($conflict-colors, #{$color}-button-head-neutral), 15);
       }
 
       &.selected {
-        background-color: map-get($colors, #{$color}-header-head-chosen);
-        border-color: map-get($colors, #{$color}-header-head-chosen);
+        background-color: map-get($conflict-colors, #{$color}-header-head-chosen);
+        border-color: map-get($conflict-colors, #{$color}-header-head-chosen);
 
         button {
-          background-color: map-get($colors, #{$color}-button-head-chosen);
-          border-color: darken(map-get($colors, #{$color}-button-head-chosen), 15);
+          background-color: map-get($conflict-colors, #{$color}-button-head-chosen);
+          border-color: darken(map-get($conflict-colors, #{$color}-button-head-chosen), 15);
         }
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}-header-not-chosen);
-        border-color: map-get($colors, #{$color}-header-not-chosen);
+        background-color: map-get($conflict-colors, #{$color}-header-not-chosen);
+        border-color: map-get($conflict-colors, #{$color}-header-not-chosen);
 
         button {
-          background-color: lighten(map-get($colors, #{$color}-button-head-neutral), 15);
-          border-color: map-get($colors, #{$color}-button-head-neutral);
+          background-color: lighten(map-get($conflict-colors, #{$color}-button-head-neutral), 15);
+          border-color: map-get($conflict-colors, #{$color}-button-head-neutral);
         }
       }
     }
@@ -185,26 +67,26 @@ $colors: (
 
   .line_content {
     &.origin {
-      background-color: map-get($colors, #{$color}-line-origin-neutral);
+      background-color: map-get($conflict-colors, #{$color}-line-origin-neutral);
 
       &.selected {
-        background-color: map-get($colors, #{$color}-line-origin-chosen);
+        background-color: map-get($conflict-colors, #{$color}-line-origin-chosen);
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}-line-not-chosen);
+        background-color: map-get($conflict-colors, #{$color}-line-not-chosen);
       }
     }
 
     &.head {
-      background-color: map-get($colors, #{$color}-line-head-neutral);
+      background-color: map-get($conflict-colors, #{$color}-line-head-neutral);
 
       &.selected {
-        background-color: map-get($colors, #{$color}-line-head-chosen);
+        background-color: map-get($conflict-colors, #{$color}-line-head-chosen);
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}-line-not-chosen);
+        background-color: map-get($conflict-colors, #{$color}-line-not-chosen);
       }
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
index 3c95ecc9bf0..1b190024457 100644
--- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -29,6 +29,22 @@
   }
 }
 
+.rotations-modal {
+  .gl-card {
+    min-width: 75%;
+  }
+
+  &.gl-modal .modal-md {
+    max-width: 640px;
+  }
+
+  // TODO: move to gitlab/ui utilities
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/297502
+  .gl-w-fit-content {
+    width: fit-content;
+  }
+}
+
 //// Copied from roadmaps.scss - adapted for on-call schedules
 $header-item-height: 72px;
 $item-height: 40px;
@@ -97,8 +113,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
     }
 
     .item-label {
-      @include gl-py-4;
-      @include gl-pl-4;
       border-right: $border-style;
       border-bottom: $border-style;
     }
diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss
index eb34e7f3876..9f0fa137910 100644
--- a/app/assets/stylesheets/page_bundles/wiki.scss
+++ b/app/assets/stylesheets/page_bundles/wiki.scss
@@ -15,11 +15,6 @@
     padding: 11px 0;
   }
 
-  .wiki-page-title {
-    margin: 0;
-    font-size: 22px;
-  }
-
   .wiki-last-edit-by {
     display: block;
     color: var(--gray-500, $gray-500);
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index e0e10d63f8e..52bd16d1a79 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -181,6 +181,7 @@
   .license-selector,
   .gitignore-selector,
   .gitlab-ci-yml-selector,
+  .gitlab-ci-syntax-yml-selector,
   .dockerfile-selector,
   .template-type-selector,
   .metrics-dashboard-selector {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index efca82def92..b99e619cc98 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -124,7 +124,7 @@ $mr-widget-min-height: 69px;
       padding: $gl-padding;
 
       @include media-breakpoint-up(md) {
-        padding-left: $gl-padding-8 * 7;
+        margin-left: $gl-spacing-scale-7;
       }
     }
   }
@@ -301,7 +301,8 @@ $mr-widget-min-height: 69px;
       margin: 0 0 0 10px;
     }
 
-    .bold {
+    .bold,
+    .gl-font-weight-bold {
       font-weight: $gl-font-weight-bold;
       color: $gray-600;
       margin-left: 10px;
@@ -317,7 +318,8 @@ $mr-widget-min-height: 69px;
     }
 
     .spacing,
-    .bold {
+    .bold,
+    .gl-font-weight-bold {
       vertical-align: middle;
     }
 
@@ -394,10 +396,6 @@ $mr-widget-min-height: 69px;
     }
   }
 
-  .mr-widget-help {
-    padding: 10px 16px 10px ($gl-padding-8 * 7);
-  }
-
   .ci-coverage {
     float: right;
   }
@@ -1016,3 +1014,11 @@ $mr-widget-min-height: 69px;
     vertical-align: middle;
   }
 }
+
+.mr-ready-to-merge-loader {
+  max-width: 418px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 0c24ea9ccc6..254ad96bb57 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -100,8 +100,6 @@
   color: $orange-600;
   background-color: $orange-50;
   border-radius: $border-radius-default $border-radius-default 0 0;
-  border: 1px solid $border-gray-normal;
-  border-bottom: 0;
   padding: 3px 12px;
   margin: auto;
   align-items: center;
@@ -454,3 +452,9 @@ table {
 .markdown-selector {
   color: $blue-600;
 }
+
+.comment-warning-wrapper {
+  .md-area {
+    border: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/registry.scss b/app/assets/stylesheets/pages/registry.scss
new file mode 100644
index 00000000000..31c6dbd2970
--- /dev/null
+++ b/app/assets/stylesheets/pages/registry.scss
@@ -0,0 +1,8 @@
+// Workaround for gl-breadcrumb at the last child of the handwritten breadcrumb
+// until this gitlab-ui issue is resolved: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1079
+//
+// See app/assets/javascripts/registry/explorer/components/registry_breadcrumb.vue when this is changed.
+.breadcrumbs-container .gl-breadcrumbs {
+  padding: 0;
+  box-shadow: none;
+}
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 335e177d169..f31b6d96f03 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -43,7 +43,7 @@
 
 .settings-header {
   position: relative;
-  padding: 20px 110px 0 0;
+  padding: 24px 110px 0 0;
 
   h4 {
     margin-top: 0;
diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss
index ebf21f58208..346b3f61caa 100644
--- a/app/assets/stylesheets/pages/settings_ci_cd.scss
+++ b/app/assets/stylesheets/pages/settings_ci_cd.scss
@@ -17,10 +17,6 @@
   }
 }
 
-.registry-placeholder {
-  min-height: 60px;
-}
-
 .auto-devops-card {
   margin-bottom: $gl-vert-padding;
 }
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 8f3574a337b..352050f7b01 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -98,6 +98,7 @@
 
   .tree-table {
     margin-bottom: 0;
+    table-layout: fixed;
 
     tr {
       border-bottom: 1px solid $white-normal;
diff --git a/app/assets/stylesheets/pages/trials.scss b/app/assets/stylesheets/pages/trials.scss
index 3fb9054b2b8..55f323b7df7 100644
--- a/app/assets/stylesheets/pages/trials.scss
+++ b/app/assets/stylesheets/pages/trials.scss
@@ -3,13 +3,13 @@
 * MR link https://gitlab.com/gitlab-org/gitlab/-/merge_requests/22716
 */
 .gl-select2-html5-required-fix div.select2-container+select.select2 {
+  @include gl-opacity-0;
+  @include gl-border-0;
+  @include gl-bg-none;
+  @include gl-bg-transparent;
   display: block !important;
   width: 1px;
   height: 1px;
   z-index: -1;
-  opacity: 0;
   margin: -3px auto 0;
-  background-image: none;
-  background-color: transparent;
-  border: 0;
 }
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index d875f758ead..31a501f3a36 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -1242,8 +1242,8 @@ body.gl-dark .navbar-gitlab .search form {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill,
-.navbar-nav .badge.badge-pill {
+.title-container .badge.badge-pill:not(.merge-request-badge),
+.navbar-nav .badge.badge-pill:not(.merge-request-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index a98e91b32eb..7f6e537af8f 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -1163,8 +1163,8 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container .badge.badge-pill,
-.navbar-nav .badge.badge-pill {
+.title-container .badge.badge-pill:not(.merge-request-badge),
+.navbar-nav .badge.badge-pill:not(.merge-request-badge) {
   position: inherit;
   font-weight: 400;
   margin-left: -6px;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 7f2bea9bf26..d8f74a2913e 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -168,6 +168,20 @@ body.gl-dark {
   --black: #{$black};
 
   --svg-status-bg: #{$white};
+
+  .gl-button.gl-button,
+  .gl-button.gl-button.btn-block {
+    &.btn-default,
+    &.btn-dashed,
+    &.btn-info,
+    &.btn-success,
+    &.btn-danger,
+    &.btn-warning {
+      &-tertiary {
+        mix-blend-mode: screen;
+      }
+    }
+  }
 }
 
 $border-white-light: $gray-900;
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index bf251993c38..ab330ed69c6 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -143,16 +143,3 @@
     flex-direction: column !important;
   }
 }
-
-// These will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1091
-.gl-w-10p {
-  width: 10%;
-}
-
-.gl-w-20p {
-  width: 20%;
-}
-
-.gl-w-40p {
-  width: 40%;
-}