Add latest changes from gitlab-org/gitlab@16-2-stable-eev16.2.0-rc42

44 files changed, 701 insertions, 552 deletions

diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 6a6febbf7b4..23a7beb527b 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -189,3 +189,24 @@ $avatar-sizes: (
 .avatar-counter {
   @include avatar-counter();
 }
+
+.user-popover {
+  // GlAvatarLabeled doesn't expose any prop to override internal classes
+
+  // Max width of popover container is set by gl-max-w-48
+  // so we need to ensure that name/username/status container doesn't overflow
+  .gl-avatar-labeled-labels {
+    max-width: px-to-rem(290px);
+  }
+
+  .gl-avatar-labeled-label,
+  .gl-avatar-labeled-sublabel {
+    @include gl-text-truncate;
+  }
+
+  &.user-popover-cannot-merge {
+    .popover-header {
+      @include gl-bg-orange-50;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
index 2ed955a56b6..08a956bf90f 100644
--- a/app/assets/stylesheets/components/content_editor.scss
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -1,18 +1,38 @@
 .ProseMirror {
+  width: calc(100% - 4px);
   padding-top: $gl-spacing-scale-4;
+  padding-left: calc(#{$gl-spacing-scale-5} - 2px);
+  padding-right: $gl-spacing-scale-5;
+  margin: 2px;
   min-height: 140px;
   max-height: 55vh;
+  position: static;
   overflow-y: auto;
+  transition: box-shadow ease-in-out 0.15s;
+
+  .gl-dark & {
+    width: calc(100% - 6px);
+    margin: 2px 3px;
+    padding-left: calc(#{$gl-spacing-scale-5} - 3px);
+  }
 
   ::selection {
     background-color: transparent;
   }
 
+  &:focus {
+    @include gl-focus;
+  }
+
   &:not(.ProseMirror-hideselection) .content-editor-selection,
   a.ProseMirror-selectednode,
   span.ProseMirror-selectednode {
     background-color: $blue-100;
-    box-shadow: 0 2px 0 $blue-100,  0 -2px 0 $blue-100;
+    box-shadow: 0 2px 0 $blue-100, 0 -2px 0 $blue-100;
+  }
+
+  pre > code {
+    background-color: transparent;
   }
 
   td,
@@ -44,6 +64,48 @@
     pointer-events: none;
   }
 
+  .image-resize-container {
+    position: relative;
+  }
+
+  .image-resize {
+    display: inline-block;
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background: $blue-200;
+    outline: 1px solid $white;
+  }
+
+  .image-resize-nw {
+    top: -4px;
+    left: -4px;
+    cursor: nw-resize;
+  }
+
+  .image-resize-ne {
+    top: -4px;
+    right: -4px;
+    cursor: ne-resize;
+  }
+
+  .image-resize-sw {
+    bottom: 4px;
+    left: -4px;
+    cursor: sw-resize;
+  }
+
+  .image-resize-se {
+    bottom: 4px;
+    right: -4px;
+    cursor: se-resize;
+  }
+
+  img.ProseMirror-selectednode {
+    outline: 2px solid $blue-200;
+    outline-offset: -2px;
+  }
+
   video {
     max-width: 400px;
   }
@@ -78,6 +140,81 @@
     }
   }
 
+  .suggestion-added,
+  .suggestion-deleted,
+  .suggestion-added-input {
+    white-space: pre-wrap;
+
+    > code {
+      white-space: pre-wrap;
+      padding: 0;
+      display: flex;
+    }
+  }
+
+  .suggestion-added-input {
+    > code {
+      display: block;
+      margin-left: 120px;
+      background-color: transparent !important;
+    }
+  }
+
+  .suggestion-added,
+  .suggestion-deleted {
+    background-color: $line-added;
+    width: 100%;
+
+    > code {
+      border-left: 100px solid $line-number-new;
+      padding-left: 20px;
+      border-radius: 0;
+      background-color: inherit !important;
+    }
+
+    > code::before {
+      content: attr(data-line-number);
+      position: absolute;
+      width: 100px;
+      margin-left: -120px;
+      text-align: right;
+      padding-right: 10px;
+      padding-left: 10px;
+
+      @include gl-text-secondary;
+    }
+
+    > code::after {
+      content: '+';
+      position: absolute;
+      margin-left: -20px;
+      width: 20px;
+      text-align: center;
+
+      @include gl-text-secondary;
+    }
+  }
+
+  .suggestion-added > code {
+    color: rgba($white, 0);
+  }
+
+  .suggestion-deleted {
+    background-color: $line-removed;
+    cursor: not-allowed;
+
+    > code {
+      border-color: $line-number-old;
+    }
+
+    > code::before {
+      padding-right: 60px;
+    }
+
+    > code::after {
+      content: '-';
+    }
+  }
 
   .dl-content {
     width: 100%;
@@ -135,6 +272,31 @@
   }
 }
 
+.gl-dark .ProseMirror {
+  .suggestion-added-input,
+  .suggestion-deleted {
+    > code {
+      color: $gray-50;
+    }
+  }
+
+  .suggestion-deleted,
+  .suggestion-added {
+    > code::before,
+    > code::after {
+      color: $gray-400;
+    }
+  }
+}
+
+// Fixes a problem with the layout shifting
+// when switching between Markdown and the
+// Richtext editor due to a loosly defined
+// style in typography.scss
+.md > .ProseMirror {
+  margin: 2px;
+}
+
 .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,
@@ -179,6 +341,17 @@
   min-width: auto;
 }
 
+.content-editor-suggestions-dropdown {
+  .gl-new-dropdown-panel {
+    width: max-content;
+  }
+
+  li.focused div.gl-new-dropdown-item-content {
+    @include gl-focus($inset: true);
+    @include gl-bg-gray-50;
+  }
+}
+
 .bubble-menu-form {
   min-width: 320px;
 }
diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss
index bc49d17fcbb..0d87d49ac18 100644
--- a/app/assets/stylesheets/fonts.scss
+++ b/app/assets/stylesheets/fonts.scss
@@ -9,15 +9,26 @@ Usage:
   font-weight: 100 900;
   font-display: optional;
   font-style: normal;
-  font-named-instance: 'Regular'; /* stylelint-disable property-no-unknown */
+  /* stylelint-disable-next-line property-no-unknown */
+  font-named-instance: 'Regular';
   src: font-url('gitlab-sans/GitLabSans.woff2') format('woff2');
 }
 
+@font-face {
+  font-family: 'GitLab Sans';
+  font-weight: 100 900;
+  font-display: optional;
+  font-style: italic;
+  /* stylelint-disable-next-line property-no-unknown */
+  font-named-instance: 'Regular';
+  src: font-url('gitlab-sans/GitLabSans-Italic.woff2') format('woff2');
+}
+
 /* -------------------------------------------------------
 Monospaced font: GitLab Mono.
 
 Usage:
-  html { font-family: 'GitLab Mono', sans-serif; }
+  html { font-family: 'GitLab Mono', monospace; }
 */
 @font-face {
   font-family: 'GitLab Mono';
@@ -35,45 +46,6 @@ Usage:
   src: font-url('gitlab-mono/GitLabMono-Italic.woff2') format('woff2');
 }
 
-/* -------------------------------------------------------
-Monospaced font: JetBrains Mono.
-
-All of the definitions below can be removed once
-`GitLab Mono` is properly rolled out.
-
-Usage:
-  html { font-family: 'JetBrains Mono', sans-serif; }
-*/
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-display: optional;
-  font-style: normal;
-  src: font-url('jetbrains-mono/JetBrainsMono.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-display: optional;
-  font-weight: bold;
-  src: font-url('jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-display: optional;
-  font-weight: normal;
-  font-style: italic;
-  src: font-url('jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'JetBrains Mono';
-  font-display: optional;
-  font-weight: bold;
-  font-style: italic;
-  src: font-url('jetbrains-mono/JetBrainsMono-BoldItalic.woff2') format('woff2');
-}
-
 // This isn't the best solution, but we needed a quick fix
 // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107592/
 * {
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index e60353578b0..4d4144fe9dd 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -39,6 +39,7 @@
 @import 'framework/contextual_sidebar_header';
 @import 'framework/contextual_sidebar';
 @import 'framework/super_sidebar';
+@import 'framework/brand_logo';
 @import 'framework/tables';
 @import 'framework/notes';
 @import 'framework/tabs';
@@ -64,3 +65,4 @@
 @import 'framework/card';
 @import 'framework/source_editor';
 @import 'framework/diffs';
+@import 'framework/new_card';
diff --git a/app/assets/stylesheets/framework/brand_logo.scss b/app/assets/stylesheets/framework/brand_logo.scss
new file mode 100644
index 00000000000..1bc1ef797a7
--- /dev/null
+++ b/app/assets/stylesheets/framework/brand_logo.scss
@@ -0,0 +1,29 @@
+$brand-logo-light-background: #e0dfe5;
+$brand-logo-dark-background: #53515b;
+
+.brand-logo {
+  display: inline-block;
+  @include gl-rounded-base;
+  @include gl-p-2;
+  @include gl-bg-transparent;
+  @include gl-border-none;
+
+  .tanuki-logo {
+    @include gl-vertical-align-middle;
+  }
+
+  &:focus,
+  &:active {
+    @include gl-focus;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $brand-logo-light-background;
+
+    .gl-dark & {
+      background-color: $brand-logo-dark-background;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 2ec7c891197..7b8d9281148 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -34,11 +34,7 @@
   --mr-review-bar-height: #{$mr-review-bar-height};
 }
 
-@include media-breakpoint-up(md) {
-  .page-with-contextual-sidebar {
-    --application-bar-left: #{$contextual-sidebar-collapsed-width};
-  }
-
+@include media-breakpoint-up(sm) {
   .right-sidebar-collapsed {
     --application-bar-right: #{$right-sidebar-collapsed-width};
 
@@ -52,6 +48,12 @@
   }
 }
 
+@include media-breakpoint-up(md) {
+  .page-with-contextual-sidebar {
+    --application-bar-left: #{$contextual-sidebar-collapsed-width};
+  }
+}
+
 @include media-breakpoint-up(xl) {
   .page-with-contextual-sidebar {
     --application-bar-left: #{$contextual-sidebar-width};
@@ -330,14 +332,6 @@ li.note {
   height: 220px;
 }
 
-.footer-links {
-  margin-bottom: 20px;
-
-  a {
-    margin-right: 15px;
-  }
-}
-
 .card.card-body {
   margin-bottom: $gl-padding;
 
@@ -555,3 +549,16 @@ li.note {
 See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
 **/
 .gl-line-height-14 { line-height: $gl-line-height-14; }
+
+// TODO: To be removed once `split` option for new dropdowns is implemented.
+//  See issue at https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2263
+.gl-new-dropdown.split:nth-child(n+2) {
+  .gl-new-dropdown-toggle {
+    margin-left: 1px;
+
+    &.btn-tertiary,
+    &.disabled {
+      margin-left: -1px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index 192cb82aaab..7b35659e90a 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -1,6 +1,6 @@
 // Common
 .diff-file {
-  padding-bottom: $gl-padding;
+  margin-bottom: $gl-padding;
 
   &.has-body {
     .file-title {
@@ -864,19 +864,6 @@ table.code {
   }
 }
 
-// Remove border from collapsed replies widget only on diffs
-.diff-grid-comments {
-  .replies-widget-collapsed {
-    border-bottom: 0;
-  }
-  // Rounded border radius only on diff comments with no replies
-  .discussion-collapsible {
-    .discussion-reply-holder:first-of-type {
-      border-radius: $gl-border-radius-base;
-    }
-  }
-}
-
 .discussion-body .image .frame {
   position: relative;
 }
@@ -889,13 +876,6 @@ table.code {
   }
 }
 
-.parallel {
-  .discussion-collapsible {
-    margin: $gl-padding;
-    margin-top: 0;
-  }
-}
-
 .image-diff-overlay,
 .image-diff-overlay-add-comment {
   top: 0;
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index 16ad6f62c64..358f599e0e9 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -3,8 +3,11 @@ gl-emoji {
   display: inline-flex;
   vertical-align: baseline;
   font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  font-size: 1.2em;
-  line-height: 1;
+
+  img {
+    width: 1.2em;
+    height: 1.2em;
+  }
 }
 
 .user-status-emoji {
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index b2ba1d8830d..f5ed85e8845 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -8,7 +8,7 @@ $search-input-field-x-min-width: 200px;
   min-height: $header-height;
   border: 0;
   position: fixed;
-  top: $calc-application-bars-height;
+  top: $calc-system-headers-height;
   left: 0;
   right: 0;
   border-radius: 0;
@@ -322,7 +322,7 @@ $search-input-field-x-min-width: 200px;
   left: var(--application-bar-left);
   position: fixed;
   right: var(--application-bar-right);
-  top: $calc-application-bars-height;
+  top: $calc-system-headers-height;
   width: auto;
   z-index: $top-bar-z-index;
 
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 7dfbd5485d8..086a16edda2 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -36,7 +36,7 @@ body {
 }
 
 .layout-page {
-  padding-top: calc(#{$header-height} + #{$calc-application-bars-height});
+  padding-top: $calc-application-bars-height;
   padding-bottom: $calc-application-footer-height;
 }
 
@@ -62,11 +62,6 @@ body {
   }
 }
 
-.navless-container {
-  margin-top: $header-height;
-  padding-top: $gl-padding * 2;
-}
-
 .container-limited {
   max-width: $fixed-layout-width;
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 5fdab7891ec..f8f54567ef2 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -91,7 +91,7 @@
 }
 
 .md-preview-holder {
-  min-height: 176px;
+  min-height: 173px;
   padding: 10px 0;
   overflow-x: auto;
 }
@@ -106,6 +106,7 @@
   box-shadow: none;
   width: 100%;
   resize: none !important;
+  transition: box-shadow $gl-transition-duration-medium ease;
 }
 
 .md-suggestion-diff {
diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss
new file mode 100644
index 00000000000..ef8f5cc1d1b
--- /dev/null
+++ b/app/assets/stylesheets/framework/new_card.scss
@@ -0,0 +1,94 @@
+.gl-new-card {
+  @include gl-mt-5;
+  @include gl-bg-gray-10;
+  @include gl-border-1;
+  @include gl-border-solid;
+  @include gl-border-gray-100;
+  @include gl-rounded-base;
+
+  &-header {
+    @include gl-px-5;
+    @include gl-py-4;
+    @include gl-display-flex;
+    @include gl-justify-content-space-between;
+    @include gl-bg-white;
+    @include gl-border-b-1;
+    @include gl-border-b-solid;
+    @include gl-border-b-gray-100;
+    @include gl-rounded-top-base;
+  }
+
+  &[aria-expanded=false] &-header {
+    @include gl-border-bottom-0;
+    @include gl-rounded-base;
+  }
+
+  &-title-wrapper {
+    @include gl-display-flex;
+    @include gl-flex-grow-1;
+  }
+
+  &-title {
+    @include gl-display-flex;
+    @include gl-font-base;
+    @include gl-font-weight-bold;
+    @include gl-relative;
+    @include gl-m-0;
+    @include gl-line-height-24;
+  }
+
+  &-count {
+    @include gl-mx-3;
+    @include gl-font-base;
+    @include gl-font-weight-bold;
+    @include gl-text-gray-500;
+    @include gl-display-inline-flex;
+    @include gl-align-items-center;
+  }
+
+  &-description {
+    @include gl-font-sm;
+    @include gl-text-gray-500;
+    @include gl-m-0;
+  }
+
+  &-toggle {
+    @include gl-pl-3;
+    @include gl-ml-3;
+    @include gl-mr-n2;
+    @include gl-border-l-1;
+    @include gl-border-l-solid;
+    @include gl-border-l-gray-100;
+  }
+
+  &-body {
+    @include gl-rounded-bottom-base;
+    @include gl-px-3;
+    @include gl-py-0;
+  }
+
+  &-content {
+    @include gl-px-2;
+    @include gl-py-3;
+  }
+
+  &-empty {
+    @include gl-p-2;
+    @include gl-mb-0;
+    @include gl-text-gray-500;
+  }
+
+  &-footer {
+    @include gl-bg-white;
+  }
+
+  &-add-form {
+    @include gl-p-4;
+    @include gl-my-2;
+    @include gl-bg-white;
+    @include gl-border-1;
+    @include gl-border-solid;
+    @include gl-border-gray-100;
+    @include gl-rounded-base;
+  }
+}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 98083fbc72a..9bf6ed45483 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -39,6 +39,12 @@
 }
 
 .approvers-select {
+  width: calc(70% - #{$gl-spacing-scale-5});
+
+  .gl-new-dropdown-toggle {
+    @include gl-w-full;
+  }
+
   .dropdown-menu {
     @include gl-w-full;
     @include gl-max-w-none;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index b7a674a35e7..5f90dd62426 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -317,7 +317,7 @@
 .right-sidebar {
   &:not(.right-sidebar-merge-requests) {
     @include right-sidebar;
-    top: calc(#{$header-height} + #{$calc-application-bars-height});
+    top: $calc-application-bars-height;
 
     @include media-breakpoint-down(md) {
       z-index: 251;
@@ -327,7 +327,7 @@
   &.right-sidebar-merge-requests {
     @include media-breakpoint-down(md) {
       @include right-sidebar;
-      top: calc(#{$header-height} + #{$calc-application-bars-height});
+      top: $calc-application-bars-height;
       z-index: 251;
     }
 
diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss
index ca67b472322..12801b272e8 100644
--- a/app/assets/stylesheets/framework/super_sidebar.scss
+++ b/app/assets/stylesheets/framework/super_sidebar.scss
@@ -23,7 +23,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
 }
 
 .super-sidebar-skip-to {
-  top: calc(#{$header-height} + #{$calc-application-bars-height});
+  top: $calc-application-bars-height;
   width: calc(#{$super-sidebar-width} - #{$gl-spacing-scale-5});
   z-index: $super-sidebar-skip-to-z-index;
 }
@@ -32,7 +32,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   display: flex;
   flex-direction: column;
   position: fixed;
-  top: calc(#{$header-height} + #{$calc-application-bars-height});
+  top: $calc-application-bars-height;
   bottom: $calc-application-footer-height;
   left: 0;
   background-color: var(--gray-10, $gray-10);
@@ -57,12 +57,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
   .user-bar {
     background-color: $t-gray-a-04;
 
-    .tanuki-logo {
-      @include gl-vertical-align-middle;
-    }
-
-    .user-bar-item,
-    .tanuki-logo-container {
+    .user-bar-item {
       @include gl-rounded-base;
       @include gl-p-2;
       @include gl-bg-transparent;
@@ -81,21 +76,6 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
         @include active-toggle;
       }
     }
-
-    $light-mode-btn-bg: #e0dfe5;
-    $dark-mode-btn-bg: #53515b;
-
-    .tanuki-logo-container {
-      &:hover,
-      &:focus,
-      &:active {
-        background-color: $light-mode-btn-bg;
-
-        .gl-dark & {
-          background-color: $dark-mode-btn-bg;
-        }
-      }
-    }
   }
 
   .counter .gl-icon,
@@ -313,12 +293,9 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4;
     padding: 0.5rem !important;
   }
 
-  .is-searching {
-    .in-search-scope-help {
-      position: absolute;
-      top: 0.625rem;
-      right: 2.5rem;
-    }
+  .search-scope-help {
+    top: 0.625rem;
+    right: 2.5rem;
   }
 
   .gl-search-box-by-type-input-borderless {
diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss
index 703c2ca0dad..5a8ef077c9b 100644
--- a/app/assets/stylesheets/framework/system_messages.scss
+++ b/app/assets/stylesheets/framework/system_messages.scss
@@ -36,16 +36,6 @@
   }
 }
 
-// System Footer
-.with-system-footer {
-  // navless pages' footer eg: login page
-  // navless pages' footer border eg: login page
-  &.devise-layout-html body .footer-container,
-  &.devise-layout-html body hr.footer-fixed {
-    bottom: $system-footer-height;
-  }
-}
-
 .fullscreen-layout {
   .header-message,
   .footer-message {
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index a3b238d657d..921e03f45f3 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -31,7 +31,6 @@
   &:not(.note-form).internal-note .timeline-content,
   &:not(.note-form).draft-note .timeline-content {
     background-color: $orange-50 !important;
-    border-radius: 3px;
   }
 
   .timeline-entry-inner {
@@ -40,9 +39,12 @@
 
   &:target,
   &.target {
-    .timeline-content,
+    .timeline-content {
+      background-color: $line-target-blue;
+    }
+
     + .public-note.discussion-reply-holder {
-      background-color: $line-target-blue !important;
+      padding-top: $gl-padding-12 !important;
     }
 
     &.system-note .note-body .note-text.system-note-commit-list::after {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 88f990d2320..25542a86e8c 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -577,17 +577,6 @@
     width: 1%;
   }
 
-  .metrics-embed {
-    h3.popover-header {
-      /** Override <h3> .popover-header
-      * as embed metrics do not follow the same
-      * style as default md <h3> (which are deeply nested)
-      */
-      margin: 0;
-      font-size: $gl-font-size-small;
-    }
-  }
-
   .gl-dropdown-item {
     margin: 0;
     padding: 0;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f77804fb7fc..ebaaece1281 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -10,7 +10,7 @@ $default-transition-duration: 0.15s;
 $contextual-sidebar-width: 256px;
 $contextual-sidebar-collapsed-width: 56px;
 $toggle-sidebar-height: 48px;
-$super-sidebar-width: 256px;
+$super-sidebar-width: 16rem;
 $super-sidebar-z-index: 600;
 $super-sidebar-skip-to-z-index: 601;
 $super-sidebar-overlay-z-index: 599;
@@ -467,7 +467,6 @@ $ide-statusbar-height: 25px;
 $fixed-layout-width: 1280px;
 $limited-layout-width: 990px;
 $container-text-max-width: 540px;
-$gl-avatar-size: 40px;
 $border-radius-default: 4px;
 $border-radius-small: 2px;
 $border-radius-large: 8px;
@@ -502,8 +501,9 @@ $pages-group-name-color: #4c4e54;
 /*
  * Calculated heights
  */
-$calc-application-bars-height: calc(var(--system-header-height) + var(--performance-bar-height));
-$calc-application-header-height: calc(#{$header-height} + #{$calc-application-bars-height} + var(--top-bar-height));
+$calc-system-headers-height: calc(var(--system-header-height) + var(--performance-bar-height));
+$calc-application-bars-height: calc(#{$header-height} + #{$calc-system-headers-height});
+$calc-application-header-height: calc(#{$calc-application-bars-height} + var(--top-bar-height));
 $calc-application-footer-height: var(--system-footer-height);
 $calc-application-viewport-height: calc(100vh - #{$calc-application-header-height} - #{$calc-application-footer-height});
 
@@ -568,10 +568,12 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 
 /*
  * Fonts
+ * The --default-mono-font and --default-regular-font variables give users
+ * a way to override our font choices for them.
  */
-$monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
+$monospace-font: var(--default-mono-font, 'GitLab Mono'), 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
   'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
-$regular-font: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
+$regular-font: var(--default-regular-font, 'GitLab Sans'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans',
   Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
   'Segoe UI Symbol', 'Noto Color Emoji';
 $gl-monospace-font: $monospace-font;
@@ -704,7 +706,6 @@ $environment-logs-difference-md-up: calc(#{$header-height} + #{$environment-logs
 * Avatar
 */
 $avatar-radius: 50%;
-$gl-avatar-size: 40px;
 $gl-avatar-border-opacity: 0.1;
 
 /*
diff --git a/app/assets/stylesheets/page_bundles/branches.scss b/app/assets/stylesheets/page_bundles/branches.scss
index a5b201c7dac..daf828fb559 100644
--- a/app/assets/stylesheets/page_bundles/branches.scss
+++ b/app/assets/stylesheets/page_bundles/branches.scss
@@ -43,3 +43,15 @@
 .branches-list .branch-item:not(:last-of-type) {
   border-bottom: 1px solid $border-color;
 }
+
+.branch-item {
+  .issuable-reference {
+    max-width: 92px;
+  }
+
+  .right-block {
+    @media (min-width: map-get($grid-breakpoints, md)) {
+      min-width: 200px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss
index c19561a5e5e..e206b5e5b8b 100644
--- a/app/assets/stylesheets/page_bundles/design_management.scss
+++ b/app/assets/stylesheets/page_bundles/design_management.scss
@@ -115,11 +115,11 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
   flex-basis: 28%;
 
   .link-inherit-color {
+    &,
     &:hover,
     &:active,
     &:focus {
       color: inherit;
-      text-decoration: none;
     }
   }
 
@@ -159,27 +159,14 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
       transition: background $gl-transition-duration-medium $general-hover-transition-curve;
       border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box
       border-top-right-radius: $border-radius-default;
-
-      a {
-        color: inherit;
-      }
-
-      .note-text a {
-        color: var(--blue-600, $blue-600);
-      }
     }
 
     .reply-wrapper {
-      padding: $gl-padding-8 $gl-padding-8 $gl-padding-4;
-      background: $gray-10;
+      padding: $gl-padding-8;
       border-radius: 0 0 $border-radius-default $border-radius-default;
     }
   }
 
-  .reply-wrapper {
-    border-top: 1px solid var(--border-color, $border-color);
-  }
-
   .new-discussion-disclaimer {
     line-height: 20px;
   }
diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss
index 1b98fd4df07..1b5da0368c6 100644
--- a/app/assets/stylesheets/page_bundles/issuable.scss
+++ b/app/assets/stylesheets/page_bundles/issuable.scss
@@ -149,6 +149,10 @@
 
   .gl-search-box-by-type button.gl-clear-icon-button:hover {
     @include gl-bg-transparent;
+
+    &:focus {
+      @include gl-focus($inset: true);
+    }
   }
 
   .issuable-move-button:not(.disabled):hover {
diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss
index 2c54c819543..6972e98b0bf 100644
--- a/app/assets/stylesheets/page_bundles/jira_connect.scss
+++ b/app/assets/stylesheets/page_bundles/jira_connect.scss
@@ -9,6 +9,8 @@
 @import '@gitlab/ui/src/components/base/alert/alert';
 @import '@gitlab/ui/src/components/base/avatar/avatar';
 @import '@gitlab/ui/src/components/base/button/button';
+@import '@gitlab/ui/src/components/base/banner/banner';
+@import '@gitlab/ui/src/components/base/card/card';
 @import '@gitlab/ui/src/components/base/icon/icon';
 @import '@gitlab/ui/src/components/base/link/link';
 @import '@gitlab/ui/src/components/base/loading_icon/loading_icon';
@@ -23,7 +25,7 @@
 @import '@gitlab/ui/src/components/base/form/form_group/form_group';
 @import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type';
 
-$header-height: 40px;
+$header-height: $gl-spacing-scale-8;
 
 .jira-connect-header {
   min-height: $header-height;
@@ -35,6 +37,6 @@ $header-height: 40px;
 
 .jira-connect-app {
   margin-top: $header-height;
-  height: calc(100% - #{$header-height});
-  max-width: 1000px;
+  height: 100%;
+  max-height: calc(100% - #{$header-height + $gl-spacing-scale-7 * 2});
 }
diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss
index 355d2afc0ba..b63f199f7b9 100644
--- a/app/assets/stylesheets/page_bundles/login.scss
+++ b/app/assets/stylesheets/page_bundles/login.scss
@@ -196,10 +196,6 @@
     }
   }
 
-  .submit-container {
-    margin-top: 16px;
-  }
-
   input[type='submit'] {
     margin-bottom: 0;
     display: block;
@@ -228,65 +224,33 @@
   }
 }
 
-.devise-layout-html {
+.html-devise-layout {
   margin: 0;
   padding: 0;
   height: 100%;
 
-  &.with-system-header {
-    .login-page-broadcast {
-      margin-top: calc(#{$system-header-height} + #{$header-height});
-    }
-  }
-
-  // Fixes footer container to bottom of viewport
   body {
-    // offset height of fixed header + 1 to avoid scroll
-    height: calc(100% - 51px);
+    padding-top: 48px; // Remove this line when the restyle_login_page feature flag is deleted. Instead, add self-align `center` to container, and maybe a top margin.
 
-    // offset without the header
-    &.navless {
-      height: calc(100% - 11px);
+    &.with-system-header {
+      padding-top: $system-header-height;
+      padding-top: calc(#{$system-header-height} + 48px); // Remove this line when the restyle_login_page feature flag is deleted
     }
 
-    margin: 0;
-    padding: 0;
-
-    .page-wrap {
-      min-height: 100%;
-      position: relative;
-    }
-
-    .footer-container,
-    hr.footer-fixed {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 40px;
-      background: var(--white, $white);
-    }
-
-    .login-page-broadcast {
-      margin-top: 40px;
-    }
-
-    .navless-container {
-      padding: 0 15px 65px; // height of footer + bottom padding of email confirmation link
-    }
-
-    .flash-container {
-      padding-bottom: 65px;
-
-      @include media-breakpoint-down(xs) {
-        padding-bottom: 0;
+    &.with-system-footer {
+      .footer-container {
+        padding-bottom: $system-footer-height;
       }
     }
   }
 }
 
 @include media-breakpoint-down(sm) {
-  .sm-bg-gray-10 {
+  .sm-bg-gray {
     @include gl-bg-gray-10;
+
+    .gl-dark & {
+      background-color: var(--gray-100);
+    }
   }
 }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index fc4a9d3dff9..5e20588dd70 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -226,7 +226,7 @@ $tabs-holder-z-index: 250;
     clear: left;
 
     .note-body {
-      padding: 0 0 $gl-padding-8;
+      padding: 0 $gl-padding-8 $gl-padding-8 $gl-padding-32;
     }
   }
 
@@ -234,14 +234,15 @@ $tabs-holder-z-index: 250;
     margin-top: -2px;
     margin-right: $gl-padding-8;
   }
+}
 
-  // tiny adjustment to vertical align with the note header text
-  .discussion-collapsible {
-    margin-left: 1rem;
+// tiny adjustment to vertical align with the note header text
+.discussion-collapsible {
+  border: 0 !important;
+  margin: 0;
 
-    .timeline-icon {
-      padding-top: 2px;
-    }
+  .timeline-icon {
+    padding-top: 2px;
   }
 }
 
@@ -1275,20 +1276,12 @@ $tabs-holder-z-index: 250;
 .diff-file-discussions-wrapper {
   @include gl-w-full;
 
-  max-width: 800px;
-
-  .diff-discussions > .notes {
-    @include gl-p-5;
-  }
-
   .diff-discussions:not(:first-child) >.notes {
     @include gl-pt-0;
   }
 
   .note-discussion {
-    @include gl-rounded-base;
-
-    border: 1px solid var(--gray-100, $gray-100) !important;
+    border-bottom: 1px solid var(--gray-100, $gray-100) !important;
   }
 
   .discussion-collapsible {
diff --git a/app/assets/stylesheets/page_bundles/notifications.scss b/app/assets/stylesheets/page_bundles/notifications.scss
index 88437954f4c..a901235df50 100644
--- a/app/assets/stylesheets/page_bundles/notifications.scss
+++ b/app/assets/stylesheets/page_bundles/notifications.scss
@@ -1,31 +1,7 @@
 @import 'mixins_and_variables_and_functions';
 
 .notification-list-item {
-  @include media-breakpoint-down(sm) {
-    .notification-dropdown {
-      width: 100%;
-    }
-
-    .btn-group {
-      width: 100%;
-    }
-
-    .table-section {
-      border-top: 0;
-      min-height: unset;
-
-      &:not(:first-child) {
-        padding-top: 0;
-      }
-    }
-
-    .update-notifications {
-      width: 100%;
-    }
+  &:not(:last-of-type) {
+    border-bottom: 1px solid $gray-100;
   }
 }
-
-.notification {
-  position: relative;
-  top: 1px;
-}
diff --git a/app/assets/stylesheets/page_bundles/profiles/preferences.scss b/app/assets/stylesheets/page_bundles/profiles/preferences.scss
index c9c78a70163..1a59f96c6ee 100644
--- a/app/assets/stylesheets/page_bundles/profiles/preferences.scss
+++ b/app/assets/stylesheets/page_bundles/profiles/preferences.scss
@@ -66,13 +66,8 @@
 
 .syntax-theme {
   label {
-    margin-right: $gl-padding-32;
-    margin-bottom: $gl-padding;
-    text-align: center;
-
     .preview {
-      margin-bottom: 10px;
-      width: 160px;
+      margin-bottom: 8px;
 
       img {
         border-radius: 4px;
diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss
index 68bf2fa0f82..8d8da10268a 100644
--- a/app/assets/stylesheets/page_bundles/project.scss
+++ b/app/assets/stylesheets/page_bundles/project.scss
@@ -47,12 +47,6 @@
 }
 
 .project-repo-buttons {
-  .btn {
-    svg {
-      fill: var(--gray-500, $gray-500);
-    }
-  }
-
   .download-button {
     @include media-breakpoint-down(md) {
       margin-left: 0;
diff --git a/app/assets/stylesheets/page_bundles/prometheus.scss b/app/assets/stylesheets/page_bundles/prometheus.scss
deleted file mode 100644
index 702c0e4dd72..00000000000
--- a/app/assets/stylesheets/page_bundles/prometheus.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-@import 'mixins_and_variables_and_functions';
-
-.date-time-picker {
-  .date-time-picker-menu {
-    width: 400px;
-  }
-}
-
-.prometheus-graphs {
-  .dropdown-buttons {
-    > div {
-      margin-left: auto;
-    }
-  }
-
-  .col-form-label {
-    line-height: 1;
-    padding-top: 0;
-  }
-
-  .form-group {
-    margin-bottom: map-get($spacing-scale, 3);
-  }
-
-  .variables-section {
-    input {
-      @include media-breakpoint-up(sm) {
-        width: 160px;
-      }
-    }
-  }
-
-  .links-section {
-    .gl-hover-text-blue-600-children:hover {
-      * {
-        @include gl-text-blue-600;
-      }
-    }
-  }
-}
-
-.draggable {
-  &.draggable-enabled {
-    .draggable-panel {
-      border: $gray-100 1px solid;
-      border-radius: $border-radius-default;
-      margin: -1px;
-      cursor: grab;
-    }
-
-    .prometheus-graph {
-      // Make dragging easier by disabling use of chart
-      pointer-events: none;
-    }
-  }
-
-  &.sortable-chosen .draggable-panel {
-    background: $white;
-    box-shadow: 0 0 4px $gray-300;
-  }
-
-  .draggable-remove {
-    z-index: 1;
-
-    .draggable-remove-link {
-      cursor: pointer;
-      color: $gray-400;
-      background-color: $white;
-    }
-  }
-}
-
-.prometheus-graphs-header {
-  .monitor-environment-dropdown-menu,
-  .monitor-dashboard-dropdown-menu {
-    &.show {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
-    .no-matches-message {
-      padding: $gl-padding-8 $gl-padding-12;
-    }
-  }
-
-  .show-last-dropdown {
-    // same as in .dropdown-menu-toggle
-    // see app/assets/stylesheets/framework/dropdowns.scss
-    width: 160px;
-  }
-}
-
-.prometheus-panel {
-  margin-top: 20px;
-}
-
-.prometheus-graph-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.prometheus-graph {
-  padding: $gl-padding-8;
-}
-
-.prometheus-panel-builder {
-  .preview-date-time-picker {
-    // same as in .dropdown-menu-toggle
-    // see app/assets/stylesheets/framework/dropdowns.scss
-    width: 160px;
-  }
-}
diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss
index d1d14cbcddd..a3a62b44e98 100644
--- a/app/assets/stylesheets/page_bundles/search.scss
+++ b/app/assets/stylesheets/page_bundles/search.scss
@@ -69,11 +69,9 @@ $language-filter-max-height: 20rem;
       }
 
       .label-with-color-checkbox {
-        max-height: $gl-spacing-scale-5;
-
         .custom-control-label {
+          display: flex;
           margin-bottom: 0;
-          max-height: $gl-spacing-scale-5;
 
           .label-title {
             margin-left: -$gl-spacing-scale-2;
diff --git a/app/assets/stylesheets/page_bundles/settings.scss b/app/assets/stylesheets/page_bundles/settings.scss
index 9a0d7880734..b906a932e70 100644
--- a/app/assets/stylesheets/page_bundles/settings.scss
+++ b/app/assets/stylesheets/page_bundles/settings.scss
@@ -65,6 +65,8 @@
 }
 
 .settings-content {
+  // #416312: Fix white space at bottom of page
+  position: relative;
   max-height: 1px;
   overflow-y: hidden;
   padding-right: 110px;
diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss
index a13b8704095..e0ee157187b 100644
--- a/app/assets/stylesheets/page_bundles/tree.scss
+++ b/app/assets/stylesheets/page_bundles/tree.scss
@@ -205,17 +205,6 @@
   margin-top: $gl-padding;
 }
 
-
-.web-ide-promo-popover {
-  box-shadow: 0 0 18px -1.9px rgba(119, 89, 194, 0.16),
-    0 0 12.9px -1.7px rgba(119, 89, 194, 0.16), 0 0 9.2px -1.4px rgba(119, 89, 194, 0.16),
-    0 0 6.4px -1.1px rgba(119, 89, 194, 0.16), 0 0 4.5px -0.8px rgba(119, 89, 194, 0.16),
-    0 0 3px -0.6px rgba(119, 89, 194, 0.16), 0 0 1.8px -0.3px rgba(119, 89, 194, 0.16),
-    0 0 0.6px rgba(119, 89, 194, 0.16);
-  z-index: 999;
-}
-
-.web-ide-promo-popover-illustration {
-  width: calc(100% + 24px);
-  margin: -28px -12px 0;
+.edit-dropdown-group-width {
+  width: 320px;
 }
diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss
index ecbb872e1df..013aa064c4e 100644
--- a/app/assets/stylesheets/page_bundles/work_items.scss
+++ b/app/assets/stylesheets/page_bundles/work_items.scss
@@ -1,5 +1,8 @@
 @import 'mixins_and_variables_and_functions';
 
+$work-item-overview-right-sidebar-width: 340px;
+$work-item-sticky-header-height: 52px;
+
 .gl-token-selector-token-container {
   display: flex;
   align-items: center;
@@ -104,3 +107,54 @@
     @include gl-font-weight-normal;
   }
 }
+
+.work-item-overview {
+  @include media-breakpoint-up(md) {
+    display: grid;
+    grid-template-columns: 1fr $work-item-overview-right-sidebar-width;
+    gap: 2rem;
+  }
+}
+
+.work-item-overview-right-sidebar {
+  @include media-breakpoint-up(md) {
+    &.is-modal {
+      .work-item-attributes-wrapper {
+        top: 0;
+      }
+    }
+  }
+}
+
+.work-item-attributes-wrapper {
+  .work-item-overview & {
+    @include media-breakpoint-up(md) {
+      top: calc(#{$calc-application-header-height} + #{$work-item-sticky-header-height});
+      height: calc(#{$calc-application-viewport-height} - #{$work-item-sticky-header-height});
+      margin-bottom: calc(#{$content-wrapper-padding} * -1);
+      position: sticky;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+}
+
+.work-item-field-label {
+  .work-item-overview & {
+    max-width: 30%;
+    flex: none;
+  }
+}
+
+.work-item-field-value {
+  .work-item-overview & {
+    max-width: 65%;
+  }
+}
+
+.token-selector-menu-class {
+  .work-item-overview & {
+    width: 100%;
+    min-width: 100%;
+  }
+}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index b25a5b1c493..8b093e7bb7b 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -307,14 +307,6 @@
   }
 }
 
-.gpg-popover-user-link {
-  display: flex;
-  align-items: center;
-  margin-bottom: $gl-padding / 2;
-  text-decoration: none;
-  color: $gl-text-color;
-}
-
 .add-review-item {
   .gl-tab-nav-item {
     height: 100%;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 322363d7f4b..0c9d151e3cd 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -48,7 +48,7 @@
 
 .common-note-form {
   .md-area {
-    border: 1px solid $border-color;
+    border: 1px solid $gray-400;
     border-radius: $border-radius-large;
     transition: border-color ease-in-out 0.15s,
       box-shadow ease-in-out 0.15s;
@@ -65,19 +65,41 @@
       }
     }
 
-    // Disable inner focus
-    textarea:focus {
-      @include gl-shadow-none;
+    &:hover,
+    &:focus-within {
+      @include gl-shadow-md;
     }
-  }
 
-  .comment-warning-wrapper:focus-within {
-    @include gl-focus;
-  }
-}
+    &:hover {
+      border: 1px solid $gray-500;
+    }
 
-.md-area:focus-within {
-  @include gl-focus;
+    &:focus-within {
+      border: 1px solid $gray-900;
+    }
+
+    // Add focus
+    .zen-backdrop:not(.fullscreen) textarea {
+      width: calc(100% - 4px);
+      margin: 2px;
+      padding-left: calc(#{$gl-spacing-scale-5} - 2px);
+
+      .gl-dark & {
+        width: calc(100% - 6px);
+        margin: 2px 3px;
+        padding-left: calc(#{$gl-spacing-scale-5} - 3px);
+      }
+
+      &:focus {
+        @include gl-focus;
+      }
+    }
+
+    .note-textarea-rounded-bottom {
+      border-bottom-left-radius: calc(#{$border-radius-large} - 1px);
+      border-bottom-right-radius: calc(#{$border-radius-large} - 1px);
+    }
+  }
 }
 
 .md-header {
@@ -217,6 +239,7 @@ table {
 
   .md-area {
     background-color: $white;
+    @include gl-rounded-base;
   }
 }
 
@@ -245,24 +268,21 @@ table {
 .diff-file,
 .commit-diff {
   .discussion-reply-holder {
-    background-color: $gray-light;
     border-radius: 0 0 $gl-border-radius-base $gl-border-radius-base;
-    padding: $gl-padding;
+    padding: 0 $gl-padding $gl-padding-12 $gl-padding;
     border-top: 1px solid $gray-50;
 
     + .new-note {
-      background-color: $gray-light;
       border-top: 1px solid $gray-50;
     }
 
     &.is-replying {
-      padding-bottom: $gl-padding;
-      background-color: $white;
+      padding-top: $gl-padding-12;
     }
 
     &.internal-note,
     &.internal-note.is-replying {
-      background-color: $orange-50;
+      padding-top: $gl-padding-12 !important;
     }
 
     .user-avatar-link {
@@ -273,6 +293,11 @@ table {
   }
 }
 
+.diff-td > .content > .discussion-reply-holder {
+  padding-top: $gl-padding-12;
+  @include gl-bg-gray-10;
+}
+
 .discussion-with-resolve-btn {
   @include media-breakpoint-up(sm) {
     display: flex;
@@ -307,13 +332,19 @@ table {
     resize: none;
     padding: $gl-padding-8 $gl-padding-12;
     line-height: 1;
-    border: 1px solid $border-color;
+    border: 1px solid $gray-200;
     background-color: $white;
     overflow: hidden;
+    transition: border-color ease-in-out 0.15s,
+      box-shadow ease-in-out 0.15s;
 
     @include media-breakpoint-down(xs) {
       margin-bottom: $gl-padding-8;
     }
+
+    &:hover {
+      border: 1px solid $gray-500;
+    }
   }
 }
 
@@ -348,10 +379,6 @@ table {
 .toolbar-text {
   font-size: 14px;
   line-height: $gl-spacing-scale-7;
-
-  @include media-breakpoint-up(md) {
-    float: left;
-  }
 }
 
 .note-form-actions {
@@ -438,9 +465,4 @@ table {
 .comment-warning-wrapper {
   transition: border-color ease-in-out 0.15s,
     box-shadow ease-in-out 0.15s;
-
-  .md-area {
-    border: 0;
-    box-shadow: none;
-  }
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index c5b644bd72f..005fbc8b058 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -100,10 +100,13 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
         margin-left: 2.5rem;
         border: 1px solid $border-color;
         border-radius: $gl-border-radius-base;
-        background-color: $white;
         padding: $gl-padding-4 $gl-padding-8;
       }
 
+      &:not(.target) .timeline-content:not(.flash-container) {
+        background-color: $white;
+      }
+
       &.draft-note .timeline-content:not(.flash-container) {
         border: 0;
       }
@@ -139,11 +142,14 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
               border-top: 1px solid $border-color;
               border-top-left-radius: $gl-border-radius-base;
               border-top-right-radius: $gl-border-radius-base;
-              background-color: $white;
               padding: $gl-padding-4 $gl-padding-8;
             }
           }
 
+          &:not(.target) .timeline-content:not(.flash-container) {
+            background-color: $white;
+          }
+
           &.draft-note .timeline-content:not(.flash-container) {
             margin-left: 0;
             border-top-left-radius: 0;
@@ -239,15 +245,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
     }
   }
 
-  .discussion-toggle-replies {
-    border-top: 0;
-    border-radius: 4px 4px 0 0;
-
-    &.collapsed {
-      border-radius: 4px;
-    }
-  }
-
   .note-created-ago,
   .note-updated-at {
     white-space: normal;
@@ -1090,6 +1087,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio;
           margin-left: 0;
           border-left: 0;
           border-right: 0;
+          border-radius: 0 !important;
         }
 
         .discussion-reply-holder {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index ff1987f35b3..8cf0bebfc4e 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -518,64 +518,24 @@
   }
 }
 
-.project-refs-form .dropdown-menu {
-  width: 300px;
 
-  @include media-breakpoint-up(sm) {
-    width: 500px;
-  }
-
-  a {
-    white-space: normal;
-  }
-}
-
-.compare-form-group {
-  .dropdown-menu,
-  .inline-input-group {
-    width: 100%;
-
-    @include media-breakpoint-up(sm) {
-      width: 300px;
+.compare-revision-cards {
+  @media (max-width: $breakpoint-lg) {
+    .swap-button {
+      display: none;
     }
   }
 
-  + .compare-ellipsis {
-    width: 100%;
-    vertical-align: middle;
-    text-align: center;
-    margin-top: -20px;
-
-    @include media-breakpoint-up(sm) {
-      margin: 0 $gl-padding-8;
-      width: auto;
+  @media (max-width: $breakpoint-lg) {
+    .swap-button-mobile {
+      display: flex;
     }
   }
 
-  // Remove once gitlab/ui solution is implemented:
-  // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1157
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/300405
-  .gl-search-box-by-type-input {
-    width: 100%;
-  }
-
-  // Remove once gitlab/ui solution is implemented
-  // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1158
-  // https://gitlab.com/gitlab-org/gitlab/-/issues/300405
-  .gl-dropdown-button-text {
-    @include str-truncated;
-  }
-}
-
-.compare-revision-cards {
   @media (min-width: $breakpoint-lg) {
     .gl-card {
       width: calc(50% - 15px);
     }
-
-    .compare-ellipsis {
-      width: 30px;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 3b5e234c6b8..728eb1fe441 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -75,3 +75,70 @@
     }
   }
 }
+
+.settings-section {
+  @include gl-pt-6;
+
+  &::after {
+    content: '';
+    display: block;
+    @include gl-pb-5;
+  }
+}
+
+.settings-section,
+.settings-section-no-bottom + .settings-section {
+  @include gl-pt-0;
+}
+
+.settings-section ~ .settings-section {
+  @include gl-pt-6;
+}
+
+.settings-section:not(.settings-section-no-bottom) + .settings-section {
+  @include gl-border-t;
+}
+
+.settings-section-no-bottom::after {
+  @include gl-pb-0;
+
+  @include media-breakpoint-up(sm) {
+    @include gl-pb-5;
+  }
+}
+
+$sticky-header-z-index: 98;
+
+.settings-sticky-header,
+.settings-sticky-footer {
+  position: sticky;
+  z-index: $sticky-header-z-index;
+  background: $body-bg;
+}
+
+.settings-sticky-header {
+  top: $calc-application-header-height;
+
+  &::before {
+    content: '';
+    display: block;
+    height: $gl-padding-8;
+    position: sticky;
+    top: calc(#{$calc-application-header-height}  + 40px);
+    box-shadow: 0 1px 1px $gray-200;
+  }
+}
+
+.settings-sticky-header-inner {
+  position: sticky;
+  padding: $gl-padding $gl-padding $gl-padding-12;
+  margin: #{-$gl-padding} #{-$gl-padding} 0;
+  background: $body-bg;
+}
+
+.settings-sticky-footer {
+  bottom: 0;
+  padding-top: $gl-padding-8;
+  padding-bottom: $gl-padding-8;
+  box-shadow: 0 #{-$gl-padding-4} $gl-padding-12 $gl-padding-4 $body-bg;
+}
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 7be15c2d8f9..60cbcffd506 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -20,9 +20,10 @@ header {
 }
 body {
   margin: 0;
-  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--default-regular-font, "GitLab Sans"), -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -50,9 +51,9 @@ a:not([href]):not([class]) {
   text-decoration: none;
 }
 kbd {
-  font-family: "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono",
-    "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono",
-    "lucida console", monospace;
+  font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono",
+    "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono",
+    "Courier New", "andale mono", "lucida console", monospace;
   font-size: 1em;
 }
 img {
@@ -415,9 +416,10 @@ a.gl-badge.badge-warning:active {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #333238;
-  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--default-regular-font, "GitLab Sans"), -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 65500800ce3..04c44dd9603 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -20,9 +20,10 @@ header {
 }
 body {
   margin: 0;
-  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--default-regular-font, "GitLab Sans"), -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -50,9 +51,9 @@ a:not([href]):not([class]) {
   text-decoration: none;
 }
 kbd {
-  font-family: "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono",
-    "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono",
-    "lucida console", monospace;
+  font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono",
+    "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono",
+    "Courier New", "andale mono", "lucida console", monospace;
   font-size: 1em;
 }
 img {
@@ -415,9 +416,10 @@ a.gl-badge.badge-warning:active {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
-  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--default-regular-font, "GitLab Sans"), -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 40e1e4b1996..32da8e1bb6b 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -19,9 +19,10 @@ header {
 }
 body {
   margin: 0;
-  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--default-regular-font, "GitLab Sans"), -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -382,9 +383,10 @@ input.btn-block[type="submit"] {
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
-  font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--default-regular-font, "GitLab Sans"), -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell,
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 0.875rem;
   line-height: 1rem;
   padding-top: 0.5rem;
@@ -622,10 +624,6 @@ body.navless {
     margin-top: 20px;
   }
 }
-.navless-container {
-  margin-top: var(--header-height, 48px);
-  padding-top: 32px;
-}
 .btn {
   border-radius: 4px;
   font-size: 0.875rem;
@@ -685,12 +683,6 @@ hr {
   margin: 1.5rem 0;
   border-top: 1px solid #ececef;
 }
-.footer-links {
-  margin-bottom: 20px;
-}
-.footer-links a {
-  margin-right: 15px;
-}
 .flash-container {
   margin: 0;
   margin-bottom: 16px;
@@ -777,9 +769,15 @@ svg {
 .gl-align-items-center {
   align-items: center;
 }
+.gl-flex-wrap {
+  flex-wrap: wrap;
+}
 .gl-justify-content-space-between {
   justify-content: space-between;
 }
+.gl-align-self-end {
+  align-self: flex-end;
+}
 .gl-w-10 {
   width: 3.5rem;
 }
@@ -794,6 +792,9 @@ svg {
     width: 100%;
   }
 }
+.gl-h-full {
+  height: 100%;
+}
 .gl-p-5 {
   padding: 1rem;
 }
@@ -805,6 +806,9 @@ svg {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.gl-m-0 {
+  margin: 0;
+}
 .gl-mt-3 {
   margin-top: 0.5rem;
 }
@@ -823,6 +827,9 @@ svg {
 .gl-ml-auto {
   margin-left: auto;
 }
+.gl-gap-5 {
+  gap: 1rem;
+}
 @media (min-width: 576px) {
   .gl-sm-mt-0 {
     margin-top: 0;
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index e004ca4bb4a..030e41046d3 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -296,8 +296,7 @@ body.gl-dark {
 }
 
 .timeline-entry.internal-note:not(.note-form) .timeline-content,
-.timeline-entry.draft-note:not(.note-form) .timeline-content,
-.discussion-reply-holder.internal-note {
+.timeline-entry.draft-note:not(.note-form) .timeline-content {
   // soften on darkmode
   background-color: mix($gray-50, $orange-50, 75%) !important;
 }
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 08c4efce542..db9802eeefa 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -42,7 +42,7 @@
 // Override Bootstrap class with offset for system-header and
 // performance bar when present
 .fixed-top {
-  top: $calc-application-bars-height;
+  top: $calc-system-headers-height;
 }
 
 .gl-children-ml-sm-3 > * {
@@ -128,24 +128,6 @@
   }
 }
 
-.gl-md-w-15 {
-  @include gl-media-breakpoint-up(md) {
-    width: $gl-spacing-scale-15;
-  }
-}
-
-.gl-md-w-20 {
-  @include gl-media-breakpoint-up(md) {
-    width: $gl-spacing-scale-20;
-  }
-}
-
-.gl-md-w-30 {
-  @include gl-media-breakpoint-up(md) {
-    width: $gl-spacing-scale-30;
-  }
-}
-
 .gl-fill-orange-500 {
   fill: $orange-500;
 }
diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss
index b92331facee..cf7dc79c5f5 100644
--- a/app/assets/stylesheets/vendors/atwho.scss
+++ b/app/assets/stylesheets/vendors/atwho.scss
@@ -2,6 +2,11 @@
   overflow-y: auto;
   overflow-x: hidden;
   max-width: calc(100% - 6px);
+  @include gl-border-b-1;
+  @include gl-border-b-solid;
+  @include gl-border-b-gray-100;
+  @include gl-rounded-lg;
+  @include gl-shadow-md;
 
   .name,
   small.aliases,
@@ -44,11 +49,15 @@
 
   // TODO: fallback to global style
   .atwho-view-ul {
-    padding: 8px 1px;
+    @include gl-p-2;
+    max-height: $gl-max-dropdown-max-height;
 
     li {
-      padding: 8px 16px;
+      @include gl-px-3;
+      padding-top: $gl-padding-6;
+      padding-bottom: $gl-padding-6;
       border: 0;
+      @include gl-rounded-base;
 
       &.cur {
         background-color: $gray-darker;
@@ -67,15 +76,25 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
+      }
 
-        .center {
-          line-height: 14px;
-        }
+      .center {
+        line-height: 14px;
       }
 
       strong {
         color: $gl-text-color;
       }
+
+      gl-emoji {
+        @include gl-mr-2;
+      }
+
+      .dropdown-label-box {
+        position: relative;
+        top: -1px;
+        @include gl-mr-2;
+      }
     }
   }
 }