3 files changed, 29 insertions, 119 deletions
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 {