Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42

27 files changed, 244 insertions, 252 deletions

diff --git a/app/assets/stylesheets/_jh/application_jh.scss b/app/assets/stylesheets/_jh/application_jh.scss
new file mode 100644
index 00000000000..9d9918d5bbd
--- /dev/null
+++ b/app/assets/stylesheets/_jh/application_jh.scss
@@ -0,0 +1,5 @@
+/*
+ This is a noop-file. In JH:
+ jh/app/assets/stylesheets/_jh/application_jh.scss
+ will take precedence over it and import more styles
+ */
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 9ef1b58ed24..40228b93e01 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -24,6 +24,9 @@
 // EE-only stylesheets
 @import 'application_ee';
 
+// JH-only stylesheets
+@import 'application_jh';
+
 /* print styles */
 @media print {
   @import 'print';
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
new file mode 100644
index 00000000000..64abf5574fa
--- /dev/null
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -0,0 +1,56 @@
+.ProseMirror {
+  td,
+  th,
+  li {
+    :only-child {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  ul[data-type='taskList'] {
+    list-style: none;
+    padding: 0;
+
+    li {
+      margin: 0 !important;
+    }
+  }
+
+  [data-type='taskList'] {
+    p {
+      margin-bottom: 0;
+    }
+
+    li {
+      > label,
+      > div {
+        display: inline-block;
+        vertical-align: top;
+      }
+
+      > label {
+        padding: $gl-spacing-scale-1 $gl-spacing-scale-3 0 0;
+        margin: 0;
+      }
+    }
+  }
+}
+
+.table-creator-grid-item {
+  box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
+    inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100,
+    inset #{-$gl-spacing-scale-1} #{-$gl-spacing-scale-1} 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100 !important;
+
+  &.active {
+    box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
+      inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 $gl-spacing-scale-2 $blue-500,
+      inset #{-$gl-spacing-scale-1} #{-$gl-spacing-scale-1} 0 $gl-spacing-scale-2 $blue-500 !important;
+  }
+}
+
+.table-dropdown .dropdown-menu {
+  @include gl-min-w-0;
+  @include gl-w-auto;
+
+  @include gl-white-space-nowrap;
+}
diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index 7af97505749..4437b5b673d 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -36,7 +36,15 @@
 }
 
 .with-performance-bar .whats-new-drawer {
-  margin-top: calc(#{$performance-bar-height} + #{$header-height});
+  margin-top: $performance-bar-height + $header-height;
+}
+
+.with-system-header .whats-new-drawer {
+  margin-top: $system-header-height + $header-height;
+}
+
+.with-performance-bar.with-system-header .whats-new-drawer {
+  margin-top: $performance-bar-height + $system-header-height + $header-height;
 }
 
 .gl-badge.whats-new-item-badge {
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index a93c70c75d3..fa235f72e35 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -98,7 +98,6 @@
 }
 
 .note-action-button,
-.toolbar-btn,
 .dropdown-toggle-caret {
   @include transition(color);
 }
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 10481294df5..264373451d5 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -6,7 +6,7 @@
 
 .nothing-here-block {
   text-align: center;
-  padding: 20px;
+  padding: 16px;
   color: $gl-text-color;
   font-weight: $gl-font-weight-normal;
   font-size: 14px;
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index f8b1735207c..61a20c7a8fd 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -839,6 +839,18 @@ table.code {
   }
 }
 
+.commits-container {
+  .diff-files-changed {
+    @include media-breakpoint-up(sm) {
+      top: $header-height;
+
+      .with-performance-bar & {
+        top: $header-height + $performance-bar-height;
+      }
+    }
+  }
+}
+
 .diff-files-changed {
   .inline-parallel-buttons {
     position: relative;
@@ -854,12 +866,12 @@ table.code {
   @include media-breakpoint-up(sm) {
     position: -webkit-sticky;
     position: sticky;
-    top: $header-height;
+    top: $header-height + $mr-tabs-height;
     background-color: $white;
     z-index: 200;
 
     .with-performance-bar & {
-      top: $header-height + $performance-bar-height;
+      top: $header-height + $mr-tabs-height + $performance-bar-height;
     }
 
     &.is-stuck {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 144a396ea65..b05fbfaae6c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -50,12 +50,6 @@
       width: 100%;
     }
 
-    &.frequent-items-dropdown-menu {
-      padding: 0;
-      overflow-y: initial;
-      max-height: initial;
-    }
-
     // `GlDropdown` specifies the `max-height` of `.gl-new-dropdown-inner`
     // as `$dropdown-max-height`, but the `max-height` rule above forces
     // the parent `.dropdown-menu` to be _slightly_ too small because of
@@ -834,61 +828,11 @@
   }
 }
 
-header.header-content .dropdown-menu.frequent-items-dropdown-menu {
-  padding: 0;
-}
-
 .frequent-items-dropdown-container {
   display: flex;
   flex-direction: row;
   height: $grid-size * 40;
 
-  &.with-deprecated-styles {
-    width: 500px;
-    height: 354px;
-
-    .section-header,
-    .frequent-items-list-container li.section-empty {
-      padding: 0 $gl-padding;
-    }
-
-    .search-input-container {
-      position: relative;
-      padding: 4px $gl-padding;
-
-      .search-icon {
-        position: absolute;
-        top: 13px;
-        right: 25px;
-        color: $gray-300;
-      }
-    }
-
-    @include media-breakpoint-down(xs) {
-      flex-direction: column;
-      width: 100%;
-      height: auto;
-      flex: 1;
-
-      .frequent-items-dropdown-sidebar,
-      .frequent-items-dropdown-content {
-        width: 100%;
-      }
-
-      .frequent-items-dropdown-sidebar {
-        border-bottom: 1px solid $border-color;
-        border-right: 0;
-      }
-    }
-
-    .frequent-items-list-container {
-      width: auto;
-      height: auto;
-      padding-bottom: 0;
-    }
-  }
-
-  .frequent-items-dropdown-sidebar,
   .frequent-items-dropdown-content {
     @include gl-pt-3;
   }
@@ -897,11 +841,6 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     color: $almost-black;
   }
 
-  .frequent-items-dropdown-sidebar {
-    width: 30%;
-    border-right: 1px solid $border-color;
-  }
-
   .frequent-items-dropdown-content {
     position: relative;
     width: 70%;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 5ad7ceecb2b..df78543f96d 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -15,6 +15,16 @@
   border-top: 0;
   border-radius: $border-radius-default;
 
+  &.file-holder-top-border {
+    border-top: 1px solid $border-color;
+
+    .file-title {
+      // Prevents the top border getting clipped by the background
+      border-top-left-radius: $border-radius-default;
+      border-top-right-radius: $border-radius-default;
+    }
+  }
+
   &.file-holder-no-border {
     border: 0;
   }
@@ -136,6 +146,13 @@
      *  Blame file
      */
     &.blame {
+      //
+      // IMPORTANT PERFORMANCE OPTIMIZATION
+      //
+      // When viewinng a blame with many commits a lot of content is rendered on the page.
+      // The line below ensures that we only render what is visible to the user, thus reducing TBT in the browser.
+      content-visibility: auto;
+
       table {
         border: 0;
         margin: 0;
@@ -150,6 +167,12 @@
       }
 
       td {
+        //
+        // IMPORTANT PERFORMANCE OPTIMIZATION
+        //
+        // When viewinng a blame with many commits a lot of content is rendered on the page.
+        // The line below ensures that we only render what is visible to the user, thus reducing TBT in the browser.
+        content-visibility: auto;
         border-top: 0;
         border-bottom: 0;
 
@@ -509,6 +532,24 @@ span.idiff {
   }
 }
 
+.version-link {
+  @include gl-display-inline-block;
+  @include gl-align-self-center;
+  @include gl-mt-2;
+  @include gl-w-5;
+  @include gl-h-5;
+  @include gl-float-left;
+  background-color: $gray-400;
+  mask-image: asset_url('icons-stacked.svg#doc-versions');
+  mask-repeat: no-repeat;
+  mask-size: cover;
+  mask-position: center;
+
+  &:hover {
+    background-color: $black;
+  }
+}
+
 //
 // IMPORTANT PERFORMANCE OPTIMIZATION BELOW
 //
@@ -530,3 +571,18 @@ span.idiff {
 // 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;}
+
+.blob-viewer[data-loading] .file-content.code .line:nth-of-type(69):not(:last-of-type),
+.blob-viewer[data-loading] .file-content.code .file-line-num:nth-of-type(69):not(:last-of-type) {
+  &::after {
+    @include gl-display-block;
+    @include gl-font-weight-bold;
+    content: '\2026';
+  }
+}
+
+.blob-viewer[data-loading] .file-content.code .line:nth-of-type(69):not(:last-of-type) {
+  &::after {
+    @include gl-text-center;
+  }
+}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 65d914e47cf..ae46ff33ec0 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -27,17 +27,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
     display: none;
   }
 
-  .menu-expanded {
-    .more-icon {
-      display: none;
-    }
-
-    .close-icon {
-      display: block;
-      margin: auto;
-    }
-  }
-
   .header-content {
     width: 100%;
     display: flex;
@@ -103,18 +92,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
     .navbar-collapse > ul.nav > li:not(.d-none) {
       margin: 0 2px;
     }
-
-    &.menu-expanded {
-      @include media-breakpoint-down(xs) {
-        .hide-when-menu-expanded {
-          display: none;
-        }
-
-        .navbar-collapse {
-          display: flex;
-        }
-      }
-    }
   }
 
   .navbar-collapse {
@@ -673,19 +650,30 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
 }
 
 .top-nav-responsive-open {
-  .hide-when-top-nav-responsive-open {
-    @include media-breakpoint-down(xs) {
+  .more-icon {
+    display: none;
+  }
+
+  .close-icon {
+    display: block;
+    margin: auto;
+  }
+
+  @include media-breakpoint-down(xs) {
+    .navbar-collapse {
+      display: flex;
+    }
+
+    .hide-when-top-nav-responsive-open {
       display: none !important;
     }
-  }
 
-  .top-nav-responsive {
-    @include media-breakpoint-down(xs) {
+    .top-nav-responsive {
       @include gl-display-block;
     }
-  }
 
-  .navbar-gitlab .header-content .title-container {
-    flex: 0;
+    .navbar-gitlab .header-content .title-container {
+      flex: 0;
+    }
   }
 }
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 2a97009e605..7315bce1ed9 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -83,6 +83,7 @@
   li.md-header-toolbar {
     margin-left: auto;
     display: none;
+    padding-bottom: $gl-padding-8;
 
     &.active {
       display: block;
@@ -92,8 +93,8 @@
         display: flex;
         justify-content: center;
         width: 100%;
-        padding-top: $gl-padding-top;
-        padding-bottom: $gl-padding-top;
+        flex-wrap: wrap;
+        margin-top: $gl-padding-8;
       }
     }
   }
@@ -131,36 +132,6 @@
   width: 100%;
 }
 
-.toolbar-btn {
-  float: left;
-  padding: 0 7px;
-  background: transparent;
-  border: 0;
-  outline: 0;
-
-  svg {
-    width: 14px;
-    height: 14px;
-    vertical-align: middle;
-    fill: $gl-text-color-secondary;
-  }
-
-  &:hover,
-  &:focus {
-    svg {
-      fill: $blue-600;
-    }
-  }
-}
-
-.toolbar-fullscreen-btn {
-  margin-right: -5px;
-
-  @include media-breakpoint-down(xs) {
-    margin-right: 0;
-  }
-}
-
 .md-suggestion-diff {
   display: table !important;
   border: 1px solid $border-color !important;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index f904ef11f5b..06eebb95438 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -14,7 +14,6 @@
     a,
     button {
       padding: $gl-padding-8;
-      padding-bottom: $gl-padding-8 + 1;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index e35feb8c62d..6b3201ba2b0 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -237,3 +237,7 @@
   @include side-panel-toggle;
   border-bottom: 1px solid $border-color;
 }
+
+.edit-link {
+  margin-right: -$gl-spacing-scale-2;
+}
diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss
index a967d9a71f1..8b694b9be05 100644
--- a/app/assets/stylesheets/framework/source_editor.scss
+++ b/app/assets/stylesheets/framework/source_editor.scss
@@ -25,6 +25,21 @@
   height: 500px;
 }
 
+.source-editor-preview {
+  @include gl-display-flex;
+
+  .md {
+    @include gl-overflow-scroll;
+    @include gl-px-6;
+    @include gl-py-4;
+    @include gl-w-full;
+  }
+
+  .gl-source-editor {
+    @include gl-order-n1;
+  }
+}
+
 .monaco-editor.gl-source-editor {
   .margin-view-overlays {
     .line-numbers {
diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
index 272f94176d0..3e5271f84d5 100644
--- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
+++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
@@ -14,7 +14,7 @@
   .select2-choice {
     background: var(--white, $white);
     color: var(--gl-text-color, $gl-text-color);
-    border-color: var(--border-color, $border-color);
+    border-color: var(--gray-400, $gray-400);
     height: 34px;
     padding: $gl-vert-padding $gl-input-padding;
     font-size: $gl-font-size;
@@ -41,7 +41,7 @@
     }
 
     &:hover {
-      border-color: var(--gray-200, $gray-200);
+      border-color: var(--gray-400, $gray-400);
       color: var(--gl-text-color, $gl-text-color);
     }
   }
@@ -99,7 +99,7 @@
   background: var(--white, $white);
   box-shadow: 0 2px 4px $dropdown-shadow-color;
   border-radius: $gl-border-radius-base;
-  border: 1px solid var(--border-color, $border-color);
+  border: 1px solid var(--gray-400, $gray-400);
   min-width: 175px;
   color: var(--gl-text-color, $gl-text-color);
   z-index: 999;
@@ -118,7 +118,7 @@
 }
 
 .select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid var(--border-color, $border-color);
+  border-top: 1px solid var(--gray-400, $gray-400);
   margin-top: -6px;
 }
 
@@ -132,7 +132,7 @@
 .select2-dropdown-open,
 .select2-dropdown-open.select2-drop-above {
   .select2-choice {
-    border-color: var(--border-color, $border-color);
+    border-color: var(--gray-400, $gray-400);
     outline: 0;
   }
 }
@@ -140,7 +140,7 @@
 .select2-container-multi {
   .select2-choices {
     border-radius: $border-radius-default;
-    border-color: var(--border-color, $border-color);
+    border-color: var(--gray-400, $gray-400);
     background: none;
 
     .select2-search-field input {
@@ -153,7 +153,7 @@
     .select2-search-choice {
       margin: 5px 0 0 8px;
       box-shadow: none;
-      border-color: var(--border-color, $border-color);
+      border-color: var(--gray-400, $gray-400);
       color: var(--gl-text-color, $gl-text-color);
       line-height: 15px;
       background-color: var(--gray-50, $gray-50);
@@ -167,7 +167,7 @@
       }
 
       &.select2-search-choice-focus {
-        border-color: var(--gl-text-color, $gl-text-color);
+        border-color: var(--gray-400, $gray-400);
       }
     }
   }
@@ -197,7 +197,7 @@
     background-origin: content-box;
     background-repeat: no-repeat;
     background-position: right 0 bottom 0 !important;
-    border: 1px solid var(--border-color, $border-color);
+    border: 1px solid var(--gray-400, $gray-400);
     border-radius: $border-radius-default;
     line-height: 16px;
     transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index 428bd90ddd7..10183f774b1 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -153,16 +153,16 @@
 // pseudo-element that is the same size as our element, then
 // animate opacity/transform to give a soothing single pulse
 .board-column-highlighted::after {
+  @include gl-focus;
   content: '';
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  top: -1px;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
   pointer-events: none;
   opacity: 0;
-  z-index: -1;
-  box-shadow: 0 0 6px 3px $blue-200;
+  border-radius: $border-radius-default;
   animation-name: board-column-flash-border;
   animation-duration: 1.2s;
   animation-fill-mode: forwards;
@@ -173,18 +173,11 @@
   0%,
   100% {
     opacity: 0;
-    transform: scale(0.98);
   }
 
   25%,
   75% {
     opacity: 1;
-    transform: scale(0.99);
-  }
-
-  50% {
-    opacity: 1;
-    transform: scale(1);
   }
 }
 
@@ -476,6 +469,10 @@
   .gl-drawer-header {
     align-items: flex-start;
   }
+
+  .labels-select-wrapper.is-embedded .labels-select-wrapper.is-embedded {
+    width: auto;
+  }
 }
 
 .board-header-collapsed-info-icon:hover {
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
index 525481638f3..c74b5460e1a 100644
--- a/app/assets/stylesheets/page_bundles/import.scss
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -22,16 +22,11 @@
 
 .import-entities-target-select {
   &.disabled {
-    .import-entities-target-select-separator,
-    .select2-container.select2-container-disabled .select2-choice {
+    .import-entities-target-select-separator {
       color: var(--gray-400, $gray-400);
       border-color: var(--gray-100, $gray-100);
       background-color: var(--gray-10, $gray-10);
     }
-
-    .select2-container.select2-container-disabled .select2-choice .select2-arrow {
-      background-color: var(--gray-10, $gray-10);
-    }
   }
 
   .import-entities-target-select-separator {
@@ -39,20 +34,6 @@
     background-color: var(--gray-10, $gray-10);
   }
 
-  .select2-container {
-    > .select2-choice {
-      .select2-arrow {
-        background-color: var(--white, $white);
-      }
-
-      border-color: var(--gray-200, $gray-200);
-      color: var(--gray-900, $gray-900) !important;
-      background-color: var(--white, $white) !important;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
   .gl-form-input {
     box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
   }
diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss
index 5525ad66e42..1e6567189be 100644
--- a/app/assets/stylesheets/page_bundles/wiki.scss
+++ b/app/assets/stylesheets/page_bundles/wiki.scss
@@ -1,5 +1,6 @@
 @import 'mixins_and_variables_and_functions';
 @import 'highlight.js/scss/a11y-light';
+@import 'components/content_editor';
 
 .title .edit-wiki-header {
   width: 780px;
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index c8da025131d..33d00027404 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -154,21 +154,6 @@
   }
 }
 
-/*
- * Last push widget
- */
-.event-last-push {
-  width: 100%;
-  display: flex;
-  align-items: center;
-
-  .event-last-push-text {
-    @include str-truncated(100%);
-    font-size: 13px;
-    margin-right: $gl-padding;
-  }
-}
-
 @include media-breakpoint-down(xs) {
   .event-item {
     padding-left: 0;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 8807ab5e597..071a5be073f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -1003,10 +1003,10 @@ $tabs-holder-z-index: 250;
 
 .mr-compare {
   .diff-file .file-title-flex-parent {
-    top: $header-height + 51px;
+    top: $header-height + $mr-tabs-height + 36px;
 
     .with-performance-bar & {
-      top: $performance-bar-height + $header-height + 51px;
+      top: $performance-bar-height + $header-height + $mr-tabs-height + 36px;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index c025d8569a7..34a03a07405 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -54,7 +54,7 @@
 
 .common-note-form {
   .md-area {
-    padding: $gl-padding-top $gl-padding;
+    padding: $gl-padding-8 $gl-padding;
     border: 1px solid $border-color;
     border-radius: $border-radius-base;
     transition: border-color ease-in-out 0.15s,
@@ -295,12 +295,6 @@ table {
       }
     }
   }
-
-  @include media-breakpoint-down(xs) {
-    .btn {
-      width: 100%;
-    }
-  }
 }
 
 .discussion-reply-holder {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 4a866489806..17bc40b4dec 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -649,7 +649,7 @@ $system-note-svg-size: 16px;
 
   @include media-breakpoint-down(xs) {
     width: 100%;
-    margin: $gl-padding-8 0;
+    margin: 0 0 $gl-padding-8;
   }
 
   .btn-group > .discussion-next-btn {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 5fbb2e6443f..8f5de73365b 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -13,10 +13,6 @@ $search-sidebar-max-width: 300px;
       border-bottom: 0;
     }
   }
-
-  .blob-result {
-    margin: 5px 0;
-  }
 }
 
 .search-sidebar {
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index a497f56f3b8..a90751f772e 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -336,9 +336,6 @@ h1 {
 .d-none {
   display: none !important;
 }
-.d-inline-block {
-  display: inline-block !important;
-}
 .d-block {
   display: block !important;
 }
@@ -363,11 +360,6 @@ h1 {
     display: block !important;
   }
 }
-@media (min-width: 1200px) {
-  .d-xl-block {
-    display: block !important;
-  }
-}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -488,7 +480,7 @@ body {
 .btn:active,
 .btn.active {
   background-color: #444;
-  border-color: #fafafa;
+  border-color: #4f4f4f;
   color: #fafafa;
 }
 .btn svg {
@@ -1407,10 +1399,6 @@ svg.s16 {
   width: 16px;
   height: 16px;
 }
-svg.s18 {
-  width: 18px;
-  height: 18px;
-}
 svg.s32 {
   width: 32px;
   height: 32px;
@@ -1499,12 +1487,6 @@ svg.s16 {
   height: 16px;
   margin-right: 8px;
 }
-.avatar.s18,
-.avatar-container.s18 {
-  width: 18px;
-  height: 18px;
-  margin-right: 8px;
-}
 .avatar.s32,
 .avatar-container.s32 {
   width: 32px;
@@ -1583,9 +1565,6 @@ svg.s16 {
 .rect-avatar.s16 {
   border-radius: 2px;
 }
-.rect-avatar.s18 {
-  border-radius: 2px;
-}
 .rect-avatar.s32,
 .nav-sidebar-inner-scroll
   > div.context-header
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 76d10300307..0b2d34b6f5d 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -317,9 +317,6 @@ h1 {
 .d-none {
   display: none !important;
 }
-.d-inline-block {
-  display: inline-block !important;
-}
 .d-block {
   display: block !important;
 }
@@ -344,11 +341,6 @@ h1 {
     display: block !important;
   }
 }
-@media (min-width: 1200px) {
-  .d-xl-block {
-    display: block !important;
-  }
-}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1388,10 +1380,6 @@ svg.s16 {
   width: 16px;
   height: 16px;
 }
-svg.s18 {
-  width: 18px;
-  height: 18px;
-}
 svg.s32 {
   width: 32px;
   height: 32px;
@@ -1480,12 +1468,6 @@ svg.s16 {
   height: 16px;
   margin-right: 8px;
 }
-.avatar.s18,
-.avatar-container.s18 {
-  width: 18px;
-  height: 18px;
-  margin-right: 8px;
-}
 .avatar.s32,
 .avatar-container.s32 {
   width: 32px;
@@ -1564,9 +1546,6 @@ svg.s16 {
 .rect-avatar.s16 {
   border-radius: 2px;
 }
-.rect-avatar.s18 {
-  border-radius: 2px;
-}
 .rect-avatar.s32,
 .nav-sidebar-inner-scroll
   > div.context-header
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index ea7aaaa8ec8..8e1438eaf8a 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -184,10 +184,24 @@ body.gl-dark {
       }
     }
   }
+
+  .gl-datepicker-theme {
+    .pika-prev,
+    .pika-next {
+      filter: invert(0.9);
+    }
+
+    .is-selected > .pika-button {
+      color: $gray-900;
+    }
+
+    :not(.is-selected) > .pika-button:hover {
+      background-color: $gray-200;
+    }
+  }
 }
 
-$border-white-light: $gray-900;
-$border-white-normal: $gray-900;
+$border-white-normal: $border-color;
 
 $body-bg: $gray-10;
 $input-bg: $white;
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 10334d771b8..ccad503c1ed 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -87,12 +87,6 @@
   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;
 }
@@ -203,6 +197,10 @@
   margin-bottom: -$gl-spacing-scale-3;
 }
 
+.gl-mr-n2 {
+  margin-right: -$gl-spacing-scale-2;
+}
+
 // Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1408
 $gl-line-height-42: px-to-rem(42px);
 
@@ -228,6 +226,10 @@ $gl-line-height-42: px-to-rem(42px);
   max-height: none !important;
 }
 
+.gl-max-w-50p {
+  max-width: 50%;
+}
+
 // Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465
 .gl-popover {
   .popover-header {
@@ -247,3 +249,12 @@ $gl-line-height-42: px-to-rem(42px);
 .gl-min-w-8 {
   min-width: $gl-spacing-scale-8;
 }
+
+// Will both be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1526
+.gl-opacity-6 {
+  opacity: 0.6;
+}
+
+.gl-opacity-7 {
+  opacity: 0.7;
+}