Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

46 files changed, 1320 insertions, 1402 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index ff2b82d1806..24549a170bd 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -31,3 +31,4 @@
 @import './pages/storage_quota';
 @import './pages/tree';
 @import './pages/users';
+@import './pages/hierarchy';
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
index 377d5130571..a9be1d89495 100644
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -1,4 +1,5 @@
 $design-pin-diameter: 28px;
+$design-pin-diameter-sm: 24px;
 $t-gray-a-16-design-pin: rgba($black, 0.16);
 
 .layout-page.design-detail-layout {
@@ -12,24 +13,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
     top: 35px;
   }
 
-  .design-note-pin {
-    display: flex;
-    height: $design-pin-diameter;
-    width: $design-pin-diameter;
-    box-sizing: content-box;
-    background-color: $purple-500;
-    color: $white;
-    font-weight: $gl-font-weight-bold;
-    border-radius: 50%;
-    z-index: 1;
-    padding: 0;
-    border: 0;
-
-    &.resolved {
-      background-color: $gray-500;
-    }
-  }
-
   .comment-indicator {
     border-radius: 50%;
   }
@@ -40,35 +23,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
       cursor: grabbing;
     }
   }
-
-  /**
-   * Design pin that overlays the design
-   */
-  .frame .design-note-pin {
-    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
-    border: $white 2px solid;
-    will-change: transform, box-shadow, opacity;
-    // NOTE: verbose transition property required for Safari
-    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
-    transform-origin: 0 0;
-    transform: translate(-50%, -50%);
-
-    &:hover {
-      transform: scale(1.2) translate(-50%, -50%);
-    }
-
-    &:active {
-      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
-    }
-
-    &.inactive {
-      @include gl-opacity-5;
-
-      &:hover {
-        @include gl-opacity-10;
-      }
-    }
-  }
 }
 
 .design-scaler-wrapper {
@@ -177,3 +131,63 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
 .design-card-header {
   background: transparent;
 }
+
+.design-note-pin {
+  display: flex;
+  height: $design-pin-diameter;
+  width: $design-pin-diameter;
+  box-sizing: content-box;
+  background-color: $purple-500;
+  color: $white;
+  font-weight: $gl-font-weight-bold;
+  border-radius: 50%;
+  z-index: 1;
+  padding: 0;
+  border: 0;
+
+  &.draft {
+    background-color: $orange-500;
+  }
+
+  &.resolved {
+    background-color: $gray-500;
+  }
+
+  &.on-image {
+    box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24;
+    border: $white 2px solid;
+    will-change: transform, box-shadow, opacity;
+    // NOTE: verbose transition property required for Safari
+    transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear;
+    transform-origin: 0 0;
+    transform: translate(-50%, -50%);
+
+    &:hover {
+      transform: scale(1.2) translate(-50%, -50%);
+    }
+
+    &:active {
+      box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin;
+    }
+
+    &.inactive {
+      @include gl-opacity-5;
+
+      &:hover {
+        @include gl-opacity-10;
+      }
+    }
+  }
+
+  &.small {
+    position: absolute;
+    border: 1px solid $white;
+    height: $design-pin-diameter-sm;
+    width: $design-pin-diameter-sm;
+  }
+
+  &.user-avatar {
+    top: 25px;
+    right: 8px;
+  }
+}
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c1c8bfffff7..8e43a9b1b0d 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -46,7 +46,6 @@
 @import 'framework/toggle';
 @import 'framework/typography';
 @import 'framework/zen';
-@import 'framework/blank';
 @import 'framework/wells';
 @import 'framework/page_header';
 @import 'framework/page_title';
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
deleted file mode 100644
index 7dd7ab339dd..00000000000
--- a/app/assets/stylesheets/framework/blank.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.blank-state-parent-container {
-  .section-container {
-    padding: 10px;
-  }
-
-  .section-body {
-    width: 100%;
-    height: 100%;
-    padding-bottom: 25px;
-    border-radius: $border-radius-default;
-  }
-}
-
-.blank-state-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.blank-state-welcome {
-  text-align: center;
-  padding: $gl-padding 0 ($gl-padding * 2);
-
-  .blank-state-welcome-title {
-    font-size: 24px;
-  }
-
-  .blank-state-text {
-    margin-bottom: 0;
-  }
-}
-
-.blank-state-link {
-  color: $gl-text-color;
-  margin-bottom: 15px;
-
-  &:hover {
-    background-color: $gray-light;
-    text-decoration: none;
-    color: $gl-text-color;
-  }
-}
-
-.blank-state-center {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  text-align: center;
-}
-
-.blank-state {
-  display: flex;
-  align-items: center;
-  padding: 20px 50px;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  min-height: 240px;
-  margin-bottom: $gl-padding;
-  width: calc(50% - #{$gl-padding-8});
-
-  @include media-breakpoint-down(sm) {
-    width: 100%;
-    flex-direction: column;
-    justify-content: center;
-    padding: 50px 20px;
-
-    .column-small & {
-      width: 100%;
-    }
-
-  }
-}
-
-.blank-state,
-.blank-state-center {
-  .blank-state-icon {
-    svg {
-      display: block;
-      margin: auto;
-    }
-  }
-
-  .blank-state-title {
-    margin-top: 0;
-    font-size: 18px;
-  }
-
-  .blank-state-body {
-    @include media-breakpoint-down(sm) {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    @include media-breakpoint-up(sm) {
-      padding-left: 20px;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .column-large {
-    flex: 2;
-  }
-
-  .column-small {
-    flex: 1;
-    margin-bottom: 15px;
-
-    .blank-state {
-      max-width: 400px;
-      flex-wrap: wrap;
-      margin-left: 15px;
-    }
-
-    .blank-state-icon {
-      margin-bottom: 30px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index e0e9043ae24..9cebd4f49a4 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -158,12 +158,6 @@
     line-height: $gl-btn-small-line-height;
   }
 
-  &.btn-xs {
-    padding: 2px $gl-btn-padding;
-    font-size: $gl-btn-xs-font-size;
-    line-height: $gl-btn-xs-line-height;
-  }
-
   &.btn-success {
     @include btn-green;
   }
@@ -372,29 +366,6 @@
     background-color: transparent;
     border-color: transparent;
   }
-
-  &.btn-secondary-hover-link,
-  &.btn-default-hover-link {
-    color: $gl-text-color-secondary;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: $blue-600;
-      text-decoration: none;
-    }
-  }
-
-  &.btn-primary-hover-link {
-    color: inherit;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: $blue-600;
-      text-decoration: none;
-    }
-  }
 }
 
 // The .btn-svg class is available for legacy icon buttons to
@@ -438,10 +409,6 @@ fieldset[disabled] .btn,
   cursor: default;
 }
 
-.btn-no-padding {
-  padding: 0;
-}
-
 // This class helps convert `.gl-button` children so that they consistently
 // match the style of `.btn` elements which might be around them. Ideally we
 // wouldn't need this class.
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 2a3ed29258a..7b4f68e7a44 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -267,6 +267,8 @@
 
     .nav-item-name {
       flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     > a,
@@ -336,7 +338,8 @@
 .nav-sidebar-inner-scroll {
   @include gl-h-full;
   @include gl-w-full;
-  @include gl-overflow-auto;
+  @include gl-overflow-x-hidden;
+  @include gl-overflow-y-auto;
 
   > div.context-header {
     @include gl-mt-2;
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index ffacac07517..f0495fdc94e 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -582,6 +582,25 @@ table.code {
   }
 }
 
+.diff-expansion-cell {
+  flex: 1 1;
+  min-width: max-content;
+}
+
+.diff-expansion-cell-middle {
+  flex: 0 1 max-content;
+}
+
+@media only screen and (min-width: $breakpoint-xl) {
+  .diff-expansion-cell-start {
+    text-align: right;
+  }
+
+  .diff-expansion-cell-end {
+    text-align: left;
+  }
+}
+
 // Merge request diff grid layout
 .diff-grid {
   .diff-td {
@@ -603,6 +622,14 @@ table.code {
     grid-template-columns: 50px 8px 0 1fr;
   }
 
+  .diff-grid-3-col {
+    grid-template-columns: 50px 1fr !important;
+  }
+
+  &.inline-diff-view .diff-grid-3-col {
+    grid-template-columns: 50px 50px 1fr !important;
+  }
+
   .diff-grid-comments {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -832,6 +859,8 @@ table.code {
 }
 
 .diff-files-changed {
+  background-color: $body-bg;
+
   .inline-parallel-buttons {
     @include gl-relative;
     z-index: 1;
@@ -840,7 +869,6 @@ table.code {
   @include media-breakpoint-up(sm) {
     @include gl-sticky;
     top: calc(#{$header-height} + #{$mr-tabs-height});
-    @include gl-bg-white;
     z-index: 200;
 
     .with-performance-bar & {
@@ -1064,24 +1092,6 @@ table.code {
   }
 }
 
-.frame .badge.badge-pill,
-.image-diff-avatar-link .badge.badge-pill,
-.user-avatar-link .badge.badge-pill,
-.notes > .badge.badge-pill {
-  position: absolute;
-  background-color: $blue-400;
-  color: $white;
-  border: $white 1px solid;
-  min-height: $gl-padding;
-  padding: 5px 8px;
-  border-radius: 12px;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.frame .badge.badge-pill,
 .frame .image-comment-badge,
 .frame .comment-indicator {
   // Center align badges on the frame
@@ -1113,11 +1123,6 @@ table.code {
   }
 }
 
-.notes > .badge.badge-pill {
-  display: none;
-  left: -13px;
-}
-
 .discussion-notes {
   min-height: 35px;
 
@@ -1126,18 +1131,22 @@ table.code {
     min-height: 25px;
   }
 
+  .diff-notes-expand {
+    display: none;
+  }
+
   &.collapsed {
     background-color: $white;
 
+    .diff-notes-expand {
+      display: initial;
+    }
+
     .diff-notes-collapse,
     .note,
     .discussion-reply-holder {
       display: none;
     }
-
-    .notes > .badge.badge-pill {
-      display: block;
-    }
   }
 }
 
@@ -1183,7 +1192,7 @@ table.code {
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, md)-1) {
+@media (max-width: map-get($grid-breakpoints, lg)-1) {
   .diffs .files {
     @include fixed-width-container;
     flex-direction: column;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 9209a0c2173..9387500e66f 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -411,11 +411,6 @@ span.idiff {
   margin-right: 1.5em;
 }
 
-.label-lfs {
-  color: $common-gray-light;
-  border: 1px solid $common-gray-light;
-}
-
 .preview-container {
   overflow: auto;
 
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 2a46e50f0da..4d0d64ae723 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -150,6 +150,10 @@ label {
   margin-bottom: 0;
   margin-top: #{$grid-size / 2};
   font-size: $gl-font-size;
+
+  .invisible {
+    visibility: hidden;
+  }
 }
 
 .gl-field-error,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 68535badd78..1004383cfd3 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -150,7 +150,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
       }
 
       li {
-        .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+        .badge.badge-pill:not(.gl-badge) {
           box-shadow: none;
           font-weight: $gl-font-weight-bold;
         }
@@ -415,49 +415,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   }
 }
 
-.title-container,
-.navbar-nav {
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
-    position: inherit;
-    font-weight: $gl-font-weight-normal;
-    margin-left: -6px;
-    font-size: 11px;
-    color: var(--gray-950, $white);
-    padding: 0 5px;
-    line-height: 12px;
-    border-radius: 7px;
-    box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
-
-    &.green-badge {
-      background-color: var(--green-400, $green-400);
-    }
-
-    &.merge-requests-count {
-      background-color: var(--orange-400, $orange-400);
-    }
-
-    &.todos-count {
-      background-color: var(--blue-400, $blue-400);
-    }
-  }
-
-  .canary-badge {
-    .badge {
-      font-size: $gl-font-size-small;
-      line-height: $gl-line-height;
-      padding: 0 $grid-size;
-    }
-
-    &:hover {
-      text-decoration: none;
-
-      .badge {
-        text-decoration: none;
-      }
-    }
-  }
-}
-
 @include media-breakpoint-down(xs) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index c6e52c13e83..7731ec751c9 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -67,6 +67,27 @@
       }
     }
   }
+
+  .gl-tabs-nav {
+    @include media-breakpoint-down(xs) {
+      .nav-item {
+        flex: 1;
+        border-bottom: 1px solid $border-color;
+      }
+
+      .gl-tab-nav-item {
+        padding-top: $gl-padding-4;
+        padding-bottom: $gl-padding-8;
+      }
+
+      .md-header-toolbar {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: $gl-padding-8;
+      }
+    }
+  }
 }
 
 .md-header-tab {
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 563075b911c..8cad55f414a 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -18,7 +18,6 @@
       line-height: 28px;
       color: $gl-text-color-secondary;
       border: 0;
-      border-bottom: 2px solid transparent;
       white-space: nowrap;
 
       &:hover,
@@ -26,7 +25,7 @@
       &:focus {
         text-decoration: none;
         color: $black;
-        border-bottom: 2px solid $gray-darkest;
+        box-shadow: inset 0 -2px 0 0 $gray-darkest;
       }
     }
 
@@ -40,7 +39,7 @@
     a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
-      border-bottom: 2px solid var(--gl-theme-accent, $theme-indigo-500);
+      box-shadow: inset 0 -2px 0 0 var(--gl-theme-accent, $theme-indigo-500);
 
       .badge.badge-pill {
         color: $black;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 51c41c46f61..feedc40b487 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -47,6 +47,10 @@
     margin-bottom: $gl-spacing-scale-2;
   }
 
+  img {
+    max-width: 100%;
+  }
+
   img:not(.emoji) {
     margin: 0 0 8px;
   }
@@ -62,15 +66,6 @@
     min-width: inherit;
     min-height: inherit;
     background-color: inherit;
-    max-width: 100%;
-  }
-
-  &:not(.md) img:not(.emoji) {
-    border: 1px solid $white-normal;
-    padding: 5px;
-    margin: 5px 0;
-    // Ensure that image does not exceed viewport
-    max-height: calc(100vh - 100px);
   }
 
   details {
@@ -375,7 +370,8 @@
     // Loose lists need bottom margin added back
     p ~ ol,
     p ~ ul {
-      margin-bottom: 16px;
    }
+      margin-bottom: 16px;
+    }
   }
 
   ul:dir(rtl),
@@ -521,32 +517,26 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .fa-2x,
   .admonitionblock td.icon [class^='fa icon-'] {
     font-size: 2em;
   }
 
-  .fa-exclamation-triangle::before,
   .admonitionblock td.icon .icon-warning::before {
     content: '⚠';
   }
 
-  .fa-exclamation-circle::before,
   .admonitionblock td.icon .icon-important::before {
     content: '❗';
   }
 
-  .fa-lightbulb-o::before,
   .admonitionblock td.icon .icon-tip::before {
     content: '💡';
   }
 
-  .fa-thumb-tack::before,
   .admonitionblock td.icon .icon-note::before {
     content: '📌';
   }
 
-  .fa-fire::before,
   .admonitionblock td.icon .icon-caution::before {
     content: '🔥';
   }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 21add43ad3f..31ef5ae0646 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -52,6 +52,11 @@ $spacing-scale: (
   5: #{4 * $grid-size}
 );
 
+/* Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 */
+$gl-spacing-scale-48: 48 * $grid-size;
+$gl-spacing-scale-75: 75 * $grid-size;
+/* End gitlab-ui#1709 */
+
 /*
  * Why another sizing scale???
  * Great question, friend!
@@ -589,8 +594,6 @@ $gl-btn-vert-padding: 8px;
 $gl-btn-horz-padding: 12px;
 $gl-btn-small-font-size: 13px;
 $gl-btn-small-line-height: 18px;
-$gl-btn-xs-font-size: 13px;
-$gl-btn-xs-line-height: 13px;
 
 /*
 * Badges
@@ -722,7 +725,7 @@ $calendar-activity-colors: (
   #7fa8c9,
   #527ba0,
   #254e77,
-);
+) !default;
 
 /*
 * Commit Page
@@ -931,8 +934,6 @@ Merge requests
 */
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
-$mr-widget-margin-left: 40px;
-$mr-review-bar-height: calc(2rem + 13px);
 
 /*
 Compare Branches
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index 97dd7edef13..bd327082e20 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -28,8 +28,24 @@
     border-bottom: 1px solid $border;
   }
 
-  a {
+  button {
     color: $link;
+    border: 0;
+    background: transparent;
+
+    &[disabled] {
+      color: desaturate($link, 100%);
+      opacity: 0.5;
+      cursor: default;
+    }
+
+    &:hover:not([disabled]) {
+      text-decoration: underline;
+    }
+
+    &:not(:focus-visible) {
+      outline: 0;
+    }
   }
 }
 
@@ -37,11 +53,11 @@
   transition: border-left 0.1s ease-out;
 
   &.coverage {
-    border-left: 4px solid $coverage;
+    border-left: 2px solid $coverage;
   }
 
   &.no-coverage {
-    border-left: 2px solid $no-coverage;
+    border-left: 4px solid $no-coverage;
   }
 }
 
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 0b696f1be60..28878280d24 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -36,6 +36,7 @@ $dark-cm: #969896;
 $dark-cp: #969896;
 $dark-c1: #969896;
 $dark-cs: #969896;
+$dark-cd: #969896;
 $dark-gd: #c66;
 $dark-gh: #8abeb7;
 $dark-gi: #b5bd68;
@@ -168,8 +169,8 @@ $dark-il: #de935f;
       }
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
@@ -236,6 +237,7 @@ $dark-il: #de935f;
   .cp { color: $dark-cp; } /* Comment.Preproc */
   .c1 { color: $dark-c1; } /* Comment.Single */
   .cs { color: $dark-cs; } /* Comment.Special */
+  .cd { color: $dark-cd; } /* Comment.Doc */
   .gd { color: $dark-gd; } /* Generic.Deleted */
   .ge { font-style: italic; } /* Generic.Emph */
   .gh { /* Generic.Heading */
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index ae72c0b6bf4..6faf1cffdef 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -38,6 +38,7 @@ $monokai-cm: #75715e;
 $monokai-cp: #75715e;
 $monokai-c1: #75715e;
 $monokai-cs: #75715e;
+$monokai-cd: #75715e;
 $monokai-kc: #66d9ef;
 $monokai-kd: #66d9ef;
 $monokai-kn: #f92672;
@@ -169,8 +170,8 @@ $monokai-gh: #75715e;
       }
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
@@ -240,6 +241,7 @@ $monokai-gh: #75715e;
   .cp { color: $monokai-cp; } /* Comment.Preproc */
   .c1 { color: $monokai-c1; } /* Comment.Single */
   .cs { color: $monokai-cs; } /* Comment.Special */
+  .cd { color: $monokai-cd; } /* Comment.Doc */
   .ge { font-style: italic; } /* Generic.Emph */
   .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */
   .kc { color: $monokai-kc; } /* Keyword.Constant */
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index 913b289d808..9c28d9463dc 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -66,9 +66,9 @@
       }
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
-    &.code-search-line:hover {
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
+    &:not(.match) &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
       }
@@ -204,6 +204,7 @@
   .cp { color: $gl-text-color; } /* Comment.Preproc */
   .c1 { color: $gl-text-color; } /* Comment.Single */
   .cs { color: $gl-text-color; } /* Comment.Special */
+  .cd { color: $gl-text-color; } /* Comment.Doc */
   .ge { color: $gl-text-color; } /* Generic.Emph */
   .gr { color: $gl-text-color; } /* Generic.Error */
   .gh { color: $gl-text-color; } /* Generic.Heading */
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index eee699ca4c2..c9f889c79fc 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -35,6 +35,7 @@ $solarized-dark-cm: #586e75;
 $solarized-dark-cp: #859900;
 $solarized-dark-c1: #586e75;
 $solarized-dark-cs: #859900;
+$solarized-dark-cd: #586e75;
 $solarized-dark-gd: #2aa198;
 $solarized-dark-ge: #93a1a1;
 $solarized-dark-gr: #dc322f;
@@ -148,8 +149,8 @@ $solarized-dark-il: #2aa198;
       @include line-coverage-border-color($solarized-dark-coverage, $solarized-dark-no-coverage);
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
@@ -258,6 +259,7 @@ $solarized-dark-il: #2aa198;
   .cp { color: $solarized-dark-cp; } /* Comment.Preproc */
   .c1 { color: $solarized-dark-c1; } /* Comment.Single */
   .cs { color: $solarized-dark-cs; } /* Comment.Special */
+  .cd { color: $solarized-dark-cd; } /* Comment.Doc */
   .gd { color: $solarized-dark-gd; } /* Generic.Deleted */
   .ge { /* Generic.Emph */
     color: $solarized-dark-ge;
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 8c5e1f7318b..0108d7e496f 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -37,6 +37,7 @@ $solarized-light-cm: #93a1a1;
 $solarized-light-cp: #859900;
 $solarized-light-c1: #93a1a1;
 $solarized-light-cs: #859900;
+$solarized-light-cd: #93a1a1;
 $solarized-light-gd: #2aa198;
 $solarized-light-ge: #586e75;
 $solarized-light-gr: #dc322f;
@@ -168,8 +169,8 @@ $solarized-light-il: #2aa198;
       }
     }
 
-    .diff-grid-left:hover,
-    .diff-grid-right:hover,
+    &:not(.match) .diff-grid-left:hover,
+    &:not(.match) .diff-grid-right:hover,
     &.code-search-line:hover {
       .diff-line-num:not(.empty-cell) {
         @include line-number-hover;
@@ -266,6 +267,7 @@ $solarized-light-il: #2aa198;
   .cp { color: $solarized-light-cp; } /* Comment.Preproc */
   .c1 { color: $solarized-light-c1; } /* Comment.Single */
   .cs { color: $solarized-light-cs; } /* Comment.Special */
+  .cd { color: $solarized-light-cd; } /* Comment.Doc */
   .gd { color: $solarized-light-gd; } /* Generic.Deleted */
   .ge { /* Generic.Emph */
     color: $solarized-light-ge;
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 80052f4a4d5..91d8f4a1ba5 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -18,6 +18,7 @@ $white-cm: #998;
 $white-cp: #999;
 $white-c1: #998;
 $white-cs: #999;
+$white-cd: #998;
 $white-gd: $black;
 $white-gd-bg: #fdd;
 $white-gd-x: $black;
@@ -118,6 +119,15 @@ pre.code,
 
 .line_expansion {
   @include diff-expansion($gray-light, $border-color, $blue-600);
+
+  &.diff-tr:last-child {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+
+    .diff-td {
+      border-bottom: 0;
+    }
+  }
 }
 
 // Diff line
@@ -128,8 +138,8 @@ pre.code,
     @include match-line;
   }
 
-  .diff-grid-left:hover,
-  .diff-grid-right:hover,
+  &:not(.match) .diff-grid-left:hover,
+  &:not(.match) .diff-grid-right:hover,
   &.code-search-line:hover {
     .diff-line-num:not(.empty-cell):not(.conflict_marker_their):not(.conflict_marker_our) {
       @include line-number-hover;
@@ -281,6 +291,9 @@ span.highlight_word {
   font-weight: $gl-font-weight-bold;
   font-style: italic; }
 
+.cd { color: $white-cd;
+  font-style: italic; }
+
 .gd {
   color: $white-gd;
   background-color: $white-gd-bg;
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
index 75c2428c1d4..fd212d14e30 100644
--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -22,6 +22,7 @@ $highlighted-cm: #998;
 $highlighted-cp: #999;
 $highlighted-c1: #998;
 $highlighted-cs: #999;
+$highlighted-cd: #998;
 $highlighted-gd: #000;
 $highlighted-gd-bg: #fdd;
 $highlighted-gd-x: #000;
@@ -173,6 +174,9 @@ span.highlight_word {
   font-weight: $gl-font-weight-bold;
   font-style: italic; }
 
+.cd { color: $highlighted-cd;
+  font-style: italic; }
+
 .gd {
   color: $highlighted-gd;
   background-color: $highlighted-gd-bg;
diff --git a/app/assets/stylesheets/page_bundles/dashboard_projects.scss b/app/assets/stylesheets/page_bundles/dashboard_projects.scss
new file mode 100644
index 00000000000..eb0e1701b7f
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/dashboard_projects.scss
@@ -0,0 +1,35 @@
+@import 'mixins_and_variables_and_functions';
+
+.blank-state {
+  padding: 20px 50px;
+  min-height: 240px;
+  width: calc(50% - #{$gl-padding-8});
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    padding: 50px 20px;
+  }
+}
+
+.blank-state-link {
+  &:hover {
+    background-color: $gray-light;
+    text-decoration: none;
+    color: $gl-text-color;
+  }
+}
+
+.blank-state-icon {
+  svg {
+    display: block;
+  }
+}
+
+.blank-state-body {
+  @include media-breakpoint-down(sm) {
+    text-align: center;
+    margin-top: 20px;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index d37171bc75e..6c270852e53 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -630,7 +630,6 @@ $ide-commit-header-height: 48px;
       width: 1px;
       background: var(--ide-highlight-background, $white);
     }
-
   }
 
   &.is-right {
@@ -642,17 +641,6 @@ $ide-commit-header-height: 48px;
       left: -1px;
     }
   }
-
-  .ide-commit-badge {
-    background-color: var(--ide-highlight-accent, $almost-black) !important;
-    color: var(--ide-highlight-background, $white) !important;
-    position: absolute;
-    left: 38px;
-    top: $gl-padding-8;
-    font-size: $gl-font-size-12;
-    padding: 2px $gl-padding-4;
-    font-weight: $gl-font-weight-bold !important;
-  }
 }
 
 .ide-activity-bar {
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index 9fe0490571e..1c8fd7e2590 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -40,10 +40,6 @@ $header-height: 40px;
   max-width: 1000px;
 }
 
-.jira-connect-app-body {
-  max-width: 768px;
-}
-
 // needed for external_link
 svg.s16 {
   width: 16px;
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 37ab2e2be2b..63e951be698 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -1,5 +1,10 @@
 @import 'mixins_and_variables_and_functions';
 
+$mr-review-bar-height: calc(2rem + 13px);
+$mr-widget-margin-left: 40px;
+$mr-widget-min-height: 69px;
+$tabs-holder-z-index: 250;
+
 .compare-versions-container {
   min-width: 0;
 }
@@ -45,11 +50,9 @@
   top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
   // stylelint-disable-next-line length-zero-no-unit
   max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
-  z-index: 205;
 
   .drag-handle {
     bottom: 16px;
-    transform: translateX(10px);
   }
 }
 
@@ -94,7 +97,7 @@
   line-height: 0;
 }
 
-@media (max-width: map-get($grid-breakpoints, md)-1) {
+@media (max-width: map-get($grid-breakpoints, lg)-1) {
   .diffs .files {
     .diff-tree-list {
       position: relative;
@@ -110,6 +113,638 @@
   }
 }
 
+.ci-widget-container {
+  justify-content: space-between;
+  flex: 1;
+  flex-direction: row;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+
+    .stage-cell .stage-container {
+      margin-top: 16px;
+    }
+
+    .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
+      transform: initial;
+    }
+  }
+
+  .coverage {
+    font-size: 12px;
+    color: var(--gray-500, $gray-500);
+    line-height: initial;
+  }
+}
+
+.deploy-body {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  @include media-breakpoint-up(xs) {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .deployment-info {
+      margin-bottom: $gl-padding;
+    }
+  }
+
+  > *:not(:last-child) {
+    margin-right: 0.3em;
+  }
+
+  svg {
+    vertical-align: text-top;
+  }
+
+  .deployment-info {
+    flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 100px;
+
+    @include media-breakpoint-up(xs) {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  .dropdown-menu {
+    width: 400px;
+  }
+}
+
+.deploy-heading,
+.merge-train-position-indicator {
+  @include media-breakpoint-up(md) {
+    padding: $gl-padding-8 $gl-padding;
+  }
+
+  .media-body {
+    min-width: 0;
+    font-size: 12px;
+    margin-left: 32px;
+  }
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--border-color, $border-color);
+  }
+}
+
+.diff-file-row.is-active {
+  background-color: var(--gray-50, $gray-50);
+}
+
+.mr-conflict-loader {
+  max-width: 334px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
+
+.mr-info-list {
+  clear: left;
+  position: relative;
+  padding-top: 4px;
+
+  p {
+    margin: 0;
+    position: relative;
+    padding: 4px 0;
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+  }
+
+  &.mr-memory-usage {
+    p {
+      float: left;
+    }
+
+    .memory-graph-container {
+      float: left;
+      margin-left: 5px;
+    }
+  }
+}
+
+.mr-memory-usage {
+  width: 100%;
+
+  p.usage-info-loading .usage-info-load-spinner {
+    margin-right: 10px;
+    font-size: 16px;
+  }
+}
+
+.mr-ready-to-merge-loader {
+  max-width: 418px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
+
+.mr-section-container {
+  border: 1px solid var(--border-color, $border-color);
+  border-radius: $border-radius-default;
+  background: var(--white, $white);
+
+  > .mr-widget-border-top:first-of-type {
+    border-top: 0;
+  }
+}
+
+.mr-source-target {
+  flex-wrap: wrap;
+  padding: $gl-padding;
+  background: var(--white, $white);
+  min-height: $mr-widget-min-height;
+
+  @include media-breakpoint-up(md) {
+    align-items: center;
+  }
+
+  .git-merge-container {
+    justify-content: space-between;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+      align-items: stretch;
+
+      .branch-actions {
+        margin-top: 16px;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      .branch-actions {
+        align-self: center;
+        margin-left: $gl-padding;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .diverged-commits-count {
+    color: var(--gray-500, $gl-text-color-secondary);
+  }
+}
+
+.mr-state-widget {
+  color: var(--gl-text-color, $gl-text-color);
+
+  .commit-message-edit {
+    border-radius: $border-radius-default;
+  }
+
+  .mr-widget-section:not(:first-child) {
+    border-top: solid 1px var(--border-color, $border-color);
+  }
+
+  .mr-widget-alert-container + .mr-widget-section {
+    border-top: 0;
+  }
+
+  .mr-fast-forward-message {
+    padding-left: $gl-padding-50;
+    padding-bottom: $gl-padding;
+  }
+
+  .commits-list {
+    > li {
+      padding: $gl-padding;
+
+      @include media-breakpoint-up(md) {
+        margin-left: $gl-spacing-scale-7;
+      }
+    }
+  }
+
+  .mr-commit-dropdown {
+    .dropdown-menu {
+      @include media-breakpoint-up(md) {
+        width: 150%;
+      }
+    }
+  }
+
+  .mr-report {
+    padding: 0;
+
+    > .media {
+      padding: $gl-padding;
+    }
+  }
+
+  form {
+    margin-bottom: 0;
+
+    .clearfix {
+      margin-bottom: 0;
+    }
+  }
+
+  label {
+    margin-bottom: 0;
+  }
+
+  .btn {
+    font-size: $gl-font-size;
+  }
+
+  .accept-merge-holder {
+    .accept-action {
+      display: inline-block;
+      float: left;
+    }
+  }
+
+  .ci-widget {
+    color: var(--gl-text-color, $gl-text-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @include media-breakpoint-down(xs) {
+      flex-wrap: wrap;
+    }
+
+    .ci-widget-content {
+      display: flex;
+      align-items: center;
+      flex: 1;
+    }
+  }
+
+  .mr-widget-icon {
+    font-size: 22px;
+  }
+
+  .mr-loading-icon {
+    margin: 3px 0;
+  }
+
+  .ci-status-icon svg {
+    margin: 3px 0;
+    position: relative;
+    overflow: visible;
+    display: block;
+  }
+
+  .mr-widget-pipeline-graph {
+    .dropdown-menu {
+      z-index: $zindex-dropdown-menu;
+    }
+  }
+
+  .normal {
+    flex: 1;
+    flex-basis: auto;
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+
+  .label-branch {
+    @include gl-font-monospace;
+    font-size: 95%;
+    color: var(--gl-text-color, $gl-text-color);
+    font-weight: normal;
+    overflow: hidden;
+    word-break: break-all;
+  }
+
+  .deploy-link,
+  .label-branch {
+    &.label-truncate {
+      // NOTE: This selector targets its children because some of the HTML comes from
+      // 'source_branch_link'. Once this external HTML is no longer used, we could
+      // simplify this.
+      > a,
+      > span {
+        display: inline-block;
+        max-width: 12.5em;
+        margin-bottom: -6px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  .mr-widget-body {
+    &:not(.mr-widget-body-line-height-1) {
+      line-height: 28px;
+    }
+
+    @include clearfix;
+
+    .approve-btn {
+      margin-right: 5px;
+    }
+
+    h4 {
+      float: left;
+      font-weight: $gl-font-weight-bold;
+      font-size: 14px;
+      line-height: inherit;
+      margin-top: 0;
+      margin-bottom: 0;
+
+      time {
+        font-weight: $gl-font-weight-normal;
+      }
+    }
+
+    .btn-grouped {
+      margin-left: 0;
+      margin-right: 7px;
+    }
+
+    label {
+      font-weight: $gl-font-weight-normal;
+    }
+
+    .spacing {
+      margin: 0 0 0 10px;
+    }
+
+    .bold,
+    .gl-font-weight-bold {
+      font-weight: $gl-font-weight-bold;
+      color: var(--gray-600, $gray-600);
+      margin-left: 10px;
+    }
+
+    .state-label {
+      font-weight: $gl-font-weight-bold;
+      padding-right: 10px;
+    }
+
+    .danger {
+      color: var(--red-500, $red-500);
+    }
+
+    .spacing,
+    .bold,
+    .gl-font-weight-bold {
+      vertical-align: middle;
+    }
+
+    .dropdown-menu {
+      li a {
+        padding: 5px;
+      }
+
+      .merge-opt-icon {
+        line-height: 1.5;
+      }
+
+      .merge-opt-title {
+        margin-left: 8px;
+      }
+    }
+
+    .has-custom-error {
+      display: inline-block;
+    }
+
+    @include media-breakpoint-down(xs) {
+      p {
+        font-size: 13px;
+      }
+
+      .btn-grouped {
+        float: none;
+        margin-right: 0;
+      }
+
+      .accept-action {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    .commit-message-editor {
+      label {
+        padding: 0;
+      }
+    }
+
+    &.mr-widget-empty-state {
+      line-height: 20px;
+      padding: $gl-padding;
+
+      .artwork {
+
+        @include media-breakpoint-down(md) {
+          margin-bottom: $gl-padding;
+        }
+      }
+
+      .text {
+        p {
+          margin-top: $gl-padding;
+        }
+
+        .highlight {
+          margin: 0 0 $gl-padding;
+          font-weight: $gl-font-weight-bold;
+        }
+      }
+    }
+
+    &.mr-pipeline-suggest {
+      border-radius: $border-radius-default;
+      line-height: 20px;
+      border: 1px solid var(--border-color, $border-color);
+
+      .circle-icon-container {
+        color: var(--gray-100, $gl-text-color-quaternary);
+      }
+    }
+  }
+
+  .ci-coverage {
+    float: right;
+  }
+
+  .stop-env-container {
+    color: var(--gl-text-color, $gl-text-color);
+    float: right;
+
+    a {
+      color: var(--gl-text-color, $gl-text-color);
+    }
+  }
+}
+
+.mr-widget-alert-container {
+  $radius: $border-radius-default - 1px;
+
+  border-radius: $radius $radius 0 0;
+
+  .gl-alert:not(:last-child) {
+    margin-bottom: 1px;
+  }
+}
+
+.mr-widget-body,
+.mr-widget-content {
+  padding: $gl-padding;
+}
+
+.mr-widget-border-top {
+  border-top: 1px solid var(--border-color, $border-color);
+}
+
+.mr-widget-extension {
+  border-top: 1px solid var(--border-color, $border-color);
+  background-color: var(--gray-50, $gray-50);
+
+  &.clickable:hover {
+    background-color: var(--gray-100, $gray-100);
+    cursor: pointer;
+  }
+}
+
+.mr-widget-extension-icon::before {
+  @include gl-content-empty;
+  @include gl-absolute;
+  @include gl-left-0;
+  @include gl-top-0;
+  @include gl-opacity-3;
+  @include gl-border-solid;
+  @include gl-border-4;
+  @include gl-rounded-full;
+
+  width: 24px;
+  height: 24px;
+}
+
+.mr-widget-heading {
+  position: relative;
+  border: 1px solid var(--border-color, $border-color);
+  border-radius: $border-radius-default;
+  background: var(--white, $white);
+
+  .gl-skeleton-loader {
+    display: block;
+  }
+}
+
+.mr-widget-info {
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+}
+
+.mr-widget-margin-left {
+  margin-left: $mr-widget-margin-left;
+}
+
+.mr-widget-section {
+  .code-text {
+    flex: 1;
+  }
+}
+
+.mr-widget-workflow {
+  margin-top: $gl-padding;
+  position: relative;
+
+  &::before {
+    content: '';
+    border-left: 1px solid var(--gray-100, $gray-100);
+    position: absolute;
+    left: 28px;
+    top: -17px;
+    height: 16px;
+  }
+}
+
+.mr-version-controls {
+  position: relative;
+  z-index: $tabs-holder-z-index + 10;
+  background: var(--white, $white);
+  color: var(--gl-text-color, $gl-text-color);
+  margin-top: -1px;
+
+  .mr-version-menus-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 16px;
+    z-index: 199;
+    white-space: nowrap;
+
+    .gl-dropdown-toggle {
+      width: auto;
+      max-width: 170px;
+
+      svg {
+        top: 10px;
+        right: 8px;
+      }
+    }
+  }
+
+  .content-block {
+    padding: $gl-padding;
+    border-bottom: 0;
+  }
+
+  .mr-version-dropdown,
+  .mr-version-compare-dropdown {
+    margin: 0 0.5rem;
+  }
+
+  .dropdown-title {
+    color: var(--gl-text-color, $gl-text-color);
+  }
+
+  // Shortening button height by 1px to make compare-versions
+  // header 56px and fit into our 8px design grid
+  .btn {
+    height: 34px;
+  }
+
+  @include media-breakpoint-up(md) {
+    position: -webkit-sticky;
+    position: sticky;
+    top: calc(#{$header-height} + #{$mr-tabs-height});
+
+    .with-system-header & {
+      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
+    }
+
+    .with-system-header.with-performance-bar & {
+      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
+    }
+
+    .mr-version-menus-container {
+      flex-wrap: nowrap;
+    }
+
+    .with-performance-bar & {
+      top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
+    }
+  }
+}
+
 // TODO: Move to GitLab UI
 .mr-extenson-scrim {
   background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1));
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
index 08d9d24d246..989219552a6 100644
--- a/app/assets/stylesheets/page_bundles/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -42,12 +42,6 @@ $status-box-line-height: 26px;
 }
 
 .milestone-content {
-  .issues-count {
-    margin-right: 17px;
-    float: right;
-    width: 105px;
-  }
-
   .issuable-row {
     span {
       a {
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index a9d353a0444..cbb6d68bf35 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -139,7 +139,7 @@
 }
 
 .gl-downstream-pipeline-job-width {
-  width: 240px;
+  width: 170px;
 }
 
 .gl-linked-pipeline-padding {
diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss
index 7f044f081d4..0bc3cc6678c 100644
--- a/app/assets/stylesheets/page_bundles/project.scss
+++ b/app/assets/stylesheets/page_bundles/project.scss
@@ -49,7 +49,7 @@
 .project-repo-buttons {
   .btn {
     svg {
-      fill: $gray-500;
+      fill: var(--gray-500, $gray-500);
     }
   }
 
@@ -80,3 +80,134 @@
     margin-top: $gl-padding-8;
   }
 }
+
+.project-stats,
+.project-buttons {
+  .scrolling-tabs-container {
+    .scrolling-tabs {
+      margin-top: $gl-padding-8;
+      margin-bottom: $gl-padding-8 - $browser-scrollbar-size;
+      padding-bottom: $browser-scrollbar-size;
+      flex-wrap: wrap;
+      border-bottom: 0;
+    }
+
+    .fade-left,
+    .fade-right {
+      top: 0;
+      height: calc(100% - #{$browser-scrollbar-size});
+
+      svg {
+        top: 50%;
+        margin-top: -$gl-padding-8;
+      }
+    }
+
+    .nav {
+      flex-basis: 100%;
+
+      + .nav {
+        margin: $gl-padding-8 0;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+
+      .nav {
+        flex-wrap: nowrap;
+      }
+
+      .nav:first-child {
+        margin-right: $gl-padding-8;
+      }
+    }
+  }
+
+  .nav {
+    > li {
+      display: inline-block;
+
+      &:not(:last-child) {
+        margin-right: $gl-padding;
+      }
+
+      &.right {
+        vertical-align: top;
+        margin-top: 0;
+
+        @include media-breakpoint-up(lg) {
+          float: right;
+        }
+      }
+    }
+
+    .stat-text,
+    .stat-link {
+      padding: $gl-btn-vert-padding 0;
+      background-color: transparent;
+      font-size: $gl-font-size;
+      line-height: $gl-btn-line-height;
+      color: var(--gray-500, $gl-text-color-secondary);
+      white-space: pre-wrap;
+    }
+
+    .stat-link {
+      border-bottom: 0;
+      color: var(--black, $black);
+
+      &:hover,
+      &:focus {
+        text-decoration: underline;
+        border-bottom: 0;
+      }
+
+      .project-stat-value {
+        color: var(--gl-text-color, $gl-text-color);
+      }
+
+      .icon {
+        color: var(--gray-500, $gl-text-color-secondary);
+      }
+
+      .add-license-link {
+        &,
+        .icon {
+          color: var(--blue-600, $blue-600);
+        }
+      }
+    }
+
+    .btn {
+      margin-bottom: $gl-padding-8;
+      padding: $gl-btn-vert-padding $gl-btn-padding;
+      line-height: $gl-btn-line-height;
+
+      .icon {
+        top: 0;
+      }
+    }
+  }
+}
+
+.project-buttons {
+  .nav > li:not(:last-child) {
+    margin-right: $gl-padding-8;
+  }
+}
+
+.git-empty {
+  margin-bottom: 7px;
+
+  h5 {
+    color: var(--gl-text-color, $gl-text-color);
+  }
+
+  .light-well {
+    border-radius: 2px;
+
+    color: var(--gray-600, $well-light-text-color);
+    font-size: 13px;
+    line-height: 1.6em;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/projects_edit.scss b/app/assets/stylesheets/page_bundles/projects_edit.scss
new file mode 100644
index 00000000000..9a8b4ffcdd7
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/projects_edit.scss
@@ -0,0 +1,25 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.project-repo-select {
+  transition: background 2s ease-out;
+
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .highlight-changes & {
+    background: var(--green-50, $highlight-changes-color);
+    transition: none;
+  }
+}
+
+.project-feature-controls {
+  max-width: 432px;
+}
+
+.project-feature-setting-group {
+  .project-feature-controls {
+    max-width: 400px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 5a091c14e53..d9ad82d4e4b 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -7,13 +7,6 @@
     }
   }
 
-  .gl-card-body {
-    @include media-breakpoint-up(sm) {
-      @include gl-pt-2;
-      min-height: 372px;
-    }
-  }
-
   @include media-breakpoint-down(xs) {
     .nav-controls {
       @include gl-w-full;
@@ -27,6 +20,13 @@
   }
 }
 
+.cluster-card-item {
+  @include media-breakpoint-up(sm) {
+    @include gl-pt-2;
+    min-height: 372px;
+  }
+}
+
 .agent-activity-list {
   .system-note .timeline-entry-inner {
     .timeline-icon {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index ca6c9b9a073..7ac3ef2221f 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -112,19 +112,6 @@ table.pipeline-project-metrics tr td {
   font-weight: $gl-font-weight-normal;
 }
 
-.js-groups-dropdown {
-  width: 100%;
-}
-
-.dropdown-group-transfer {
-  bottom: 100%;
-  top: initial;
-
-  .dropdown-content {
-    overflow-y: unset;
-  }
-}
-
 .groups-list-tree-container {
   .has-no-search-results {
     text-align: center;
diff --git a/app/assets/stylesheets/pages/hierarchy.scss b/app/assets/stylesheets/pages/hierarchy.scss
new file mode 100644
index 00000000000..0812e4cc41e
--- /dev/null
+++ b/app/assets/stylesheets/pages/hierarchy.scss
@@ -0,0 +1,15 @@
+.hierarchy-rounded-arrow-tail {
+  position: absolute;
+  top: 4px;
+  left: 5px;
+  height: calc(100% - 20px);
+}
+
+.hierarchy-icon-wrapper {
+  height: $default-icon-size;
+  width: $default-icon-size;
+}
+
+.hierarchy-rounded-arrow {
+  transform: scale(1, -1) rotate(90deg);
+}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index cdef843c9b4..fa07d29b536 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -148,12 +148,7 @@
   }
 
   .gl-label .gl-label-link:hover {
-    text-decoration: none;
     color: inherit;
-
-    .gl-label-text:last-of-type {
-      text-decoration: underline;
-    }
   }
 
   .btn-link {
@@ -274,16 +269,10 @@
       font-weight: $gl-font-weight-normal;
     }
 
-    .no-value,
-    .btn-default-hover-link,
-    .btn-secondary-hover-link {
+    .no-value {
       color: $gl-text-color-secondary;
     }
 
-    .btn-secondary-hover-link:hover {
-      color: $blue-600;
-    }
-
     .sidebar-collapsed-icon {
       display: none;
     }
@@ -753,6 +742,26 @@
   }
 }
 
+.sidebar-help-wrap {
+  .sidebar-help-state {
+    margin: 16px -20px -20px;
+    padding: 16px 20px;
+  }
+
+  .help-state-toggle-enter-active {
+    transition: all 0.8s ease;
+  }
+
+  .help-state-toggle-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .help-state-toggle-enter,
+  .help-state-toggle-leave-active {
+    opacity: 0;
+  }
+}
+
 .time-tracker {
   .sidebar-collapsed-icon {
     > .stopwatch-svg {
@@ -770,11 +779,6 @@
     }
   }
 
-  .help-button,
-  .close-help-button {
-    cursor: pointer;
-  }
-
   .compare-meter {
     &.over_estimate {
       .time-remaining,
@@ -787,31 +791,6 @@
   .compare-display-container {
     font-size: 13px;
   }
-
-  .time-tracking-help-state {
-    background: $white;
-    margin: 16px -20px -20px;
-    padding: 16px 20px;
-    border-top: 1px solid $border-gray-light;
-    border-bottom: 1px solid $border-gray-light;
-
-    a:hover {
-      color: $btn-white-active;
-    }
-  }
-
-  .help-state-toggle-enter-active {
-    transition: all 0.8s ease;
-  }
-
-  .help-state-toggle-leave-active {
-    transition: all 0.5s ease;
-  }
-
-  .help-state-toggle-enter,
-  .help-state-toggle-leave-active {
-    opacity: 0;
-  }
 }
 
 .issuable-todo-btn {
@@ -890,3 +869,13 @@
     }
   }
 }
+
+.icon-overlap-and-shadow {
+  filter:
+    drop-shadow(0 1px 0.5px #fff)
+    drop-shadow(1px 0 0.5px #fff)
+    drop-shadow(0 -1px 0.5px #fff)
+    drop-shadow(-1px 0 0.5px #fff);
+  margin-right: -7px;
+  z-index: 1;
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index d77c8a40a79..9bb4c5357e7 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -249,7 +249,9 @@ ul.related-merge-requests > li gl-emoji {
   @include media-breakpoint-up(sm) {
     width: calc(100% - #{$gutter-collapsed-width});
   }
+}
 
+.limit-container-width {
   .issue-sticky-header-text {
     max-width: $limited-layout-width;
   }
@@ -305,3 +307,32 @@ ul.related-merge-requests > li gl-emoji {
 .issuable-header-slide-leave-to {
   transform: translateY(-100%);
 }
+
+.description.work-items-enabled {
+  ul.task-list {
+    > li.task-list-item {
+      padding-inline-start: 2.25rem;
+
+      .js-add-task {
+        svg {
+          visibility: hidden;
+        }
+
+        &:focus svg {
+          visibility: visible;
+        }
+      }
+
+      > input.task-list-item-checkbox {
+        left: 0.875rem;
+      }
+
+      &:hover,
+      &:focus-within {
+        .js-add-task svg {
+          visibility: visible;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index fffea301a4f..4a3ec5992a5 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -242,10 +242,14 @@
     }
 
     .navless-container {
-      padding: 65px 15px; // height of footer + bottom padding of email confirmation link
+      padding: 0 15px 65px; // height of footer + bottom padding of email confirmation link
+    }
+
+    .flash-container {
+      padding-bottom: 65px;
 
       @include media-breakpoint-down(xs) {
-        padding: 0 15px 65px;
+        padding-bottom: 0;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 10026e290e8..f95cff012d0 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -2,8 +2,6 @@
  * MR -> show: Automerge widget
  *
  */
-
-$mr-widget-min-height: 69px;
 $tabs-holder-z-index: 250;
 
 .space-children {
@@ -18,12 +16,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-widget-border-top {
-  border-top: 1px solid $border-color;
-}
-
-.mr-widget-margin-left { margin-left: $mr-widget-margin-left; }
-
 .media-section {
   @include media-breakpoint-down(md) {
     align-items: flex-start;
@@ -42,140 +34,9 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-widget-section {
-  .code-text {
-    flex: 1;
-  }
-}
-
-.mr-widget-heading {
-  position: relative;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  background: var(--white, $white);
-
-  .gl-skeleton-loader {
-    display: block;
-  }
-}
-
-.mr-widget-extension {
-  border-top: 1px solid $border-color;
-  background-color: $gray-50;
-
-  &.clickable:hover {
-    background-color: $gray-100;
-    cursor: pointer;
-  }
-}
-
-.mr-widget-workflow {
-  margin-top: $gl-padding;
-  position: relative;
-
-  &::before {
-    content: '';
-    border-left: 1px solid $gray-100;
-    position: absolute;
-    left: 28px;
-    top: -17px;
-    height: 16px;
-  }
-}
-
-.mr-section-container {
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  background: var(--white, $white);
-
-  > .mr-widget-border-top:first-of-type {
-    border-top: 0;
-  }
-}
-
-.mr-widget-body,
-.mr-widget-content,
-.mr-widget-footer {
-  padding: $gl-padding;
-}
-
-.mr-widget-info {
-  padding-left: $gl-padding;
-  padding-right: $gl-padding;
-}
-
 .mr-state-widget {
-  color: $gl-text-color;
-
-  .commit-message-edit {
-    border-radius: $border-radius-default;
-  }
-
-  .mr-widget-section:not(:first-child),
-  .mr-widget-footer {
-    border-top: solid 1px $border-color;
-  }
-
-  .mr-widget-alert-container + .mr-widget-section {
-    border-top: 0;
-  }
-
-  .mr-fast-forward-message {
-    padding-left: $gl-padding-50;
-    padding-bottom: $gl-padding;
-  }
-
-  .commits-list {
-    > li {
-      padding: $gl-padding;
-
-      @include media-breakpoint-up(md) {
-        margin-left: $gl-spacing-scale-7;
-      }
-    }
-  }
-
-  .mr-commit-dropdown {
-    .dropdown-menu {
-      @include media-breakpoint-up(md) {
-        width: 150%;
-      }
-    }
-  }
-
-  .mr-widget-footer {
-    padding: 0;
-  }
-
-  .mr-report {
-    padding: 0;
-
-    > .media {
-      padding: $gl-padding;
-    }
-  }
-
-  form {
-    margin-bottom: 0;
-
-    .clearfix {
-      margin-bottom: 0;
-    }
-  }
-
-  label {
-    margin-bottom: 0;
-  }
-
-  .btn {
-    font-size: $gl-font-size;
-  }
-
   .accept-merge-holder {
     .accept-action {
-      display: inline-block;
-      float: left;
-
       .accept-merge-request {
         &.ci-preparing,
         &.ci-pending,
@@ -192,227 +53,6 @@ $tabs-holder-z-index: 250;
       }
     }
   }
-
-  .ci-widget {
-    color: $gl-text-color;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    @include media-breakpoint-down(xs) {
-      flex-wrap: wrap;
-    }
-
-    .ci-widget-content {
-      display: flex;
-      align-items: center;
-      flex: 1;
-    }
-  }
-
-  .mr-widget-icon {
-    font-size: 22px;
-  }
-
-  .mr-loading-icon {
-    margin: 3px 0;
-  }
-
-  .ci-status-icon svg {
-    margin: 3px 0;
-    position: relative;
-    overflow: visible;
-    display: block;
-  }
-
-  .mr-widget-pipeline-graph {
-    .dropdown-menu {
-      z-index: $zindex-dropdown-menu;
-    }
-  }
-
-  .normal {
-    flex: 1;
-    flex-basis: auto;
-  }
-
-  .capitalize {
-    text-transform: capitalize;
-  }
-
-  .label-branch {
-    @include gl-font-monospace;
-    font-size: 95%;
-    color: $gl-text-color;
-    font-weight: normal;
-    overflow: hidden;
-    word-break: break-all;
-  }
-
-  .deploy-link,
-  .label-branch {
-    &.label-truncate {
-      // NOTE: This selector targets its children because some of the HTML comes from
-      // 'source_branch_link'. Once this external HTML is no longer used, we could
-      // simplify this.
-      > a,
-      > span {
-        display: inline-block;
-        max-width: 12.5em;
-        margin-bottom: -3px;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        line-height: 14px;
-        overflow: hidden;
-      }
-    }
-  }
-
-  .mr-widget-body {
-    &:not(.mr-widget-body-line-height-1) {
-      line-height: 28px;
-    }
-
-    @include clearfix;
-
-    .approve-btn {
-      margin-right: 5px;
-    }
-
-    h4 {
-      float: left;
-      font-weight: $gl-font-weight-bold;
-      font-size: 14px;
-      line-height: inherit;
-      margin-top: 0;
-      margin-bottom: 0;
-
-      time {
-        font-weight: $gl-font-weight-normal;
-      }
-    }
-
-    .btn-grouped {
-      margin-left: 0;
-      margin-right: 7px;
-    }
-
-    label {
-      font-weight: $gl-font-weight-normal;
-    }
-
-    .spacing {
-      margin: 0 0 0 10px;
-    }
-
-    .bold,
-    .gl-font-weight-bold {
-      font-weight: $gl-font-weight-bold;
-      color: $gray-600;
-      margin-left: 10px;
-    }
-
-    .state-label {
-      font-weight: $gl-font-weight-bold;
-      padding-right: 10px;
-    }
-
-    .danger {
-      color: $red-500;
-    }
-
-    .spacing,
-    .bold,
-    .gl-font-weight-bold {
-      vertical-align: middle;
-    }
-
-    .dropdown-menu {
-      li a {
-        padding: 5px;
-      }
-
-      .merge-opt-icon {
-        line-height: 1.5;
-      }
-
-      .merge-opt-title {
-        margin-left: 8px;
-      }
-    }
-
-    .has-custom-error {
-      display: inline-block;
-    }
-
-    @include media-breakpoint-down(xs) {
-      p {
-        font-size: 13px;
-      }
-
-      .btn-grouped {
-        float: none;
-        margin-right: 0;
-      }
-
-      .accept-action {
-        width: 100%;
-        text-align: center;
-      }
-    }
-
-    .commit-message-editor {
-      label {
-        padding: 0;
-      }
-    }
-
-    &.mr-widget-empty-state {
-      line-height: 20px;
-      padding: $gl-padding;
-
-      .artwork {
-
-        @include media-breakpoint-down(md) {
-          margin-bottom: $gl-padding;
-        }
-      }
-
-      .text {
-        p {
-          margin-top: $gl-padding;
-        }
-
-        .highlight {
-          margin: 0 0 $gl-padding;
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-    }
-
-    &.mr-pipeline-suggest {
-      border-radius: $border-radius-default;
-      line-height: 20px;
-      border: 1px solid $border-color;
-
-      .circle-icon-container {
-        color: $gl-text-color-quaternary;
-      }
-    }
-  }
-
-  .ci-coverage {
-    float: right;
-  }
-
-  .stop-env-container {
-    color: $gl-text-color;
-    float: right;
-
-    a {
-      color: $gl-text-color;
-    }
-  }
 }
 
 .mr_source_commit,
@@ -478,72 +118,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-info-list {
-  clear: left;
-  position: relative;
-  padding-top: 4px;
-
-  p {
-    margin: 0;
-    position: relative;
-    padding: 4px 0;
-
-    &:last-child {
-      padding-bottom: 0;
-    }
-  }
-
-  &.mr-memory-usage {
-    p {
-      float: left;
-    }
-
-    .memory-graph-container {
-      float: left;
-      margin-left: 5px;
-    }
-  }
-}
-
-.mr-source-target {
-  flex-wrap: wrap;
-  padding: $gl-padding;
-  background: var(--white, $white);
-  min-height: $mr-widget-min-height;
-
-  @include media-breakpoint-up(md) {
-    align-items: center;
-  }
-
-  .git-merge-container {
-    justify-content: space-between;
-    flex: 1;
-    flex-direction: row;
-    align-items: center;
-
-    @include media-breakpoint-down(md) {
-      flex-direction: column;
-      align-items: stretch;
-
-      .branch-actions {
-        margin-top: 16px;
-      }
-    }
-
-    @include media-breakpoint-up(lg) {
-      .branch-actions {
-        align-self: center;
-        margin-left: $gl-padding;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .diverged-commits-count {
-    color: $gl-text-color-secondary;
-  }
-}
-
 .card-new-merge-request {
   .card-header {
     padding: 5px 10px;
@@ -640,79 +214,14 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-version-controls {
-  position: relative;
-  z-index: $tabs-holder-z-index + 10;
-  background: $white;
-  color: $gl-text-color;
-  margin-top: -1px;
-
-  .mr-version-menus-container {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 16px;
-    z-index: 199;
-    white-space: nowrap;
-
-    .gl-dropdown-toggle {
-      width: auto;
-      max-width: 170px;
-
-      svg {
-        top: 10px;
-        right: 8px;
-      }
-    }
-  }
-
-  .content-block {
-    padding: $gl-padding;
-    border-bottom: 0;
-  }
-
-  .mr-version-dropdown,
-  .mr-version-compare-dropdown {
-    margin: 0 0.5rem;
-  }
-
-  .dropdown-title {
-    color: $gl-text-color;
-  }
-
-  // Shortening button height by 1px to make compare-versions
-  // header 56px and fit into our 8px design grid
-  .btn {
-    height: 34px;
-  }
-
-  @include media-breakpoint-up(md) {
-    position: -webkit-sticky;
-    position: sticky;
-    top: calc(#{$header-height} + #{$mr-tabs-height});
-
-    .with-system-header & {
-      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height});
-    }
-
-    .with-system-header.with-performance-bar & {
-      top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height});
-    }
-
-    .mr-version-menus-container {
-      flex-wrap: nowrap;
-    }
-
-    .with-performance-bar & {
-      top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height});
-    }
-  }
-}
-
 .merge-request-tabs-holder,
 .epic-tabs-holder {
   top: $header-height;
   z-index: $tabs-holder-z-index;
+  margin-left: -$gl-padding;
+  margin-right: -$gl-padding;
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
   background-color: $body-bg;
   border-bottom: 1px solid $border-color;
 
@@ -834,80 +343,10 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.mr-memory-usage {
-  width: 100%;
-
-  p.usage-info-loading .usage-info-load-spinner {
-    margin-right: 10px;
-    font-size: 16px;
-  }
-}
-
 .fork-sprite {
   margin-right: -5px;
 }
 
-.deploy-heading,
-.merge-train-position-indicator {
-  @include media-breakpoint-up(md) {
-    padding: $gl-padding-8 $gl-padding;
-  }
-
-  .media-body {
-    min-width: 0;
-    font-size: 12px;
-    margin-left: 32px;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid $border-color;
-  }
-}
-
-.deploy-body {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  @include media-breakpoint-up(xs) {
-    flex-wrap: nowrap;
-    white-space: nowrap;
-  }
-
-  @include media-breakpoint-down(md) {
-    flex-direction: column;
-    align-items: flex-start;
-
-    .deployment-info {
-      margin-bottom: $gl-padding;
-    }
-  }
-
-  > *:not(:last-child) {
-    margin-right: 0.3em;
-  }
-
-  svg {
-    vertical-align: text-top;
-  }
-
-  .deployment-info {
-    flex: 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    min-width: 100px;
-
-    @include media-breakpoint-up(xs) {
-      min-width: 0;
-      max-width: 100%;
-    }
-  }
-
-  .dropdown-menu {
-    width: 400px;
-  }
-}
-
 // Hack alert: we've rewritten `btn` class in a way that
 // we've broken it and it is not possible to use with `btn-link`
 // which causes a blank button when it's disabled and hovering
@@ -925,30 +364,6 @@ $tabs-holder-z-index: 250;
   }
 }
 
-.ci-widget-container {
-  justify-content: space-between;
-  flex: 1;
-  flex-direction: row;
-
-  @include media-breakpoint-down(sm) {
-    flex-direction: column;
-
-    .stage-cell .stage-container {
-      margin-top: 16px;
-    }
-
-    .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
-      transform: initial;
-    }
-  }
-
-  .coverage {
-    font-size: 12px;
-    color: $gray-500;
-    line-height: initial;
-  }
-}
-
 .merge-request-details .file-finder-overlay.diff-file-finder {
   position: fixed;
   z-index: 99999;
@@ -964,47 +379,3 @@ $tabs-holder-z-index: 250;
     }
   }
 }
-
-.diff-file-row.is-active {
-  background-color: $gray-50;
-}
-
-.mr-conflict-loader {
-  max-width: 334px;
-
-  > svg {
-    vertical-align: middle;
-  }
-}
-
-.mr-ready-to-merge-loader {
-  max-width: 418px;
-
-  > svg {
-    vertical-align: middle;
-  }
-}
-
-.mr-widget-alert-container {
-  $radius: $border-radius-default - 1px;
-
-  border-radius: $radius $radius 0 0;
-
-  .gl-alert:not(:last-child) {
-    margin-bottom: 1px;
-  }
-}
-
-.mr-widget-extension-icon::before {
-  @include gl-content-empty;
-  @include gl-absolute;
-  @include gl-left-0;
-  @include gl-top-0;
-  @include gl-opacity-3;
-  @include gl-border-solid;
-  @include gl-border-4;
-  @include gl-rounded-full;
-
-  width: 24px;
-  height: 24px;
-}
diff --git a/app/assets/stylesheets/pages/pages.scss b/app/assets/stylesheets/pages/pages.scss
index ebaf875ad8f..2de33f20595 100644
--- a/app/assets/stylesheets/pages/pages.scss
+++ b/app/assets/stylesheets/pages/pages.scss
@@ -42,8 +42,6 @@
   }
 
   :first-child {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
     line-height: $gl-line-height;
   }
 
@@ -52,7 +50,6 @@
   }
 
   :last-child {
-    border-bottom-right-radius: $border-radius-default;
-    border-top-right-radius: $border-radius-default;
+    border-radius: $border-radius-default;
   }
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 6b4d7c2520c..ac3d4dad585 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -52,37 +52,6 @@
   }
 }
 
-// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components
-.project-repo-select {
-  transition: background 2s ease-out;
-
-  &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  .highlight-changes & {
-    background: $highlight-changes-color;
-    transition: none;
-  }
-}
-
-// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components
-.project-feature-controls {
-  max-width: 432px;
-}
-
-// INFO Scoped to settings_panel component in app/assets/javascripts/pages/projects/shared/permissions/components
-.project-feature-setting-group {
-  .project-feature-controls {
-    max-width: 400px;
-  }
-}
-
-.nav > .project-buttons {
-  margin-top: 0;
-}
-
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
@@ -317,121 +286,6 @@
   }
 }
 
-.project-stats,
-.project-buttons {
-  .scrolling-tabs-container {
-    .scrolling-tabs {
-      margin-top: $gl-padding-8;
-      margin-bottom: $gl-padding-8 - $browser-scrollbar-size;
-      padding-bottom: $browser-scrollbar-size;
-      flex-wrap: wrap;
-      border-bottom: 0;
-    }
-
-    .fade-left,
-    .fade-right {
-      top: 0;
-      height: calc(100% - #{$browser-scrollbar-size});
-
-      svg {
-        top: 50%;
-        margin-top: -$gl-padding-8;
-      }
-    }
-
-    .nav {
-      flex-basis: 100%;
-
-      + .nav {
-        margin: $gl-padding-8 0;
-      }
-    }
-
-    @include media-breakpoint-down(md) {
-      flex-direction: column;
-
-      .nav {
-        flex-wrap: nowrap;
-      }
-
-      .nav:first-child {
-        margin-right: $gl-padding-8;
-      }
-    }
-  }
-
-  .nav {
-    > li {
-      display: inline-block;
-
-      &:not(:last-child) {
-        margin-right: $gl-padding;
-      }
-
-      &.right {
-        vertical-align: top;
-        margin-top: 0;
-
-        @include media-breakpoint-up(lg) {
-          float: right;
-        }
-      }
-    }
-
-    .stat-text,
-    .stat-link {
-      padding: $gl-btn-vert-padding 0;
-      background-color: transparent;
-      font-size: $gl-font-size;
-      line-height: $gl-btn-line-height;
-      color: $gl-text-color-secondary;
-      white-space: pre-wrap;
-    }
-
-    .stat-link {
-      border-bottom: 0;
-      color: $black;
-
-      &:hover,
-      &:focus {
-        text-decoration: underline;
-        border-bottom: 0;
-      }
-
-      .project-stat-value {
-        color: $gl-text-color;
-      }
-
-      .icon {
-        color: $gl-text-color-secondary;
-      }
-
-      .add-license-link {
-        &,
-        .icon {
-          color: $blue-600;
-        }
-      }
-    }
-
-    .btn {
-      margin-bottom: $gl-padding-8;
-      padding: $gl-btn-vert-padding $gl-btn-padding;
-      line-height: $gl-btn-line-height;
-
-      .icon {
-        top: 0;
-      }
-    }
-  }
-}
-
-.project-buttons {
-  .nav > li:not(:last-child) {
-    margin-right: $gl-padding-8;
-  }
-}
-
 .repository-languages-bar {
   height: 8px;
   margin-bottom: $gl-padding-8;
@@ -460,22 +314,6 @@ pre.light-well {
   border-color: $well-light-border;
 }
 
-.git-empty {
-  margin-bottom: 7px;
-
-  h5 {
-    color: $gl-text-color;
-  }
-
-  .light-well {
-    border-radius: 2px;
-
-    color: $well-light-text-color;
-    font-size: 13px;
-    line-height: 1.6em;
-  }
-}
-
 /*
  * Projects list rendered on dashboard and user page
  */
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 633051918a4..5956368a977 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -130,10 +130,6 @@
   border-radius: $border-radius-base;
 }
 
-.empty-variables {
-  padding: 20px 0;
-}
-
 .warning-title {
   color: $gray-900;
 }
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index c72de0e6f29..1397590cc31 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -7,12 +7,8 @@ body.gl-dark {
   --gray-100: #404040;
   --gray-600: #bfbfbf;
   --gray-900: #fafafa;
-  --gray-950: #fff;
   --green-100: #0d532a;
-  --green-400: #108548;
   --green-700: #91d4a8;
-  --blue-400: #1f75cb;
-  --orange-400: #ab6100;
   --indigo-900-alpha-008: rgba(235, 235, 250, 0.08);
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
@@ -314,10 +310,18 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.badge-success {
+  color: #fff;
+  background-color: #2da160;
+}
 .badge-info {
   color: #fff;
   background-color: #428fdc;
 }
+.badge-warning {
+  color: #fff;
+  background-color: #c17d10;
+}
 .bg-transparent {
   background-color: transparent !important;
 }
@@ -394,6 +398,34 @@ a.gl-badge.badge-info:active {
     0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
   outline: none;
 }
+.gl-badge.badge-success {
+  background-color: #0d532a;
+  color: #91d4a8;
+}
+a.gl-badge.badge-success.active,
+a.gl-badge.badge-success:active {
+  color: #ecf4ee;
+  background-color: #24663b;
+}
+a.gl-badge.badge-success:active {
+  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
+    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  outline: none;
+}
+.gl-badge.badge-warning {
+  background-color: #703800;
+  color: #e9be74;
+}
+a.gl-badge.badge-warning.active,
+a.gl-badge.badge-warning:active {
+  color: #fdf1dd;
+  background-color: #8f4700;
+}
+a.gl-badge.badge-warning:active {
+  box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8),
+    0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48);
+  outline: none;
+}
 .gl-button .gl-badge {
   top: 0;
 }
@@ -837,7 +869,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+  .badge.badge-pill:not(.gl-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -920,44 +952,6 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
-  position: inherit;
-  font-weight: 400;
-  margin-left: -6px;
-  font-size: 11px;
-  color: var(--gray-950, #333);
-  padding: 0 5px;
-  line-height: 12px;
-  border-radius: 7px;
-  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
-  background-color: var(--green-400, #108548);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
-  background-color: var(--orange-400, #ab6100);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
-  background-color: var(--blue-400, #1f75cb);
-}
-.title-container .canary-badge .badge,
-.navbar-nav .canary-badge .badge {
-  font-size: 12px;
-  line-height: 16px;
-  padding: 0 0.5rem;
-}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1103,6 +1097,8 @@ input {
 }
 .nav-sidebar li .nav-item-name {
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .nav-sidebar li > a,
 .nav-sidebar li > .fly-out-top-item-container {
@@ -1335,7 +1331,8 @@ input {
 .nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 .nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
@@ -1780,10 +1777,16 @@ body.gl-dark {
   --purple-800: #cbbbf2;
   --purple-900: #e1d8f9;
   --purple-950: #f4f0ff;
+  --dark-icon-color-purple-1: #524a68;
+  --dark-icon-color-purple-2: #715bae;
+  --dark-icon-color-purple-3: #9a79f7;
+  --dark-icon-color-orange-1: #665349;
+  --dark-icon-color-orange-2: #b37a5d;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
+  --black-normal: #fafafa;
   --svg-status-bg: #333;
 }
 .nav-sidebar li a {
@@ -2005,10 +2008,16 @@ body.gl-dark {
   --purple-800: #cbbbf2;
   --purple-900: #e1d8f9;
   --purple-950: #f4f0ff;
+  --dark-icon-color-purple-1: #524a68;
+  --dark-icon-color-purple-2: #715bae;
+  --dark-icon-color-purple-3: #9a79f7;
+  --dark-icon-color-orange-1: #665349;
+  --dark-icon-color-orange-2: #b37a5d;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
   --white: #333;
   --black: #fff;
+  --black-normal: #fafafa;
   --svg-status-bg: #333;
 }
 .tab-width-8 {
@@ -2026,18 +2035,9 @@ body.gl-dark {
   white-space: nowrap;
   width: 1px;
 }
-.gl-bg-green-500 {
-  background-color: #2da160;
-}
 .gl-border-none\! {
   border-style: none !important;
 }
-.gl-rounded-pill {
-  border-radius: 0.75rem;
-}
-.gl-text-white {
-  color: #333;
-}
 .gl-display-none {
   display: none;
 }
@@ -2059,9 +2059,8 @@ body.gl-dark {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
-.gl-py-1 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.gl-ml-n2 {
+  margin-left: -0.25rem;
 }
 .gl-ml-3 {
   margin-left: 0.5rem;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 2f79c86cdc6..0d35c400676 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -295,10 +295,18 @@ h1 {
   padding-left: 0.6em;
   border-radius: 10rem;
 }
+.badge-success {
+  color: #fff;
+  background-color: #108548;
+}
 .badge-info {
   color: #fff;
   background-color: #1f75cb;
 }
+.badge-warning {
+  color: #fff;
+  background-color: #ab6100;
+}
 .bg-transparent {
   background-color: transparent !important;
 }
@@ -375,6 +383,34 @@ a.gl-badge.badge-info:active {
     0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
   outline: none;
 }
+.gl-badge.badge-success {
+  background-color: #c3e6cd;
+  color: #24663b;
+}
+a.gl-badge.badge-success.active,
+a.gl-badge.badge-success:active {
+  color: #0a4020;
+  background-color: #91d4a8;
+}
+a.gl-badge.badge-success:active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
+.gl-badge.badge-warning {
+  background-color: #f5d9a8;
+  color: #8f4700;
+}
+a.gl-badge.badge-warning.active,
+a.gl-badge.badge-warning:active {
+  color: #5c2900;
+  background-color: #e9be74;
+}
+a.gl-badge.badge-warning:active {
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8),
+    0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48);
+  outline: none;
+}
 .gl-button .gl-badge {
   top: 0;
 }
@@ -818,7 +854,7 @@ input {
   .container-fluid
   .navbar-nav
   li
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+  .badge.badge-pill:not(.gl-badge) {
   box-shadow: none;
   font-weight: 600;
 }
@@ -901,44 +937,6 @@ input {
   line-height: 18px;
   margin: 4px 0 4px 2px;
 }
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge),
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
-  position: inherit;
-  font-weight: 400;
-  margin-left: -6px;
-  font-size: 11px;
-  color: var(--gray-950, #fff);
-  padding: 0 5px;
-  line-height: 12px;
-  border-radius: 7px;
-  box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge {
-  background-color: var(--green-400, #2da160);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count {
-  background-color: var(--orange-400, #c17d10);
-}
-.title-container
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count,
-.navbar-nav
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count {
-  background-color: var(--blue-400, #428fdc);
-}
-.title-container .canary-badge .badge,
-.navbar-nav .canary-badge .badge {
-  font-size: 12px;
-  line-height: 16px;
-  padding: 0 0.5rem;
-}
 @media (max-width: 575.98px) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
@@ -1084,6 +1082,8 @@ input {
 }
 .nav-sidebar li .nav-item-name {
   flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .nav-sidebar li > a,
 .nav-sidebar li > .fly-out-top-item-container {
@@ -1316,7 +1316,8 @@ input {
 .nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 .nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
@@ -1697,18 +1698,9 @@ svg.s16 {
   white-space: nowrap;
   width: 1px;
 }
-.gl-bg-green-500 {
-  background-color: #108548;
-}
 .gl-border-none\! {
   border-style: none !important;
 }
-.gl-rounded-pill {
-  border-radius: 0.75rem;
-}
-.gl-text-white {
-  color: #fff;
-}
 .gl-display-none {
   display: none;
 }
@@ -1730,9 +1722,8 @@ svg.s16 {
 .gl-pr-2 {
   padding-right: 0.25rem;
 }
-.gl-py-1 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+.gl-ml-n2 {
+  margin-left: -0.25rem;
 }
 .gl-ml-3 {
   margin-left: 0.5rem;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 3ed257caf60..c5cbe58ec27 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -138,10 +138,10 @@ hr {
   margin-right: -15px;
   margin-left: -15px;
 }
-.col,
-.col-sm-5,
+.col-sm-12,
 .col-sm-7,
-.col-sm-12 {
+.col-sm-5,
+.col {
   position: relative;
   width: 100%;
   padding-right: 15px;
@@ -160,12 +160,12 @@ hr {
 }
 @media (min-width: 576px) {
   .col-sm-5 {
-    flex: 0 0 41.66667%;
-    max-width: 41.66667%;
+    flex: 0 0 41.6666666667%;
+    max-width: 41.6666666667%;
   }
   .col-sm-7 {
-    flex: 0 0 58.33333%;
-    max-width: 58.33333%;
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%;
   }
   .col-sm-12 {
     flex: 0 0 100%;
@@ -725,11 +725,14 @@ svg {
   margin-top: 40px;
 }
 .devise-layout-html body .navless-container {
-  padding: 65px 15px;
+  padding: 0 15px 65px;
+}
+.devise-layout-html body .flash-container {
+  padding-bottom: 65px;
 }
 @media (max-width: 575.98px) {
-  .devise-layout-html body .navless-container {
-    padding: 0 15px 65px;
+  .devise-layout-html body .flash-container {
+    padding-bottom: 0;
   }
 }
 
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index c79816e3579..9db134ffa65 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -93,6 +93,7 @@ $gray-darker: #4f4f4f;
 $gray-darkest: #c4c4c4;
 
 $black: #fff;
+$black-normal: $gray-900;
 $white: #333;
 $white-light: #2b2b2b;
 $white-normal: #333;
@@ -187,11 +188,18 @@ body.gl-dark {
   --purple-900: #{$purple-900};
   --purple-950: #{$purple-950};
 
+  --dark-icon-color-purple-1: #524a68;
+  --dark-icon-color-purple-2: #715bae;
+  --dark-icon-color-purple-3: #9a79f7;
+  --dark-icon-color-orange-1: #665349;
+  --dark-icon-color-orange-2: #b37a5d;
+
   --gl-text-color: #{$gray-900};
   --border-color: #{$border-color};
 
   --white: #{$white};
   --black: #{$black};
+  --black-normal: #{$black-normal};
 
   --svg-status-bg: #{$white};
 
@@ -257,3 +265,11 @@ $line-removed-dark: $red-200;
 
 $well-expand-item: $gray-200;
 $well-inner-border: $gray-200;
+
+$calendar-activity-colors: (
+  #303030,
+  #333861,
+  #4a5593,
+  #6172c5,
+  #788ff7
+);
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 0e7e52129b4..8a4f9c32f9f 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -200,6 +200,12 @@
   }
 }
 
+.gl-xl-ml-3 {
+  @include media-breakpoint-up(lg) {
+    margin-left: $gl-spacing-scale-3;
+  }
+}
+
 .gl-mb-n3 {
   margin-bottom: -$gl-spacing-scale-3;
 }
@@ -247,30 +253,6 @@ $gl-line-height-42: px-to-rem(42px);
   max-width: 50%;
 }
 
-// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1490
-.gl-w-grid-size-28 {
-  width: $grid-size * 28;
-}
-
-// Will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2347 is merged
-.gl-min-w-8 {
-  min-width: $gl-spacing-scale-8;
-}
-
-// Will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2347 is merged
-.gl-min-w-10 {
-  min-width: $gl-spacing-scale-10;
-}
-
-// Will both be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1526
-.gl-opacity-6 {
-  opacity: 0.6;
-}
-
-.gl-opacity-7 {
-  opacity: 0.7;
-}
-
 /**
   Note: ::-webkit-scrollbar is a non-standard rule only
   supported by webkit browsers.
@@ -298,14 +280,66 @@ $gl-line-height-42: px-to-rem(42px);
   @include gl-focus($gl-border-size-1, $gray-900, true);
 }
 
-// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1637
-.gl-lg-w-25p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 25%;
-  }
-}
-
 // Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2600
 .gl-pr-10 {
   padding-right: $gl-spacing-scale-10;
 }
+
+/*
+All of the following (up until the "End gitlab-ui#1709" comment) will be moved
+to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
+*/
+.gl-sm-grid-template-columns-2 {
+  @include media-breakpoint-up(sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.gl-md-grid-template-columns-2 {
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.gl-md-grid-template-columns-3 {
+  @include media-breakpoint-up(md) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+.gl-lg-grid-template-columns-4 {
+  @include media-breakpoint-up(lg) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.gl-gap-6 {
+  gap: $gl-spacing-scale-6;
+}
+
+.gl-max-w-48 {
+  max-width: $gl-spacing-scale-48;
+}
+
+.gl-max-w-75 {
+  max-width: $gl-spacing-scale-75;
+}
+
+.gl-md-pt-11 {
+  @include media-breakpoint-up(md) {
+    padding-top: $gl-spacing-scale-11 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence
+  }
+}
+
+.gl-md-mb-6 {
+  @include media-breakpoint-up(md) {
+    margin-bottom: $gl-spacing-scale-6 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence
+  }
+}
+
+.gl-md-mb-12 {
+  @include media-breakpoint-up(md) {
+    margin-bottom: $gl-spacing-scale-12 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence
+  }
+}
+/* End gitlab-ui#1709 */
diff --git a/app/assets/stylesheets/vendors/tribute.scss b/app/assets/stylesheets/vendors/tribute.scss
deleted file mode 100644
index 65f3d1b6199..00000000000
--- a/app/assets/stylesheets/vendors/tribute.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.tribute-container {
-  background: $white;
-  border: 1px solid $gray-100;
-  border-radius: $border-radius-base;
-  box-shadow: 0 0 5px $issue-boards-card-shadow;
-  color: $black;
-  margin-top: $gl-padding-12;
-  max-height: 200px;
-  min-width: 120px;
-  overflow-y: auto;
-  z-index: 11110 !important;
-
-  ul {
-    list-style: none;
-    margin-bottom: 0;
-    padding: $gl-padding-8 1px;
-  }
-
-  li {
-    cursor: pointer;
-    padding: $gl-padding-8 $gl-padding;
-    white-space: nowrap;
-
-    small {
-      color: $gray-500;
-    }
-
-    &.highlight {
-      background-color: $gray-darker;
-
-      .avatar {
-        @include disable-all-animation;
-        border: 1px solid $white;
-      }
-
-      small {
-        color: inherit;
-      }
-    }
-  }
-}