Add latest changes from gitlab-org/gitlab@15-2-stable-eev15.2.0-rc42

37 files changed, 434 insertions, 295 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 092cf643e0f..be72ec33465 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -1,5 +1,6 @@
 @import './pages/branches';
 @import './pages/clusters';
+@import './pages/colors';
 @import './pages/commits';
 @import './pages/deploy_keys';
 @import './pages/detail_page';
@@ -8,6 +9,7 @@
 @import './pages/events';
 @import './pages/groups';
 @import './pages/help';
+@import './pages/hierarchy';
 @import './pages/issuable';
 @import './pages/issues';
 @import './pages/labels';
@@ -25,9 +27,8 @@
 @import './pages/registry';
 @import './pages/search';
 @import './pages/service_desk';
-@import './pages/settings';
 @import './pages/settings_ci_cd';
+@import './pages/settings';
 @import './pages/storage_quota';
 @import './pages/tree';
 @import './pages/users';
-@import './pages/hierarchy';
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
index 870ed50c6eb..1b6a0208ca7 100644
--- a/app/assets/stylesheets/components/content_editor.scss
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -106,11 +106,14 @@
   }
 }
 
-.table-dropdown .dropdown-menu {
+.content-editor-dropdown .dropdown-menu {
+  width: auto !important;
+
   @include gl-min-w-0;
-  @include gl-w-auto;
 
-  @include gl-white-space-nowrap;
+  button {
+    @include gl-white-space-nowrap;
+  }
 }
 
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ced62926218..37f92d3cf3d 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -506,8 +506,7 @@
     max-width: unset;
   }
 
-  .no-emoji-placeholder,
-  .clear-user-status {
+  .no-emoji-placeholder {
     svg {
       fill: var(--gray-500, $gray-500);
     }
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index a8e740525e2..f27a36d1966 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -60,6 +60,13 @@
   @include icon-styles($gray-500, $gray-100);
 }
 
+.password-status-icon-success {
+  svg {
+    vertical-align: middle;
+    fill: $green-500;
+  }
+}
+
 .icon-link {
   &:hover {
     text-decoration: none;
@@ -67,6 +74,7 @@
 }
 
 .user-avatar-link {
+  display: inline-block;
   text-decoration: none;
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index eeffc4fc21b..1e921b4234e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -432,7 +432,6 @@ $gl-input-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top: 10px;
 $gl-sidebar-padding: 22px;
-$gl-bar-padding: 3px;
 $input-horizontal-padding: 12px;
 $browser-scrollbar-size: 10px;
 
diff --git a/app/assets/stylesheets/highlight/hljs.scss b/app/assets/stylesheets/highlight/hljs.scss
index 2e31e7c1f6d..e1bc23852a4 100644
--- a/app/assets/stylesheets/highlight/hljs.scss
+++ b/app/assets/stylesheets/highlight/hljs.scss
@@ -37,6 +37,10 @@
 
     &.class_ {
       color: var(--color-hljs-class);
+
+      &.inherited__ {
+        color: var(--color-hljs-variable);
+      }
     }
 
     &.function_ {
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index f4d9909d81f..709e7f5ae18 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -188,7 +188,11 @@ $dark-il: #de935f;
     .diff-line-num.new,
     .line-coverage.new,
     .line-codequality.new,
-    .line_content.new {
+    .line_content.new,
+    .diff-line-num.new-nomappinginraw,
+    .line-coverage.new-nomappinginraw,
+    .line-codequality.new-nomappinginraw,
+    .line_content.new-nomappinginraw {
       @include diff-background($dark-new-bg, $dark-new-idiff, $dark-border);
 
       &::before,
@@ -200,7 +204,11 @@ $dark-il: #de935f;
     .diff-line-num.old,
     .line-coverage.old,
     .line-codequality.old,
-    .line_content.old {
+    .line_content.old,
+    .diff-line-num.old-nomappinginraw,
+    .line-coverage.old-nomappinginraw,
+    .line-codequality.old-nomappinginraw,
+    .line_content.old-nomappinginraw {
       @include diff-background($dark-old-bg, $dark-old-idiff, $dark-border);
 
       &::before,
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index dfa32d4b773..0ed9c209417 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -100,6 +100,8 @@ $monokai-gh: #75715e;
   // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251)
   @include hljs-override('string', $monokai-s);
   @include hljs-override('attr', $monokai-na);
+  @include hljs-override('attribute', $monokai-n);
+  @include hljs-override('selector-tag', $monokai-nt);
   @include hljs-override('keyword', $monokai-k);
   @include hljs-override('variable', $monokai-nv);
   @include hljs-override('variable.language_', $monokai-k);
@@ -113,7 +115,8 @@ $monokai-gh: #75715e;
   @include hljs-override('section', $monokai-gh);
   @include hljs-override('bullet', $monokai-n);
   @include hljs-override('subst', $monokai-p);
-  @include hljs-override('symbol', $monokai-ni);
+  @include hljs-override('symbol', $monokai-ss);
+  @include hljs-override('title.class_.inherited__', $monokai-no);
 
   // Line numbers
   .file-line-num {
@@ -178,7 +181,11 @@ $monokai-gh: #75715e;
     .diff-line-num.new,
     .line-coverage.new,
     .line-codequality.new,
-    .line_content.new {
+    .line_content.new,
+    .diff-line-num.new-nomappinginraw,
+    .line-coverage.new-nomappinginraw,
+    .line-codequality.new-nomappinginraw,
+    .line_content.new-nomappinginraw {
       @include diff-background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
 
       &::before,
@@ -190,7 +197,11 @@ $monokai-gh: #75715e;
     .diff-line-num.old,
     .line-coverage.old,
     .line-codequality.old,
-    .line_content.old {
+    .line_content.old,
+    .diff-line-num.old-nomappinginraw,
+    .line-coverage.old-nomappinginraw,
+    .line-codequality.old-nomappinginraw,
+    .line_content.old-nomappinginraw {
       @include diff-background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
 
       &::before,
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index f70c53c9eaa..868e466b1f8 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -75,7 +75,9 @@
     .line-coverage,
     .line-codequality {
       &.old,
-      &.new {
+      &.new,
+      &.new-nomappinginraw,
+      &.old-nomappinginraw {
         background-color: $white-normal;
       }
     }
@@ -131,7 +133,7 @@
     }
 
     .line_content {
-      &.old {
+      &.old, &.old-nomappinginraw {
         background-color: $white-normal;
 
         &::before {
@@ -144,7 +146,7 @@
         }
       }
 
-      &.new {
+      &.new, &.new-nomappinginraw {
         background-color: $white-normal;
 
         &::before {
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index 73aa6275d17..6260339a48d 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -103,6 +103,8 @@ $solarized-dark-il: #2aa198;
   // We should be able to remove the overrides once the upstream issue is fixed (https://github.com/sourcegraph/sourcegraph/issues/23251)
     @include hljs-override('string', $solarized-dark-s);
     @include hljs-override('attr', $solarized-dark-na);
+    @include hljs-override('attribute', $solarized-dark-n);
+    @include hljs-override('selector-tag', $solarized-dark-nt);
     @include hljs-override('keyword', $solarized-dark-k);
     @include hljs-override('variable', $solarized-dark-nv);
     @include hljs-override('variable.language_', $solarized-dark-k);
@@ -117,7 +119,8 @@ $solarized-dark-il: #2aa198;
     @include hljs-override('bullet', $solarized-dark-n);
     @include hljs-override('subst', $solarized-dark-p);
     @include hljs-override('symbol', $solarized-dark-ni);
-    
+    @include hljs-override('title.class_.inherited__', $solarized-dark-no);
+
   // Line numbers
   .file-line-num {
     @include line-number-link($solarized-dark-line-color);
@@ -189,7 +192,11 @@ $solarized-dark-il: #2aa198;
     .diff-line-num.new,
     .line-coverage.new,
     .line-codequality.new,
-    .line_content.new {
+    .line_content.new,
+    .diff-line-num.new-nomappinginraw,
+    .line-coverage.new-nomappinginraw,
+    .line-codequality.new-nomappinginraw,
+    .line_content.new-nomappinginraw {
       @include diff-background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
 
       &::before,
@@ -201,7 +208,11 @@ $solarized-dark-il: #2aa198;
     .diff-line-num.old,
     .line-coverage.old,
     .line-codequality.old,
-    .line_content.old {
+    .line_content.old,
+    .diff-line-num.old-nomappinginraw,
+    .line-coverage.old-nomappinginraw,
+    .line-codequality.old-nomappinginraw,
+    .line_content.old-nomappinginraw {
       @include diff-background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
 
       &::before,
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index 74448317270..e6f098f4cdf 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -106,6 +106,7 @@ $solarized-light-il: #2aa198;
 }
 
 .code.solarized-light {
+  @include hljs-override('title.class_.inherited__', $solarized-light-no);
   // Line numbers
   .file-line-num {
     @include line-number-link($solarized-light-line-color);
@@ -169,7 +170,11 @@ $solarized-light-il: #2aa198;
     .diff-line-num.new,
     .line-coverage.new,
     .line-codequality.new,
-    .line_content.new {
+    .line_content.new,
+    .diff-line-num.new-nomappinginraw,
+    .line-coverage.new-nomappinginraw,
+    .line-codequality.new-nomappinginraw,
+    .line_content.new-nomappinginraw {
       @include diff-background($solarized-light-new-bg,
       $solarized-light-new-idiff, $solarized-light-border);
 
@@ -190,7 +195,11 @@ $solarized-light-il: #2aa198;
     .diff-line-num.old,
     .line-coverage.old,
     .line-codequality.old,
-    .line_content.old {
+    .line_content.old,
+    .diff-line-num.old-nomappinginraw,
+    .line-coverage.old-nomappinginraw,
+    .line-codequality.old-nomappinginraw,
+    .line_content.old-nomappinginraw {
       @include diff-background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
 
       &::before,
diff --git a/app/assets/stylesheets/highlight/themes/white.scss b/app/assets/stylesheets/highlight/themes/white.scss
index 8698e448c94..b0f6595feff 100644
--- a/app/assets/stylesheets/highlight/themes/white.scss
+++ b/app/assets/stylesheets/highlight/themes/white.scss
@@ -2,6 +2,9 @@
   @import '../white_base';
 
   @include conflict-colors('white');
+  @include hljs-override('variable', $white-nv);
+  @include hljs-override('symbol', $white-ss);
+  @include hljs-override('title.class_.inherited__', $white-no);
 }
 
 :root {
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index aac8ccde96e..770a90bbc57 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -158,7 +158,8 @@ pre.code,
   }
 
   .diff-line-num {
-    &.old {
+    &.old,
+    &.old-nomappinginraw {
       background-color: $line-number-old;
 
       a {
@@ -166,7 +167,8 @@ pre.code,
       }
     }
 
-    &.new {
+    &.new,
+    &.new-nomappinginraw {
       background-color: $line-number-new;
 
       a {
@@ -204,7 +206,8 @@ pre.code,
   }
 
   .line_content {
-    &.old {
+    &.old,
+    &.old-nomappinginraw {
       background-color: $line-removed;
 
       &::before {
@@ -216,7 +219,8 @@ pre.code,
       }
     }
 
-    &.new {
+    &.new,
+    &.new-nomappinginraw {
       background-color: $line-added;
 
       &::before {
@@ -243,11 +247,13 @@ pre.code,
 
   .line-coverage,
   .line-codequality {
-    &.old {
+    &.old,
+    &.old-nomappinginraw {
       background-color: $line-removed;
     }
 
-    &.new {
+    &.new,
+    &.new-nomappinginraw {
       background-color: $line-added;
     }
 
diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss
index b8cbe64df38..da120b5fb4e 100644
--- a/app/assets/stylesheets/mailer.scss
+++ b/app/assets/stylesheets/mailer.scss
@@ -2,8 +2,6 @@
 
 // Do not use 3-letter hex codes, bgcolor vs css background-color is problematic in emails
 //
-// stylelint-disable color-hex-length
-
 $mailer-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 $mailer-text-color: #333;
 $mailer-bg-color: #fafafa;
diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
index 57053c7f0cb..d93b4f75d77 100644
--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -1,9 +1,3 @@
-
-// stylelint-disable selector-class-pattern
-// stylelint-disable selector-max-compound-selectors
-// stylelint-disable stylelint-gitlab/duplicate-selectors
-// stylelint-disable stylelint-gitlab/utility-classes
-
 .blob-editor-container {
   flex: 1;
   height: 0;
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index 25a565ce2ba..c584bbaac09 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -64,10 +64,6 @@
         border-color: var(--ide-input-border, $gray-darkest);
       }
     }
-
-    a.gl-tab-nav-item-active {
-      box-shadow: inset 0 -2px 0 0 var(--ide-input-border, $gray-darkest);
-    }
   }
 
   .drag-handle:hover {
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 14873c54cd7..1b27e51e793 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -46,9 +46,7 @@ $tabs-holder-z-index: 250;
   position: -webkit-sticky;
   position: sticky;
   // Unitless zero values are not allowed in calculations
-  // stylelint-disable-next-line length-zero-no-unit
   top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
-  // stylelint-disable-next-line length-zero-no-unit
   max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px));
 
   .drag-handle {
@@ -632,6 +630,24 @@ $tabs-holder-z-index: 250;
   height: 24px;
 }
 
+.mr-widget-extension-icon::after {
+  @include gl-content-empty;
+  @include gl-absolute;
+  @include gl-rounded-full;
+
+  top: 4px;
+  left: 4px;
+  width: 16px;
+  height: 16px;
+  border: 4px solid currentColor;
+}
+
+.mr-widget-extension-icon svg {
+  position: relative;
+  top: 2px;
+  left: 2px;
+}
+
 .mr-widget-heading {
   position: relative;
   border: 1px solid var(--border-color, $border-color);
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
index ddc638197ca..91fd2d42657 100644
--- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -70,7 +70,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
 
   .timeline-header-blank,
   .timeline-header-item {
-    @include float-left;
+    @include gl-float-left;
     height: $header-item-height;
     border-bottom: $border-style;
     background-color: var(--white, $white);
@@ -150,7 +150,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
 
 .details-cell,
 .timeline-cell {
-  @include float-left;
+  @include gl-float-left;
   height: $item-height;
 }
 
diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss
index 0bc3cc6678c..eec5ebdb383 100644
--- a/app/assets/stylesheets/page_bundles/project.scss
+++ b/app/assets/stylesheets/page_bundles/project.scss
@@ -128,10 +128,6 @@
     > li {
       display: inline-block;
 
-      &:not(:last-child) {
-        margin-right: $gl-padding;
-      }
-
       &.right {
         vertical-align: top;
         margin-top: 0;
@@ -179,7 +175,6 @@
     }
 
     .btn {
-      margin-bottom: $gl-padding-8;
       padding: $gl-btn-vert-padding $gl-btn-padding;
       line-height: $gl-btn-line-height;
 
@@ -190,12 +185,6 @@
   }
 }
 
-.project-buttons {
-  .nav > li:not(:last-child) {
-    margin-right: $gl-padding-8;
-  }
-}
-
 .git-empty {
   margin-bottom: 7px;
 
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
new file mode 100644
index 00000000000..9220fa82b46
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -0,0 +1,35 @@
+@import 'mixins_and_variables_and_functions';
+
+.gl-token-selector-token-container {
+  display: flex;
+  align-items: center;
+}
+
+#weight-widget-input:not(:hover, :focus),
+#weight-widget-input[readonly] {
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--white, $white);
+}
+
+#weight-widget-input[readonly] {
+  background-color: var(--white, $white);
+}
+
+.work-item-assignees {
+  .assign-myself {
+    display: none;
+  }
+
+  .assignees-selector:hover .assign-myself {
+    display: block;
+  }
+}
+
+.work-item-labels {
+  .gl-token {
+    padding-left: $gl-spacing-scale-1;
+  }
+
+  .gl-token-close {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index d34d309eea3..18158fab75f 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -1,9 +1,3 @@
-.content-list > .branch-item,
-.branch-title {
-  display: flex;
-  align-items: center;
-}
-
 .branch-info {
   flex: auto;
   min-width: 0;
diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss
new file mode 100644
index 00000000000..20e072b9903
--- /dev/null
+++ b/app/assets/stylesheets/pages/colors.scss
@@ -0,0 +1,24 @@
+.color-item {
+  @include gl-align-items-center;
+  @include gl-display-flex;
+}
+
+.color-item-color {
+  @include gl-flex-shrink-0;
+  @include gl-mr-3;
+  @include gl-top-0;
+}
+
+.right-sidebar-collapsed {
+  .color-item {
+    @include gl-pt-3;
+  }
+
+  .color-item-color {
+    margin: 0;
+  }
+
+  .color-item-text {
+    display: none;
+  }
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 80b9e378252..c96d8ecc782 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -95,8 +95,14 @@
   }
 }
 
-.commits-row + .commits-row {
-  border-top: 1px solid $white-normal;
+.commits-row {
+  + .commits-row {
+    border-top: 1px solid $white-normal;
+  }
+
+  + .commits-empty {
+    display: none;
+  }
 }
 
 .text-expander {
@@ -133,18 +139,6 @@
   }
 }
 
-.commit-detail {
-  display: flex;
-  justify-content: space-between;
-  align-items: start;
-  flex-grow: 1;
-  min-width: 0;
-
-  .project-namespace {
-    color: $gl-text-color-tertiary;
-  }
-}
-
 .commit-content {
   padding-right: 10px;
   white-space: normal;
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 96ca9fbcb43..2e1bb9b9eac 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -209,7 +209,6 @@ table.pipeline-project-metrics tr td {
     }
 
     .title {
-      margin-top: -$gl-padding-8; // negative margin required for flex-wrap
       font-size: $gl-font-size;
     }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index f3182af3047..51f964a4b70 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -176,11 +176,16 @@
   }
 
   .gutter-toggle {
+    display: flex;
+    align-items: center;
     margin-left: 20px;
-    padding-left: 10px;
+    padding: 4px;
+    border-radius: 4px;
+    height: 24px;
 
     &:hover {
       color: $gl-text-color;
+      background: $gray-50;
     }
 
     &:hover,
@@ -291,7 +296,7 @@
         @include media-breakpoint-up(lg) {
           padding: 0;
 
-          form {
+          .issuable-context-form {
             --initial-top: calc(#{$header-height} + #{$mr-tabs-height});
             --top: var(--initial-top);
 
@@ -338,7 +343,6 @@
     }
 
     .gutter-toggle {
-      border-left: 1px solid $border-gray-normal;
       text-align: center;
     }
 
@@ -405,8 +409,8 @@
       width: 100%;
       height: $sidebar-toggle-height;
       margin-left: 0;
-      padding-left: 0;
       border-bottom: 1px solid $border-white-normal;
+      border-radius: 0;
     }
 
     a.gutter-toggle {
@@ -709,10 +713,6 @@
         line-height: 20px;
         padding: 0;
       }
-
-      .issue-updated-at {
-        line-height: 20px;
-      }
     }
 
     @include media-breakpoint-down(xs) {
@@ -736,7 +736,7 @@
     .issuable-milestone,
     .issuable-info,
     .task-status,
-    .issuable-updated-at {
+    .issuable-timestamp {
       font-weight: $gl-font-weight-normal;
       color: $gl-text-color-secondary;
 
@@ -991,4 +991,19 @@
       bottom: -10%;
     }
   }
+
+  &.timeline-event-note-form {
+    &::before {
+      top: -15% !important; // Override default positioning
+      height: 20%;
+    }
+
+    &::after {
+      content: none;
+    }
+  }
+}
+
+.timeline-event-note-form {
+  padding-left: 20px;
 }
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 04e0ef6631e..c0a283ec643 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -124,8 +124,16 @@ ul.related-merge-requests > li gl-emoji {
 
 .new-branch-col {
   .discussion-filter-container {
-    &:not(:only-child) {
-      margin-right: $gl-padding-8;
+    &:not(:last-child) {
+      margin-right: $gl-spacing-scale-3;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    width: 100%;
+
+    > div:not(:last-child) {
+      margin-bottom: $gl-spacing-scale-3;
     }
   }
 }
@@ -147,6 +155,16 @@ ul.related-merge-requests > li gl-emoji {
 
   .btn-group:not(.hidden) {
     display: flex;
+
+    @include media-breakpoint-down(xs) {
+      .btn.btn-confirm {
+        @include gl-justify-content-start;
+
+        &.dropdown-toggle {
+          @include gl-flex-grow-0;
+        }
+      }
+    }
   }
 
   .js-create-merge-request {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a3fbedd87a9..96fe6caeea2 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -349,3 +349,36 @@ $comparison-empty-state-height: 62px;
     }
   }
 }
+
+.mr-experience-survey-wrapper {
+  // setting this explicitly because:
+  //   diff-files-holder has z-index 203
+  //   z-index 9999 utility class breaks tooltips
+  z-index: 210;
+}
+
+.mr-experience-survey-body {
+  width: 300px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.mr-experience-survey-legal {
+  order: 1;
+}
+
+.mr-experience-survey-logo {
+  width: 16px;
+
+  svg {
+    max-width: 100%;
+  }
+}
+
+.survey-slide-up-enter {
+  transform: translateY(10px);
+  opacity: 0;
+}
+
+.survey-slide-up-enter-active {
+  @include gl-transition-slow;
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 82e96dee4c6..4d0cf30a3b2 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -70,41 +70,6 @@ $system-note-svg-size: 16px;
     }
   }
 
-  .replies-toggle {
-    background-color: $gray-light;
-    padding: $gl-padding-8 $gl-padding;
-    border-top: 1px solid $gray-100;
-    border-bottom: 1px solid $gray-100;
-
-    .collapse-replies-btn:hover {
-      color: $blue-600;
-    }
-
-    &.collapsed {
-      color: $gl-text-color-secondary;
-      border-radius: 0 0 $border-radius-default $border-radius-default;
-
-      img {
-        margin: -2px 4px 0 0;
-      }
-
-      .author-link {
-        color: $gl-text-color;
-      }
-    }
-
-    .user-avatar-link {
-      &:last-child img {
-        margin-right: $gl-padding-8;
-      }
-    }
-
-    .btn-link {
-      border: 0;
-      vertical-align: baseline;
-    }
-  }
-
   .discussion-toggle-replies {
     border-top: 0;
     border-radius: 4px 4px 0 0;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index 518ec181e5e..c7d7aacceec 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,6 +1,6 @@
 .application-theme {
-  $ui-gray-bg: #2e2e2e;
-  $ui-light-gray-bg: #dfdfdf;
+  $ui-gray-bg: #303030;
+  $ui-light-gray-bg: #f0f0f0;
   $ui-dark-mode-bg: #1f1f1f;
 
   .preview {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 3b76130dd1a..0d45beab983 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -548,14 +548,6 @@ pre.light-well {
   }
 }
 
-.new-protected-branch,
-.new-protected-tag {
-  label {
-    margin-top: 6px;
-    font-weight: $gl-font-weight-normal;
-  }
-}
-
 .protected-branches-list,
 .protected-tags-list {
   margin-bottom: 30px;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 8755db83d35..f1865a7dc40 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -4,7 +4,8 @@ $search-sidebar-min-width: 240px;
 $search-sidebar-max-width: 300px;
 $search-input-field-x-min-width: 200px;
 $search-input-field-min-width: 320px;
-$search-input-field-max-width: 600px;
+$search-input-field-max-width: 640px;
+$search-keyboard-shortcut: '/';
 
 $border-radius-medium: 3px;
 
@@ -67,54 +68,53 @@ input[type='checkbox']:hover {
   }
 }
 
-// This is a temporary workaround!
-// the button in GitLab UI Search components need to be updated to not be the small size
-// see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540
-.header-search .gl-search-box-by-type-clear.btn-sm {
-  padding: 0.5rem !important;
-}
-
 .header-search {
   min-width: $search-input-field-min-width;
 
+  // This is a temporary workaround!
+  // the button in GitLab UI Search components need to be updated to not be the small size
+  // see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540
+  .gl-search-box-by-type-clear.btn-sm {
+    padding: 0.5rem !important;
+  }
+
   @include media-breakpoint-between(md, lg) {
     min-width: $search-input-field-x-min-width;
   }
 
-  input,
-  svg {
-    transition: border-color ease-in-out $default-transition-duration,
-      background-color ease-in-out $default-transition-duration;
+  &.is-active {
+    &.is-searching {
+      .in-search-scope-help {
+        position: absolute;
+        top: $gl-spacing-scale-2;
+        right: 2.125rem;
+        z-index: 2;
+      }
+    }
   }
 
-  &.is-not-active {
-    .btn.gl-clear-icon-button {
+  &.is-not-searching {
+    .in-search-scope-help {
+      display: none;
+    }
+  }
+
+  .keyboard-shortcut-helper {
+    transform: translateY(calc(50% - 2px));
+    box-shadow: none;
+    border-color: transparent;
+  }
+
+  &.is-active {
+    .keyboard-shortcut-helper {
       display: none;
     }
+  }
 
-    &::after {
-      content: '/';
-      display: inline-block;
-      position: absolute;
-      top: 0;
-      right: 8px;
-      transform: translateY(calc(50% - 4px));
-      padding: 4px 5px;
-      font-size: $gl-font-size-small;
-      font-family: $monospace-font;
-      line-height: 1;
-      vertical-align: middle;
-      border-width: 0;
-      border-style: solid;
-      border-image: none;
-      border-radius: $border-radius-medium;
-      box-shadow: none;
-      white-space: pre-wrap;
-      box-sizing: border-box;
-      // Safari
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-      word-break: keep-all;
+  &.is-not-active {
+    .btn.gl-clear-icon-button,
+    .in-search-scope-help {
+      display: none;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 0c7b74684cc..935595d1b3b 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -28,6 +28,7 @@
 
   &:first-of-type {
     margin-top: 10px;
+    padding-top: 0;
     border: 0;
   }
 
@@ -156,39 +157,33 @@
 }
 
 .visibility-level-setting {
-  .form-check {
-    margin-bottom: 10px;
-
-    .option-title {
-      font-weight: $gl-font-weight-normal;
-      display: inline-block;
-      color: $gl-text-color;
-      vertical-align: top;
-    }
+  .option-title {
+    font-weight: $gl-font-weight-normal;
+    display: inline-block;
+    color: $gl-text-color;
+    vertical-align: top;
+  }
 
-    .option-description,
-    .option-disabled-reason {
-      margin-left: 20px;
-      color: $project-option-descr-color;
-      margin-top: -5px;
+  .option-description,
+  .option-disabled-reason {
+    color: $project-option-descr-color;
+  }
+
+  .option-disabled-reason {
+    display: none;
+  }
+
+  .disabled {
+    svg {
+      opacity: 0.5;
     }
 
-    .option-disabled-reason {
+    .option-description {
       display: none;
     }
 
-    &.disabled {
-      svg {
-        opacity: 0.5;
-      }
-
-      .option-description {
-        display: none;
-      }
-
-      .option-disabled-reason {
-        display: block;
-      }
+    .option-disabled-reason {
+      display: block;
     }
   }
 }
@@ -320,7 +315,8 @@
 }
 
 .ci-variable-table,
-.deploy-freeze-table {
+.deploy-freeze-table,
+.ci-secure-files-table {
   table {
     thead {
       border-bottom: 1px solid $white-normal;
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 4cefa60b12a..801c9ea828f 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -2,10 +2,16 @@
 // Please see the feedback issue for more details and help:
 // https://gitlab.com/gitlab-org/gitlab/-/issues/331812
 @charset "UTF-8";
+:root {
+  color-scheme: dark;
+}
 body.gl-dark {
+  --gray-10: #1f1f1f;
   --gray-50: #303030;
   --gray-100: #404040;
+  --gray-200: #525252;
   --gray-600: #bfbfbf;
+  --gray-700: #dbdbdb;
   --gray-900: #fafafa;
   --green-100: #0d532a;
   --green-700: #91d4a8;
@@ -61,6 +67,11 @@ a:not([href]):not([class]) {
   color: inherit;
   text-decoration: none;
 }
+kbd {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  font-size: 1em;
+}
 img {
   vertical-align: middle;
   border-style: none;
@@ -105,6 +116,18 @@ button::-moz-focus-inner,
   padding-left: 0;
   list-style: none;
 }
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 90%;
+  color: #333;
+  background-color: #fafafa;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 100%;
+  font-weight: 600;
+}
 .container-fluid {
   width: 100%;
   padding-right: 15px;
@@ -740,6 +763,22 @@ input {
 .form-control::placeholder {
   color: #868686;
 }
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 0.6875rem;
+  line-height: 10px;
+  color: var(--gray-700, #dbdbdb);
+  vertical-align: middle;
+  background-color: var(--gray-10, #1f1f1f);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--gray-100, #404040) var(--gray-100, #404040)
+    var(--gray-200, #525252);
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 var(--gray-200, #525252) inset;
+}
 .navbar-gitlab {
   padding: 0 16px;
   z-index: 1000;
@@ -1504,7 +1543,7 @@ svg.s16 {
   vertical-align: -3px;
 }
 .header-content .header-search-new {
-  max-width: 600px;
+  max-width: 640px;
 }
 .header-search {
   min-width: 320px;
@@ -1514,29 +1553,10 @@ svg.s16 {
     min-width: 200px;
   }
 }
-.header-search.is-not-active::after {
-  content: "/";
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  right: 8px;
-  transform: translateY(calc(50% - 4px));
-  padding: 4px 5px;
-  font-size: 12px;
-  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
-    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
-  line-height: 1;
-  vertical-align: middle;
-  border-width: 0;
-  border-style: solid;
-  border-image: none;
-  border-radius: 3px;
+.header-search .keyboard-shortcut-helper {
+  transform: translateY(calc(50% - 2px));
   box-shadow: none;
-  white-space: pre-wrap;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  word-break: keep-all;
+  border-color: transparent;
 }
 .search {
   margin: 0 8px;
@@ -1697,6 +1717,9 @@ svg.s16 {
 .rect-avatar.s32 {
   border-radius: 4px;
 }
+:root {
+  color-scheme: dark;
+}
 body.gl-dark {
   --gray-10: #1f1f1f;
   --gray-50: #303030;
@@ -1884,7 +1907,7 @@ body.gl-dark .header-search input::placeholder {
 body.gl-dark .header-search input:active::placeholder {
   color: #868686;
 }
-body.gl-dark .header-search.is-not-active::after {
+body.gl-dark .header-search.is-not-active .keyboard-shortcut-helper {
   color: #fafafa;
   background-color: rgba(250, 250, 250, 0.2);
 }
@@ -1938,6 +1961,9 @@ body.gl-dark .navbar-gitlab .search form .search-input {
   color: var(--gl-text-color);
 }
 
+:root {
+  color-scheme: dark;
+}
 body.gl-dark {
   --gray-10: #1f1f1f;
   --gray-50: #303030;
@@ -2030,7 +2056,6 @@ body.gl-dark {
   --nav-active-bg: rgba(255, 255, 255, 0.08);
 }
 .tab-width-8 {
-  -moz-tab-size: 8;
   tab-size: 8;
 }
 .gl-sr-only {
@@ -2084,6 +2109,12 @@ body.gl-dark {
 .gl-absolute {
   position: absolute;
 }
+.gl-top-0 {
+  top: 0;
+}
+.gl-right-3 {
+  right: 0.5rem;
+}
 .gl-w-full {
   width: 100%;
 }
@@ -2119,6 +2150,9 @@ body.gl-dark {
 .gl-font-weight-bold {
   font-weight: 600;
 }
+.gl-z-index-1 {
+  z-index: 1;
+}
 
 @import "startup/cloaking";
 @include cloak-startup-scss(none);
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index cb3c97f18a3..43ca5a512d5 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -46,6 +46,11 @@ a:not([href]):not([class]) {
   color: inherit;
   text-decoration: none;
 }
+kbd {
+  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
+    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
+  font-size: 1em;
+}
 img {
   vertical-align: middle;
   border-style: none;
@@ -90,6 +95,18 @@ button::-moz-focus-inner,
   padding-left: 0;
   list-style: none;
 }
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 90%;
+  color: #fff;
+  background-color: #303030;
+  border-radius: 0.2rem;
+}
+kbd kbd {
+  padding: 0;
+  font-size: 100%;
+  font-weight: 600;
+}
 .container-fluid {
   width: 100%;
   padding-right: 15px;
@@ -725,6 +742,22 @@ input {
 .form-control::placeholder {
   color: #868686;
 }
+kbd {
+  display: inline-block;
+  padding: 3px 5px;
+  font-size: 0.6875rem;
+  line-height: 10px;
+  color: var(--gray-700, #525252);
+  vertical-align: middle;
+  background-color: var(--gray-10, #f5f5f5);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--gray-100, #dbdbdb) var(--gray-100, #dbdbdb)
+    var(--gray-200, #bfbfbf);
+  border-image: none;
+  border-radius: 3px;
+  box-shadow: 0 -1px 0 var(--gray-200, #bfbfbf) inset;
+}
 .navbar-gitlab {
   padding: 0 16px;
   z-index: 1000;
@@ -1489,7 +1522,7 @@ svg.s16 {
   vertical-align: -3px;
 }
 .header-content .header-search-new {
-  max-width: 600px;
+  max-width: 640px;
 }
 .header-search {
   min-width: 320px;
@@ -1499,29 +1532,10 @@ svg.s16 {
     min-width: 200px;
   }
 }
-.header-search.is-not-active::after {
-  content: "/";
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  right: 8px;
-  transform: translateY(calc(50% - 4px));
-  padding: 4px 5px;
-  font-size: 12px;
-  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas",
-    "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
-  line-height: 1;
-  vertical-align: middle;
-  border-width: 0;
-  border-style: solid;
-  border-image: none;
-  border-radius: 3px;
+.header-search .keyboard-shortcut-helper {
+  transform: translateY(calc(50% - 2px));
   box-shadow: none;
-  white-space: pre-wrap;
-  box-sizing: border-box;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  word-break: keep-all;
+  border-color: transparent;
 }
 .search {
   margin: 0 8px;
@@ -1684,7 +1698,6 @@ svg.s16 {
 }
 
 .tab-width-8 {
-  -moz-tab-size: 8;
   tab-size: 8;
 }
 .gl-sr-only {
@@ -1738,6 +1751,12 @@ svg.s16 {
 .gl-absolute {
   position: absolute;
 }
+.gl-top-0 {
+  top: 0;
+}
+.gl-right-3 {
+  right: 0.5rem;
+}
 .gl-w-full {
   width: 100%;
 }
@@ -1773,6 +1792,9 @@ svg.s16 {
 .gl-font-weight-bold {
   font-weight: 600;
 }
+.gl-z-index-1 {
+  z-index: 1;
+}
 
 @import "startup/cloaking";
 @include cloak-startup-scss(none);
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index fe8a5aec1b3..e6e736ef47c 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -101,6 +101,10 @@ $white-dark: #444;
 $border-color: #4f4f4f;
 $nav-active-bg: rgba(255, 255, 255, 0.08);
 
+:root {
+  color-scheme: dark;
+}
+
 body.gl-dark {
   --gray-10: #{$gray-10};
   --gray-50: #{$gray-50};
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index ad352f0022b..2b6221a6c87 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -159,7 +159,6 @@
       color: rgba($search-and-nav-links, 0.8);
     }
 
-
     input {
       background-color: transparent;
       color: rgba($search-and-nav-links, 0.8);
@@ -177,9 +176,11 @@
       }
     }
 
-    &.is-not-active::after {
-      color: $search-and-nav-links;
-      background-color: rgba($search-and-nav-links, 0.2);
+    &.is-not-active {
+      .keyboard-shortcut-helper {
+        color: $search-and-nav-links;
+        background-color: rgba($search-and-nav-links, 0.2);
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 27fcade548f..6bd05f90f26 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -367,50 +367,6 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
   -webkit-backdrop-filter: blur(2px); // still required by Safari
 }
 
-/*
- * The styles from here to END-#1825 will be moved to @gitlab/ui by
- * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1825
- */
-.gl-lg-mx-12 {
-  @include media-breakpoint-up(lg) {
-    margin-left: $gl-spacing-scale-12;
-    margin-right: $gl-spacing-scale-12;
-  }
-}
-
-.gl-lg-ml-12 {
-  @include media-breakpoint-up(lg) {
-    margin-left: $gl-spacing-scale-12;
-  }
-}
-
-.gl-lg-mr-12 {
-  @include media-breakpoint-up(lg) {
-    margin-right: $gl-spacing-scale-12;
-  }
-}
-
-.gl-lg-ml-10 {
-  @include media-breakpoint-up(lg) {
-    margin-left: $gl-spacing-scale-10;
-  }
-}
-
-.gl-lg-mr-10 {
-  @include media-breakpoint-up(lg) {
-    margin-right: $gl-spacing-scale-10;
-  }
-}
-
-.gl-lg-w-30p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 30%;
-  }
-}
-
-.gl-lg-w-40p {
-  @include gl-media-breakpoint-up(lg) {
-    width: 40%;
-  }
+.gl-flex-flow-row-wrap {
+  flex-flow: row wrap;
 }
-/* END-#1825 */