From e8d2c2579383897a1dd7f9debd359abe8ae8373d Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Tue, 20 Jul 2021 09:55:51 +0000
Subject: Add latest changes from gitlab-org/gitlab@14-1-stable-ee

---
 app/assets/stylesheets/application_dark.scss       |   4 +
 app/assets/stylesheets/components/avatar.scss      |  13 +-
 .../components/batch_comments/review_bar.scss      |  10 +-
 app/assets/stylesheets/framework.scss              |   4 +-
 .../stylesheets/framework/contextual_sidebar.scss  | 470 ++++++++++++
 .../framework/contextual_sidebar_header.scss       |   1 +
 .../contextual_sidebar.scss                        |   7 -
 .../contextual_sidebar_base.scss                   | 386 ----------
 .../contextual_sidebar_variant.scss                | 552 --------------
 app/assets/stylesheets/framework/diffs.scss        |   8 +-
 app/assets/stylesheets/framework/dropdowns.scss    |  18 +-
 app/assets/stylesheets/framework/editor-lite.scss  |  76 --
 app/assets/stylesheets/framework/files.scss        |  22 +
 app/assets/stylesheets/framework/flash.scss        |  11 +-
 app/assets/stylesheets/framework/header.scss       |   5 +-
 app/assets/stylesheets/framework/lists.scss        |   6 -
 .../stylesheets/framework/source_editor.scss       |  76 ++
 .../stylesheets/framework/system_messages.scss     |   3 +-
 app/assets/stylesheets/framework/variables.scss    |  12 -
 ...application_settings_metrics_and_profiling.scss |   2 +-
 app/assets/stylesheets/page_bundles/boards.scss    |   4 +
 app/assets/stylesheets/page_bundles/ide.scss       |  16 +-
 app/assets/stylesheets/page_bundles/members.scss   | 152 ----
 .../stylesheets/page_bundles/merge_requests.scss   |   1 +
 app/assets/stylesheets/page_bundles/milestone.scss |  23 +-
 .../stylesheets/page_bundles/new_namespace.scss    |   5 +-
 app/assets/stylesheets/page_bundles/pipelines.scss |   6 +
 app/assets/stylesheets/pages/clusters.scss         |  14 +
 app/assets/stylesheets/pages/commits.scss          |   2 +
 app/assets/stylesheets/pages/issuable.scss         |  24 +-
 app/assets/stylesheets/pages/merge_requests.scss   |  10 +-
 app/assets/stylesheets/pages/notes.scss            |   1 +
 app/assets/stylesheets/snippets.scss               |  15 +-
 app/assets/stylesheets/startup/startup-dark.scss   | 831 +++------------------
 .../stylesheets/startup/startup-general.scss       | 693 +++--------------
 app/assets/stylesheets/startup/startup-signin.scss |  38 +-
 app/assets/stylesheets/themes/_dark.scss           |  11 +
 app/assets/stylesheets/themes/theme_helper.scss    |  25 +-
 app/assets/stylesheets/themes/theme_indigo.scss    |   2 +-
 app/assets/stylesheets/utilities.scss              |  47 ++
 40 files changed, 996 insertions(+), 2610 deletions(-)
 create mode 100644 app/assets/stylesheets/framework/contextual_sidebar.scss
 delete mode 100644 app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss
 delete mode 100644 app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss
 delete mode 100644 app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
 delete mode 100644 app/assets/stylesheets/framework/editor-lite.scss
 create mode 100644 app/assets/stylesheets/framework/source_editor.scss

(limited to 'app/assets/stylesheets')

diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss
index 90aab7ce342..30db4e2296d 100644
--- a/app/assets/stylesheets/application_dark.scss
+++ b/app/assets/stylesheets/application_dark.scss
@@ -57,4 +57,8 @@ body.gl-dark {
       }
     }
   }
+
+  .md code {
+    background-color: $gray-200;
+  }
 }
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index c8f69bfdbaf..3885134e276 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -67,15 +67,12 @@ $avatar-sizes: (
   )
 );
 
-$identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
-  $identicon-orange, $identicon-gray;
-
 .avatar,
 .avatar-container {
   float: left;
   margin-right: $gl-padding;
   border-radius: $avatar-radius;
-  border: 1px solid $gray-normal;
+  border: 1px solid $t-gray-a-08;
 
   @each $size, $size-config in $avatar-sizes {
     &.s#{$size} {
@@ -125,8 +122,8 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: $identicon-text-color;
-  background-color: $identicon-gray;
+  color: $gray-900;
+  background-color: $gray-50;
 
   // Sizes
   @each $size, $size-config in $avatar-sizes {
@@ -143,9 +140,9 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
   }
 
   // Background colors
-  @for $i from 1 through length($identicon-backgrounds) {
+  @for $i from 1 through length($gl-avatar-identicon-bgs) {
     &.bg#{$i} {
-      background-color: nth($identicon-backgrounds, $i);
+      background-color: nth($gl-avatar-identicon-bgs, $i);
     }
   }
 }
diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss
index d769ea73101..bcd06974813 100644
--- a/app/assets/stylesheets/components/batch_comments/review_bar.scss
+++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss
@@ -2,13 +2,15 @@
   position: fixed;
   bottom: 0;
   left: 0;
-  width: 100%;
-  background: $white;
   z-index: $zindex-dropdown-menu;
-  padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar
-  border-top: 1px solid $border-color;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $toggle-sidebar-height;
   padding-left: $contextual-sidebar-width;
   padding-right: $gutter_collapsed_width;
+  background: $white;
+  border-top: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
 
   .page-with-icon-sidebar & {
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 2fbdaaaf467..804cc205279 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -39,7 +39,7 @@
 @import 'framework/selects';
 @import 'framework/sidebar';
 @import 'framework/contextual_sidebar_header';
-@import 'framework/contextual_sidebar_refactoring/contextual_sidebar';
+@import 'framework/contextual_sidebar';
 @import 'framework/tables';
 @import 'framework/notes';
 @import 'framework/tabs';
@@ -69,5 +69,5 @@
 @import 'framework/system_messages';
 @import 'framework/spinner';
 @import 'framework/card';
-@import 'framework/editor-lite';
+@import 'framework/source_editor';
 @import 'framework/diffs';
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
new file mode 100644
index 00000000000..f5002a342b6
--- /dev/null
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -0,0 +1,470 @@
+//
+// MIXINS
+//
+
+@mixin collapse-contextual-sidebar-content {
+
+  @include context-header-collapsed;
+
+  .context-header {
+    @include gl-h-auto;
+
+    a {
+      @include gl-p-2;
+    }
+  }
+
+  .sidebar-top-level-items > li {
+    .sidebar-sub-level-items {
+      &:not(.flyout-list) {
+        display: none;
+      }
+    }
+  }
+
+  .nav-icon-container {
+    margin-right: 0;
+  }
+
+  .toggle-sidebar-button {
+    width: $contextual-sidebar-collapsed-width;
+
+    .collapse-text {
+      display: none;
+    }
+
+    .icon-chevron-double-lg-left {
+      @include gl-rotate-180;
+      @include gl-m-0;
+    }
+  }
+}
+
+@mixin collapse-contextual-sidebar {
+  width: $contextual-sidebar-collapsed-width;
+
+  .nav-sidebar-inner-scroll {
+    overflow-x: hidden;
+  }
+
+  .badge.badge-pill:not(.fly-out-badge),
+  .nav-item-name,
+  .collapse-text {
+    @include gl-sr-only;
+  }
+
+  .sidebar-top-level-items > li > a {
+    min-height: unset;
+  }
+
+  .fly-out-top-item:not(.divider) {
+    display: block !important;
+  }
+
+  .avatar-container {
+    margin: 0 auto;
+  }
+
+  li.active:not(.fly-out-top-item) > a {
+    background-color: $indigo-900-alpha-008;
+  }
+}
+
+@mixin sub-level-items-flyout {
+  .sidebar-sub-level-items {
+    @include media-breakpoint-up(sm) {
+      @include gl-fixed;
+      @include gl-top-0;
+      @include gl-left-0;
+      @include gl-ml-3;
+      @include gl-mt-0;
+      @include gl-px-0;
+      @include gl-pb-2;
+      @include gl-pt-0;
+      min-width: 150px;
+      background-color: $gray-10;
+      box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24;
+      border-style: none;
+      border-radius: $border-radius-default;
+
+      .divider {
+        @include gl-display-none;
+      }
+
+      .divider + li > a {
+        @include gl-mt-2;
+      }
+
+      li:last-of-type a {
+        @include gl-mb-0;
+      }
+
+      &.is-above {
+        @include gl-mt-0;
+      }
+    }
+
+    a {
+      @include gl-px-4;
+    }
+
+    .fly-out-top-item {
+      > a {
+        display: flex;
+      }
+
+      .fly-out-badge {
+        margin-left: 8px;
+      }
+    }
+
+    .fly-out-top-item-name {
+      flex: 1;
+    }
+  }
+}
+
+@mixin context-header {
+  $avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08;
+
+  @include gl-p-2;
+  @include gl-mb-2;
+  @include gl-mt-0;
+
+  .avatar-container {
+    @include gl-font-weight-normal;
+    flex: none;
+    box-shadow: $avatar-box-shadow;
+
+    &.rect-avatar {
+      @include gl-border-none;
+
+      .avatar.s32 {
+        @extend .rect-avatar.s32;
+        box-shadow: $avatar-box-shadow;
+      }
+    }
+  }
+}
+
+@mixin top-level-item {
+  @include gl-px-4;
+  @include gl-py-3;
+  @include gl-display-flex;
+  @include gl-align-items-center;
+  @include gl-rounded-base;
+  @include gl-w-auto;
+  @include gl-line-height-normal;
+  transition: none;
+  margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
+
+  &:hover {
+    background-color: $indigo-900-alpha-008;
+  }
+}
+
+@mixin fly-out-top-item($has-sub-items: false) {
+  @include gl-display-none;
+
+  a,
+  a:hover,
+  &.active a,
+  .fly-out-top-item-container {
+    @include gl-mx-0;
+    @include gl-px-5;
+    @include gl-cursor-default;
+    @include gl-pointer-events-none;
+    @include gl-font-sm;
+
+    @if $has-sub-items {
+      @include gl-mt-0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    } @else {
+      @include gl-my-n2;
+      @include gl-mt-0;
+      @include gl-relative;
+      @include gl-text-white;
+      background: var(--black, $black);
+
+      strong {
+        @include gl-font-weight-normal;
+      }
+
+      &::before {
+        @include gl-absolute;
+        content: '';
+        display: block;
+        top: 50%;
+        left: -$gl-spacing-scale-2;
+        margin-top: -$gl-spacing-scale-2;
+        width: 0;
+        height: 0;
+        border-top: $gl-spacing-scale-2 solid transparent;
+        border-bottom: $gl-spacing-scale-2 solid transparent;
+        border-right: $gl-spacing-scale-2 solid $black;
+        border-right-color: var(--black, $black);
+      }
+    }
+  }
+}
+
+//
+// PAGE-LAYOUT
+//
+
+.page-with-contextual-sidebar {
+  transition: padding-left $sidebar-transition-duration;
+
+  @include media-breakpoint-up(md) {
+    padding-left: $contextual-sidebar-collapsed-width;
+  }
+
+  @include media-breakpoint-up(xl) {
+    padding-left: $contextual-sidebar-width;
+  }
+
+  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
+    padding: 10px 0 15px;
+  }
+}
+
+.page-with-icon-sidebar {
+  @include media-breakpoint-up(md) {
+    padding-left: $contextual-sidebar-collapsed-width;
+  }
+}
+
+//
+// THE PANEL
+//
+
+.nav-sidebar {
+  @include gl-fixed;
+  @include gl-bottom-0;
+  @include gl-left-0;
+  transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
+  z-index: 600;
+  width: $contextual-sidebar-width;
+  top: $header-height;
+  background-color: $gray-50;
+  transform: translate3d(0, 0, 0);
+
+  &.sidebar-collapsed-desktop {
+    @include collapse-contextual-sidebar;
+  }
+
+  &.sidebar-expanded-mobile {
+    left: 0;
+  }
+
+  a {
+    @include gl-text-decoration-none;
+    color: $gray-900;
+  }
+
+  li {
+    white-space: nowrap;
+
+    .nav-item-name {
+      flex: 1;
+    }
+
+    > a,
+    > .fly-out-top-item-container {
+      @include top-level-item;
+    }
+
+    &.active {
+      > a {
+        font-weight: $gl-font-weight-bold;
+      }
+
+      &:not(.fly-out-top-item) {
+        > a:not(.has-sub-items) {
+          background-color: $indigo-900-alpha-008;
+        }
+      }
+    }
+  }
+
+  ul {
+    padding-left: 0;
+    list-style: none;
+  }
+
+  @include media-breakpoint-down(sm) {
+    left: (-$contextual-sidebar-width);
+  }
+
+  .nav-icon-container {
+    display: flex;
+    margin-right: 8px;
+  }
+
+  a:not(.has-sub-items) + .sidebar-sub-level-items {
+    .fly-out-top-item {
+      @include fly-out-top-item($has-sub-items: false);
+    }
+  }
+
+  a.has-sub-items + .sidebar-sub-level-items {
+    .fly-out-top-item {
+      @include fly-out-top-item($has-sub-items: true);
+    }
+  }
+
+  a.has-sub-items + .sidebar-sub-level-items.fly-out-list {
+    @include gl-mt-n2;
+
+    &.is-above {
+      @include gl-mt-2;
+    }
+  }
+
+  @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
+    &:not(.sidebar-expanded-mobile) {
+      @include collapse-contextual-sidebar;
+      @include collapse-contextual-sidebar-content;
+    }
+  }
+}
+
+.nav-sidebar-inner-scroll {
+  @include gl-h-full;
+  @include gl-w-full;
+  @include gl-overflow-auto;
+
+  > div.context-header {
+    @include gl-mt-2;
+
+    a {
+      @include top-level-item;
+      @include context-header;
+    }
+  }
+}
+
+.sidebar-top-level-items {
+  @include gl-mt-2;
+  margin-bottom: 60px;
+
+  .context-header a {
+    @include context-header;
+  }
+
+  > li {
+    .badge.badge-pill {
+      @include gl-rounded-lg;
+      @include gl-py-1;
+      @include gl-px-3;
+      background-color: $blue-100;
+      color: $blue-700;
+    }
+
+    &.active {
+      .sidebar-sub-level-items:not(.is-fly-out-only) {
+        display: block;
+      }
+
+      .badge.badge-pill {
+        @include gl-font-weight-normal;
+        color: $blue-700;
+      }
+    }
+  }
+}
+
+.sidebar-sub-level-items {
+  @include gl-py-0;
+  @include gl-display-none;
+
+  &:not(.fly-out-list) {
+    li > a {
+      // The calculation formula:
+      // 12px: normal padding on the menu anchors
+      // +
+      // 16px: the width of the SVG icon in the top-level links
+      // +
+      // 8px: margin-right on the SVG icon in the top-level links
+      // =
+      // 36px (4.5 times the $grid-size)
+      padding-left: $grid-size * 4.5;
+    }
+  }
+}
+
+.is-showing-fly-out {
+  @include sub-level-items-flyout;
+}
+
+//
+// COLLAPSED STATE
+//
+
+.toggle-sidebar-button,
+.close-nav-button {
+  @include side-panel-toggle;
+  background-color: $gray-50;
+  border-top: 1px solid $border-color;
+  position: fixed;
+  bottom: 0;
+  width: $contextual-sidebar-width;
+
+  .collapse-text,
+  .icon-chevron-double-lg-left,
+  .icon-chevron-double-lg-right {
+    color: inherit;
+  }
+}
+
+.collapse-text {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sidebar-collapsed-desktop {
+  @include collapse-contextual-sidebar-content;
+}
+
+//
+// MOBILE PANEL
+//
+
+.close-nav-button {
+  display: none;
+}
+
+@include media-breakpoint-down(sm) {
+  .close-nav-button {
+    display: flex;
+  }
+
+  .toggle-sidebar-button {
+    display: none;
+  }
+
+  .mobile-overlay {
+    display: none;
+
+    &.mobile-nav-open {
+      display: block;
+      position: fixed;
+      background-color: $black-transparent;
+      height: 100%;
+      width: 100%;
+      z-index: $zindex-dropdown-menu;
+    }
+  }
+}
+
+//
+// PANELS-SPECIFIC
+//
+
+.settings-avatar {
+  svg {
+    margin: auto;
+  }
+}
+
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_header.scss b/app/assets/stylesheets/framework/contextual_sidebar_header.scss
index fdd03f4cdc8..7159dadf7cc 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar_header.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar_header.scss
@@ -32,6 +32,7 @@
   .sidebar-context-title {
     overflow: hidden;
     text-overflow: ellipsis;
+    color: $gray-900;
 
     &.text-secondary {
       font-weight: normal;
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss
deleted file mode 100644
index 905ac260203..00000000000
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-body:not(.sidebar-refactoring) {
-  @import 'contextual_sidebar_base';
-}
-
-body.sidebar-refactoring {
-  @import 'contextual_sidebar_variant';
-}
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss
deleted file mode 100644
index 306a9b74ebd..00000000000
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss
+++ /dev/null
@@ -1,386 +0,0 @@
-@mixin collapse-contextual-sidebar-content {
-
-  @include context-header-collapsed;
-
-  .sidebar-top-level-items > li {
-    .sidebar-sub-level-items {
-      &:not(.flyout-list) {
-        display: none;
-      }
-    }
-  }
-
-  .nav-icon-container {
-    margin-right: 0;
-  }
-
-  .toggle-sidebar-button {
-    padding: 16px;
-    width: $contextual-sidebar-collapsed-width - 1px;
-
-    .collapse-text,
-    .icon-chevron-double-lg-left {
-      display: none;
-    }
-
-    .icon-chevron-double-lg-right {
-      display: block;
-      margin: 0;
-    }
-  }
-}
-
-@mixin collapse-contextual-sidebar {
-  width: $contextual-sidebar-collapsed-width;
-
-  .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-
-  .badge.badge-pill:not(.fly-out-badge),
-  .nav-item-name {
-    @include gl-sr-only;
-  }
-
-  .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-
-  .fly-out-top-item {
-    display: block;
-  }
-
-  .avatar-container {
-    margin: 0 auto;
-  }
-}
-
-@at-root {
-  .page-with-contextual-sidebar {
-    transition: padding-left $sidebar-transition-duration;
-
-    @include media-breakpoint-up(md) {
-      padding-left: $contextual-sidebar-collapsed-width;
-    }
-
-    @include media-breakpoint-up(xl) {
-      padding-left: $contextual-sidebar-width;
-    }
-
-    .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
-      padding: 10px 0 15px;
-    }
-  }
-
-  .page-with-icon-sidebar {
-    @include media-breakpoint-up(md) {
-      padding-left: $contextual-sidebar-collapsed-width;
-    }
-  }
-
-  .settings-avatar {
-    background-color: $white;
-
-    svg {
-      fill: $gl-text-color-secondary;
-      margin: auto;
-    }
-  }
-
-  .nav-sidebar {
-    transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
-    position: fixed;
-    z-index: 600;
-    width: $contextual-sidebar-width;
-    top: $header-height;
-    bottom: 0;
-    left: 0;
-    background-color: $gray-light;
-    box-shadow: inset -1px 0 0 $border-color;
-    transform: translate3d(0, 0, 0);
-
-    &:not(.sidebar-collapsed-desktop) {
-      @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-        box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color;
-      }
-    }
-
-    &.sidebar-collapsed-desktop {
-      @include collapse-contextual-sidebar;
-    }
-
-    &.sidebar-expanded-mobile {
-      left: 0;
-    }
-
-    a {
-      text-decoration: none;
-    }
-
-    ul {
-      padding-left: 0;
-      list-style: none;
-    }
-
-    li {
-      white-space: nowrap;
-
-      a {
-        transition: padding $sidebar-transition-duration;
-        display: flex;
-        align-items: center;
-        padding: 12px $gl-padding;
-        color: $gl-text-color-secondary;
-      }
-
-      .nav-item-name {
-        flex: 1;
-      }
-
-      &.active {
-        > a {
-          font-weight: $gl-font-weight-bold;
-        }
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      left: (-$contextual-sidebar-width);
-    }
-
-    .nav-icon-container {
-      display: flex;
-      margin-right: 8px;
-    }
-
-    .fly-out-top-item {
-      display: none;
-    }
-
-    svg {
-      height: 16px;
-      width: 16px;
-    }
-
-    @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
-      &:not(.sidebar-expanded-mobile) {
-        @include collapse-contextual-sidebar;
-        @include collapse-contextual-sidebar-content;
-      }
-    }
-  }
-
-  .nav-sidebar-inner-scroll {
-    height: 100%;
-    width: 100%;
-    overflow: auto;
-  }
-
-  .sidebar-sub-level-items {
-    display: none;
-    padding-bottom: 8px;
-
-    > li {
-      a {
-        padding: 8px 16px 8px 40px;
-
-        &:hover,
-        &:focus {
-          background: $link-active-background;
-          color: $gl-text-color;
-        }
-      }
-
-      &.active {
-        a {
-          &,
-          &:hover,
-          &:focus {
-            background: $link-active-background;
-          }
-        }
-      }
-    }
-  }
-
-  .sidebar-top-level-items {
-    margin-bottom: 60px;
-
-    > li {
-      > a {
-        @include media-breakpoint-up(sm) {
-          margin-right: 1px;
-        }
-
-        &:hover {
-          color: $gl-text-color;
-        }
-      }
-
-      &.is-showing-fly-out {
-        > a {
-          margin-right: 1px;
-        }
-
-        .sidebar-sub-level-items {
-          @include media-breakpoint-up(sm) {
-            position: fixed;
-            top: 0;
-            left: 0;
-            min-width: 150px;
-            margin-top: -1px;
-            padding: 4px 1px;
-            background-color: $white;
-            box-shadow: 2px 1px 3px $dropdown-shadow-color;
-            border: 1px solid $gray-darker;
-            border-left: 0;
-            border-radius: 0 3px 3px 0;
-
-            &::before {
-              content: '';
-              position: absolute;
-              top: -30px;
-              bottom: -30px;
-              left: -10px;
-              right: -30px;
-              z-index: -1;
-            }
-
-            &.is-above {
-              margin-top: 1px;
-            }
-
-            .divider {
-              height: 1px;
-              margin: 4px -1px;
-              padding: 0;
-              background-color: $dropdown-divider-bg;
-            }
-
-            > .active {
-              box-shadow: none;
-
-              > a {
-                background-color: transparent;
-              }
-            }
-
-            a {
-              padding: 8px 16px;
-              color: $gl-text-color;
-
-              &:hover,
-              &:focus {
-                background-color: $gray-darker;
-              }
-            }
-          }
-        }
-      }
-
-      .badge.badge-pill {
-        background-color: $inactive-badge-background;
-        color: $gl-text-color-secondary;
-      }
-
-      &.active {
-        background: $link-active-background;
-
-        > a {
-          margin-left: 4px;
-          // Subtract width of left border on active element
-          padding-left: $gl-padding-12;
-        }
-
-        .badge.badge-pill {
-          font-weight: $gl-font-weight-bold;
-        }
-
-        .sidebar-sub-level-items:not(.is-fly-out-only) {
-          display: block;
-        }
-      }
-
-      &.active > a:hover,
-      &.is-over > a {
-        background-color: $link-hover-background;
-      }
-    }
-  }
-
-  // Collapsed nav
-
-  .toggle-sidebar-button,
-  .close-nav-button {
-    @include side-panel-toggle;
-  }
-
-  .toggle-sidebar-button,
-  .close-nav-button {
-    position: fixed;
-    bottom: 0;
-    width: $contextual-sidebar-width - 1px;
-    border-top: 1px solid $border-color;
-
-    svg {
-      margin-right: 8px;
-    }
-
-    .icon-chevron-double-lg-right {
-      display: none;
-    }
-  }
-
-  .collapse-text {
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .sidebar-collapsed-desktop {
-    @include collapse-contextual-sidebar-content;
-  }
-
-  .fly-out-top-item {
-    > a {
-      display: flex;
-    }
-
-    .fly-out-badge {
-      margin-left: 8px;
-    }
-  }
-
-  .fly-out-top-item-name {
-    flex: 1;
-  }
-
-  // Mobile nav
-
-  .close-nav-button {
-    display: none;
-  }
-
-  @include media-breakpoint-down(sm) {
-    .close-nav-button {
-      display: flex;
-    }
-
-    .toggle-sidebar-button {
-      display: none;
-    }
-
-    .mobile-overlay {
-      display: none;
-
-      &.mobile-nav-open {
-        display: block;
-        position: fixed;
-        background-color: $black-transparent;
-        height: 100%;
-        width: 100%;
-        z-index: $zindex-dropdown-menu;
-      }
-    }
-  }
-}
-
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
deleted file mode 100644
index 1ea50281204..00000000000
--- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
+++ /dev/null
@@ -1,552 +0,0 @@
-//
-// VARIABLES
-//
-
-$top-level-item-color: $purple-900;
-
-//
-// TEMPORARY OVERRIDES
-// Needed while we serve both *_base and *_variant stylesheets
-// TODO: These have to be removed during the ':sidebar_refactor' flag rollout
-//
-&.gl-dark .nav-sidebar li.active {
-  box-shadow: none;
-}
-
-&.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  box-shadow: none;
-  border: 1px solid $border-color;
-}
-
-&.gl-dark .sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 {
-  color: $white;
-}
-
-&.gl-dark .nav-sidebar li a,
-&.gl-dark .toggle-sidebar-button .collapse-text,
-&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
-&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
-&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
-&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  color: $gray-darkest;
-}
-
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  @include gl-mt-0;
-}
-
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a:hover,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a,
-&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container {
-  background: $white;
-  color: $gray-darkest;
-
-  &::before {
-    border-right-color: $white;
-  }
-}
-
-&.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  background-color: $white;
-}
-
-&.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
-  color: $top-level-item-color;
-}
-
-&.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
-  fill: $top-level-item-color;
-}
-
-.nav-sidebar {
-  box-shadow: none;
-
-  li.active {
-    background-color: transparent;
-    box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout
-  }
-}
-
-//
-// MIXINS
-//
-
-@mixin collapse-contextual-sidebar-content {
-
-  @include context-header-collapsed;
-
-  .context-header {
-    @include gl-h-auto;
-
-    a {
-      @include gl-p-2;
-    }
-  }
-
-  .sidebar-top-level-items > li {
-    .sidebar-sub-level-items {
-      &:not(.flyout-list) {
-        display: none;
-      }
-    }
-  }
-
-  .nav-icon-container {
-    margin-right: 0;
-  }
-
-  .toggle-sidebar-button {
-    width: $contextual-sidebar-collapsed-width;
-
-    .collapse-text {
-      display: none;
-    }
-
-    .icon-chevron-double-lg-left {
-      @include gl-rotate-180;
-      @include gl-display-block; // TODO: shouldn't be needed after the flag roll out
-      @include gl-m-0;
-    }
-  }
-}
-
-@mixin collapse-contextual-sidebar {
-  width: $contextual-sidebar-collapsed-width;
-
-  .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-
-  .badge.badge-pill:not(.fly-out-badge),
-  .nav-item-name,
-  .collapse-text {
-    @include gl-sr-only;
-  }
-
-  .sidebar-top-level-items > li > a {
-    min-height: unset;
-  }
-
-  .fly-out-top-item:not(.divider) {
-    display: block !important;
-  }
-
-  .avatar-container {
-    margin: 0 auto;
-  }
-
-  li.active:not(.fly-out-top-item) > a {
-    background-color: $indigo-900-alpha-008;
-  }
-}
-
-@mixin sub-level-items-flyout {
-  .sidebar-sub-level-items {
-    @include media-breakpoint-up(sm) {
-      @include gl-fixed;
-      @include gl-top-0;
-      @include gl-left-0;
-      @include gl-ml-3;
-      @include gl-mt-0;
-      @include gl-px-0;
-      @include gl-pb-2;
-      @include gl-pt-0;
-      min-width: 150px;
-      background-color: $gray-10;
-      box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24;
-      border-style: none;
-      border-radius: $border-radius-default;
-
-      .divider {
-        @include gl-display-none;
-      }
-
-      .divider + li > a {
-        @include gl-mt-2;
-      }
-
-      li:last-of-type a {
-        @include gl-mb-0;
-      }
-
-      &.is-above {
-        @include gl-mt-0;
-      }
-    }
-
-    a {
-      @include gl-px-4;
-    }
-
-    .fly-out-top-item {
-      > a {
-        display: flex;
-      }
-
-      .fly-out-badge {
-        margin-left: 8px;
-      }
-    }
-
-    .fly-out-top-item-name {
-      flex: 1;
-    }
-  }
-}
-
-@mixin context-header {
-  $avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08;
-
-  @include gl-p-2;
-  @include gl-mb-2;
-  @include gl-mt-0;
-
-  .avatar-container {
-    @include gl-font-weight-normal;
-    flex: none;
-    box-shadow: $avatar-box-shadow;
-
-    &.rect-avatar {
-      @include gl-border-none;
-
-      .avatar.s32 {
-        @extend .rect-avatar.s32;
-        //color: $gray-900;
-        box-shadow: $avatar-box-shadow;
-      }
-    }
-  }
-
-  .sidebar-context-title {
-    color: $top-level-item-color;
-  }
-}
-
-@mixin top-level-item {
-  @include gl-px-4;
-  @include gl-py-3;
-  @include gl-display-flex;
-  @include gl-align-items-center;
-  @include gl-rounded-base;
-  @include gl-w-auto;
-  @include gl-line-height-normal;
-  transition: none;
-  margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
-
-  &:hover {
-    background-color: $indigo-900-alpha-008;
-  }
-}
-
-@mixin fly-out-top-item($has-sub-items: false) {
-  @include gl-display-none;
-
-  a,
-  a:hover,
-  &.active a,
-  .fly-out-top-item-container {
-    @include gl-mx-0;
-    @include gl-px-5;
-    @include gl-cursor-default;
-    @include gl-pointer-events-none;
-    @include gl-font-sm;
-    background-color: $purple-900;
-    color: $white;
-
-    @if $has-sub-items {
-      @include gl-mt-0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    } @else {
-      @include gl-my-n2;
-      @include gl-mt-0;
-      @include gl-relative;
-      background-color: $black;
-
-      strong {
-        @include gl-font-weight-normal;
-      }
-
-      &::before {
-        @include gl-absolute;
-        content: '';
-        display: block;
-        top: 50%;
-        left: -$gl-spacing-scale-2;
-        margin-top: -$gl-spacing-scale-2;
-        width: 0;
-        height: 0;
-        border-top: $gl-spacing-scale-2 solid transparent;
-        border-bottom: $gl-spacing-scale-2 solid transparent;
-        border-right: $gl-spacing-scale-2 solid $black;
-      }
-    }
-  }
-}
-
-//
-// PAGE-LAYOUT
-//
-
-.page-with-contextual-sidebar {
-  transition: padding-left $sidebar-transition-duration;
-
-  @include media-breakpoint-up(md) {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-
-  @include media-breakpoint-up(xl) {
-    padding-left: $contextual-sidebar-width;
-  }
-
-  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
-    padding: 10px 0 15px;
-  }
-}
-
-.page-with-icon-sidebar {
-  @include media-breakpoint-up(md) {
-    padding-left: $contextual-sidebar-collapsed-width;
-  }
-}
-
-//
-// THE PANEL
-//
-
-.nav-sidebar {
-  @include gl-fixed;
-  @include gl-bottom-0;
-  @include gl-left-0;
-  transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
-  z-index: 600;
-  width: $contextual-sidebar-width;
-  top: $header-height;
-  background-color: $gray-50;
-  transform: translate3d(0, 0, 0);
-
-  &.sidebar-collapsed-desktop {
-    @include collapse-contextual-sidebar;
-  }
-
-  &.sidebar-expanded-mobile {
-    left: 0;
-  }
-
-  a {
-    @include gl-text-decoration-none;
-    color: $top-level-item-color;
-  }
-
-  li {
-    white-space: nowrap;
-
-    .nav-item-name {
-      flex: 1;
-    }
-
-    > a,
-    > .fly-out-top-item-container {
-      @include top-level-item;
-    }
-
-    &.active {
-      > a {
-        font-weight: $gl-font-weight-bold;
-      }
-
-      &:not(.fly-out-top-item) {
-        > a:not(.has-sub-items) {
-          background-color: $indigo-900-alpha-008;
-        }
-      }
-    }
-  }
-
-  ul {
-    padding-left: 0;
-    list-style: none;
-  }
-
-  @include media-breakpoint-down(sm) {
-    left: (-$contextual-sidebar-width);
-  }
-
-  .nav-icon-container {
-    display: flex;
-    margin-right: 8px;
-  }
-
-  a:not(.has-sub-items) + .sidebar-sub-level-items {
-    .fly-out-top-item {
-      @include fly-out-top-item($has-sub-items: false);
-    }
-  }
-
-  a.has-sub-items + .sidebar-sub-level-items {
-    @include gl-mt-n2;
-
-    .fly-out-top-item {
-      @include fly-out-top-item($has-sub-items: true);
-    }
-  }
-
-  @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
-    &:not(.sidebar-expanded-mobile) {
-      @include collapse-contextual-sidebar;
-      @include collapse-contextual-sidebar-content;
-    }
-  }
-}
-
-.nav-sidebar-inner-scroll {
-  @include gl-h-full;
-  @include gl-w-full;
-  @include gl-overflow-auto;
-
-  > div.context-header {
-    @include gl-mt-2;
-
-    a {
-      @include top-level-item;
-      @include context-header;
-    }
-  }
-}
-
-.sidebar-top-level-items {
-  @include gl-mt-2;
-  margin-bottom: 60px;
-
-  .context-header a {
-    @include context-header;
-  }
-
-  > li {
-    .badge.badge-pill {
-      @include gl-rounded-lg;
-      @include gl-py-1;
-      @include gl-px-3;
-      background-color: $blue-100;
-      color: $blue-700;
-    }
-
-    &.active {
-      .sidebar-sub-level-items:not(.is-fly-out-only) {
-        display: block;
-      }
-
-      .badge.badge-pill {
-        @include gl-font-weight-normal; // TODO: update in `theme_helper.scss`
-        color: $blue-700; // TODO: update in `theme_helper.scss`
-      }
-    }
-  }
-}
-
-.sidebar-sub-level-items {
-  @include gl-py-0;
-  @include gl-display-none;
-
-  &:not(.fly-out-list) {
-    li > a {
-      // The calculation formula:
-      // 12px: normal padding on the menu anchors
-      // +
-      // 16px: the width of the SVG icon in the top-level links
-      // +
-      // 8px: margin-right on the SVG icon in the top-level links
-      // =
-      // 36px (4.5 times the $grid-size)
-      padding-left: $grid-size * 4.5;
-    }
-  }
-}
-
-.is-showing-fly-out {
-  @include sub-level-items-flyout;
-}
-
-//
-// COLLAPSED STATE
-//
-
-.toggle-sidebar-button,
-.close-nav-button {
-  @include side-panel-toggle;
-  background-color: $gray-50;
-  border-top: 1px solid $border-color;
-  color: $top-level-item-color;
-  position: fixed;
-  bottom: 0;
-  width: $contextual-sidebar-width;
-
-  .collapse-text,
-  .icon-chevron-double-lg-left,
-  .icon-chevron-double-lg-right {
-    color: inherit;
-  }
-}
-
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.sidebar-collapsed-desktop {
-  @include collapse-contextual-sidebar-content;
-}
-
-//
-// MOBILE PANEL
-//
-
-.close-nav-button {
-  display: none;
-}
-
-@include media-breakpoint-down(sm) {
-  .close-nav-button {
-    display: flex;
-  }
-
-  .toggle-sidebar-button {
-    display: none;
-  }
-
-  .mobile-overlay {
-    display: none;
-
-    &.mobile-nav-open {
-      display: block;
-      position: fixed;
-      background-color: $black-transparent;
-      height: 100%;
-      width: 100%;
-      z-index: $zindex-dropdown-menu;
-    }
-  }
-}
-
-//
-// PANELS-SPECIFIC
-// TODO: Check whether we can remove these in favor of the utility-classes
-//
-
-.settings-avatar {
-  background-color: $white;
-
-  svg {
-    fill: $gl-text-color-secondary;
-    margin: auto;
-  }
-}
-
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index c0e9289309a..f8b1735207c 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -847,8 +847,6 @@ table.code {
 
   .commit-stat-summary {
     @include media-breakpoint-up(sm) {
-      margin-left: -$gl-padding;
-      padding-left: $gl-padding;
       background-color: $white;
     }
   }
@@ -1190,3 +1188,9 @@ table.code {
     margin-top: 0;
   }
 }
+
+// Note: Prevents tall files from appearing above sticky tabs
+.diffs .vue-recycle-scroller__item-view > div:not(.active) {
+  position: absolute;
+  bottom: 100vh;
+}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 894eddbe1a7..144a396ea65 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -30,7 +30,9 @@
   .dropdown-menu {
     @include set-visible;
     min-height: $dropdown-min-height;
-    max-height: $dropdown-max-height;
+    // Prevents double scrollbar on dropdowns that also
+    // have max-height set on an inner scrollable element
+    max-height: $dropdown-max-height-lg;
     overflow-y: auto;
 
     &.dropdown-extended-height {
@@ -239,7 +241,7 @@
   max-width: 500px;
   margin-top: $dropdown-vertical-offset;
   margin-bottom: 24px;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: $gl-font-weight-normal;
   padding: 8px 0;
   background-color: $white;
@@ -931,13 +933,9 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
 }
 
 .frequent-items-list-item-container {
-  .frequent-items-item-avatar-container,
-  .frequent-items-item-metadata-container {
-    flex-shrink: 0;
-  }
-
   .frequent-items-item-metadata-container {
     display: flex;
+    flex-shrink: 0;
     flex-direction: column;
     justify-content: center;
   }
@@ -949,12 +947,6 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     white-space: nowrap;
   }
 
-  &:hover {
-    .frequent-items-item-avatar-container .avatar {
-      border-color: $gray-50;
-    }
-  }
-
   .frequent-items-item-title {
     font-size: $gl-font-size;
     font-weight: 400;
diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss
deleted file mode 100644
index 05b53e0c3d8..00000000000
--- a/app/assets/stylesheets/framework/editor-lite.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-[data-editor-loading] {
-  @include gl-relative;
-  @include gl-display-flex;
-  @include gl-justify-content-center;
-  @include gl-align-items-center;
-  @include gl-z-index-0;
-
-  > * {
-    filter: blur(5px);
-  }
-
-  &::before {
-    content: '';
-    @include spinner-deprecated(32px, 3px);
-    @include gl-absolute;
-    @include gl-z-index-1;
-  }
-
-  pre {
-    opacity: 0;
-  }
-}
-
-[id^='editor-lite-'] {
-  height: 500px;
-}
-
-.monaco-editor.gl-editor-lite {
-  .margin-view-overlays {
-    .line-numbers {
-      @include gl-display-flex;
-      @include gl-justify-content-end;
-      @include gl-relative;
-
-      &::before {
-        @include gl-visibility-hidden;
-        @include gl-align-self-center;
-        @include gl-bg-gray-400;
-        @include gl-mr-2;
-        @include gl-w-4;
-        @include gl-h-4;
-        mask-image: asset_url('icons-stacked.svg#link');
-        mask-repeat: no-repeat;
-        mask-size: cover;
-        mask-position: center;
-        content: '';
-      }
-
-      &:hover {
-        @include gl-text-decoration-underline;
-        cursor: pointer !important;
-      }
-
-      &:hover::before {
-        @include gl-visibility-visible;
-      }
-
-      &:focus::before {
-        @include gl-visibility-visible;
-        outline: auto;
-      }
-
-      .link-anchor {
-        @include gl-display-block;
-        @include gl-absolute;
-        @include gl-w-full;
-        @include gl-h-full;
-      }
-    }
-  }
-}
-
-.active-line-text {
-  @include gl-bg-orange-600;
-  @include gl-opacity-3;
-}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index bda123fa7ea..5ad7ceecb2b 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -508,3 +508,25 @@ span.idiff {
     }
   }
 }
+
+//
+// IMPORTANT PERFORMANCE OPTIMIZATION BELOW
+//
+// * :nth-of-type(1n+70) - makes sure we do not render lines 71+ right
+// away. Even though the HTML is injected in the DOM, as long as we do
+// not render those lines, the browser doesn't need to spend resources
+// calculating and repainting what's hidden.
+//
+// * :not(:last-of-type) makes sure that we output the last line of the
+// blob's snippet. This is important because the column with the line
+// numbers has auto width and is expanding based on the content in it.
+// This leads to unnecessary layout shift when the last lines of the
+// snippet are longer than two (2) digits.
+// EXAMPLE: Let's say, we have a blob with 100 lines. If we output 70
+// lines, and then, the remaining 30 (incl the line 100), it will lead
+// to the layout reflow and styles recalculation when we output line
+// 100 (because the width of '100' is always bigger than '70'). By
+// outputting the last line right away, we prevent that as the column
+// will always be expanded to the maximum needed width.
+.blob-viewer[data-loading] .file-content.code .line:nth-of-type(1n+70):not(:last-of-type),
+.blob-viewer[data-loading] .file-content.code .file-line-num:nth-of-type(1n+70):not(:last-of-type) {display: none !important;}
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index d5f7ec68454..30a1c8af414 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -56,24 +56,19 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25);
   }
 
   .flash-alert {
-    background-color: $red-100;
-    color: $red-700;
+    background-color: $red-50;
   }
 
   .flash-notice {
-    background-color: $blue-100;
-    color: $blue-700;
+    background-color: $blue-50;
   }
 
   .flash-success {
-    background-color: $theme-green-100;
-    color: $green-700;
+    background-color: $green-50;
   }
 
   .flash-warning {
     background-color: $orange-50;
-    color: $gray-900;
-    cursor: default;
   }
 
   .flash-text,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 8639b9a7f84..65d914e47cf 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -555,7 +555,8 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   visibility: visible;
 }
 
-.with-performance-bar .navbar-gitlab {
+.with-performance-bar .navbar-gitlab,
+.with-performance-bar .fixed-top {
   top: $performance-bar-height;
 }
 
@@ -563,7 +564,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   justify-content: center;
   height: $header-height;
   background: $white;
-  border-bottom: 1px solid $white-normal;
+  border-bottom: 1px solid $gray-100;
 
   .tanuki-logo,
   .brand-header-logo {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 9fe9f9a845c..d2bb1e3d555 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -149,12 +149,6 @@ ul.content-list {
         margin-right: $grid-size;
         display: inline-block;
 
-        &.btn-ldap-override {
-          @include media-breakpoint-up(sm) {
-            margin-bottom: 0;
-          }
-        }
-
         &.has-tooltip,
         &:last-child {
           margin-right: 0;
diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss
new file mode 100644
index 00000000000..a967d9a71f1
--- /dev/null
+++ b/app/assets/stylesheets/framework/source_editor.scss
@@ -0,0 +1,76 @@
+[data-editor-loading] {
+  @include gl-relative;
+  @include gl-display-flex;
+  @include gl-justify-content-center;
+  @include gl-align-items-center;
+  @include gl-z-index-0;
+
+  > * {
+    filter: blur(5px);
+  }
+
+  &::before {
+    content: '';
+    @include spinner-deprecated(32px, 3px);
+    @include gl-absolute;
+    @include gl-z-index-1;
+  }
+
+  pre {
+    opacity: 0;
+  }
+}
+
+[id^='source-editor-'] {
+  height: 500px;
+}
+
+.monaco-editor.gl-source-editor {
+  .margin-view-overlays {
+    .line-numbers {
+      @include gl-display-flex;
+      @include gl-justify-content-end;
+      @include gl-relative;
+
+      &::before {
+        @include gl-visibility-hidden;
+        @include gl-align-self-center;
+        @include gl-bg-gray-400;
+        @include gl-mr-2;
+        @include gl-w-4;
+        @include gl-h-4;
+        mask-image: asset_url('icons-stacked.svg#link');
+        mask-repeat: no-repeat;
+        mask-size: cover;
+        mask-position: center;
+        content: '';
+      }
+
+      &:hover {
+        @include gl-text-decoration-underline;
+        cursor: pointer !important;
+      }
+
+      &:hover::before {
+        @include gl-visibility-visible;
+      }
+
+      &:focus::before {
+        @include gl-visibility-visible;
+        outline: auto;
+      }
+
+      .link-anchor {
+        @include gl-display-block;
+        @include gl-absolute;
+        @include gl-w-full;
+        @include gl-h-full;
+      }
+    }
+  }
+}
+
+.active-line-text {
+  @include gl-bg-orange-600;
+  @include gl-opacity-3;
+}
diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss
index 437915d5034..1cb34bea069 100644
--- a/app/assets/stylesheets/framework/system_messages.scss
+++ b/app/assets/stylesheets/framework/system_messages.scss
@@ -60,7 +60,8 @@
   // System Header
   &.with-performance-bar {
     // main navigation
-    header.navbar-gitlab {
+    header.navbar-gitlab,
+    .fixed-top {
       top: $performance-bar-height + $system-header-height;
     }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d3976cfa8c7..726f8e28efe 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -633,18 +633,6 @@ $note-disabled-comment-color: #b2b2b2;
 $note-targe3-outside: #fffff0;
 $note-targe3-inside: #ffffd3;
 
-/*
-* Identicon
-*/
-$identicon-text-color: #525252 !default;
-$identicon-red: #ffebee !default;
-$identicon-purple: #f3e5f5 !default;
-$identicon-indigo: #e8eaf6 !default;
-$identicon-blue: #e3f2fd !default;
-$identicon-teal: #e0f2f1 !default;
-$identicon-orange: #fbe9e7 !default;
-$identicon-gray: #eee !default;
-
 /*
 * Calendar
 */
diff --git a/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss b/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss
index 41bb6d107f1..db81cc7fdd4 100644
--- a/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss
+++ b/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss
@@ -1,3 +1,3 @@
-.usage-data {
+.service-data-payload-container {
   max-height: 400px;
 }
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index a00a71b07e7..428bd90ddd7 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -472,6 +472,10 @@
   .sidebar-collapsed-icon {
     display: none;
   }
+
+  .gl-drawer-header {
+    align-items: flex-start;
+  }
 }
 
 .board-header-collapsed-info-icon:hover {
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 009019a45d9..47580e37eca 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -771,6 +771,12 @@ $ide-commit-header-height: 48px;
   }
 
   .dropdown-menu-toggle {
+    background-color: var(--ide-input-background, transparent);
+
+    &:hover {
+      background-color: var(--ide-dropdown-btn-hover-background, $white-normal);
+    }
+
     svg {
       vertical-align: middle;
 
@@ -779,16 +785,6 @@ $ide-commit-header-height: 48px;
         color: var(--ide-text-color-secondary, $gray-500);
       }
     }
-
-    &:hover {
-      background-color: var(--ide-dropdown-btn-hover-background, $white-normal);
-    }
-  }
-
-  &.show {
-    .dropdown-menu-toggle {
-      background-color: var(--ide-input-background, $white-dark);
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/page_bundles/members.scss b/app/assets/stylesheets/page_bundles/members.scss
index 7b4c74b8253..62dd3dcb9c0 100644
--- a/app/assets/stylesheets/page_bundles/members.scss
+++ b/app/assets/stylesheets/page_bundles/members.scss
@@ -1,10 +1,5 @@
 @import 'mixins_and_variables_and_functions';
 
-.project-members-title {
-  padding-bottom: 10px;
-  border-bottom: 1px solid $border-color;
-}
-
 .invite-users-form {
   .btn-success {
     margin-right: 10px;
@@ -12,12 +7,6 @@
 }
 
 .member {
-  &.is-overridden {
-    .btn-ldap-override {
-      display: none !important;
-    }
-  }
-
   .controls {
     @include media-breakpoint-up(sm) {
       display: flex;
@@ -31,111 +20,12 @@
   .form-group {
     margin-bottom: 0;
   }
-
-  &.existing-title {
-    @include media-breakpoint-up(sm) {
-      float: left;
-    }
-  }
-}
-
-.member-form-control {
-  @include media-breakpoint-down(xs) {
-    margin-right: 0;
-    width: auto;
-  }
-}
-
-.member-search-btn {
-  position: absolute;
-  right: 4px;
-  top: 0;
-  height: $input-height;
-  padding-left: 10px;
-  padding-right: 10px;
-  color: $gray-darkest;
-  background: transparent;
-  border: 0;
-  outline: 0;
 }
 
 .members-ldap {
   align-self: center;
 }
 
-.alert-member-ldap {
-  background-color: $orange-50;
-
-  @include media-breakpoint-up(sm) {
-    line-height: 40px;
-  }
-
-  > p {
-    float: left;
-    margin-bottom: 10px;
-    color: $orange-600;
-
-    @include media-breakpoint-up(sm) {
-      padding-left: 55px;
-      margin-bottom: 0;
-    }
-  }
-
-  .controls {
-    width: 100%;
-
-    @include media-breakpoint-up(sm) {
-      width: auto;
-    }
-  }
-}
-
-.btn-ldap-override {
-  width: 100%;
-
-  @include media-breakpoint-up(sm) {
-    margin-left: 10px;
-    width: auto;
-  }
-}
-
-.flex-project-members-panel {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-
-  @include media-breakpoint-down(sm) {
-    display: block;
-
-    .flex-project-title {
-      vertical-align: top;
-      display: inline-block;
-      max-width: 90%;
-    }
-  }
-
-  .flex-project-title {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .badge.badge-pill {
-    height: 17px;
-    line-height: 16px;
-    margin-right: 5px;
-    padding-top: 1px;
-    padding-bottom: 1px;
-  }
-
-  .flex-users-form {
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    margin-left: auto;
-  }
-}
-
 .card {
   .card-header {
     .badge.badge-pill {
@@ -168,33 +58,11 @@
     word-break: break-all;
   }
 
-  .form-control {
-    width: inherit;
-  }
-
-  .btn {
-    align-self: flex-start;
-  }
-
   @include media-breakpoint-down(sm) {
     .member-access-text {
       margin: 0 0 $gl-padding-4 ($grid-size * 6);
     }
   }
-
-  @include media-breakpoint-down(xs) {
-    display: block;
-
-    .controls > .btn,
-    .controls .member-form-control {
-      margin: 0 0 $gl-padding-8;
-      display: block;
-    }
-
-    .form-control {
-      width: 100%;
-    }
-  }
 }
 
 
@@ -231,25 +99,5 @@
       float: none;
       display: block;
     }
-
-    .dropdown-menu-toggle,
-    .dropdown-menu,
-    .form-control,
-    .list-item-name {
-      width: 100%;
-    }
-
-    .dropdown-menu {
-      margin-top: 0;
-    }
-
-    .member-form-control {
-      margin: 5px 0;
-    }
-
-    .btn {
-      width: 100%;
-      margin-left: 0;
-    }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 5e9dd883635..6a20ff3b3fa 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -7,6 +7,7 @@
 .diff-files-holder {
   flex: 1;
   min-width: 0;
+  z-index: 203;
 
   .vue-recycle-scroller__item-wrapper {
     overflow: visible;
diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss
index 03dd12ec230..08d9d24d246 100644
--- a/app/assets/stylesheets/page_bundles/milestone.scss
+++ b/app/assets/stylesheets/page_bundles/milestone.scss
@@ -65,15 +65,32 @@ $status-box-line-height: 26px;
     line-height: $line-height-base;
     padding: 14px 16px;
     display: flex;
+    justify-content: space-between;
 
     .title {
       flex: 1;
       flex-grow: 2;
     }
 
-    .counter {
-      flex: 0;
-      padding-left: 16px;
+    .issuable-count-weight {
+      white-space: nowrap;
+
+      .counter,
+      .weight {
+        color: var(--gray-500, $gray-500);
+        font-weight: $gl-font-weight-bold;
+      }
+    }
+
+    &.text-white {
+      .issuable-count-weight svg {
+        fill: $white;
+      }
+
+      .issuable-count-weight .counter,
+      .weight {
+        color: var(--white, $white);
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/new_namespace.scss b/app/assets/stylesheets/page_bundles/new_namespace.scss
index 60aa3c8f29f..189f010bdb2 100644
--- a/app/assets/stylesheets/page_bundles/new_namespace.scss
+++ b/app/assets/stylesheets/page_bundles/new_namespace.scss
@@ -8,10 +8,11 @@ $new-namespace-panel-height: 240px;
 }
 
 .new-namespace-panel-wrapper {
-  @include media-breakpoint-down(md) {
+  width: 50%;
+
+  @include media-breakpoint-down(lg) {
     width: 100%;
   }
-  width: 50%;
 }
 
 .new-namespace-panel {
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
index 1081dd8f6d8..7b54be5c91f 100644
--- a/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -62,6 +62,12 @@
   .pipeline-tags .label-container {
     white-space: normal;
   }
+
+  .dark-mode-override {
+    .gl-dark & {
+      background-color: $white;
+    }
+  }
 }
 
 // Mini Pipelines
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 98074f8af29..d233adbf3d2 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -87,6 +87,20 @@
     width: 145px;
   }
 
+  .empty-state--agent {
+    .text-content {
+      @include gl-max-w-full;
+      @include media-breakpoint-up(lg) {
+        max-width: 70%;
+      }
+    }
+
+    .gl-alert-actions {
+      @include gl-mt-0;
+      @include gl-flex-wrap;
+    }
+  }
+
   .top-area .nav-controls > .btn.btn-add-cluster {
     margin-right: 0;
   }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index a114a1dc82d..5173aeb824e 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -183,6 +183,8 @@
 }
 
 .commit-nav-buttons {
+  margin: 0 0.5rem;
+
   a.btn,
   button {
     // See: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/730
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 1bc6dfbd84a..ee97e8af296 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -175,7 +175,8 @@
     }
   }
 
-  .block {
+  .block,
+  .issuable-sidebar-header {
     @include clearfix;
     padding: $gl-padding 0;
     border-bottom: 1px solid $border-gray-normal;
@@ -184,11 +185,6 @@
     width: $gutter-inner-width;
     // --
 
-    &.issuable-sidebar-header {
-      padding-top: 0;
-      padding-bottom: 10px;
-    }
-
     &:last-child {
       border: 0;
     }
@@ -273,10 +269,6 @@
       padding: 0 20px;
     }
 
-    .issuable-sidebar-header {
-      padding-top: 10px;
-    }
-
     &:not(.boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) {
       .issuable-sidebar-header {
         display: none;
@@ -302,7 +294,6 @@
     }
 
     .gutter-toggle {
-      margin-top: 7px;
       border-left: 1px solid $border-gray-normal;
       text-align: center;
     }
@@ -331,20 +322,21 @@
     width: $gutter-collapsed-width;
     padding: 0;
 
-    .block {
+    .block,
+    .issuable-sidebar-header {
       width: $gutter-collapsed-width - 2px;
       padding: 0;
       border-bottom: 0;
       overflow: hidden;
+    }
 
+    .block,
+    .gutter-toggle,
+    .sidebar-collapsed-container {
       &.with-sub-blocks .sub-block:hover,
       &:not(.with-sub-blocks):hover {
         background-color: $gray-100;
       }
-
-      &.issuable-sidebar-header {
-        padding-top: 0;
-      }
     }
 
     .participants {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 1abaff40bc9..8807ab5e597 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -87,6 +87,10 @@ $tabs-holder-z-index: 250;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
   background: var(--white, $white);
+
+  > .mr-widget-border-top:first-of-type {
+    border-top: 0;
+  }
 }
 
 .mr-widget-body,
@@ -702,7 +706,7 @@ $tabs-holder-z-index: 250;
 
   .mr-version-dropdown,
   .mr-version-compare-dropdown {
-    margin: 0 7px;
+    margin: 0 0.5rem;
   }
 
   .dropdown-title {
@@ -711,7 +715,7 @@ $tabs-holder-z-index: 250;
 
   // Shortening button height by 1px to make compare-versions
   // header 56px and fit into our 8px design grid
-  button {
+  .btn {
     height: 34px;
   }
 
@@ -885,7 +889,7 @@ $tabs-holder-z-index: 250;
   .media-body {
     min-width: 0;
     font-size: 12px;
-    margin-left: 40px;
+    margin-left: 32px;
   }
 
   &:not(:last-child) {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 01739c7eb3e..4a866489806 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -763,6 +763,7 @@ $system-note-svg-size: 16px;
 .note-button.add-diff-note {
   @include btn-comment-icon;
   opacity: 0;
+  will-change: opacity;
 
   &[disabled] {
     background: $white;
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index ad040f65f3c..d38c1818f53 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -54,6 +54,8 @@
         white-space: pre;
         word-wrap: normal;
         border-left: $border-style;
+        text-size-adjust: 100%;
+        -webkit-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */
       }
 
       code {
@@ -65,7 +67,7 @@
     }
 
     .line-numbers {
-      padding: 10px;
+      padding: 10px 10px 10px 0;
       text-align: right;
       float: left;
 
@@ -86,18 +88,24 @@
     }
   }
 
+  .file-actions {
+    flex-shrink: 0;
+  }
+
   .file-title-flex-parent {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
     background-color: $gray-light;
     border: $border-style;
     border-bottom: 0;
-    padding: $gl-padding-top $gl-padding;
+    padding: $gl-padding;
     margin: 0;
     border-radius: $border-radius-default $border-radius-default 0 0;
 
     .file-header-content {
+      max-width: 75%;
+
       .file-title-name {
         font-weight: $gl-font-weight-bold;
       }
@@ -105,6 +113,7 @@
       .gitlab-embedded-snippets-title {
         text-decoration: none;
         color: $gl-text-color;
+        word-break: break-word;
 
         &:hover {
           text-decoration: underline;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 00a6ee579d8..a497f56f3b8 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -13,6 +13,10 @@ body.gl-dark {
   --orange-400: #ab6100;
   --gl-text-color: #fafafa;
   --border-color: #4f4f4f;
+  --black: #fff;
+}
+.nav-sidebar li.active {
+  box-shadow: none;
 }
 :root {
   --white: #333;
@@ -145,10 +149,6 @@ h1 {
   color: transparent;
   text-shadow: 0 0 0 #fafafa;
 }
-.form-control::-ms-input-placeholder {
-  color: #bfbfbf;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #bfbfbf;
   opacity: 1;
@@ -175,7 +175,6 @@ h1 {
   color: #fafafa;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -459,8 +458,7 @@ a {
   border-top: 1px solid #404040;
 }
 .toggle-sidebar-button .collapse-text,
-.toggle-sidebar-button .icon-chevron-double-lg-left,
-.toggle-sidebar-button .icon-chevron-double-lg-right {
+.toggle-sidebar-button .icon-chevron-double-lg-left {
   color: #999;
 }
 svg {
@@ -546,7 +544,7 @@ body {
   max-width: 500px;
   margin-top: 4px;
   margin-bottom: 24px;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 400;
   padding: 8px 0;
   background-color: #333;
@@ -626,9 +624,6 @@ input {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }
@@ -933,6 +928,7 @@ input {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #fafafa;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -951,20 +947,14 @@ input {
 }
 .nav-sidebar {
   position: fixed;
+  bottom: 0;
+  left: 0;
   z-index: 600;
   width: 220px;
   top: 40px;
-  bottom: 0;
-  left: 0;
   background-color: #303030;
-  box-shadow: inset -1px 0 0 #404040;
   transform: translate3d(0, 0, 0);
 }
-@media (min-width: 576px) and (max-width: 576px) {
-  .nav-sidebar:not(.sidebar-collapsed-desktop) {
-    box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1);
-  }
-}
 .nav-sidebar.sidebar-collapsed-desktop {
   width: 48px;
 }
@@ -972,7 +962,8 @@ input {
   overflow-x: hidden;
 }
 .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
-.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
+.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -984,479 +975,29 @@ input {
   width: 1px;
 }
 .nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
-  min-height: 45px;
-}
-.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
-  display: block;
-}
-.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
-  margin: 0 auto;
-}
-.nav-sidebar a {
-  text-decoration: none;
-}
-.nav-sidebar ul {
-  padding-left: 0;
-  list-style: none;
-}
-.nav-sidebar li {
-  white-space: nowrap;
-}
-.nav-sidebar li a {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  color: #999;
-}
-.nav-sidebar li .nav-item-name {
-  flex: 1;
-}
-.nav-sidebar li.active > a {
-  font-weight: 600;
-}
-@media (max-width: 767.98px) {
-  .nav-sidebar {
-    left: -220px;
-  }
-}
-.nav-sidebar .nav-icon-container {
-  display: flex;
-  margin-right: 8px;
-}
-.nav-sidebar .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar svg {
-  height: 16px;
-  width: 16px;
-}
-@media (min-width: 768px) and (max-width: 1199px) {
-  .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .badge.badge-pill:not(.fly-out-badge),
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
-    display: block;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
-    margin: 0 auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
-    height: 60px;
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 10px 4px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    .sidebar-sub-level-items:not(.flyout-list) {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
-    margin-right: 0;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
-    padding: 16px;
-    width: 47px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .collapse-text,
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-left {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-right {
-    display: block;
-    margin: 0;
-  }
-}
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-.sidebar-sub-level-items {
-  display: none;
-  padding-bottom: 8px;
-}
-.sidebar-sub-level-items > li a {
-  padding: 8px 16px 8px 40px;
-}
-.sidebar-sub-level-items > li.active a {
-  background: rgba(255, 255, 255, 0.04);
-}
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-}
-@media (min-width: 576px) {
-  .sidebar-top-level-items > li > a {
-    margin-right: 1px;
-  }
-}
-.sidebar-top-level-items > li .badge.badge-pill {
-  background-color: rgba(255, 255, 255, 0.08);
-  color: #999;
-}
-.sidebar-top-level-items > li.active {
-  background: rgba(255, 255, 255, 0.04);
-}
-.sidebar-top-level-items > li.active > a {
-  margin-left: 4px;
-  padding-left: 12px;
-}
-.sidebar-top-level-items > li.active .badge.badge-pill {
-  font-weight: 600;
-}
-.sidebar-top-level-items
-  > li.active
-  .sidebar-sub-level-items:not(.is-fly-out-only) {
-  display: block;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  height: 48px;
-  padding: 0 16px;
-  background-color: #303030;
-  border: 0;
-  color: #999;
-  display: flex;
-  align-items: center;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: 219px;
-  border-top: 1px solid #404040;
-}
-.toggle-sidebar-button svg,
-.close-nav-button svg {
-  margin-right: 8px;
-}
-.toggle-sidebar-button .icon-chevron-double-lg-right,
-.close-nav-button .icon-chevron-double-lg-right {
-  display: none;
-}
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: 60px;
-  width: 48px;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 10px 4px;
-}
-.sidebar-collapsed-desktop .sidebar-context-title {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  .sidebar-sub-level-items:not(.flyout-list) {
-  display: none;
-}
-.sidebar-collapsed-desktop .nav-icon-container {
-  margin-right: 0;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button {
-  padding: 16px;
-  width: 47px;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
-.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
-  display: none;
-}
-.sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right {
-  display: block;
-  margin: 0;
-}
-.fly-out-top-item > a {
-  display: flex;
-}
-.fly-out-top-item .fly-out-badge {
-  margin-left: 8px;
-}
-.fly-out-top-item-name {
-  flex: 1;
-}
-.close-nav-button {
-  display: none;
-}
-@media (max-width: 767.98px) {
-  .close-nav-button {
-    display: flex;
-  }
-  .toggle-sidebar-button {
-    display: none;
-  }
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar li.active {
-  box-shadow: none;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  box-shadow: none;
-  border: 1px solid #404040;
-}
-body.sidebar-refactoring.gl-dark
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
-  color: #333;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar li a,
-body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring.gl-dark
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left,
-body.sidebar-refactoring.gl-dark
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right,
-body.sidebar-refactoring.gl-dark
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  color: #c4c4c4;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  margin-top: 0;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container {
-  background: #333;
-  color: #c4c4c4;
-}
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a::before,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item.active
-  a::before,
-body.sidebar-refactoring.gl-dark
-  .nav-sidebar
-  a:not(.has-sub-items)
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  .fly-out-top-item-container::before {
-  border-right-color: #333;
-}
-body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items {
-  background-color: #333;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active
-  .nav-icon-container
-  svg {
-  fill: #2f2a6b;
-}
-body.sidebar-refactoring .nav-sidebar {
-  box-shadow: none;
-}
-body.sidebar-refactoring .nav-sidebar li.active {
-  background-color: transparent;
-  box-shadow: none !important;
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 48px;
-  }
-}
-@media (min-width: 1200px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 220px;
-  }
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-icon-sidebar {
-    padding-left: 48px;
-  }
-}
-body.sidebar-refactoring .nav-sidebar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 600;
-  width: 220px;
-  top: 40px;
-  background-color: #303030;
-  transform: translate3d(0, 0, 0);
-}
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
-  width: 48px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .nav-sidebar-inner-scroll {
-  overflow-x: hidden;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .badge.badge-pill:not(.fly-out-badge),
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  > a {
   min-height: unset;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item:not(.divider) {
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
   display: block !important;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .avatar-container {
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
   margin: 0 auto;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  li.active:not(.fly-out-top-item)
-  > a {
+.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar a {
+.nav-sidebar a {
   text-decoration: none;
-  color: #2f2a6b;
+  color: #fafafa;
 }
-body.sidebar-refactoring .nav-sidebar li {
+.nav-sidebar li {
   white-space: nowrap;
 }
-body.sidebar-refactoring .nav-sidebar li .nav-item-name {
+.nav-sidebar li .nav-item-name {
   flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a,
-body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
+.nav-sidebar li > a,
+.nav-sidebar li > .fly-out-top-item-container {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1468,49 +1009,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
   line-height: 1rem;
   margin: 1px 4px;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a {
+.nav-sidebar li.active > a {
   font-weight: 600;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a:not(.has-sub-items) {
+.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar ul {
+.nav-sidebar ul {
   padding-left: 0;
   list-style: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .nav-sidebar {
+  .nav-sidebar {
     left: -220px;
   }
 }
-body.sidebar-refactoring .nav-sidebar .nav-icon-container {
+.nav-sidebar .nav-icon-container {
   display: flex;
   margin-right: 8px;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1522,30 +1056,26 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #333;
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-top: 0;
   position: relative;
-  background-color: #fff;
+  color: #333;
+  background: var(--black, #fff);
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1553,20 +1083,17 @@ body.sidebar-refactoring
   strong {
   font-weight: 400;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1582,34 +1109,18 @@ body.sidebar-refactoring
   border-top: 0.25rem solid transparent;
   border-bottom: 0.25rem solid transparent;
   border-right: 0.25rem solid #fff;
+  border-right-color: var(--black, #fff);
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items {
-  margin-top: -0.25rem;
-}
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item {
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1621,30 +1132,21 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #333;
   margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 @media (min-width: 768px) and (max-width: 1199px) {
-  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-sidebar-inner-scroll {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
     overflow-x: hidden;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .badge.badge-pill:not(.fly-out-badge),
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-item-name,
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .collapse-text {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1655,44 +1157,28 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    > a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
     min-height: unset;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item:not(.divider) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
     display: block !important;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .avatar-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
     margin: 0 auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     li.active:not(.fly-out-top-item)
     > a {
     background-color: rgba(41, 41, 97, 0.08);
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: 60px;
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 10px 4px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-context-title {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1703,58 +1189,45 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 0.25rem;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .sidebar-top-level-items
     > li
     .sidebar-sub-level-items:not(.flyout-list) {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-icon-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
     margin-right: 0;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .collapse-text {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .icon-chevron-double-lg-left {
     transform: rotate(180deg);
-    display: block;
     margin: 0;
   }
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll {
+.nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
+.nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
+.nav-sidebar-inner-scroll > div.context-header a {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1769,78 +1242,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items {
+.sidebar-top-level-items {
   margin-top: 0.25rem;
   margin-bottom: 60px;
 }
-body.sidebar-refactoring .sidebar-top-level-items .context-header a {
+.sidebar-top-level-items .context-header a {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container {
+.sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar {
+.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1849,29 +1290,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
   background-color: #064787;
   color: #9dc7f1;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   > li.active
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  > li.active
-  .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill {
   font-weight: 400;
   color: #9dc7f1;
 }
-body.sidebar-refactoring .sidebar-sub-level-items {
+.sidebar-sub-level-items {
   padding-top: 0;
   padding-bottom: 0;
   display: none;
 }
-body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
+.sidebar-sub-level-items:not(.fly-out-list) li > a {
   padding-left: 2.25rem;
 }
-body.sidebar-refactoring .toggle-sidebar-button,
-body.sidebar-refactoring .close-nav-button {
+.toggle-sidebar-button,
+.close-nav-button {
   height: 48px;
   padding: 0 16px;
   background-color: #303030;
@@ -1881,31 +1318,28 @@ body.sidebar-refactoring .close-nav-button {
   align-items: center;
   background-color: #303030;
   border-top: 1px solid #404040;
-  color: #2f2a6b;
   position: fixed;
   bottom: 0;
   width: 220px;
 }
-body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
-body.sidebar-refactoring .close-nav-button .collapse-text,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.close-nav-button .collapse-text,
+.close-nav-button .icon-chevron-double-lg-left {
   color: inherit;
 }
-body.sidebar-refactoring .collapse-text {
+.collapse-text {
   white-space: nowrap;
   overflow: hidden;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: 60px;
   width: 48px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 10px 4px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
+.sidebar-collapsed-desktop .sidebar-context-title {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -1916,47 +1350,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
   white-space: nowrap;
   width: 1px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: auto;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 0.25rem;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
+.sidebar-collapsed-desktop
   .sidebar-top-level-items
   > li
   .sidebar-sub-level-items:not(.flyout-list) {
   display: none;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
+.sidebar-collapsed-desktop .nav-icon-container {
   margin-right: 0;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
+.sidebar-collapsed-desktop .toggle-sidebar-button {
   width: 48px;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .collapse-text {
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
   display: none;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left {
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
   transform: rotate(180deg);
-  display: block;
   margin: 0;
 }
-body.sidebar-refactoring .close-nav-button {
+.close-nav-button {
   display: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .close-nav-button {
+  .close-nav-button {
     display: flex;
   }
-  body.sidebar-refactoring .toggle-sidebar-button {
+  .toggle-sidebar-button {
     display: none;
   }
 }
@@ -2037,7 +1463,6 @@ svg.s16 {
   top: 4px;
 }
 .search .search-input-wrap .search-icon {
-  -moz-user-select: none;
   user-select: none;
 }
 .search .search-input-wrap .clear-icon {
@@ -2066,7 +1491,7 @@ svg.s16 {
   float: left;
   margin-right: 16px;
   border-radius: 50%;
-  border: 1px solid #333;
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 .avatar.s16,
 .avatar-container.s16 {
@@ -2086,12 +1511,6 @@ svg.s16 {
   height: 32px;
   margin-right: 8px;
 }
-.avatar.s40,
-.avatar-container.s40 {
-  width: 40px;
-  height: 40px;
-  margin-right: 8px;
-}
 .avatar {
   transition-property: none;
   width: 40px;
@@ -2108,8 +1527,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #525252;
-  background-color: #eee;
+  color: #fafafa;
+  background-color: #303030;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -2119,30 +1538,26 @@ svg.s16 {
   font-size: 14px;
   line-height: 32px;
 }
-.identicon.s40 {
-  font-size: 16px;
-  line-height: 38px;
-}
 .identicon.bg1 {
-  background-color: #ffebee;
+  background-color: #660e00;
 }
 .identicon.bg2 {
-  background-color: #f3e5f5;
+  background-color: #f4f0ff;
 }
 .identicon.bg3 {
-  background-color: #e8eaf6;
+  background-color: #f1f1ff;
 }
 .identicon.bg4 {
-  background-color: #e3f2fd;
+  background-color: #033464;
 }
 .identicon.bg5 {
-  background-color: #e0f2f1;
+  background-color: #0a4020;
 }
 .identicon.bg6 {
-  background-color: #fbe9e7;
+  background-color: #5c2900;
 }
 .identicon.bg7 {
-  background-color: #eee;
+  background-color: #303030;
 }
 .avatar-container {
   overflow: hidden;
@@ -2162,10 +1577,6 @@ svg.s16 {
   margin: 0;
   align-self: center;
 }
-.avatar-container.s40 {
-  min-width: 40px;
-  min-height: 40px;
-}
 .rect-avatar {
   border-radius: 2px;
 }
@@ -2176,23 +1587,18 @@ svg.s16 {
   border-radius: 2px;
 }
 .rect-avatar.s32,
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32,
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   border-radius: 4px;
 }
-.rect-avatar.s40 {
-  border-radius: 4px;
-}
 body.gl-dark .navbar-gitlab {
   background-color: #fafafa;
 }
@@ -2253,9 +1659,6 @@ body.gl-dark
 body.gl-dark .search form {
   background-color: rgba(250, 250, 250, 0.2);
 }
-body.gl-dark .search .search-input::-ms-input-placeholder {
-  color: rgba(250, 250, 250, 0.8);
-}
 body.gl-dark .search .search-input::placeholder {
   color: rgba(250, 250, 250, 0.8);
 }
@@ -2263,17 +1666,14 @@ body.gl-dark .search .search-input-wrap .search-icon,
 body.gl-dark .search .search-input-wrap .clear-icon {
   fill: rgba(250, 250, 250, 0.8);
 }
-body.gl-dark .nav-sidebar li.active {
-  box-shadow: inset 4px 0 0 #999;
-}
 body.gl-dark .nav-sidebar li.active > a {
   color: #f0f0f0;
 }
-body.gl-dark .nav-sidebar li.active .nav-icon-container svg {
-  fill: #f0f0f0;
-}
-body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill {
-  color: #f0f0f0;
+body.gl-dark .nav-sidebar .fly-out-top-item a,
+body.gl-dark .nav-sidebar .fly-out-top-item.active a,
+body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container {
+  background-color: #2f2a6b;
+  color: var(--black, #333);
 }
 body.gl-dark .logo-text svg {
   fill: var(--gl-text-color);
@@ -2373,6 +1773,9 @@ body.gl-dark {
   --black: #fff;
   --svg-status-bg: #333;
 }
+.nav-sidebar li.active {
+  box-shadow: none;
+}
 .tab-width-8 {
   -moz-tab-size: 8;
   tab-size: 8;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 4605b6de563..76d10300307 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -130,10 +130,6 @@ h1 {
   color: transparent;
   text-shadow: 0 0 0 #303030;
 }
-.form-control::-ms-input-placeholder {
-  color: #5e5e5e;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #5e5e5e;
   opacity: 1;
@@ -160,7 +156,6 @@ h1 {
   color: #303030;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -444,8 +439,7 @@ a {
   border-top: 1px solid #dbdbdb;
 }
 .toggle-sidebar-button .collapse-text,
-.toggle-sidebar-button .icon-chevron-double-lg-left,
-.toggle-sidebar-button .icon-chevron-double-lg-right {
+.toggle-sidebar-button .icon-chevron-double-lg-left {
   color: #666;
 }
 svg {
@@ -531,7 +525,7 @@ body {
   max-width: 500px;
   margin-top: 4px;
   margin-bottom: 24px;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 400;
   padding: 8px 0;
   background-color: #fff;
@@ -611,9 +605,6 @@ input {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }
@@ -918,6 +909,7 @@ input {
 .context-header .sidebar-context-title {
   overflow: hidden;
   text-overflow: ellipsis;
+  color: #303030;
 }
 @media (min-width: 768px) {
   .page-with-contextual-sidebar {
@@ -936,20 +928,14 @@ input {
 }
 .nav-sidebar {
   position: fixed;
+  bottom: 0;
+  left: 0;
   z-index: 600;
   width: 220px;
   top: 40px;
-  bottom: 0;
-  left: 0;
-  background-color: #fafafa;
-  box-shadow: inset -1px 0 0 #dbdbdb;
+  background-color: #f0f0f0;
   transform: translate3d(0, 0, 0);
 }
-@media (min-width: 576px) and (max-width: 576px) {
-  .nav-sidebar:not(.sidebar-collapsed-desktop) {
-    box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1);
-  }
-}
 .nav-sidebar.sidebar-collapsed-desktop {
   width: 48px;
 }
@@ -957,7 +943,8 @@ input {
   overflow-x: hidden;
 }
 .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge),
-.nav-sidebar.sidebar-collapsed-desktop .nav-item-name {
+.nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
+.nav-sidebar.sidebar-collapsed-desktop .collapse-text {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -969,362 +956,29 @@ input {
   width: 1px;
 }
 .nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a {
-  min-height: 45px;
-}
-.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item {
-  display: block;
-}
-.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
-  margin: 0 auto;
-}
-.nav-sidebar a {
-  text-decoration: none;
-}
-.nav-sidebar ul {
-  padding-left: 0;
-  list-style: none;
-}
-.nav-sidebar li {
-  white-space: nowrap;
-}
-.nav-sidebar li a {
-  display: flex;
-  align-items: center;
-  padding: 12px 16px;
-  color: #666;
-}
-.nav-sidebar li .nav-item-name {
-  flex: 1;
-}
-.nav-sidebar li.active > a {
-  font-weight: 600;
-}
-@media (max-width: 767.98px) {
-  .nav-sidebar {
-    left: -220px;
-  }
-}
-.nav-sidebar .nav-icon-container {
-  display: flex;
-  margin-right: 8px;
-}
-.nav-sidebar .fly-out-top-item {
-  display: none;
-}
-.nav-sidebar svg {
-  height: 16px;
-  width: 16px;
-}
-@media (min-width: 768px) and (max-width: 1199px) {
-  .nav-sidebar:not(.sidebar-expanded-mobile) {
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
-    overflow-x: hidden;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .badge.badge-pill:not(.fly-out-badge),
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
-    min-height: 45px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item {
-    display: block;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
-    margin: 0 auto;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
-    height: 60px;
-    width: 48px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
-    padding: 10px 4px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    .sidebar-sub-level-items:not(.flyout-list) {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
-    margin-right: 0;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
-    padding: 16px;
-    width: 47px;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .collapse-text,
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-left {
-    display: none;
-  }
-  .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button
-    .icon-chevron-double-lg-right {
-    display: block;
-    margin: 0;
-  }
-}
-.nav-sidebar-inner-scroll {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
-}
-.sidebar-sub-level-items {
-  display: none;
-  padding-bottom: 8px;
-}
-.sidebar-sub-level-items > li a {
-  padding: 8px 16px 8px 40px;
-}
-.sidebar-sub-level-items > li.active a {
-  background: rgba(0, 0, 0, 0.04);
-}
-.sidebar-top-level-items {
-  margin-bottom: 60px;
-}
-@media (min-width: 576px) {
-  .sidebar-top-level-items > li > a {
-    margin-right: 1px;
-  }
-}
-.sidebar-top-level-items > li .badge.badge-pill {
-  background-color: rgba(0, 0, 0, 0.08);
-  color: #666;
-}
-.sidebar-top-level-items > li.active {
-  background: rgba(0, 0, 0, 0.04);
-}
-.sidebar-top-level-items > li.active > a {
-  margin-left: 4px;
-  padding-left: 12px;
-}
-.sidebar-top-level-items > li.active .badge.badge-pill {
-  font-weight: 600;
-}
-.sidebar-top-level-items
-  > li.active
-  .sidebar-sub-level-items:not(.is-fly-out-only) {
-  display: block;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  height: 48px;
-  padding: 0 16px;
-  background-color: #fafafa;
-  border: 0;
-  color: #666;
-  display: flex;
-  align-items: center;
-}
-.toggle-sidebar-button,
-.close-nav-button {
-  position: fixed;
-  bottom: 0;
-  width: 219px;
-  border-top: 1px solid #dbdbdb;
-}
-.toggle-sidebar-button svg,
-.close-nav-button svg {
-  margin-right: 8px;
-}
-.toggle-sidebar-button .icon-chevron-double-lg-right,
-.close-nav-button .icon-chevron-double-lg-right {
-  display: none;
-}
-.collapse-text {
-  white-space: nowrap;
-  overflow: hidden;
-}
-.sidebar-collapsed-desktop .context-header {
-  height: 60px;
-  width: 48px;
-}
-.sidebar-collapsed-desktop .context-header a {
-  padding: 10px 4px;
-}
-.sidebar-collapsed-desktop .sidebar-context-title {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  .sidebar-sub-level-items:not(.flyout-list) {
-  display: none;
-}
-.sidebar-collapsed-desktop .nav-icon-container {
-  margin-right: 0;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button {
-  padding: 16px;
-  width: 47px;
-}
-.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text,
-.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
-  display: none;
-}
-.sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-right {
-  display: block;
-  margin: 0;
-}
-.fly-out-top-item > a {
-  display: flex;
-}
-.fly-out-top-item .fly-out-badge {
-  margin-left: 8px;
-}
-.fly-out-top-item-name {
-  flex: 1;
-}
-.close-nav-button {
-  display: none;
-}
-@media (max-width: 767.98px) {
-  .close-nav-button {
-    display: flex;
-  }
-  .toggle-sidebar-button {
-    display: none;
-  }
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring.ui-indigo
-  .nav-sidebar
-  li.active
-  .nav-icon-container
-  svg {
-  fill: #2f2a6b;
-}
-body.sidebar-refactoring .nav-sidebar {
-  box-shadow: none;
-}
-body.sidebar-refactoring .nav-sidebar li.active {
-  background-color: transparent;
-  box-shadow: none !important;
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 48px;
-  }
-}
-@media (min-width: 1200px) {
-  body.sidebar-refactoring .page-with-contextual-sidebar {
-    padding-left: 220px;
-  }
-}
-@media (min-width: 768px) {
-  body.sidebar-refactoring .page-with-icon-sidebar {
-    padding-left: 48px;
-  }
-}
-body.sidebar-refactoring .nav-sidebar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 600;
-  width: 220px;
-  top: 40px;
-  background-color: #f0f0f0;
-  transform: translate3d(0, 0, 0);
-}
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop {
-  width: 48px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .nav-sidebar-inner-scroll {
-  overflow-x: hidden;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .badge.badge-pill:not(.fly-out-badge),
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name,
-body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .sidebar-top-level-items
-  > li
-  > a {
   min-height: unset;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .fly-out-top-item:not(.divider) {
+.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) {
   display: block !important;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  .avatar-container {
+.nav-sidebar.sidebar-collapsed-desktop .avatar-container {
   margin: 0 auto;
 }
-body.sidebar-refactoring
-  .nav-sidebar.sidebar-collapsed-desktop
-  li.active:not(.fly-out-top-item)
-  > a {
+.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar a {
+.nav-sidebar a {
   text-decoration: none;
-  color: #2f2a6b;
+  color: #303030;
 }
-body.sidebar-refactoring .nav-sidebar li {
+.nav-sidebar li {
   white-space: nowrap;
 }
-body.sidebar-refactoring .nav-sidebar li .nav-item-name {
+.nav-sidebar li .nav-item-name {
   flex: 1;
 }
-body.sidebar-refactoring .nav-sidebar li > a,
-body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
+.nav-sidebar li > a,
+.nav-sidebar li > .fly-out-top-item-container {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1336,49 +990,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
   line-height: 1rem;
   margin: 1px 4px;
 }
-body.sidebar-refactoring .nav-sidebar li.active > a {
+.nav-sidebar li.active > a {
   font-weight: 600;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  li.active:not(.fly-out-top-item)
-  > a:not(.has-sub-items) {
+.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) {
   background-color: rgba(41, 41, 97, 0.08);
 }
-body.sidebar-refactoring .nav-sidebar ul {
+.nav-sidebar ul {
   padding-left: 0;
   list-style: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .nav-sidebar {
+  .nav-sidebar {
     left: -220px;
   }
 }
-body.sidebar-refactoring .nav-sidebar .nav-icon-container {
+.nav-sidebar .nav-icon-container {
   display: flex;
   margin-right: 8px;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1390,30 +1037,26 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #fff;
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-top: 0;
   position: relative;
-  background-color: #000;
+  color: #fff;
+  background: var(--black, #000);
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a
   strong,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1421,20 +1064,17 @@ body.sidebar-refactoring
   strong {
   font-weight: 400;
 }
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a::before,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a:not(.has-sub-items)
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1450,34 +1090,18 @@ body.sidebar-refactoring
   border-top: 0.25rem solid transparent;
   border-bottom: 0.25rem solid transparent;
   border-right: 0.25rem solid #000;
+  border-right-color: var(--black, #000);
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items {
-  margin-top: -0.25rem;
-}
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item {
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item {
   display: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar
-  a.has-sub-items
-  + .sidebar-sub-level-items
-  .fly-out-top-item
-  a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a,
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item.active
   a,
-body.sidebar-refactoring
-  .nav-sidebar
+.nav-sidebar
   a.has-sub-items
   + .sidebar-sub-level-items
   .fly-out-top-item
@@ -1489,30 +1113,21 @@ body.sidebar-refactoring
   cursor: default;
   pointer-events: none;
   font-size: 0.75rem;
-  background-color: #2f2a6b;
-  color: #fff;
   margin-top: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 @media (min-width: 768px) and (max-width: 1199px) {
-  body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-sidebar-inner-scroll {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll {
     overflow-x: hidden;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .badge.badge-pill:not(.fly-out-badge),
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-item-name,
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .collapse-text {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,
+  .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1523,44 +1138,28 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-top-level-items
-    > li
-    > a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a {
     min-height: unset;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .fly-out-top-item:not(.divider) {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) {
     display: block !important;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .avatar-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container {
     margin: 0 auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     li.active:not(.fly-out-top-item)
     > a {
     background-color: rgba(41, 41, 97, 0.08);
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: 60px;
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 10px 4px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .sidebar-context-title {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -1571,58 +1170,45 @@ body.sidebar-refactoring
     white-space: nowrap;
     width: 1px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header {
     height: auto;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .context-header
-    a {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a {
     padding: 0.25rem;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .sidebar-top-level-items
     > li
     .sidebar-sub-level-items:not(.flyout-list) {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .nav-icon-container {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container {
     margin-right: 0;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
-    .toggle-sidebar-button {
+  .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button {
     width: 48px;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .collapse-text {
     display: none;
   }
-  body.sidebar-refactoring
-    .nav-sidebar:not(.sidebar-expanded-mobile)
+  .nav-sidebar:not(.sidebar-expanded-mobile)
     .toggle-sidebar-button
     .icon-chevron-double-lg-left {
     transform: rotate(180deg);
-    display: block;
     margin: 0;
   }
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll {
+.nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
   overflow: auto;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header {
+.nav-sidebar-inner-scroll > div.context-header {
   margin-top: 0.25rem;
 }
-body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
+.nav-sidebar-inner-scroll > div.context-header a {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1637,78 +1223,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar {
+.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items {
+.sidebar-top-level-items {
   margin-top: 0.25rem;
   margin-bottom: 60px;
 }
-body.sidebar-refactoring .sidebar-top-level-items .context-header a {
+.sidebar-top-level-items .context-header a {
   padding: 0.25rem;
   margin-bottom: 0.25rem;
   margin-top: 0;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container {
+.sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
   flex: none;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar {
+.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
   border-style: none;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  .context-header
-  a
-  .sidebar-context-title {
-  color: #2f2a6b;
-}
-body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
+.sidebar-top-level-items > li .badge.badge-pill {
   border-radius: 0.5rem;
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
@@ -1717,29 +1271,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill {
   background-color: #cbe2f9;
   color: #0b5cad;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   > li.active
   .sidebar-sub-level-items:not(.is-fly-out-only) {
   display: block;
 }
-body.sidebar-refactoring
-  .sidebar-top-level-items
-  > li.active
-  .badge.badge-pill {
+.sidebar-top-level-items > li.active .badge.badge-pill {
   font-weight: 400;
   color: #0b5cad;
 }
-body.sidebar-refactoring .sidebar-sub-level-items {
+.sidebar-sub-level-items {
   padding-top: 0;
   padding-bottom: 0;
   display: none;
 }
-body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a {
+.sidebar-sub-level-items:not(.fly-out-list) li > a {
   padding-left: 2.25rem;
 }
-body.sidebar-refactoring .toggle-sidebar-button,
-body.sidebar-refactoring .close-nav-button {
+.toggle-sidebar-button,
+.close-nav-button {
   height: 48px;
   padding: 0 16px;
   background-color: #fafafa;
@@ -1749,31 +1299,28 @@ body.sidebar-refactoring .close-nav-button {
   align-items: center;
   background-color: #f0f0f0;
   border-top: 1px solid #dbdbdb;
-  color: #2f2a6b;
   position: fixed;
   bottom: 0;
   width: 220px;
 }
-body.sidebar-refactoring .toggle-sidebar-button .collapse-text,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right,
-body.sidebar-refactoring .close-nav-button .collapse-text,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left,
-body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right {
+.toggle-sidebar-button .collapse-text,
+.toggle-sidebar-button .icon-chevron-double-lg-left,
+.close-nav-button .collapse-text,
+.close-nav-button .icon-chevron-double-lg-left {
   color: inherit;
 }
-body.sidebar-refactoring .collapse-text {
+.collapse-text {
   white-space: nowrap;
   overflow: hidden;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: 60px;
   width: 48px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 10px 4px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
+.sidebar-collapsed-desktop .sidebar-context-title {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -1784,47 +1331,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title {
   white-space: nowrap;
   width: 1px;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header {
+.sidebar-collapsed-desktop .context-header {
   height: auto;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a {
+.sidebar-collapsed-desktop .context-header a {
   padding: 0.25rem;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
+.sidebar-collapsed-desktop
   .sidebar-top-level-items
   > li
   .sidebar-sub-level-items:not(.flyout-list) {
   display: none;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container {
+.sidebar-collapsed-desktop .nav-icon-container {
   margin-right: 0;
 }
-body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button {
+.sidebar-collapsed-desktop .toggle-sidebar-button {
   width: 48px;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .collapse-text {
+.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text {
   display: none;
 }
-body.sidebar-refactoring
-  .sidebar-collapsed-desktop
-  .toggle-sidebar-button
-  .icon-chevron-double-lg-left {
+.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left {
   transform: rotate(180deg);
-  display: block;
   margin: 0;
 }
-body.sidebar-refactoring .close-nav-button {
+.close-nav-button {
   display: none;
 }
 @media (max-width: 767.98px) {
-  body.sidebar-refactoring .close-nav-button {
+  .close-nav-button {
     display: flex;
   }
-  body.sidebar-refactoring .toggle-sidebar-button {
+  .toggle-sidebar-button {
     display: none;
   }
 }
@@ -1905,7 +1444,6 @@ svg.s16 {
   top: 4px;
 }
 .search .search-input-wrap .search-icon {
-  -moz-user-select: none;
   user-select: none;
 }
 .search .search-input-wrap .clear-icon {
@@ -1934,7 +1472,7 @@ svg.s16 {
   float: left;
   margin-right: 16px;
   border-radius: 50%;
-  border: 1px solid #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.08);
 }
 .avatar.s16,
 .avatar-container.s16 {
@@ -1954,12 +1492,6 @@ svg.s16 {
   height: 32px;
   margin-right: 8px;
 }
-.avatar.s40,
-.avatar-container.s40 {
-  width: 40px;
-  height: 40px;
-  margin-right: 8px;
-}
 .avatar {
   transition-property: none;
   width: 40px;
@@ -1976,8 +1508,8 @@ svg.s16 {
 .identicon {
   text-align: center;
   vertical-align: top;
-  color: #525252;
-  background-color: #eee;
+  color: #303030;
+  background-color: #f0f0f0;
 }
 .identicon.s16 {
   font-size: 10px;
@@ -1987,30 +1519,26 @@ svg.s16 {
   font-size: 14px;
   line-height: 32px;
 }
-.identicon.s40 {
-  font-size: 16px;
-  line-height: 38px;
-}
 .identicon.bg1 {
-  background-color: #ffebee;
+  background-color: #fcf1ef;
 }
 .identicon.bg2 {
-  background-color: #f3e5f5;
+  background-color: #f4f0ff;
 }
 .identicon.bg3 {
-  background-color: #e8eaf6;
+  background-color: #f1f1ff;
 }
 .identicon.bg4 {
-  background-color: #e3f2fd;
+  background-color: #e9f3fc;
 }
 .identicon.bg5 {
-  background-color: #e0f2f1;
+  background-color: #ecf4ee;
 }
 .identicon.bg6 {
-  background-color: #fbe9e7;
+  background-color: #fdf1dd;
 }
 .identicon.bg7 {
-  background-color: #eee;
+  background-color: #f0f0f0;
 }
 .avatar-container {
   overflow: hidden;
@@ -2030,10 +1558,6 @@ svg.s16 {
   margin: 0;
   align-self: center;
 }
-.avatar-container.s40 {
-  min-width: 40px;
-  min-height: 40px;
-}
 .rect-avatar {
   border-radius: 2px;
 }
@@ -2044,23 +1568,18 @@ svg.s16 {
   border-radius: 2px;
 }
 .rect-avatar.s32,
-body.sidebar-refactoring
-  .nav-sidebar-inner-scroll
+.nav-sidebar-inner-scroll
   > div.context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32,
-body.sidebar-refactoring
-  .sidebar-top-level-items
+.sidebar-top-level-items
   .context-header
   a
   .avatar-container.rect-avatar
   .avatar.s32 {
   border-radius: 4px;
 }
-.rect-avatar.s40 {
-  border-radius: 4px;
-}
 
 .tab-width-8 {
   -moz-tab-size: 8;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 81a87742850..070ab36e0b3 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -198,10 +198,6 @@ hr {
   color: transparent;
   text-shadow: 0 0 0 #303030;
 }
-.form-control::-ms-input-placeholder {
-  color: #5e5e5e;
-  opacity: 1;
-}
 .form-control::placeholder {
   color: #5e5e5e;
   opacity: 1;
@@ -229,7 +225,6 @@ hr {
   color: #303030;
   text-align: center;
   vertical-align: middle;
-  -moz-user-select: none;
   user-select: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -294,11 +289,6 @@ fieldset:disabled a.btn {
 .mb-3 {
   margin-bottom: 1rem !important;
 }
-@media (min-width: 576px) {
-  .mt-sm-0 {
-    margin-top: 0 !important;
-  }
-}
 .text-center {
   text-align: center !important;
 }
@@ -324,13 +314,6 @@ fieldset:disabled a.btn {
   appearance: none;
   -moz-appearance: none;
 }
-.gl-form-input:not(.form-control-plaintext):-moz-read-only,
-.gl-form-input.form-control:not(.form-control-plaintext):-moz-read-only {
-  background-color: #fafafa;
-  color: #868686;
-  box-shadow: inset 0 0 0 1px #dbdbdb;
-  cursor: not-allowed;
-}
 .gl-form-input:disabled,
 .gl-form-input:not(.form-control-plaintext):read-only,
 .gl-form-input.form-control:disabled,
@@ -340,10 +323,6 @@ fieldset:disabled a.btn {
   box-shadow: inset 0 0 0 1px #dbdbdb;
   cursor: not-allowed;
 }
-.gl-form-input::-ms-input-placeholder,
-.gl-form-input.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .gl-form-input::placeholder,
 .gl-form-input.form-control::placeholder {
   color: #868686;
@@ -500,7 +479,6 @@ hr {
   z-index: 1;
 }
 .flash-container.sticky {
-  position: -webkit-sticky;
   position: sticky;
   top: 48px;
   z-index: 251;
@@ -526,9 +504,6 @@ label.label-bold {
   border-radius: 4px;
   padding: 6px 10px;
 }
-.form-control::-ms-input-placeholder {
-  color: #868686;
-}
 .form-control::placeholder {
   color: #868686;
 }
@@ -542,7 +517,7 @@ label.label-bold {
   justify-content: center;
   height: 40px;
   background: #fff;
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid #dbdbdb;
 }
 .navbar-empty .tanuki-logo,
 .navbar-empty .brand-header-logo {
@@ -796,9 +771,15 @@ svg {
 .gl-display-flex {
   display: flex;
 }
+.gl-display-block {
+  display: block;
+}
 .gl-align-items-center {
   align-items: center;
 }
+.gl-w-full {
+  width: 100%;
+}
 .gl-p-2 {
   padding: 0.25rem;
 }
@@ -817,6 +798,11 @@ svg {
 .gl-mb-5 {
   margin-bottom: 1rem;
 }
+@media (min-width: 36rem) {
+  .gl-sm-mt-0 {
+    margin-top: 0;
+  }
+}
 .gl-text-left {
   text-align: left;
 }
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 9d98fe5c739..ea7aaaa8ec8 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -253,3 +253,14 @@ $well-inner-border: $gray-200;
   color: $gray-900;
   border-color: $gray-800;
 }
+
+.nav-sidebar {
+  li.active {
+    box-shadow: none;
+  }
+
+  .sidebar-sub-level-items.fly-out-list {
+    box-shadow: none;
+    border: 1px solid $border-color;
+  }
+}
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index 6a60978b954..a94169ab494 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -174,20 +174,20 @@
   }
 
   // Sidebar
-  .nav-sidebar li.active {
-    box-shadow: inset 4px 0 0 $border-and-box-shadow;
-
-    > a {
-      color: $sidebar-text;
-    }
-
-    .nav-icon-container svg {
-      fill: $sidebar-text;
-    }
+  .nav-sidebar li.active > a {
+    color: $sidebar-text;
   }
 
-  .sidebar-top-level-items > li.active .badge.badge-pill {
-    color: $sidebar-text;
+  .nav-sidebar {
+    .fly-out-top-item {
+      a,
+      a:hover,
+      &.active a,
+      .fly-out-top-item-container {
+        background-color: $purple-900;
+        color: var(--black, $white);
+      }
+    }
   }
 
   .nav-links li {
@@ -213,7 +213,6 @@
   .ide-sidebar-link {
     &.active {
       color: $border-and-box-shadow;
-      box-shadow: inset 3px 0 $border-and-box-shadow;
 
       &.is-right {
         box-shadow: inset -3px 0 $border-and-box-shadow;
diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss
index bbf14afcca2..9566c9c6004 100644
--- a/app/assets/stylesheets/themes/theme_indigo.scss
+++ b/app/assets/stylesheets/themes/theme_indigo.scss
@@ -6,7 +6,7 @@ body {
       $indigo-200,
       $indigo-500,
       $indigo-700,
-      $indigo-800,
+      $purple-900,
       $indigo-900,
       $white
     );
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index cabbe5834cb..10334d771b8 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -65,6 +65,8 @@
   min-width: 0;
 }
 
+// .gl-font-size-inherit will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1466
+.gl-font-size-inherit,
 .font-size-inherit { font-size: inherit; }
 .gl-w-8 { width: px-to-rem($grid-size); }
 .gl-w-16 { width: px-to-rem($grid-size * 2); }
@@ -85,6 +87,12 @@
   padding-bottom: $gl-spacing-scale-8;
 }
 
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1495
+.gl-py-13 {
+  padding-top: $gl-spacing-scale-13;
+  padding-bottom: $gl-spacing-scale-13;
+}
+
 .gl-transition-property-stroke-opacity {
   transition-property: stroke-opacity;
 }
@@ -117,6 +125,25 @@
   }
 }
 
+// Will be moved to @gitlab/ui (without the !important) in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1462
+// We only need the bang (!) version until the non-bang version is added to
+// @gitlab/ui utitlities.scss. Once there, it will get loaded in the correct
+// order to properly override `.gl-mt-6` which is used for narrower screen
+// widths (currently that style gets added to the application.css stylesheet
+// after this one, so it takes precedence).
+.gl-md-mt-11\! {
+  @media (min-width: $breakpoint-md) {
+    margin-top: $gl-spacing-scale-11 !important;
+  }
+}
+
+// Same as above (also without the !important) but for overriding `.gl-pt-6`
+.gl-md-pt-11\! {
+  @media (min-width: $breakpoint-md) {
+    padding-top: $gl-spacing-scale-11 !important;
+  }
+}
+
 // This is used to help prevent issues with margin collapsing.
 // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing.
 .gl-force-block-formatting-context::after {
@@ -200,3 +227,23 @@ $gl-line-height-42: px-to-rem(42px);
 .gl-max-h-none\! {
   max-height: none !important;
 }
+
+// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465
+.gl-popover {
+  .popover-header {
+    .gl-button.close {
+      margin-top: -$gl-spacing-scale-3;
+      margin-right: -$gl-spacing-scale-4;
+    }
+  }
+}
+
+// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1490
+.gl-w-grid-size-28 {
+  width: $grid-size * 28;
+}
+
+// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1491
+.gl-min-w-8 {
+  min-width: $gl-spacing-scale-8;
+}
-- 
cgit v1.2.3