Add latest changes from gitlab-org/gitlab@14-1-stable-eev14.1.0-rc42

1 files changed, 117 insertions, 714 deletions

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;