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

18 files changed, 168 insertions, 489 deletions

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;
 
 /*