Add latest changes from gitlab-org/gitlab@13-7-stable-eev13.7.0-rc42

60 files changed, 789 insertions, 1255 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 52bc19fddd9..f56665553ba 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/import';
 @import './pages/incident_management_list';
 @import './pages/issuable';
 @import './pages/issues/issue_count_badge';
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 4b1139d2354..9ef1b58ed24 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -5,14 +5,10 @@
 // directory.
 @import '@gitlab/at.js/dist/css/jquery.atwho';
 @import 'dropzone/dist/basic';
-@import 'select2';
 
 // GitLab UI framework
 @import 'framework';
 
-// Custom Fontawesome icons
-@import 'fontawesome_custom';
-
 // Page specific styles (issues, projects etc):
 @import 'page_specific_files';
 
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 3d5076f485c..deeef86c386 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -235,10 +235,6 @@ h3.popover-header {
     @extend .border-0;
   }
 
-  &.card-without-margin {
-    margin: 0;
-  }
-
   &.bg-light {
     @extend .border-0;
   }
diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss
index e0637088bbb..f73ec4d5998 100644
--- a/app/assets/stylesheets/components/milestone_combobox.scss
+++ b/app/assets/stylesheets/components/milestone_combobox.scss
@@ -1,11 +1,6 @@
-.selected-item::before {
-  content: '\f00c';
-  color: $green-500;
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  transform: translateY(-50%);
-  font: 14px FontAwesome;
+.selected-item {
+  /* stylelint-disable-next-line function-url-quotes */
+  background: url(asset_path('checkmark.png')) no-repeat 0 2px;
 }
 
 .dropdown-item-space {
diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss
deleted file mode 100644
index f870948cc4f..00000000000
--- a/app/assets/stylesheets/components/popover.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-.popover {
-  max-width: $popover-max-width;
-  border: 1px solid $gray-100;
-  box-shadow: $popover-box-shadow;
-  font-size: $gl-font-size-small;
-
-  /**
-  * Blue popover variation
-  */
-  &.blue {
-    background-color: $blue-600;
-    border-color: $blue-600;
-
-    .popover-body {
-      color: $white;
-    }
-
-    &.bs-popover-bottom {
-      .arrow::before,
-      .arrow::after {
-        border-bottom-color: $blue-600;
-      }
-    }
-
-    &.bs-popover-top {
-      .arrow::before,
-      .arrow::after {
-        border-top-color: $blue-600;
-      }
-    }
-
-    &.bs-popover-right {
-      .arrow::after,
-      .arrow::before {
-        border-right-color: $blue-600;
-      }
-    }
-
-    &.bs-popover-left {
-      .arrow::before,
-      .arrow::after {
-        border-left-color: $blue-600;
-      }
-    }
-  }
-}
-
-.bs-popover-top {
-  /* When popover position is top, the arrow is translated 1 pixel
-  *  due to the box-shadow include in our custom styles.
-  */
-  > .arrow::before {
-    border-top-color: $gray-100;
-    bottom: 1px;
-  }
-
-  > .arrow::after {
-    bottom: 2px;
-  }
-}
-
-.bs-popover-bottom {
-  > .arrow::before {
-    border-bottom-color: $gray-100;
-  }
-
-  > .popover-header::before {
-    border-color: $white;
-  }
-}
-
-.bs-popover-right > .arrow::before {
-  border-right-color: $gray-100;
-}
-
-.bs-popover-left > .arrow::before {
-  border-left-color: $gray-100;
-}
-
-.popover-header {
-  background-color: $white;
-  font-size: $gl-font-size-small;
-}
-
-.popover-body {
-  padding: $gl-padding $gl-padding-12;
-
-  > .popover-hr {
-    margin: $gl-padding 0;
-  }
-}
-
-/**
-* mr_popover component
-*/
-.mr-popover {
-  .text-secondary {
-    font-size: 12px;
-    line-height: 1.33;
-  }
-}
-
-.suggest-gitlab-ci-yml {
-  margin-top: -1em;
-
-  .popover-header {
-    padding: $gl-padding;
-    display: flex;
-    align-items: center;
-  }
-}
diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index 64e82531c30..51bf2686be2 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -6,6 +6,32 @@
   .gl-infinite-scroll-legend {
     @include gl-display-none;
   }
+
+  .gl-tabs {
+    @include gl-overflow-y-auto;
+  }
+
+  .gl-tabs-nav {
+    flex-wrap: nowrap;
+    overflow-x: scroll;
+    align-items: stretch;
+
+    .nav-item {
+      @include gl-flex-shrink-0;
+
+      a {
+        @include gl-h-full;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .gl-spinner-container {
+    @include gl-w-full;
+    @include gl-absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 }
 
 .with-performance-bar .whats-new-drawer {
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
index 8a955cffc49..b9bb3edaaab 100644
--- a/app/assets/stylesheets/fontawesome_custom.scss
+++ b/app/assets/stylesheets/fontawesome_custom.scss
@@ -1,191 +1,43 @@
-/*!
- *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */
-
-// stylelint-disable property-no-vendor-prefix
-// stylelint-disable at-rule-no-vendor-prefix
-// stylelint-disable stylelint-gitlab/duplicate-selectors
-// scss-lint:disable MergeableSelector
-@font-face {
-  font-family: 'FontAwesome';
-  src: asset-url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'), asset-url('fontawesome-webfont.woff?v=4.7.0') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-.fa {
-  display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* makes the font 33% larger relative to the icon container */
-.fa-lg {
-  font-size: 1.33333333em;
-  line-height: 0.75em;
-  vertical-align: -15%;
-}
-
-.fa-2x {
-  font-size: 2em;
-}
-
-.fa-3x {
-  font-size: 3em;
-}
-
-.fa-4x {
-  font-size: 4em;
-}
-
-.fa-5x {
-  font-size: 5em;
-}
-
-.fa-fw {
-  width: 1.28571429em;
-  text-align: center;
-}
-
-.fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-  animation: fa-spin 2s infinite linear;
-}
-
-@-webkit-keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
+// Custom Font Awesome styles that render emojis in asciidoc
+.md {
+  .fa {
+    display: inline-block;
+    font-style: normal;
+    font-size: 14px;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
+  .fa-2x {
+    font-size: 2em;
   }
-}
 
-@keyframes fa-spin {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
+  .fa-exclamation-triangle::before {
+    content: '⚠';
   }
 
-  100% {
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
+  .fa-exclamation-circle::before {
+    content: '❗';
   }
-}
-
-.fa-inverse {
-  color: $white;
-}
-
-.fa-chevron-down::before {
-  content: '\f078';
-}
-
-.fa-caret-down::before {
-  content: '\f0d7';
-}
-
-.fa-warning::before,
-.fa-exclamation-triangle::before {
-  content: '\f071';
-}
-
-.fa-spinner::before {
-  content: '\f110';
-}
-
-.fa-caret-right::before {
-  content: '\f0da';
-}
-
-.fa-exclamation-circle::before {
-  content: '\f06a';
-}
-
-.fa-file-o::before {
-  content: '\f016';
-}
-
-.fa-lightbulb-o::before {
-  content: '\f0eb';
-}
-
-.fa-circle::before {
-  content: '\f111';
-}
-
-.fa-thumb-tack::before {
-  content: '\f08d';
-}
-
-.fa-fire::before {
-  content: '\f06d';
-}
-
-.fa-file-pdf-o::before {
-  content: '\f1c1';
-}
-
-.fa-file-word-o::before {
-  content: '\f1c2';
-}
-
-.fa-file-excel-o::before {
-  content: '\f1c3';
-}
 
-.fa-file-powerpoint-o::before {
-  content: '\f1c4';
-}
-
-.fa-file-image-o::before {
-  content: '\f1c5';
-}
-
-.fa-file-archive-o::before {
-  content: '\f1c6';
-}
-
-.fa-file-audio-o::before {
-  content: '\f1c7';
-}
-
-.fa-file-video-o::before {
-  content: '\f1c8';
-}
+  .fa-lightbulb-o::before {
+    content: '💡';
+  }
 
-.fa-square-o::before {
-  content: '\f096';
-}
+  .fa-thumb-tack::before {
+    content: '📌';
+  }
 
-.fa-check-square-o::before {
-  content: '\f046';
-}
+  .fa-fire::before {
+    content: '🔥';
+  }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
+  .fa-square-o::before {
+    content: '\2610';
+  }
 
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
+  .fa-check-square-o::before {
+    content: '\2611';
+  }
 }
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 196fb3a7088..a93c70c75d3 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -103,7 +103,8 @@
   @include transition(color);
 }
 
-a {
+a,
+.notification-dot {
   @include transition(background-color, color, border);
 }
 
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 4f09f1a394b..d9ad4992458 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -253,3 +253,111 @@
     vertical-align: middle;
   }
 }
+
+
+// The following encompasses the "add reaction" button redesign to
+// align properly within GitLab UI's gl-button. The implementation
+// above will be deprecated once all instances of "award emoji" are
+// migrated to Vue.
+
+.gl-button .award-emoji-block gl-emoji {
+  top: -1px;
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
+.add-reaction-button {
+  position: relative;
+
+  // This forces the height and width of the inner content to match
+  // other gl-buttons despite all child elements being set to
+  // `position:absolute`
+  &::after {
+    content: '\a0';
+    width: 1em;
+  }
+
+  .reaction-control-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+
+    // center the icon vertically and horizontally within the button
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include transition(opacity, transform);
+
+    .gl-icon {
+      height: $default-icon-size;
+      width: $default-icon-size;
+    }
+  }
+
+  .reaction-control-icon-neutral {
+    opacity: 1;
+  }
+
+  .reaction-control-icon-positive,
+  .reaction-control-icon-super-positive {
+    opacity: 0;
+  }
+
+  &:hover,
+  &.active,
+  &:active,
+  &.is-active {
+    // extra specificty added to override another selector
+    .reaction-control-icon .gl-icon {
+      color: $blue-500;
+      transform: scale(1.15);
+    }
+
+    .reaction-control-icon-neutral {
+      opacity: 0;
+    }
+  }
+
+  &:hover {
+    .reaction-control-icon-positive {
+      opacity: 1;
+    }
+  }
+
+  &.active,
+  &:active,
+  &.is-active {
+    .reaction-control-icon-positive {
+      opacity: 0;
+    }
+
+    .reaction-control-icon-super-positive {
+      opacity: 1;
+    }
+  }
+
+  &.disabled {
+    cursor: default;
+
+    &:hover,
+    &:focus,
+    &:active {
+      .reaction-control-icon .gl-icon {
+        color: inherit;
+        transform: scale(1);
+      }
+
+      .reaction-control-icon-neutral {
+        opacity: 1;
+      }
+
+      .reaction-control-icon-positive,
+      .reaction-control-icon-super-positive {
+        opacity: 0;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index f42e500efa8..bfa4a640fe2 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -73,7 +73,7 @@
 
   &.content-component-block {
     padding: 11px 0;
-    background-color: $white;
+    background-color: $body-bg;
   }
 
   .title {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index a8cc685d880..182c58c3931 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -166,8 +166,7 @@
     line-height: $gl-btn-xs-line-height;
   }
 
-  &.btn-success,
-  &.btn-register {
+  &.btn-success {
     @include btn-green;
   }
 
@@ -176,7 +175,6 @@
       @include btn-outline($white, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800);
     }
 
-    &.btn-remove,
     &.btn-danger {
       @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
     }
@@ -200,18 +198,11 @@
     @include btn-orange;
   }
 
-  &.btn-close,
-  &.btn-close-color {
+  &.btn-close {
     @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700);
   }
 
-  &.btn-spam {
-    @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
-  }
-
-  &.btn-danger,
-  &.btn-remove,
-  &.btn-red {
+  &.btn-danger {
     @include btn-red;
   }
 
@@ -219,11 +210,6 @@
     float: right;
   }
 
-  &.btn-reopen,
-  .btn-reopen-color {
-    /* should be same as parent class for now */
-  }
-
   &.btn-grouped {
     @include btn-with-margin;
   }
@@ -232,17 +218,6 @@
     color: $gray-700;
   }
 
-  .fa-caret-down,
-  .fa-chevron-down {
-    margin-left: 5px;
-  }
-
-  &.dropdown-toggle {
-    .fa-caret-down {
-      margin-left: 3px;
-    }
-  }
-
   &.btn-text-field {
     width: 100%;
     text-align: left;
@@ -276,11 +251,8 @@
     width: 15px;
   }
 
-  svg,
-  .fa {
-    &:not(:last-child) {
-      margin-right: 5px;
-    }
+  svg:not(:last-child) {
+    margin-right: 5px;
   }
 }
 
@@ -370,24 +342,15 @@
 
 .btn-loading {
   &:not(.disabled) {
-    .fa,
     .spinner {
       display: none;
     }
   }
-
-  .fa {
-    margin-right: 5px;
-  }
 }
 
 .btn-build {
   margin-left: 10px;
 
-  i {
-    color: $gl-text-color-secondary;
-  }
-
   svg {
     fill: $gl-text-color-secondary;
   }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index deb2d6c4641..3b59c028437 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -135,7 +135,6 @@ hr {
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  > div:not(.block):not(.select2-display-none),
   .str-truncated {
     display: inline;
   }
@@ -389,11 +388,7 @@ img.emoji {
   🚨 Do not use these classes — they are deprecated and being removed. 🚨
   See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
 **/
-.prepend-top-15 { margin-top: 15px; }
 .prepend-top-20 { margin-top: 20px; }
-.prepend-left-15 { margin-left: 15px; }
-.prepend-left-20 { margin-left: 20px; }
-.append-right-20 { margin-right: 20px; }
 .append-bottom-20 { margin-bottom: 20px; }
 .ml-10 { margin-left: 4.5rem; }
 .inline { display: inline-block; }
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index e16ab5ee72f..cf9363b77be 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -2,10 +2,6 @@
 .diff-file {
   margin-bottom: $gl-padding;
 
-  &.conflict {
-    border-top: 1px solid $border-color;
-  }
-
   &.has-body {
     .file-title {
       box-shadow: 0 -2px 0 0 var(--white);
@@ -60,7 +56,7 @@
         left: -11px;
         width: 10px;
         height: calc(100% + 1px);
-        background: $white;
+        background: $body-bg;
         pointer-events: none;
       }
 
@@ -601,10 +597,6 @@ table.code {
   .diff-grid-right {
     display: grid;
     grid-template-columns: 50px 8px 1fr;
-
-    .diff-td:nth-child(2) {
-      display: none;
-    }
   }
 
   .diff-grid-comments {
@@ -635,20 +627,6 @@ table.code {
     .diff-grid-left,
     .diff-grid-right {
       grid-template-columns: 50px 50px 8px 1fr;
-
-      .diff-td:nth-child(2) {
-        display: block;
-      }
-    }
-
-    .diff-grid-left .old:nth-child(1) [data-linenumber],
-    .diff-grid-right .new:nth-child(2) [data-linenumber] {
-      display: inline;
-    }
-
-    .diff-grid-left .old:nth-child(2) [data-linenumber],
-    .diff-grid-right .new:nth-child(1) [data-linenumber] {
-      display: none;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 2094c824286..e2335c184b0 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -16,12 +16,6 @@
   }
 }
 
-@mixin chevron-active {
-  .fa-chevron-down {
-    color: $gray-darkest;
-  }
-}
-
 @mixin set-visible {
   transform: translateY(0);
   display: block;
@@ -56,7 +50,6 @@
 
   .dropdown-toggle,
   .dropdown-menu-toggle {
-    @include chevron-active;
     border-color: $gray-darkest;
   }
 
@@ -114,20 +107,11 @@
     color: $gray-darkest;
   }
 
-  .fa-chevron-down {
-    font-size: $dropdown-chevron-size;
-    position: relative;
-    top: -2px;
-    margin-left: 5px;
-  }
-
   &:hover {
-    @include chevron-active;
     border-color: $gray-darkest;
   }
 
   &:focus:active {
-    @include chevron-active;
     border-color: $dropdown-toggle-active-border-color;
     outline: 0;
   }
@@ -143,18 +127,6 @@
 
   .fa {
     position: absolute;
-
-    &.fa-spinner {
-      font-size: 16px;
-      margin-top: -3px;
-    }
-  }
-
-  .fa-chevron-down,
-  .fa-spinner {
-    position: absolute;
-    top: 11px;
-    right: 8px;
   }
 
   .spinner {
@@ -369,7 +341,8 @@
 }
 
 .droplab-dropdown {
-  .dropdown-toggle > i {
+  .dropdown-toggle > i,
+  .dropdown-toggle > svg {
     pointer-events: none;
   }
 
@@ -532,29 +505,27 @@
       &.is-active {
         color: $gl-text-color;
 
-        &::before {
-          position: absolute;
-          left: 16px;
-          top: 16px;
-          transform: translateY(-50%);
-          font: normal normal normal 14px/1 FontAwesome;
-          font-size: inherit;
-          text-rendering: auto;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
-
         &.dropdown-menu-user-link::before {
           top: 50%;
         }
       }
 
       &.is-indeterminate::before {
-        content: '\f068';
+        position: absolute;
+        left: 16px;
+        top: 16px;
+        transform: translateY(-50%);
+        font-style: normal;
+        font-size: inherit;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        content: '—';
       }
 
-      &.is-active::before {
-        content: '\f00c';
+      &.is-active {
+        /* stylelint-disable-next-line function-url-quotes */
+        background: url(asset_path('checkmark.png')) no-repeat 14px 8px;
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 7be676ed83c..6e47fef02d5 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -133,11 +133,6 @@ label {
 }
 
 .input-group {
-  .select2-container {
-    display: table-cell;
-    max-width: 180px;
-  }
-
   .input-group-prepend,
   .input-group-append {
     background-color: $input-group-addon-bg;
@@ -213,15 +208,6 @@ label {
   position: relative;
 }
 
-.select-wrapper > .fa-chevron-down {
-  position: absolute;
-  font-size: 10px;
-  right: 10px;
-  top: 12px;
-  color: $gray-darkest;
-  pointer-events: none;
-}
-
 .input-icon-wrapper > .input-icon-right {
   position: absolute;
   right: 0.8em;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 52319d9658b..a6a01c7b090 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -384,6 +384,10 @@
       text-overflow: ellipsis;
       flex: 0 1 auto;
     }
+
+    &:last-of-type > .breadcrumbs-list-angle {
+      display: none;
+    }
   }
 }
 
@@ -556,12 +560,17 @@
   border: 1px solid $gray-normal;
 }
 
-.header-user-notification-dot {
+.notification-dot {
   background-color: $orange-300;
   height: 12px;
   width: 12px;
-  right: 8px;
-  top: -8px;
+  margin-top: -15px;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.with-notifications .notification-dot {
+  visibility: visible;
 }
 
 .with-performance-bar .navbar-gitlab {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 2464ea3607b..b0334da6943 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -234,6 +234,8 @@ ul.content-list {
   }
 }
 
+ul.content-list.issuable-list > li,
+ul.content-list.todos-list > li,
 .card > .content-list > li {
   padding: $gl-padding-top $gl-padding;
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 20d44b71bf6..7ba9236b833 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -146,7 +146,11 @@
 }
 
 @mixin green-status-color {
-  @include status-color($green-100, $green-500, $green-700);
+  @include status-color(
+    var(--green-100, $green-100),
+    var(--green-500, $green-500),
+    var(--green-700, $green-700)
+  );
 }
 
 @mixin fade($gradient-direction, $gradient-color) {
@@ -169,7 +173,6 @@
     transition-duration: 0.3s;
   }
 
-  .fa,
   svg {
     position: relative;
     top: 5px;
@@ -255,9 +258,9 @@
 @mixin build-trace-bar($height) {
   height: $height;
   min-height: $height;
-  background: $gray-light;
-  border: 1px solid $border-color;
-  color: $gl-text-color;
+  background: var(--gray-50, $gray-50);
+  border: 1px solid var(--border-color, $border-color);
+  color: var(--gl-text-color, $gl-text-color);
   padding: $grid-size;
 }
 
@@ -361,11 +364,6 @@
   color: $gray-400;
   fill: $gray-400;
 
-  .fa {
-    position: relative;
-    font-size: 16px;
-  }
-
   svg {
     @include btn-svg;
     margin: 0;
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 372e3bed6e0..2dbeacb0f8c 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -91,6 +91,7 @@
 
 body.modal-open {
   overflow: hidden;
+  padding-right: 0 !important;
 }
 
 .modal-no-backdrop {
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 3e218de6af9..2ad9a9d2dff 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -276,7 +276,7 @@
     @include fade(left, $gray-light);
     right: -5px;
 
-    .fa {
+    svg {
       right: -7px;
     }
   }
@@ -286,7 +286,7 @@
     left: -5px;
     text-align: center;
 
-    .fa {
+    svg {
       left: -7px;
     }
   }
@@ -337,7 +337,7 @@
       @include fade(left, $white);
       right: -5px;
 
-      .fa {
+      svg {
         right: -7px;
       }
     }
@@ -346,7 +346,7 @@
       @include fade(right, $white);
       left: -5px;
 
-      .fa {
+      svg {
         left: -7px;
       }
     }
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 86a5aa1a16e..d8ce6826fc1 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -1,275 +1,3 @@
-/** Select2 selectbox style override **/
-.select2-container {
-  width: 100% !important;
-
-  &.input-md,
-  &.input-lg {
-    display: block;
-  }
-}
-
-.select2-container,
-.select2-container.select2-drop-above {
-  .select2-choice {
-    background: $white;
-    color: $gl-text-color;
-    border-color: $input-border;
-    height: 34px;
-    padding: $gl-vert-padding $gl-input-padding;
-    font-size: $gl-font-size;
-    line-height: 1.42857143;
-    border-radius: $border-radius-base;
-
-    .select2-arrow {
-      background-image: none;
-      background-color: transparent;
-      border: 0;
-      padding-top: 12px;
-      padding-right: 20px;
-      font-size: 10px;
-
-      b {
-        display: none;
-      }
-
-      &::after {
-        content: '\f078';
-        position: absolute;
-        z-index: 1;
-        text-align: center;
-        pointer-events: none;
-        box-sizing: border-box;
-        color: $gray-darkest;
-        display: inline-block;
-        font: normal normal normal 14px/1 FontAwesome;
-        font-size: inherit;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
-    }
-
-    .select2-chosen {
-      margin-right: 15px;
-    }
-
-    &:hover {
-      border-color: $gray-darkest;
-      color: $gl-text-color;
-    }
-  }
-
-  // Essentially we’re doing @include form-control-focus here (from
-  // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a
-  // `&:focus` selector and we’re never actually focusing the .select2-choice
-  // link nor the .select2-container, the Select2 library focuses an off-screen
-  // .select2-focusser element instead.
-  &.select2-container-active:not(.select2-dropdown-open) {
-    .select2-choice {
-      color: $input-focus-color;
-      background-color: $input-focus-bg;
-      border-color: $input-focus-border-color;
-      outline: 0;
-    }
-
-    // Reusable focus “glow” box-shadow
-    @mixin form-control-focus-glow {
-      @if $enable-shadows {
-        box-shadow: $input-box-shadow, $input-focus-box-shadow;
-      } @else {
-        box-shadow: $input-focus-box-shadow;
-      }
-    }
-
-    // Apply the focus “glow” shadow to the .select2-container if it also has
-    // the .block-truncated class as that applies an overflow: hidden, thereby
-    // hiding the glow of the nested .select2-choice element.
-    &.block-truncated {
-      @include form-control-focus-glow;
-    }
-
-    // Apply the glow directly to the .select2-choice link if we’re not
-    // block-truncating the container.
-    &:not(.block-truncated) .select2-choice {
-      @include form-control-focus-glow;
-    }
-  }
-
-  &.is-invalid {
-    ~ .invalid-feedback {
-      display: block;
-    }
-
-    .select2-choices,
-    .select2-choice {
-      border-color: $red-500;
-    }
-  }
-}
-
-.select2-drop,
-.select2-drop.select2-drop-above {
-  background: $white;
-  box-shadow: 0 2px 4px $dropdown-shadow-color;
-  border-radius: $border-radius-base;
-  border: 1px solid $border-color;
-  min-width: 175px;
-  color: $gl-text-color;
-  z-index: 999;
-
-  .modal-open & {
-    z-index: $zindex-modal + 200;
-  }
-}
-
-.select2-drop-mask {
-  z-index: 998;
-
-  .modal-open & {
-    z-index: $zindex-modal + 100;
-  }
-}
-
-.select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid $border-color;
-  margin-top: -6px;
-}
-
-.select2-container-active {
-  .select2-choice,
-  .select2-choices {
-    box-shadow: none;
-  }
-}
-
-.select2-dropdown-open,
-.select2-dropdown-open.select2-drop-above {
-  .select2-choice {
-    border-color: $gray-darkest;
-    outline: 0;
-  }
-}
-
-.select2-container-multi {
-  .select2-choices {
-    border-radius: $border-radius-default;
-    border-color: $input-border;
-    background: none;
-
-    .select2-search-field input {
-      padding: 5px $gl-input-padding;
-      height: auto;
-      font-family: inherit;
-      font-size: inherit;
-    }
-
-    .select2-search-choice {
-      margin: 5px 0 0 8px;
-      box-shadow: none;
-      border-color: $input-border;
-      color: $gl-text-color;
-      line-height: 15px;
-      background-color: $gray-light;
-      background-image: none;
-      padding: 3px 18px 3px 5px;
-
-      .select2-search-choice-close {
-        top: 5px;
-        left: initial;
-        right: 3px;
-      }
-
-      &.select2-search-choice-focus {
-        border-color: $gl-text-color;
-      }
-    }
-  }
-}
-
-.select2-drop-active {
-  margin-top: $dropdown-vertical-offset;
-  font-size: 14px;
-
-  .select2-results {
-    max-height: 350px;
-  }
-}
-
-.select2-search {
-  padding: $grid-size;
-
-  .select2-drop-auto-width & {
-    padding: $grid-size;
-  }
-
-  input {
-    padding: $grid-size;
-    background: transparent image-url('select2.png');
-    color: $gl-text-color;
-    background-clip: content-box;
-    background-origin: content-box;
-    background-repeat: no-repeat;
-    background-position: right 0 bottom 0 !important;
-    border: 1px solid $input-border;
-    border-radius: $border-radius-default;
-    line-height: 16px;
-    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-
-    &:focus {
-      border-color: $blue-300;
-    }
-
-    &.select2-active {
-      background-color: $white;
-      background-image: image-url('select2-spinner.gif') !important;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-      background-position: right 6px center !important;
-      background-size: 16px 16px !important;
-    }
-  }
-
-  + .select2-results {
-    padding-top: 0;
-  }
-}
-
-.select2-results {
-  margin: 0;
-  padding: #{$gl-padding / 2} 0;
-
-  .select2-no-results,
-  .select2-searching,
-  .select2-ajax-error,
-  .select2-selection-limit {
-    background: transparent;
-    padding: #{$gl-padding / 2} $gl-padding;
-  }
-
-  .select2-result-label,
-  .select2-more-results {
-    padding: #{$gl-padding / 2} $gl-padding;
-  }
-
-  .select2-highlighted {
-    background: transparent;
-    color: $gl-text-color;
-
-    .select2-result-label {
-      background: $gray-darker;
-    }
-  }
-
-  .select2-result {
-    padding: 0 1px;
-  }
-
-  li.select2-result-with-children > .select2-result-label {
-    font-weight: $gl-font-weight-bold;
-    color: $gl-text-color;
-  }
-}
-
 .ajax-users-select {
   width: 400px;
 
@@ -282,14 +10,6 @@
   }
 }
 
-.select2-highlighted {
-  .group-result {
-    .group-path {
-      color: $gray-700;
-    }
-  }
-}
-
 .group-result {
   .group-image {
     float: left;
@@ -345,11 +65,3 @@
 .ajax-users-dropdown {
   min-width: 250px !important;
 }
-
-.select2-result-selectable,
-.select2-result-unselectable {
-  .select2-match {
-    font-weight: $gl-font-weight-bold;
-    text-decoration: none;
-  }
-}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 39d9e9a77f9..89713fdbbea 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -184,46 +184,3 @@ table {
     border-top: 0;
   }
 }
-
-.vulnerability-list {
-  @media (min-width: $breakpoint-sm) {
-    .checkbox {
-      padding-left: $gl-spacing-scale-4;
-      padding-right: 0;
-      width: 1px;
-
-      + td,
-      + th {
-        padding-left: $gl-spacing-scale-4;
-      }
-    }
-
-    .detected {
-      width: 9%;
-    }
-
-    .status {
-      width: 8%;
-    }
-
-    .severity {
-      width: 10%;
-    }
-
-    .description {
-      max-width: 0;
-    }
-
-    .identifier {
-      width: 16%;
-    }
-
-    .scanner {
-      width: 10%;
-    }
-
-    .activity {
-      width: 5%;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
index 054280f3321..fd888fdec65 100644
--- a/app/assets/stylesheets/framework/toggle.scss
+++ b/app/assets/stylesheets/framework/toggle.scss
@@ -4,22 +4,22 @@
 * @usage
 *  ### Active and Inactive text should be provided as data attributes:
 *  <button type="button" class="project-feature-toggle" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
 *  </button>
 
 *  ### Checked should have `is-checked` class
 *  <button type="button" class="project-feature-toggle is-checked" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
 *  </button>
 
 *  ### Disabled should have `is-disabled` class
 *  <button type="button" class="project-feature-toggle is-disabled" data-enabled-text="Enabled" data-disabled-text="Disabled" disabled="true">
-*  <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+*  <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
 *  </button>
 
 *  ### Loading should have `is-loading` and an icon with `loading-icon` class
 *  <button type="button" class="project-feature-toggle is-loading" data-enabled-text="Enabled" data-disabled-text="Disabled">
-*  <i class="fa fa-spinner fa-spin loading-icon"></i>
+*  <span class="gl-spinner loading-icon" aria-label="Loading"></span>
 *  </button>
 */
 .project-feature-toggle {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 3d09edfe181..1a568bb41a5 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,3 +1,6 @@
+// Custom Fontawesome icons
+@import 'fontawesome_custom';
+
 /**
  * Apply Markup (Markdown/AsciiDoc) typography
  *
@@ -432,11 +435,11 @@
     &::before {
       margin-right: 4px;
 
-      font: normal normal normal 14px/1 FontAwesome;
+      font-style: normal;
       font-size: inherit;
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
-      content: '\f0c6';
+      content: '📎';
     }
 
     &.no-attachment-icon {
@@ -573,10 +576,6 @@ body {
   font-size: 1.25em;
   font-weight: $gl-font-weight-bold;
 
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   &.with-button {
     line-height: 34px;
   }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f0b1e859139..808813599c5 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -468,7 +468,6 @@ $gl-line-height-20: 20px;
 $gl-line-height-24: 24px;
 $gl-line-height-14: 14px;
 
-$issue-box-upcoming-bg: #8f8f8f;
 $pages-group-name-color: #4c4e54;
 
 /*
diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
index 6c51c4b0ec3..b148cc8f0e7 100644
--- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
+++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
@@ -22,32 +22,14 @@
     border-radius: $gl-border-radius-base;
 
     .select2-arrow {
-      background-image: none;
-      background-color: transparent;
-      border: 0;
       padding-top: 12px;
       padding-right: 20px;
-      font-size: 10px;
+      /* stylelint-disable-next-line function-url-quotes */
+      background: url(asset_path('chevron-down.png')) no-repeat 2px 8px;
 
       b {
         display: none;
       }
-
-      &::after {
-        content: '\f078';
-        position: absolute;
-        z-index: 1;
-        text-align: center;
-        pointer-events: none;
-        box-sizing: border-box;
-        color: $gray-darkest;
-        display: inline-block;
-        font: normal normal normal 14px/1 FontAwesome;
-        font-size: inherit;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
     }
 
     .select2-chosen {
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 499394ad960..cc876c9a635 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -4,7 +4,7 @@
     position: absolute;
     top: 48%;
     left: -$length;
-    border-top: 2px solid $border-color;
+    border-top: 2px solid var(--border-color, $border-color);
     width: $length;
     height: 1px;
   }
@@ -14,14 +14,14 @@
   display: inline-block;
   padding: 8px 10px 9px;
   width: 100%;
-  border: 1px solid $border-color;
+  border: 1px solid var(--border-color, $border-color);
   border-radius: $border-radius;
-  background-color: $white;
+  background-color: var(--white, $white);
 
   &:hover {
-    background-color: $gray-darker;
+    background-color: var(--gray-50, $gray-50);
     border: 1px solid $dropdown-toggle-active-border-color;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
   }
 }
 
@@ -66,7 +66,7 @@
 
 @mixin mini-pipeline-item() {
   border-radius: 100px;
-  background-color: $white;
+  background-color: var(--white, $white);
   border-width: 1px;
   border-style: solid;
   width: $ci-action-icon-size;
@@ -85,22 +85,22 @@
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $green-100, $green-200, $green-500, $green-600, $green-700);
   }
 
   &.ci-status-icon-failed {
-    @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $red-100, $red-200, $red-500, $red-600, $red-700);
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-waiting-for-resource,
   &.ci-status-icon-success-with-warnings {
-    @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
   }
 
   &.ci-status-icon-preparing,
   &.ci-status-icon-running {
-    @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
+    @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
   }
 
   &.ci-status-icon-canceled,
@@ -108,12 +108,12 @@
   &.ci-status-icon-disabled,
   &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
-    @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
+    @include mini-pipeline-graph-color(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black);
   }
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
+    @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
   }
 }
 
@@ -226,7 +226,7 @@
       &:focus {
         outline: none;
         text-decoration: none;
-        background-color: $gray-darker;
+        background-color: var(--gray-100, $gray-50);
       }
     }
   }
diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss
index beb80a14c5a..2eaf4517710 100644
--- a/app/assets/stylesheets/page_bundles/alert_management_details.scss
+++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss
@@ -17,22 +17,19 @@
     }
   }
 
-  .assignee-dropdown-item {
-    .dropdown-item {
-      @include gl-display-flex;
-      @include gl-align-items-center;
-
+  .dropdown-item {
+    &:first-child {
       &::before {
-        top: 50% !important;
+        @include gl-pt-0;
       }
+    }
 
-      &.is-active {
-        &:last-child {
-          @include gl-border-b-gray-100;
-          @include gl-border-b-1;
-          @include gl-border-b-solid;
-        }
-      }
+    &::before {
+      @include gl-pt-8;
+    }
+
+    .gl-new-dropdown-item-text-wrapper {
+      @include gl-py-0;
     }
   }
 
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index ffc15af6329..3d1ae3519a9 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -92,7 +92,6 @@
   .board-title-caret {
     border-radius: $border-radius-default;
     line-height: $gl-spacing-scale-5;
-    height: $gl-spacing-scale-5;
 
     &.btn svg {
       top: 0;
@@ -173,13 +172,6 @@
   }
 }
 
-.board-promotion-state {
-  background-color: var(--white, $white);
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
 .board-list-component {
   min-height: 0; // firefox fix
 }
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 2f0f4a46658..3962c546b51 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -61,7 +61,7 @@
   }
 
   .environment-information {
-    border: 1px solid $border-color;
+    border: 1px solid var(--border-color, $border-color);
     padding: 8px $gl-padding 12px;
     border-radius: $border-radius-default;
 
@@ -219,9 +219,9 @@
   }
 
   .builds-container {
-    background-color: $white;
-    border-top: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
+    background-color: var(--white, $white);
+    border-top: 1px solid var(--border-color, $border-color);
+    border-bottom: 1px solid var(--border-color, $border-color);
     max-height: 300px;
     width: 289px;
     overflow: auto;
@@ -237,7 +237,7 @@
       width: 270px;
 
       &:hover {
-        color: $gl-text-color;
+        color: var(--gl-text-color, $gl-text-color);
       }
     }
 
@@ -256,13 +256,13 @@
       }
 
       &:hover {
-        background-color: $gray-darker;
+        background-color: var(--gray-50, $gray-50);
       }
     }
   }
 
   .link-commit {
-    color: $blue-600;
+    color: var(--blue-600, $blue-600);
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss
index 8522a0a8fe4..232d363b7f1 100644
--- a/app/assets/stylesheets/page_bundles/ci_status.scss
+++ b/app/assets/stylesheets/page_bundles/ci_status.scss
@@ -2,7 +2,7 @@
 
 .ci-status {
   padding: 2px 7px 4px;
-  border: 1px solid $gray-darker;
+  border: 1px solid var(--border-color, $border-color);
   white-space: nowrap;
   border-radius: 4px;
 
@@ -18,7 +18,11 @@
   }
 
   &.ci-failed {
-    @include status-color($red-100, $red-500, $red-600);
+    @include status-color(
+      var(--red-100, $red-100),
+      var(--red-500, $red-500),
+      var(--red-600, $red-600)
+    );
   }
 
   &.ci-success {
@@ -26,11 +30,12 @@
   }
 
   &.ci-canceled,
+  &.ci-skipped,
   &.ci-disabled,
   &.ci-scheduled,
   &.ci-manual {
-    color: $gl-text-color;
-    border-color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
+    border-color: currentColor;
 
     &:not(span):hover {
       background-color: rgba($gl-text-color, 0.07);
@@ -38,25 +43,37 @@
   }
 
   &.ci-preparing {
-    @include status-color($gray-100, $gray-300, $gray-400);
+    @include status-color(
+      var(--gray-100, $gray-100),
+      var(--gray-300, $gray-300),
+      var(--gray-400, $gray-400)
+    );
   }
 
   &.ci-pending,
   &.ci-waiting-for-resource,
   &.ci-failed-with-warnings,
   &.ci-success-with-warnings {
-    @include status-color($orange-50, $orange-500, $orange-700);
+    @include status-color(
+      var(--orange-50, $orange-50),
+      var(--orange-500, $orange-500),
+      var(--orange-700, $orange-700)
+    );
   }
 
   &.ci-info,
   &.ci-running {
-    @include status-color($blue-100, $blue-500, $blue-600);
+    @include status-color(
+      var(--blue-100, $blue-100),
+      var(--blue-500, $blue-500),
+      var(--blue-600, $blue-600)
+    );
   }
 
   &.ci-created,
   &.ci-skipped {
-    color: $gl-text-color-secondary;
-    border-color: $gl-text-color-secondary;
+    color: var(--gray-500, $gray-500);
+    border-color: currentColor;
 
     &:not(span):hover {
       background-color: rgba($gl-text-color-secondary, 0.07);
diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
index 3a5e2e4159d..4a48333cd27 100644
--- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss
+++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
@@ -314,11 +314,6 @@
         vertical-align: top;
         font-weight: $gl-font-weight-normal;
       }
-
-      .fa {
-        color: var(--gray-500, $gray-500);
-        font-size: $code-font-size;
-      }
     }
   }
 
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
new file mode 100644
index 00000000000..5f43d5df7e3
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -0,0 +1,81 @@
+@import 'mixins_and_variables_and_functions';
+
+.import-jobs-to-col {
+  width: 39%;
+}
+
+.import-jobs-status-col {
+  width: 15%;
+}
+
+.import-jobs-cta-col {
+  width: 1%;
+}
+
+.import-project-name-input {
+  border-radius: 0 $border-radius-default $border-radius-default 0;
+  position: relative;
+  left: -1px;
+  max-width: 300px;
+}
+
+.import-slash-divider {
+  background-color: $gray-lightest;
+  border: 1px solid $border-color;
+}
+
+.import-row {
+  height: 55px;
+}
+
+.import-table {
+  .import-jobs-from-col,
+  .import-jobs-to-col,
+  .import-jobs-status-col,
+  .import-jobs-cta-col {
+    border-bottom-width: 1px;
+    padding-left: $gl-padding;
+  }
+}
+
+.import-projects-loading-icon {
+  margin-top: $gl-padding-32;
+}
+
+.import-entities-target-select {
+  &.disabled {
+    .import-entities-target-select-separator,
+    .select2-container.select2-container-disabled .select2-choice {
+      color: var(--gray-400, $gray-400);
+      border-color: var(--gray-100, $gray-100);
+      background-color: var(--gray-10, $gray-10);
+    }
+
+    .select2-container.select2-container-disabled .select2-choice .select2-arrow {
+      background-color: var(--gray-10, $gray-10);
+    }
+  }
+
+  .import-entities-target-select-separator {
+    border-color: var(--gray-200, $gray-200);
+    background-color: var(--gray-10, $gray-10);
+  }
+
+  .select2-container {
+    > .select2-choice {
+      .select2-arrow {
+        background-color: var(--white, $white);
+      }
+
+      border-color: var(--gray-200, $gray-200);
+      color: var(--gray-900, $gray-900) !important;
+      background-color: var(--white, $white) !important;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .gl-form-input {
+    box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
index b0655408edf..a26affb10a9 100644
--- a/app/assets/stylesheets/page_bundles/merge_conflicts.scss
+++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
@@ -255,10 +255,6 @@ $colors: (
     }
   }
 
-  .btn-success .fa-spinner {
-    color: var(--white, $white);
-  }
-
   .editor-wrap {
     &.is-loading {
       .editor {
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
new file mode 100644
index 00000000000..3c95ecc9bf0
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -0,0 +1,189 @@
+@import 'mixins_and_variables_and_functions';
+
+@mixin inset-border-1-red-500($important: false) {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-500 if-important($important);
+}
+
+.timezone-dropdown {
+  .dropdown-menu {
+    @include gl-w-full;
+  }
+
+  .gl-new-dropdown-item-text-primary {
+    @include gl-overflow-hidden;
+    @include gl-text-overflow-ellipsis;
+  }
+}
+
+.modal-footer {
+  @include gl-bg-gray-10;
+}
+
+.invalid-dropdown {
+  .gl-dropdown-toggle {
+    @include inset-border-1-red-500;
+
+    &:hover {
+      @include inset-border-1-red-500(true);
+    }
+  }
+}
+
+//// Copied from roadmaps.scss - adapted for on-call schedules
+$header-item-height: 72px;
+$item-height: 40px;
+$details-cell-width: 180px;
+$timeline-cell-height: 32px;
+$timeline-cell-width: 180px;
+$border-style: 1px solid var(--gray-100, $gray-100);
+$gradient-dark-gray: rgba(0, 0, 0, 0.15);
+$gradient-gray: rgba(255, 255, 255, 0.001);
+$scroll-top-gradient: linear-gradient(to bottom, $gradient-dark-gray 0%, $gradient-gray 100%);
+$scroll-bottom-gradient: linear-gradient(to bottom, $gradient-gray 0%, $gradient-dark-gray 100%);
+$column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradient-gray 100%);
+
+.schedule-shell {
+  @include gl-relative;
+  @include gl-h-full;
+  @include gl-w-full;
+  @include gl-overflow-x-auto;
+  @include gl-border-gray-100;
+  @include gl-border-1;
+  @include gl-border-solid;
+  @include gl-rounded-base;
+}
+
+.timeline-section {
+  @include gl-sticky;
+  @include gl-top-0;
+  z-index: 20;
+
+  .timeline-header-blank,
+  .timeline-header-item {
+    @include float-left;
+    height: $header-item-height;
+    border-bottom: $border-style;
+    background-color: var(--white, $white);
+  }
+
+  .timeline-header-blank {
+    @include gl-sticky;
+    @include gl-top-0;
+    @include gl-left-0;
+    width: $details-cell-width;
+    z-index: 2;
+  }
+
+  .timeline-header-item {
+    // container size minus left panel width divided by 2 week timeframes
+    width: calc((100% - #{$details-cell-width}) / 2);
+
+    &:last-of-type .item-label {
+      @include gl-border-r-0;
+    }
+
+    .item-label,
+    .item-sublabel .sublabel-value {
+      color: var(--gray-400, $gray-400);
+      @include gl-font-weight-normal;
+
+      &.label-dark {
+        @include gl-text-gray-900;
+      }
+
+      &.label-bold {
+        @include gl-font-weight-bold;
+      }
+    }
+
+    .item-label {
+      @include gl-py-4;
+      @include gl-pl-4;
+      border-right: $border-style;
+      border-bottom: $border-style;
+    }
+
+    .item-sublabel {
+      @include gl-relative;
+      @include gl-display-flex;
+
+      .sublabel-value {
+        @include gl-flex-grow-1;
+        @include gl-flex-basis-0;
+
+        text-align: center;
+        @include gl-font-base;
+        padding: 2px 0;
+      }
+    }
+
+    .current-day-indicator-header {
+      @include gl-absolute;
+      @include gl-bottom-0;
+      height: $grid-size;
+      width: $grid-size;
+      background-color: var(--red-500, $red-500);
+      @include gl-rounded-full;
+      transform: translate(-50%, 50%);
+    }
+  }
+}
+
+.timeline-section .timeline-header-blank,
+.list-section .details-cell {
+  &::after {
+    @include gl-h-full;
+    @include gl-content-empty;
+    @include gl-absolute;
+    @include gl-top-0;
+    right: -$grid-size;
+    width: $grid-size;
+    @include gl-pointer-events-none;
+    background: $column-right-gradient;
+  }
+}
+
+.details-cell,
+.timeline-cell {
+  @include float-left;
+  height: $item-height;
+}
+
+.details-cell {
+  @include gl-sticky;
+  @include gl-left-0;
+  width: $details-cell-width;
+  @include gl-font-base;
+  background-color: var(--white, $white);
+  z-index: 10;
+}
+
+.timeline-cell {
+  @include gl-relative;
+  // width: $timeline-cell-width;
+  // container size minus left panel width divided by 2 week timeframes
+  width: calc((100% - #{$details-cell-width}) / 2);
+  @include gl-bg-transparent;
+  border-right: $border-style;
+
+  &:last-child {
+    @include gl-border-r-0;
+  }
+
+  .current-day-indicator {
+    @include gl-absolute;
+    top: -1px;
+    width: $gl-spacing-scale-1;
+    height: calc(100% + 1px);
+    background-color: var(--red-500, $red-500);
+    @include gl-pointer-events-none;
+    transform: translateX(-50%);
+  }
+}
+
+.gl-token {
+  .gl-avatar-labeled-label {
+    @include gl-text-white;
+    @include gl-font-weight-normal;
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 1de66aa73da..d9ab52774bd 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -33,7 +33,7 @@
     }
 
     .stage {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
       font-weight: $gl-font-weight-normal;
       vertical-align: middle;
     }
@@ -62,7 +62,7 @@
 
     a {
       font-weight: $gl-font-weight-bold;
-      color: $gl-text-color;
+      color: var(--gl-text-color, $gl-text-color);
       text-decoration: none;
 
       &:focus,
@@ -124,11 +124,46 @@
   display: flex;
   width: 100%;
   min-height: $dropdown-max-height-lg;
-  background-color: $gray-light;
+  background-color: var(--gray-50, $gray-50);
   padding: $gl-padding 0;
   overflow: auto;
 }
 
+// These are single-value classes to use with utility-class style CSS
+// but to still access this variable. Do not add other styles.
+.gl-pipeline-min-h {
+  min-height: $dropdown-max-height-lg;
+}
+
+.gl-pipeline-job-width {
+  width: 186px;
+}
+
+.gl-linked-pipeline-padding {
+  padding-right: 120px;
+}
+
+.gl-build-content {
+  @include build-content();
+}
+
+.gl-ci-action-icon-container {
+  position: absolute;
+  right: 5px;
+  top: 50% !important;
+  transform: translateY(-50%);
+
+  // Action Icons in big pipeline-graph nodes
+  &.ci-action-icon-wrapper {
+    height: 30px;
+    width: 30px;
+    border-radius: 100%;
+    display: block;
+    padding: 0;
+    line-height: 0;
+  }
+}
+
 // Pipeline graph, used at
 // app/assets/javascripts/pipelines/components/graph/graph_component.vue
 .pipeline-graph {
@@ -142,7 +177,7 @@
 
   a {
     text-decoration: none;
-    color: $gl-text-color;
+    color: var(--gl-text-color, $gl-text-color);
   }
 
   svg {
@@ -214,18 +249,18 @@
         height: 25px;
         position: absolute;
         top: -31px;
-        border-top: 2px solid $border-color;
+        border-top: 2px solid var(--border-color, $border-color);
       }
 
       &::after {
         left: -44px;
-        border-right: 2px solid $border-color;
+        border-right: 2px solid var(--border-color, $border-color);
         border-radius: 0 20px;
       }
 
       &::before {
         right: -44px;
-        border-left: 2px solid $border-color;
+        border-left: 2px solid var(--border-color, $border-color);
         border-radius: 20px 0 0;
       }
     }
@@ -281,7 +316,7 @@
 
     a.build-content:hover,
     button.build-content:hover {
-      background-color: $gray-darker;
+      background-color: var(--gray-100, $gray-100);
       border: 1px solid $dropdown-toggle-active-border-color;
     }
 
@@ -292,7 +327,7 @@
         position: absolute;
         top: 48%;
         right: -48px;
-        border-top: 2px solid $border-color;
+        border-top: 2px solid var(--border-color, $border-color);
         width: 48px;
         height: 1px;
       }
@@ -305,7 +340,7 @@
         content: '';
         top: -49px;
         position: absolute;
-        border-bottom: 2px solid $border-color;
+        border-bottom: 2px solid var(--border-color, $border-color);
         width: 25px;
         height: 69px;
       }
@@ -313,14 +348,14 @@
       // Right connecting curves
       &::after {
         right: -25px;
-        border-right: 2px solid $border-color;
+        border-right: 2px solid var(--border-color, $border-color);
         border-radius: 0 0 20px;
       }
 
       // Left connecting curves
       &::before {
         left: -25px;
-        border-left: 2px solid $border-color;
+        border-left: 2px solid var(--border-color, $border-color);
         border-radius: 0 0 0 20px;
       }
     }
@@ -355,7 +390,7 @@
       line-height: 0;
 
       svg {
-        fill: $gl-text-color-secondary;
+        fill: var(--gray-500, $gray-500);
       }
 
       .spinner {
@@ -453,13 +488,13 @@
     left: -6px;
     margin-top: 3px;
     border-width: 7px 5px 7px 0;
-    border-right-color: $border-color;
+    border-right-color: var(--border-color, $border-color);
   }
 
   &::after {
     left: -5px;
     border-width: 10px 7px 10px 0;
-    border-right-color: $white;
+    border-right-color: var(--white, $white);
   }
 }
 
@@ -484,5 +519,5 @@
 }
 
 .progress-bar.bg-primary {
-  background-color: $blue-500 !important;
+  background-color: var(--blue-500, $blue-500) !important;
 }
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
index e0e56893afc..dbde7933a8b 100644
--- a/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -22,7 +22,7 @@
     min-width: 170px; //Guarantees buttons don't break in several lines.
 
     .btn-default {
-      color: $gl-text-color-secondary;
+      color: var(--gray-500, $gray-500);
     }
 
     .btn.btn-retry:hover,
@@ -32,7 +32,7 @@
     }
 
     svg path {
-      fill: $gl-text-color-secondary;
+      fill: var(--gray-500, $gray-500);
     }
 
     .dropdown-menu {
@@ -42,12 +42,7 @@
 
     .dropdown-toggle,
     .dropdown-menu {
-      color: $gl-text-color-secondary;
-
-      .fa {
-        color: $gl-text-color-secondary;
-        font-size: 14px;
-      }
+      color: var(--gray-500, $gray-500);
     }
 
     .btn-group.open .btn-default {
diff --git a/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss b/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss
new file mode 100644
index 00000000000..3b4b1fdcded
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss
@@ -0,0 +1,11 @@
+@media print {
+  .codes-to-print {
+    background-color: var(--white);
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    margin: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 4e27f438e36..f7b8a4c5b84 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -58,22 +58,6 @@
   }
 }
 
-.cluster-application-banner {
-  height: 45px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.cluster-application-banner-close {
-  align-self: flex-start;
-  font-weight: 500;
-  font-size: 20px;
-  color: $orange-500;
-  opacity: 1;
-  margin: $gl-padding-8 14px 0 0;
-}
-
 .cluster-application-description {
   flex: 1;
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 17474b95e50..9b17da80023 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -174,12 +174,6 @@
 }
 
 .commit-actions {
-  @include media-breakpoint-up(sm) {
-    .fa-spinner {
-      font-size: 12px;
-    }
-  }
-
   .ci-status-icon svg {
     vertical-align: text-bottom;
   }
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index f357d508d5d..f237d57aa88 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -41,12 +41,6 @@
   @include media-breakpoint-down(xs) {
     width: 100%;
     margin-top: 10px;
-
-    > .issue-btn-group {
-      > .btn {
-        width: 100%;
-      }
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 5c845c37e90..e0e10d63f8e 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -74,10 +74,6 @@
     justify-content: flex-end;
   }
 
-  .select2 {
-    float: right;
-  }
-
   .encoding-selector,
   .soft-wrap-toggle {
     display: inline-block;
@@ -220,10 +216,6 @@
   }
 }
 
-.editor-title-row {
-  margin-bottom: 20px;
-}
-
 .popover.suggest-gitlab-ci-yml {
   z-index: $header-zindex - 1;
 }
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index e73b6b18afd..aeda91c1714 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -80,12 +80,6 @@
     .btn-success {
       width: 100%;
     }
-
-    .dropdown .dropdown-toggle .fa-chevron-down {
-      position: absolute;
-      top: 11px;
-      right: 8px;
-    }
   }
 }
 
@@ -299,12 +293,6 @@ table.pipeline-project-metrics tr td {
   padding: $gl-padding;
 }
 
-.mattermost-icon svg {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-bottom;
-}
-
 .mattermost-team-name {
   color: $gl-text-color-secondary;
 }
diff --git a/app/assets/stylesheets/pages/import.scss b/app/assets/stylesheets/pages/import.scss
deleted file mode 100644
index 74f80a11471..00000000000
--- a/app/assets/stylesheets/pages/import.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.import-jobs-to-col {
-  width: 39%;
-}
-
-.import-jobs-status-col {
-  width: 15%;
-}
-
-.import-jobs-cta-col {
-  width: 1%;
-}
-
-.import-project-name-input {
-  border-radius: 0 $border-radius-default $border-radius-default 0;
-  position: relative;
-  left: -1px;
-  max-width: 300px;
-}
-
-.import-namespace-select {
-  > .select2-choice {
-    border-radius: $border-radius-default 0 0 $border-radius-default;
-    position: relative;
-    left: 1px;
-  }
-}
-
-.import-slash-divider {
-  background-color: $gray-lightest;
-  border: 1px solid $border-color;
-}
-
-.import-row {
-  height: 55px;
-}
-
-.import-table {
-  .import-jobs-from-col,
-  .import-jobs-to-col,
-  .import-jobs-status-col,
-  .import-jobs-cta-col {
-    border-bottom-width: 1px;
-    padding-left: $gl-padding;
-  }
-}
-
-.import-projects-loading-icon {
-  margin-top: $gl-padding-32;
-}
-
-.btn-import {
-  .loading-icon {
-    display: none;
-  }
-
-  &.is-loading {
-    .loading-icon {
-      display: inline-block;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index cc4827f75d4..e5528c25e82 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -10,6 +10,7 @@
 }
 
 .limit-container-width {
+  .flash-container,
   .detail-page-header,
   .page-content-header,
   .commit-box,
@@ -112,7 +113,7 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white;
+    filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white);
   }
 }
 
@@ -199,10 +200,6 @@
       border: 0;
     }
 
-    .select2-container span {
-      margin-top: 0;
-    }
-
     &.assignee {
       .author-link {
         display: block;
@@ -395,6 +392,13 @@
       text-align: center;
     }
 
+    .merge-icon {
+      height: 12px;
+      width: 12px;
+      bottom: -5px;
+      right: 4px;
+    }
+
     .sidebar-collapsed-icon {
       display: flex;
       flex-direction: column;
@@ -405,7 +409,7 @@
       text-align: center;
       color: $gl-text-color-secondary;
 
-      svg {
+      > svg {
         fill: $gl-text-color-secondary;
       }
 
@@ -413,7 +417,7 @@
       &:hover .todo-undone {
         color: $gl-text-color;
 
-        svg {
+        > svg {
           fill: $gl-text-color;
         }
       }
@@ -485,10 +489,6 @@
       display: none;
     }
 
-    .merge-icon {
-      font-size: 10px;
-    }
-
     .multiple-users {
       position: relative;
       height: 24px;
@@ -697,10 +697,6 @@
 
 .issuable-list {
   li {
-    .issue-box {
-      display: flex;
-    }
-
     .issuable-info-container {
       flex: 1;
       display: flex;
@@ -894,29 +890,6 @@
   }
 }
 
-.issuable-close-button,
-.issuable-close-toggle {
-  @include transition(border-color, color);
-}
-
-.issuable-close-dropdown {
-  .dropdown-menu {
-    min-width: 270px;
-    left: auto;
-    right: 0;
-  }
-
-  .description {
-    .text {
-      margin: 0;
-    }
-  }
-
-  .dropdown-toggle > .icon {
-    margin: 0 3px;
-  }
-}
-
 /*
  * Following overrides are done to prevent
  * legacy dropdown styles from influencing
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 08faebc8ec0..1caf62067a6 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -92,6 +92,11 @@ ul.related-merge-requests > li {
   }
 }
 
+.issues-footer {
+  padding-top: $gl-padding;
+  padding-bottom: 37px;
+}
+
 .issues-nav-controls,
 .new-branch-col {
   font-size: 0;
@@ -196,14 +201,6 @@ ul.related-merge-requests > li {
       }
     }
   }
-
-  .create-merge-request-dropdown-toggle {
-    .fa-caret-down {
-      pointer-events: none;
-      color: inherit;
-      margin-left: 0;
-    }
-  }
 }
 
 .discussion-reply-holder {
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index a8b489f1273..0ccde57746a 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -30,20 +30,6 @@
     margin-bottom: 0;
   }
 
-  .member-controls {
-    .fa {
-      line-height: inherit;
-    }
-  }
-
-  .btn-remove {
-    width: 100%;
-
-    @include media-breakpoint-up(sm) {
-      width: auto;
-    }
-  }
-
   &.existing-title {
     @include media-breakpoint-up(sm) {
       float: left;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a0ac55e4c6c..efca82def92 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -53,6 +53,7 @@ $mr-widget-min-height: 69px;
   position: relative;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
+  background: var(--white, $white);
 
   .gl-skeleton-loader {
     display: block;
@@ -61,7 +62,7 @@ $mr-widget-min-height: 69px;
 
 .mr-widget-extension {
   border-top: 1px solid $border-color;
-  background-color: $gray-light;
+  background-color: $gray-50;
 
   &.clickable:hover {
     background-color: $gray-100;
@@ -87,6 +88,7 @@ $mr-widget-min-height: 69px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
   border-top: 0;
+  background: var(--white, $white);
 }
 
 .mr-widget-body,
@@ -161,12 +163,6 @@ $mr-widget-min-height: 69px;
 
   .btn {
     font-size: $gl-font-size;
-
-    &.dropdown-toggle {
-      .fa {
-        color: inherit;
-      }
-    }
   }
 
   .accept-merge-holder {
@@ -287,10 +283,6 @@ $mr-widget-min-height: 69px;
       margin-top: 0;
       margin-bottom: 0;
 
-      &.has-conflicts .fa-exclamation-triangle {
-        color: $orange-500;
-      }
-
       time {
         font-weight: $gl-font-weight-normal;
       }
@@ -343,13 +335,6 @@ $mr-widget-min-height: 69px;
       }
     }
 
-    .dropdown-toggle {
-      .fa {
-        margin-left: 0;
-        color: inherit;
-      }
-    }
-
     .has-custom-error {
       display: inline-block;
     }
@@ -507,19 +492,6 @@ $mr-widget-min-height: 69px;
   display: none;
 }
 
-#modal_merge_info .modal-dialog {
-  .dark {
-    margin-right: 40px;
-  }
-
-  .btn-clipboard {
-    margin-right: 20px;
-    margin-top: 5px;
-    position: absolute;
-    right: 0;
-  }
-}
-
 .mr-links {
   padding-left: $gl-padding-8 + $status-icon-size + $gl-btn-padding;
 
@@ -560,16 +532,13 @@ $mr-widget-min-height: 69px;
   border-radius: $border-radius-default;
   padding: $gl-padding;
   border: 1px solid $border-color;
+  background: var(--white, $white);
   min-height: $mr-widget-min-height;
 
   @include media-breakpoint-up(md) {
     align-items: center;
   }
 
-  .dropdown-toggle .fa {
-    color: $gl-text-color;
-  }
-
   .git-merge-container {
     justify-content: space-between;
     flex: 1;
@@ -720,7 +689,7 @@ $mr-widget-min-height: 69px;
     z-index: 199;
     white-space: nowrap;
 
-    .dropdown-menu-toggle {
+    .gl-dropdown-toggle {
       width: auto;
       max-width: 170px;
 
@@ -778,7 +747,7 @@ $mr-widget-min-height: 69px;
 .epic-tabs-holder {
   top: $header-height;
   z-index: 250;
-  background-color: $white;
+  background-color: $body-bg;
   border-bottom: 1px solid $border-color;
 
   .with-system-header & {
@@ -1039,3 +1008,11 @@ $mr-widget-min-height: 69px;
 .diff-file-row.is-active {
   background-color: $gray-50;
 }
+
+.mr-conflict-loader {
+  max-width: 334px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e23ec25a2f3..4216091e8a9 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -190,8 +190,7 @@ $note-form-margin-left: 72px;
         border: 1px solid darken($gray-100, 25%);
       }
 
-      .note-headline-light,
-      .fa-spinner {
+      .note-headline-light {
         margin-left: 3px;
       }
     }
@@ -249,16 +248,6 @@ $note-form-margin-left: 72px;
     .note-emoji-button {
       position: relative;
       line-height: 1;
-
-      .fa-spinner {
-        display: none;
-      }
-
-      &.is-loading {
-        .fa-spinner {
-          display: inline-block;
-        }
-      }
     }
   }
 
@@ -361,7 +350,7 @@ $note-form-margin-left: 72px;
             left: $gl-padding-24;
             right: 0;
             bottom: 0;
-            background: linear-gradient(rgba($white, 0.1) -100px, $white 100%);
+            background: linear-gradient(rgba($white, 0.1) -100px, $body-bg 100%);
           }
         }
       }
@@ -407,8 +396,6 @@ $note-form-margin-left: 72px;
 .discussion-body .diff-file {
   .file-title {
     cursor: default;
-    line-height: 42px;
-    padding: 0 $gl-padding;
     border-top: 1px solid $border-color;
     border-radius: 0;
 
@@ -791,13 +778,6 @@ $note-form-margin-left: 72px;
     outline: none;
     color: $blue-600;
   }
-
-  .fa {
-    margin-right: 3px;
-    font-size: 10px;
-    line-height: 18px;
-    vertical-align: top;
-  }
 }
 
 .note-role {
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss
index e1cbf0e6654..33ab42b5511 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/pages/notifications.scss
@@ -1,6 +1,4 @@
 .notification-list-item {
-  line-height: 34px;
-
   .dropdown-menu {
     @extend .dropdown-menu-right;
   }
@@ -37,8 +35,4 @@
 .notification {
   position: relative;
   top: 1px;
-
-  .fa {
-    font-size: 18px;
-  }
 }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index b37aa6cd285..89be1c024db 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -46,11 +46,6 @@
       fill: $gl-text-color;
     }
 
-    .fa {
-      font-size: 12px;
-      color: $gl-text-color;
-    }
-
     .commit-sha {
       color: $blue-600;
     }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 09501d3713d..7fafd28be56 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -10,12 +10,6 @@
   }
 
   .input-group {
-    .select2-container {
-      display: unset;
-      max-width: unset;
-      flex-grow: 1;
-    }
-
     > div {
       &:last-child {
         padding-right: 0;
@@ -52,7 +46,6 @@
       flex-grow: 1;
     }
 
-    + .select2 a,
     + .btn-default {
       border-radius: 0 $border-radius-base $border-radius-base 0;
     }
@@ -147,23 +140,10 @@
       margin-left: 0;
     }
 
-    .fa {
-      color: $layout-link-gray;
-    }
-
     svg {
       fill: $layout-link-gray;
     }
 
-    .fa-caret-down {
-      margin-left: 3px;
-      line-height: 0;
-
-      &.dropdown-btn-icon {
-        margin-left: 0;
-      }
-    }
-
     .notifications-icon {
       top: 1px;
       margin-right: 0;
@@ -179,13 +159,6 @@
     height: 24px;
   }
 
-  .dropdown-toggle,
-  .clone-dropdown-btn {
-    .fa {
-      color: unset;
-    }
-  }
-
   .home-panel-action-button,
   .project-action-button {
     margin: $gl-padding $gl-padding-8 0 0;
@@ -258,10 +231,6 @@
   color: $gray-700;
 }
 
-.transfer-project .select2-container {
-  min-width: 200px;
-}
-
 .deploy-key {
   // Ensure that the fingerprint does not overflow on small screens
   .fingerprint {
@@ -512,7 +481,7 @@
       top: 0;
       height: calc(100% - #{$browser-scrollbar-size});
 
-      .fa {
+      svg {
         top: 50%;
         margin-top: -$gl-padding-8;
       }
@@ -1057,11 +1026,6 @@ pre.light-well {
       margin-bottom: 0;
     }
   }
-
-  .select2-choice {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
 }
 
 .project-home-empty {
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 8ed6936475b..856e49bd144 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -12,16 +12,18 @@
   }
 }
 
-.runner-status-online {
-  color: $green-600;
-}
+.runner-status {
+  &.runner-status-online {
+    background-color: $green-600;
+  }
 
-.runner-status-offline {
-  color: $gray-darkest;
-}
+  &.runner-status-offline {
+    background-color: $gray-darkest;
+  }
 
-.runner-status-paused {
-  color: $red-500;
+  &.runner-status-paused {
+    background-color: $red-500;
+  }
 }
 
 .runner {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 502a1881fd2..cd99c667001 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -1,5 +1,7 @@
 $search-dropdown-max-height: 400px;
 $search-avatar-size: 16px;
+$search-sidebar-min-width: 240px;
+$search-sidebar-max-width: 300px;
 
 .search-results {
   .search-result-row {
@@ -17,6 +19,13 @@ $search-avatar-size: 16px;
   }
 }
 
+.search-sidebar {
+  @include media-breakpoint-up(md) {
+    min-width: $search-sidebar-min-width;
+    max-width: $search-sidebar-max-width;
+  }
+}
+
 .search form:hover,
 .file-finder-input:hover,
 .issuable-search-form:hover,
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 7b18e3774d8..335e177d169 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -169,11 +169,6 @@
   .form-check {
     margin-bottom: 10px;
 
-    i.fa {
-      margin: 2px 0;
-      font-size: 20px;
-    }
-
     .option-title {
       font-weight: $gl-font-weight-normal;
       display: inline-block;
@@ -193,7 +188,7 @@
     }
 
     &.disabled {
-      i.fa {
+      svg {
         opacity: 0.5;
       }
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 429181c2ad4..8f3574a337b 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,8 +1,11 @@
+.project-last-commit {
+  min-height: 4.75rem;
+}
+
 .tree-holder {
   .nav-block {
     margin: 16px 0;
 
-    .btn .fa,
     .btn svg {
       color: $gl-text-color-secondary;
     }
@@ -69,7 +72,7 @@
       }
 
       .btn {
-        margin: 10px 0 0;
+        margin-top: 10px;
       }
     }
   }
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index b3e53e35f6e..af43c532b7c 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -977,12 +977,12 @@ body.navless {
   border-color: #e3e3e3;
   color: #303030;
 }
-.btn.btn-success, .btn.btn-register {
+.btn.btn-success {
   background-color: #108548;
   border-color: #217645;
   color: #fff;
 }
-.btn.btn-success:active, .btn.btn-success.active, .btn.btn-register:active, .btn.btn-register.active {
+.btn.btn-success:active, .btn.btn-success.active {
   box-shadow: rgba(0, 0, 0, 0.16);
   background-color: #24663b;
   border-color: #0d532a;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 6ab02bd5e27..7f2bea9bf26 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -1,63 +1,63 @@
 $gray-10: #1f1f1f;
-$gray-50: #2e2e2e;
-$gray-100: #4f4f4f;
-$gray-200: #707070;
-$gray-300: #919191;
-$gray-400: #a7a7a7;
-$gray-500: #bababa;
-$gray-600: #ccc;
-$gray-700: #dfdfdf;
-$gray-800: #f2f2f2;
+$gray-50: #303030;
+$gray-100: #404040;
+$gray-200: #525252;
+$gray-300: #5e5e5e;
+$gray-400: #868686;
+$gray-500: #999;
+$gray-600: #bfbfbf;
+$gray-700: #dbdbdb;
+$gray-800: #f0f0f0;
 $gray-900: #fafafa;
 $gray-950: #fff;
 
-$green-50: #072b15;
-$green-100: #0a4020;
-$green-200: #0e5a2d;
-$green-300: #12753a;
-$green-400: #168f48;
-$green-500: #1aaa55;
-$green-600: #37b96d;
-$green-700: #75d09b;
-$green-800: #b3e6c8;
-$green-900: #dcf5e7;
+$green-50: #0a4020;
+$green-100: #0d532a;
+$green-200: #24663b;
+$green-300: #217645;
+$green-400: #108548;
+$green-500: #2da160;
+$green-600: #52b87a;
+$green-700: #91d4a8;
+$green-800: #c3e6cd;
+$green-900: #ecf4ee;
 $green-950: #f1fdf6;
 
-$blue-50: #0a2744;
-$blue-100: #0f3b66;
-$blue-200: #134a81;
-$blue-300: #17599c;
-$blue-400: #1b69b6;
-$blue-500: #1f78d1;
-$blue-600: #418cd8;
-$blue-700: #73afea;
-$blue-800: #b8d6f4;
-$blue-900: #e4f0fb;
-$blue-950: #f6fafe;
-
-$orange-50: #592800;
-$orange-100: #853c00;
-$orange-200: #a35200;
-$orange-300: #c26700;
-$orange-400: #de7e00;
-$orange-500: #fc9403;
-$orange-600: #fca429;
-$orange-700: #fdbc60;
-$orange-800: #fed69f;
-$orange-900: #fff1de;
-$orange-950: #fffaf4;
-
-$red-50: #4b140b;
-$red-100: #711e11;
-$red-200: #8b2615;
-$red-300: #a62d19;
-$red-400: #c0341d;
-$red-500: #db3b21;
-$red-600: #e05842;
-$red-700: #ea8271;
-$red-800: #f2b4a9;
-$red-900: #fbe5e1;
-$red-950: #fef6f5;
+$blue-50: #033464;
+$blue-100: #064787;
+$blue-200: #0b5cad;
+$blue-300: #1068bf;
+$blue-400: #1f75cb;
+$blue-500: #428fdc;
+$blue-600: #63a6e9;
+$blue-700: #9dc7f1;
+$blue-800: #cbe2f9;
+$blue-900: #e9f3fc;
+$blue-950: #f2f9ff;
+
+$orange-50: #5c2900;
+$orange-100: #703800;
+$orange-200: #8f4700;
+$orange-300: #9e5400;
+$orange-400: #ab6100;
+$orange-500: #c17d10;
+$orange-600: #d99530;
+$orange-700: #e9be74;
+$orange-800: #f5d9a8;
+$orange-900: #fdf1dd;
+$orange-950: #fff4e1;
+
+$red-50: #660e00;
+$red-100: #8d1300;
+$red-200: #ae1800;
+$red-300: #c91c00;
+$red-400: #dd2b0e;
+$red-500: #ec5941;
+$red-600: #f57f6c;
+$red-700: #fcb5aa;
+$red-800: #fdd4cd;
+$red-900: #fcf1ef;
+$red-950: #fff4f3;
 
 $indigo-50: #1a1a40;
 $indigo-100: #292961;
@@ -166,14 +166,16 @@ body.gl-dark {
 
   --white: #{$white};
   --black: #{$black};
+
+  --svg-status-bg: #{$white};
 }
 
 $border-white-light: $gray-900;
 $border-white-normal: $gray-900;
 
-$body-bg: $gray-50;
-$input-bg: $gray-100;
-$input-focus-bg: $gray-100;
+$body-bg: $gray-10;
+$input-bg: $white;
+$input-focus-bg: $white;
 $input-color: $gray-900;
 $input-group-addon-bg: $gray-900;
 
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index 85115cfd5d9..417377b514e 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -64,14 +64,20 @@
         color: $search-and-nav-links;
 
         > a {
+          .notification-dot {
+            border: 2px solid $nav-svg-color;
+          }
+
+          &.header-help-dropdown-toggle {
+            .notification-dot {
+              background-color: $search-and-nav-links;
+            }
+          }
+
           &.header-user-dropdown-toggle {
             .header-user-avatar {
               border-color: $search-and-nav-links;
             }
-
-            .header-user-notification-dot {
-              border: 2px solid $nav-svg-color;
-            }
           }
 
           &:hover,
@@ -84,9 +90,14 @@
               fill: currentColor;
             }
 
-            &.header-user-dropdown-toggle .header-user-notification-dot {
+            .notification-dot {
+              will-change: border-color, background-color;
               border-color: $nav-svg-color + 33;
             }
+
+            &.header-help-dropdown-toggle .notification-dot {
+              background-color: $white;
+            }
           }
         }
 
@@ -101,9 +112,15 @@
             }
           }
 
-          &.header-user-dropdown-toggle .header-user-notification-dot {
+          .notification-dot {
             border-color: $white;
           }
+
+          &.header-help-dropdown-toggle {
+            .notification-dot {
+              background-color: $nav-svg-color;
+            }
+          }
         }
 
         .impersonated-user,
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index a3bb7c868df..bf251993c38 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -129,3 +129,30 @@
   content: '';
   display: flex;
 }
+
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1085
+.gl-md-flex-direction-column {
+  @media (min-width: $breakpoint-md) {
+    flex-direction: column;
+  }
+}
+
+// Same as above
+.gl-md-flex-direction-column\! {
+  @media (min-width: $breakpoint-md) {
+    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%;
+}