Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42

48 files changed, 619 insertions, 665 deletions

diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index be72ec33465..004dc22c9b8 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -27,7 +27,6 @@
 @import './pages/registry';
 @import './pages/search';
 @import './pages/service_desk';
-@import './pages/settings_ci_cd';
 @import './pages/settings';
 @import './pages/storage_quota';
 @import './pages/tree';
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index ceac5da7f80..6a6febbf7b4 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -37,7 +37,7 @@ $avatar-sizes: (
   ),
   60: (
     font-size: 32px,
-    line-height: 58px,
+    line-height: 60px,
     border-radius: $border-radius-large
   ),
   64: (
@@ -47,7 +47,7 @@ $avatar-sizes: (
   ),
   90: (
     font-size: 36px,
-    line-height: 88px,
+    line-height: 90px,
     border-radius: $border-radius-large
   ),
   96: (
@@ -72,7 +72,6 @@ $avatar-sizes: (
   float: left;
   margin-right: $gl-padding;
   border-radius: $avatar-radius;
-  border: 1px solid $t-gray-a-08;
 
   @each $size, $size-config in $avatar-sizes {
     &.s#{$size} {
@@ -83,13 +82,12 @@ $avatar-sizes: (
 
 .avatar {
   transition-property: none;
-
   width: 40px;
   height: 40px;
   padding: 0;
   background: $gray-lightest;
   overflow: hidden;
-  border-color: rgba($black, $gl-avatar-border-opacity);
+  box-shadow: inset 0 0 0 1px rgba($gray-950, $gl-avatar-border-opacity);
 
   &.avatar-inline {
     float: none;
@@ -180,6 +178,10 @@ $avatar-sizes: (
   @each $size, $size-config in $avatar-sizes {
     &.s#{$size} {
       border-radius: map-get($size-config, 'border-radius');
+
+      .avatar {
+        border-radius: map-get($size-config, 'border-radius');
+      }
     }
   }
 }
diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss
index 6f5c5c5a080..5e1128dc4ce 100644
--- a/app/assets/stylesheets/components/batch_comments/review_bar.scss
+++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss
@@ -11,7 +11,7 @@
   padding-right: $gutter_collapsed_width;
   background: $white;
   border-top: 1px solid $border-color;
-  transition: padding $sidebar-transition-duration;
+  transition: padding $gl-transition-duration-medium;
 
   .page-with-icon-sidebar & {
     padding-left: $contextual-sidebar-collapsed-width;
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss
deleted file mode 100644
index 59bd69955d3..00000000000
--- a/app/assets/stylesheets/components/rich_content_editor.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
-* Overrides styles from ToastUI editor
-*/
-
-.tui-editor-defaultUI {
-
-  // Toolbar buttons
-  .tui-editor-defaultUI-toolbar .toolbar-button {
-    color: $gray-500;
-    border: 0;
-
-    &:hover,
-    &:active {
-      color: $blue-500;
-      border: 0;
-    }
-  }
-
-  // Contextual menu's & popups
-  .tui-popup-wrapper {
-    @include gl-overflow-hidden;
-    @include gl-rounded-base;
-    @include gl-border-gray-200;
-
-    hr {
-      @include gl-m-0;
-      @include gl-bg-gray-200;
-    }
-
-    button {
-      @include gl-text-gray-700;
-    }
-  }
-
-  /**
-  * Overrides styles from ToastUI's Code Mirror (markdown mode) editor.
-  * Toast UI internally overrides some of these using the `.tui-md-` prefix.
-  * https://codemirror.net/doc/manual.html#styling
-  */
-
-  .te-md-container .CodeMirror * {
-    @include gl-font-monospace;
-    @include gl-font-size-monospace;
-    @include gl-line-height-20;
-  }
-}
-
-/**
-* Styling below ensures that YouTube videos are displayed in the editor the same as they would in about.gitlab.com
-* https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/main/source/stylesheets/_base.scss#L977
-*/
-.video_container {
-  padding-bottom: 56.25%;
-}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 549289450a4..f947042ba51 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -84,89 +84,6 @@
   border-bottom: 1px solid $white-dark;
   padding: 11px 0;
   margin-bottom: 11px;
-
-  &.no-bottom-space {
-    border-bottom: 0;
-    margin-bottom: 0;
-  }
-}
-
-.cover-block {
-  text-align: center;
-  background: $gray-light;
-  padding-top: 44px;
-  position: relative;
-
-  .avatar-holder {
-    .avatar,
-    .identicon {
-      margin: 0 auto;
-      float: none;
-    }
-
-    .identicon {
-      border-radius: 50%;
-    }
-  }
-
-  .cover-title {
-    color: $gl-text-color;
-    font-size: 23px;
-
-    h1 {
-      color: $gl-text-color;
-      margin-bottom: 6px;
-      font-size: 23px;
-    }
-
-    .visibility-icon {
-      display: inline-block;
-      margin-left: 5px;
-      font-size: 18px;
-      color: color('gray');
-    }
-
-    p {
-      padding: 0 $gl-padding;
-      color: $gl-text-color;
-    }
-  }
-
-  .cover-controls {
-    @include media-breakpoint-up(sm) {
-      position: absolute;
-      top: 1rem;
-      right: 1.25rem;
-    }
-
-    &.left {
-      @include media-breakpoint-up(sm) {
-        left: 1.25rem;
-        right: auto;
-      }
-    }
-  }
-
-  &.user-cover-block {
-    padding: 24px 0 0;
-
-    .nav-links {
-      width: 100%;
-      float: none;
-
-      &.scrolling-tabs {
-        float: none;
-      }
-    }
-
-    li:first-child {
-      margin-left: auto;
-    }
-
-    li:last-child {
-      margin-right: auto;
-    }
-  }
 }
 
 .content-block {
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 1fa03d66f32..b1e5ca50a8b 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -1,30 +1,3 @@
-.calendar-block {
-  padding-left: 0;
-  padding-right: 0;
-  border-top: 0;
-
-  @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
-    overflow-x: auto;
-  }
-}
-
-.user-calendar-activities {
-  direction: ltr;
-
-  .str-truncated {
-    max-width: 70%;
-  }
-}
-
-.user-calendar {
-  text-align: center;
-  min-height: 172px;
-
-  .calendar {
-    display: inline-block;
-  }
-}
-
 .user-contrib-cell {
   &:hover {
     cursor: pointer;
@@ -42,18 +15,6 @@
   }
 }
 
-.user-contrib-text {
-  font-size: 12px;
-  fill: $calendar-user-contrib-text;
-}
-
-.calendar-hint {
-  font-size: 12px;
-  direction: ltr;
-  margin-top: -23px;
-  float: right;
-}
-
 .pika-single.gitlab-theme {
   .pika-label {
     color: $gl-text-color-secondary;
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 036cec15935..ad0036df607 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -134,16 +134,6 @@
   .avatar-container {
     @include gl-font-weight-normal;
     flex: none;
-    box-shadow: $avatar-box-shadow;
-
-    &.rect-avatar {
-      @include gl-border-none;
-
-      .avatar.s32 {
-        border-radius: $border-radius-default;
-        box-shadow: $avatar-box-shadow;
-      }
-    }
   }
 }
 
@@ -214,7 +204,7 @@
 //
 
 .page-with-contextual-sidebar {
-  transition: padding-left $sidebar-transition-duration;
+  transition: padding-left $gl-transition-duration-medium;
 
   @include media-breakpoint-up(md) {
     padding-left: $contextual-sidebar-collapsed-width;
@@ -243,7 +233,7 @@
   @include gl-fixed;
   @include gl-bottom-0;
   @include gl-left-0;
-  transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
+  transition: width $gl-transition-duration-medium, left $gl-transition-duration-medium;
   z-index: 600;
   width: $contextual-sidebar-width;
   top: $header-height;
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_header.scss b/app/assets/stylesheets/framework/contextual_sidebar_header.scss
index 7159dadf7cc..a3d752dcc3d 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar_header.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar_header.scss
@@ -5,7 +5,7 @@
 
   > a,
   > button {
-    transition: padding $sidebar-transition-duration;
+    transition: padding $gl-transition-duration-medium;
     font-weight: $gl-font-weight-bold;
     display: flex;
     width: 100%;
@@ -25,7 +25,7 @@
   }
 
   .avatar-container {
-    flex: 0 0 40px;
+    flex: 0 0 32px;
     background-color: $white;
   }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 43e14a63f9d..d91524d99e6 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -125,10 +125,6 @@
     padding-right: 25px;
   }
 
-  .fa {
-    color: $gray-darkest;
-  }
-
   &:hover {
     border-color: $gray-darkest;
   }
@@ -148,10 +144,6 @@
   text-overflow: ellipsis;
   width: 160px;
 
-  .fa {
-    position: absolute;
-  }
-
   .gl-spinner {
     position: absolute;
     top: 9px;
@@ -387,10 +379,6 @@
         margin: 0;
         text-align: left;
         text-overflow: inherit;
-
-        &.btn .fa:not(:last-child) {
-          margin-left: 5px;
-        }
       }
 
       > button.dropdown-epic-button {
@@ -477,6 +465,12 @@
     height: 2 * $gl-padding;
     margin: 0 10px 0 0;
   }
+
+  .sidebar-participant {
+    .merge-icon {
+      top: calc(50% + 5px);
+    }
+  }
 }
 
 .dropdown-menu-user-full-name {
@@ -645,14 +639,12 @@
     border-color: $blue-300;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
-    ~ .fa,
     ~ .dropdown-input-clear {
       color: $gray-700;
     }
   }
 
   &:hover {
-    ~ .fa,
     ~ .dropdown-input-clear {
       color: $gray-700;
     }
@@ -710,14 +702,6 @@
   z-index: 9;
   background-color: $dropdown-loading-bg;
   font-size: 28px;
-
-  .fa {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -14px;
-    margin-left: -14px;
-  }
 }
 
 .dropdown-label-box {
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index f322c6c8929..b980d7fdaa7 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -202,6 +202,10 @@
           float: none;
           border-left: 1px solid $gray-100;
 
+          .file-line-num {
+            @include gl-min-w-9;
+          }
+
           i {
             float: none;
             margin-right: 0;
@@ -478,6 +482,11 @@ span.idiff {
     background-color: transparent;
     border: transparent;
   }
+
+  .gl-dark & {
+    background: transparent;
+    filter: invert(1) hue-rotate(180deg);
+  }
 }
 
 .code-navigation-line:hover {
@@ -575,3 +584,11 @@ span.idiff {
     @include gl-text-center;
   }
 }
+
+// *:nth-of-type(1n+30) - makes sure we do not render elements 30+ right away when
+// viewing a file. Even though the HTML is injected in the DOM, as long as we do
+// not render those elements, the browser doesn't need to spend resources
+// calculating and repainting what's hidden.
+.file-holder [data-loading] .file-content *:nth-of-type(1n+30) {
+  @include gl-display-none;
+}
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 1c43212f501..2b76e70fa17 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -31,7 +31,8 @@
         width: 100%;
         padding-left: 10px;
         padding-right: 10px;
-        white-space: pre;
+        white-space: break-spaces;
+        word-break: break-word;
 
         &:empty::before {
           content: '\200b';
@@ -48,8 +49,9 @@
 
     a {
       font-family: $monospace-font;
-      display: block;
       white-space: nowrap;
+      @include gl-display-flex;
+      @include gl-justify-content-end;
 
       i,
       svg {
@@ -90,3 +92,55 @@ td.line-numbers {
   cursor: pointer;
   text-decoration: underline wavy $red-500;
 }
+
+.blob-viewer {
+  .line-numbers {
+    // for server-side-rendering
+    .line-links {
+      @include gl-display-flex;
+
+
+      &:first-child {
+        margin-top: 10px;
+      }
+
+      &:last-child {
+        margin-bottom: 10px;
+      }
+    }
+
+    // for client
+    &.line-links {
+      min-width: 6rem;
+      border-bottom-left-radius: 0;
+
+      + pre {
+        margin-left: 6rem;
+      }
+    }
+  }
+
+  .line-links {
+    &:hover a::before,
+    &:focus-within a::before {
+      @include gl-visibility-visible;
+    }
+  }
+
+  .file-line-num {
+    min-width: 4.5rem;
+    @include gl-justify-content-end;
+    @include gl-flex-grow-1;
+    @include gl-pr-3;
+  }
+
+  .file-line-blame {
+    @include gl-ml-3;
+  }
+
+  .file-line-num,
+  .file-line-blame {
+    @include gl-align-items-center;
+    @include gl-display-flex;
+  }
+}
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 2cea3b96ff7..47856f1a0d3 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -478,7 +478,7 @@
 }
 
 @mixin side-panel-toggle {
-  transition: width $sidebar-transition-duration;
+  transition: width $gl-transition-duration-medium;
   height: $toggle-sidebar-height;
   padding: 0 $gl-padding;
   background-color: $gray-light;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 74aed1bd984..92ca8654287 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -135,27 +135,8 @@
     }
 
     @include media-breakpoint-down(md) {
-      $controls-margin: $btn-margin-5 - 2px;
       flex: 0 0 100%;
       margin-top: $gl-padding-8;
-
-      .controls-item,
-      .controls-item-full,
-      .controls-item:last-child {
-        flex: 1 1 35%;
-        display: block;
-        width: 100%;
-        margin: $controls-margin;
-
-        .btn,
-        .dropdown {
-          margin: 0;
-        }
-      }
-
-      .controls-item-full {
-        flex: 1 1 100%;
-      }
     }
 
     @include media-breakpoint-down(sm) {
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 13201d43fd0..ae0f18753ad 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -13,7 +13,7 @@
 }
 
 .page-initialised  .content-wrapper {
-  transition: padding $sidebar-transition-duration;
+  transition: padding $gl-transition-duration-medium;
 }
 
 .right-sidebar-collapsed {
@@ -109,7 +109,7 @@
   @include maintain-sidebar-dimensions;
   width: 0;
   padding: 0;
-  transition: width $sidebar-transition-duration;
+  transition: width $gl-transition-duration-medium;
 
   &.right-sidebar-expanded {
     @include maintain-sidebar-dimensions;
diff --git a/app/assets/stylesheets/framework/sortable.scss b/app/assets/stylesheets/framework/sortable.scss
index 953c42219a9..f9e95d16f63 100644
--- a/app/assets/stylesheets/framework/sortable.scss
+++ b/app/assets/stylesheets/framework/sortable.scss
@@ -1,6 +1,4 @@
 .sortable-container {
-  background-color: $gray-light;
-
   .flex-list {
     padding: 5px;
     margin-bottom: 0;
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 086b83b13e0..43effbdd7d7 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -35,6 +35,10 @@
     background-color: $white;
   }
 
+  &:not(.note-form).internal-note {
+    background-color: $orange-50;
+  }
+
   .timeline-entry-inner {
     position: relative;
   }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index b5e0dcd875a..031f5dc45ca 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -435,6 +435,35 @@
     }
   }
 
+  li.inapplicable {
+    // for a single line list item, no paragraph (tight list)
+    > s {
+      color: $gl-text-color-disabled;
+    }
+
+    // additional blocks, other than paragraphs
+    > div {
+      text-decoration: line-through;
+      color: $gl-text-color-disabled;
+    }
+
+    // because of the embedded checkbox, putting line-through on the entire
+    // paragraph causes the space between the checkbox and the text to have the
+    // line-through.  Targeting just the `s` fixes this
+    > p:first-of-type > s {
+      color: $gl-text-color-disabled;
+    }
+
+    > p:not(:first-of-type) {
+      text-decoration: line-through;
+      color: $gl-text-color-disabled;
+    }
+
+    .drag-icon {
+      color: $gl-text-color;
+    }
+  }
+
   a.with-attachment-icon,
   a[href*='/uploads/'],
   a[href*='storage.googleapis.com/google-code-attachments/'] {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 1e921b4234e..e9ad930ef2b 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -5,7 +5,6 @@ $grid-size: 8px;
 $gutter-collapsed-width: 62px;
 $gutter-width: 290px;
 $gutter-inner-width: 250px;
-$sidebar-transition-duration: 0.3s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: 0.15s;
 $contextual-sidebar-width: 256px;
@@ -454,7 +453,6 @@ $default-icon-size: 16px;
 $layout-link-gray: #7e7c7c;
 $btn-side-margin: $grid-size;
 $btn-sm-side-margin: 7px;
-$btn-margin-5: 5px;
 $count-arrow-border: #dce0e5;
 $general-hover-transition-duration: 100ms;
 $general-hover-transition-curve: linear;
@@ -880,8 +878,6 @@ $image-comment-cursor-top-offset: 12;
 Security & Compliance Carousel
 */
 $security-and-compliance-carousel-image-carousel-width: 1000px;
-$security-and-compliance-carousel-image-discover-button-width: 45%;
-$security-and-compliance-carousel-image-discover-buttons-max-width: 280px;
 $security-and-compliance-carousel-image-discover-footer-max-width: 500px;
 $security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px;
 $security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%;
diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss
index 1a536b97142..e3ac615234c 100644
--- a/app/assets/stylesheets/framework/vue_transitions.scss
+++ b/app/assets/stylesheets/framework/vue_transitions.scss
@@ -2,7 +2,7 @@
 .fade-leave-active,
 .fade-in-enter-active,
 .fade-out-leave-active {
-  transition: opacity $sidebar-transition-duration $general-hover-transition-curve;
+  transition: opacity $gl-transition-duration-medium $general-hover-transition-curve;
 }
 
 .fade-enter,
diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss
index fcbd05141b9..96df8487c0e 100644
--- a/app/assets/stylesheets/highlight/common.scss
+++ b/app/assets/stylesheets/highlight/common.scss
@@ -98,32 +98,33 @@
   }
 }
 
-@mixin line-number-link($color) {
-  min-width: $gl-spacing-scale-9;
 
+@mixin line-link($color, $icon) {
   &::before {
-    @include gl-display-none;
+    @include gl-visibility-hidden;
     @include gl-align-self-center;
-    @include gl-mt-2;
-    @include gl-mr-2;
-    @include gl-w-4;
-    @include gl-h-4;
-    @include gl-absolute;
-    @include gl-left-3;
-    background-color: $color;
-    mask-image: asset_url('icons-stacked.svg#link');
+    @include gl-mr-1;
+    @include gl-w-5;
+    @include gl-h-5;
+    background-color: rgba($color, 0.3);
+    mask-image: asset_url('icons-stacked.svg##{$icon}');
     mask-repeat: no-repeat;
     mask-size: cover;
     mask-position: center;
     content: '';
   }
 
-  &:hover::before {
-    @include gl-display-inline-block;
+  &:hover {
+    &::before {
+      background-color: rgba($color, 0.6);
+    }
   }
+}
 
-  &:focus::before {
-    @include gl-display-inline-block;
+@mixin line-hover-bg($color: $white-normal) {
+  &:hover,
+  &:focus-within {
+    background-color: darken($color, 10);
   }
 }
 
diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss
index 709e7f5ae18..5e6e10e44be 100644
--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
@@ -127,7 +127,15 @@ $dark-il: #de935f;
 .code.dark {
   // Line numbers
   .file-line-num {
-    @include line-number-link($dark-line-num-color);
+    @include line-link($white, 'link');
+  }
+
+  .file-line-blame {
+    @include line-link($white, 'git');
+  }
+
+  .line-links {
+    @include line-hover-bg($dark-main-bg);
   }
 
   .line-numbers,
diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss
index 0ed9c209417..19c3d6926e7 100644
--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
@@ -120,7 +120,15 @@ $monokai-gh: #75715e;
 
   // Line numbers
   .file-line-num {
-    @include line-number-link($monokai-line-num-color);
+    @include line-link($white, 'link');
+  }
+
+  .file-line-blame {
+    @include line-link($white, 'git');
+  }
+
+  .line-links {
+    @include line-hover-bg($monokai-bg);
   }
 
   .line-numbers,
diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss
index 868e466b1f8..4c716d20ddf 100644
--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -25,7 +25,15 @@
 
   // Line numbers
   .file-line-num {
-    @include line-number-link($black-transparent);
+    @include line-link($black, 'link');
+  }
+
+  .file-line-blame {
+    @include line-link($black, 'git');
+  }
+
+  .line-links {
+    @include line-hover-bg;
   }
 
   .line-numbers,
diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
index 6260339a48d..70086be1606 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
@@ -123,7 +123,15 @@ $solarized-dark-il: #2aa198;
 
   // Line numbers
   .file-line-num {
-    @include line-number-link($solarized-dark-line-color);
+    @include line-link($white, 'link');
+  }
+
+  .file-line-blame {
+    @include line-link($white, 'git');
+  }
+
+  .line-links {
+    @include line-hover-bg($solarized-dark-pre-bg);
   }
 
   .line-numbers,
diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss
index e6f098f4cdf..8d223d1fdb1 100644
--- a/app/assets/stylesheets/highlight/themes/solarized-light.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss
@@ -109,7 +109,15 @@ $solarized-light-il: #2aa198;
   @include hljs-override('title.class_.inherited__', $solarized-light-no);
   // Line numbers
   .file-line-num {
-    @include line-number-link($solarized-light-line-color);
+    @include line-link($black, 'link');
+  }
+
+  .file-line-blame {
+    @include line-link($black, 'git');
+  }
+
+  .line-links {
+    @include line-hover-bg($solarized-light-pre-bg);
   }
 
   .line-numbers,
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 770a90bbc57..9761e3961dd 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -95,7 +95,15 @@ $white-gc-bg: #eaf2f5;
 
 // Line numbers
 .file-line-num {
-  @include line-number-link($black-transparent);
+  @include line-link($black, 'link');
+}
+
+.file-line-blame {
+  @include line-link($black, 'git');
+}
+
+.line-links {
+  @include line-hover-bg;
 }
 
 .line-numbers,
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index 81d35b8bc7b..197073412e8 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -35,7 +35,7 @@
 
 .boards-app {
   @include media-breakpoint-up(sm) {
-    transition: width $sidebar-transition-duration;
+    transition: width $gl-transition-duration-medium;
     width: 100%;
 
     &.is-compact {
@@ -349,7 +349,7 @@
 .right-sidebar.right-sidebar-expanded {
   &.boards-sidebar-slide-enter-active,
   &.boards-sidebar-slide-leave-active {
-    transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
+    transition: width $gl-transition-duration-medium, padding $gl-transition-duration-medium;
   }
 
   &.boards-sidebar-slide-enter,
diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss
index 6f3873fea0c..84c62ba93dd 100644
--- a/app/assets/stylesheets/page_bundles/escalation_policies.scss
+++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss
@@ -15,17 +15,11 @@
 $stroke-size: 1px;
 
 .right-arrow {
-  @include gl-relative;
   height: $stroke-size;
-  background-color: var(--gray-900, $gray-900);
-  min-width: $gl-spacing-scale-7;
 
   &-head {
-    @include gl-absolute;
-    top: -2*$stroke-size;
-    left: calc(100% - #{5*$stroke-size});
-    @include gl-p-1;
-    @include gl-border-solid;
+    top: -2 * $stroke-size;
+    left: calc(100% - #{5 * $stroke-size});
     border-width: 0 $stroke-size $stroke-size 0;
     border-color: var(--gray-900, $gray-900);
     transform: rotate(-45deg);
@@ -41,14 +35,10 @@ $stroke-size: 1px;
 .rule-condition {
   @media (min-width: $breakpoint-lg) {
     flex-basis: 25%;
-    flex-shrink: 0;
+    @include gl-flex-shrink-0;
   }
 
   @media (max-width: $breakpoint-lg) {
     @include gl-w-full;
   }
 }
-
-.rule-action {
-  min-width: 0;
-}
diff --git a/app/assets/stylesheets/page_bundles/group.scss b/app/assets/stylesheets/page_bundles/group.scss
index 38dd07f617c..71dbb855103 100644
--- a/app/assets/stylesheets/page_bundles/group.scss
+++ b/app/assets/stylesheets/page_bundles/group.scss
@@ -72,36 +72,43 @@
   }
 }
 
-.group-nav-container .nav-controls {
-  .group-filter-form {
-    flex: 1 1 auto;
-    margin-right: $gl-padding-8;
-  }
-
-  .dropdown-menu-right {
-    margin-top: 0;
-  }
-
-  @include media-breakpoint-down(sm) {
-    .dropdown,
-    .dropdown .dropdown-toggle,
-    .btn-success {
-      display: block;
+.group-nav-container {
+  .nav-controls {
+    .group-filter-form {
+      flex: 1 1 auto;
+      margin-right: $gl-padding-8;
     }
 
-    .group-filter-form,
-    .dropdown {
-      margin-bottom: 10px;
-      margin-right: 0;
+    .dropdown-menu-right {
+      margin-top: 0;
     }
 
-    &,
-    .group-filter-form,
-    .group-filter-form-field,
-    .dropdown,
-    .dropdown .dropdown-toggle,
-    .btn-success {
-      width: 100%;
+    @include media-breakpoint-down(sm) {
+      .dropdown,
+      .dropdown .dropdown-toggle,
+      .btn-success {
+        display: block;
+      }
+
+      .group-filter-form,
+      .dropdown {
+        margin-bottom: 10px;
+        margin-right: 0;
+      }
+
+      &,
+      .group-filter-form,
+      .group-filter-form-field,
+      .dropdown,
+      .dropdown .dropdown-toggle,
+      .btn-success {
+        width: 100%;
+      }
     }
   }
+
+  // Remove this selector once https://gitlab.com/gitlab-org/gitlab/-/issues/370050 is addressed.
+  .scrolling-tabs-container {
+    width: 100%;
+  }
 }
diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss
index 1b27e51e793..b7a75884425 100644
--- a/app/assets/stylesheets/page_bundles/merge_requests.scss
+++ b/app/assets/stylesheets/page_bundles/merge_requests.scss
@@ -416,8 +416,6 @@ $tabs-holder-z-index: 250;
   .label-branch {
     @include gl-font-monospace;
     font-size: 95%;
-    color: var(--gl-text-color, $gl-text-color);
-    font-weight: normal;
     overflow: hidden;
     word-break: break-all;
   }
@@ -477,8 +475,7 @@ $tabs-holder-z-index: 250;
       margin: 0 0 0 10px;
     }
 
-    .bold,
-    .gl-font-weight-bold {
+    .bold {
       font-weight: $gl-font-weight-bold;
       color: var(--gray-600, $gray-600);
       margin-left: 10px;
@@ -494,8 +491,7 @@ $tabs-holder-z-index: 250;
     }
 
     .spacing,
-    .bold,
-    .gl-font-weight-bold {
+    .bold {
       vertical-align: middle;
     }
 
@@ -602,6 +598,12 @@ $tabs-holder-z-index: 250;
   padding: $gl-padding;
 }
 
+.mr-widget-body-ready-merge {
+  @include media-breakpoint-down(sm) {
+    @include gl-p-3;
+  }
+}
+
 .mr-widget-border-top {
   border-top: 1px solid var(--border-color, $border-color);
 }
@@ -820,3 +822,21 @@ $tabs-holder-z-index: 250;
     height: 180px;
   }
 }
+
+.mr-widget-merge-details {
+  li:not(:last-child) {
+    @include gl-mb-3;
+  }
+}
+
+.mr-ready-merge-related-links,
+.mr-widget-merge-details {
+  a {
+    @include gl-text-decoration-underline;
+
+    &:hover,
+    &:focus {
+      @include gl-text-decoration-none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index e6afc70acbb..98e9e2b3c27 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -225,12 +225,20 @@
   }
 }
 
-.test-reports-table {
-  .build-log {
-    @include build-log();
+.progress-bar.bg-primary {
+  background-color: var(--blue-500, $blue-500) !important;
+}
+
+.ci-job-component {
+  .job-failed {
+    background-color: var(--red-50, $red-50);
   }
 }
 
-.progress-bar.bg-primary {
-  background-color: var(--blue-500, $blue-500) !important;
+.gl-dark {
+  .ci-job-component {
+    .job-failed {
+      background-color: var(--gray-200, $gray-200);
+    }
+  }
 }
diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss
new file mode 100644
index 00000000000..59b8823c113
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/profile.scss
@@ -0,0 +1,212 @@
+@import 'mixins_and_variables_and_functions';
+
+.calendar-block {
+  padding-left: 0;
+  padding-right: 0;
+  border-top: 0;
+
+  @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) {
+    overflow-x: auto;
+  }
+}
+
+.calendar-hint {
+  font-size: 12px;
+  direction: ltr;
+  margin-top: -23px;
+  float: right;
+}
+
+.cover-block {
+  text-align: center;
+  background: var(--gray-50, $gray-light);
+  padding-top: 44px;
+  position: relative;
+
+  .avatar-holder {
+    .avatar,
+    .identicon {
+      margin: 0 auto;
+      float: none;
+    }
+
+    .identicon {
+      border-radius: 50%;
+    }
+  }
+
+  .cover-title {
+    color: var(--gl-text-color, $gl-text-color);
+    font-size: 23px;
+
+    h1 {
+      color: var(--gl-text-color, $gl-text-color);
+      margin-bottom: 6px;
+      font-size: 23px;
+    }
+
+    .visibility-icon {
+      display: inline-block;
+      margin-left: 5px;
+      font-size: 18px;
+      color: color('gray');
+    }
+
+    p {
+      padding: 0 $gl-padding;
+      color: var(--gl-text-color, $gl-text-color);
+    }
+  }
+
+  .cover-controls {
+    @include media-breakpoint-up(sm) {
+      position: absolute;
+      top: 1rem;
+      right: 1.25rem;
+    }
+
+    &.left {
+      @include media-breakpoint-up(sm) {
+        left: 1.25rem;
+        right: auto;
+      }
+    }
+  }
+
+  &.user-cover-block {
+    padding: 24px 0 0;
+
+    .nav-links {
+      width: 100%;
+      float: none;
+
+      &.scrolling-tabs {
+        float: none;
+      }
+    }
+
+    li:first-child {
+      margin-left: auto;
+    }
+
+    li:last-child {
+      margin-right: auto;
+    }
+  }
+}
+
+// Middle dot divider between each element in a list of items.
+.middle-dot-divider {
+  @include middle-dot-divider;
+}
+
+.middle-dot-divider-sm {
+  @include media-breakpoint-up(sm) {
+    @include middle-dot-divider;
+  }
+}
+
+.profile-user-bio {
+  // Limits the width of the user bio for readability.
+  max-width: 600px;
+  margin: 10px auto;
+}
+
+.user-calendar {
+  text-align: center;
+  min-height: 172px;
+
+  .calendar {
+    display: inline-block;
+  }
+}
+
+.user-calendar-activities {
+  direction: ltr;
+
+  .str-truncated {
+    max-width: 70%;
+  }
+}
+
+.user-contrib-text {
+  font-size: 12px;
+  fill: $calendar-user-contrib-text;
+}
+
+.user-profile {
+  .profile-header {
+    margin: 0 $gl-padding;
+
+    &.with-no-profile-tabs {
+      margin-bottom: $gl-padding-24;
+    }
+
+    .avatar-holder {
+      width: 90px;
+      margin: 0 auto 10px;
+    }
+  }
+
+  .user-profile-nav {
+    font-size: 0;
+  }
+
+  .fade-right {
+    right: 0;
+  }
+
+  .fade-left {
+    left: 0;
+  }
+
+  .activities-block {
+    .event-item {
+      padding-left: 40px;
+    }
+
+    .gl-label-scoped {
+      --label-inset-border: inset 0 0 0 1px currentColor;
+    }
+
+    @include media-breakpoint-up(lg) {
+      margin-right: 5px;
+    }
+  }
+
+  .projects-block {
+    @include media-breakpoint-up(lg) {
+      margin-left: 5px;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .cover-block {
+      padding-top: 20px;
+    }
+
+    .user-profile-nav {
+      a {
+        margin-right: 0;
+      }
+    }
+
+    .activities-block {
+      .event-item {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+.linkedin-icon {
+  color: $linkedin;
+}
+
+.skype-icon {
+  color: $skype;
+}
+
+.twitter-icon {
+  color: $twitter;
+}
diff --git a/app/assets/stylesheets/page_bundles/runner_details.scss b/app/assets/stylesheets/page_bundles/runner_details.scss
new file mode 100644
index 00000000000..6e5580a18e4
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/runner_details.scss
@@ -0,0 +1,3 @@
+.runner-details-grid-template {
+  grid-template-columns: auto 1fr;
+}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 51f964a4b70..69797c6b303 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -132,7 +132,7 @@
   // stylelint-disable-next-line length-zero-no-unit
   bottom: var(--review-bar-height, 0px);
   right: 0;
-  transition: width $sidebar-transition-duration;
+  transition: width $gl-transition-duration-medium;
   background-color: $white;
   z-index: 200;
   overflow: hidden;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index c0a283ec643..a151c28fe93 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -318,7 +318,7 @@ ul.related-merge-requests > li gl-emoji {
 
 .issuable-header-slide-enter-active,
 .issuable-header-slide-leave-active {
-  @include gl-transition-slow;
+  @include gl-transition-medium;
 }
 
 .issuable-header-slide-enter,
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 7f0bdadd2bc..1beb9f05b6c 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -41,6 +41,20 @@
     font-size: 13px;
   }
 
+  .borderless {
+    .login-box,
+    .omniauth-container {
+      box-shadow: none;
+    }
+
+    .g-recaptcha {
+      > div {
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+  }
+
   .login-box,
   .omniauth-container {
     box-shadow: 0 0 0 1px $border-color;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 96fe6caeea2..b016d0a1068 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -342,10 +342,10 @@ $comparison-empty-state-height: 62px;
 
 .mr-compare {
   .diff-file .file-title-flex-parent {
-    top: calc(#{$header-height} + #{$mr-tabs-height} + 36px);
+    top: calc(#{$header-height} + #{$mr-tabs-height});
 
     .with-performance-bar & {
-      top: calc(#{$performance-bar-height} + #{$header-height} + #{$mr-tabs-height} + 36px);
+      top: calc(#{$performance-bar-height} + #{$header-height} + #{$mr-tabs-height});
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 645f145328b..9692becef4f 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -121,15 +121,6 @@
     border-radius: $label-border-radius;
     padding-top: $gl-vert-padding;
     padding-bottom: $gl-vert-padding;
-
-    .icon svg {
-      position: relative;
-      top: 2px;
-      margin-right: $btn-margin-5;
-      width: $gl-font-size;
-      height: $gl-font-size;
-      fill: $orange-600;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 4d0cf30a3b2..db07f16dfd0 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -4,7 +4,7 @@ $system-note-svg-size: 16px;
 @mixin vertical-line($left) {
   &::before {
     content: '';
-    border-left: 2px solid $gray-50;
+    border-left: 2px solid $gray-10;
     position: absolute;
     top: 0;
     bottom: 0;
@@ -29,7 +29,7 @@ $system-note-svg-size: 16px;
 
 .issuable-discussion {
   .main-notes-list {
-    @include vertical-line(36px);
+    @include vertical-line(35px);
   }
 }
 
@@ -300,17 +300,17 @@ $system-note-svg-size: 16px;
     .timeline-icon {
       display: flex;
       align-items: center;
-      background-color: $white;
+      background-color: $gray-10;
       width: $system-note-icon-size;
       height: $system-note-icon-size;
-      border: 1px solid $border-color;
+      border: 1px solid $gray-10;
       border-radius: $system-note-icon-size;
       margin: -6px 20px 0 0;
 
       svg {
         width: $system-note-svg-size;
         height: $system-note-svg-size;
-        fill: $gray-darkest;
+        fill: $gray-400;
         display: block;
         margin: 0 auto;
       }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 812cc6ab4e6..951e31ef768 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -29,23 +29,6 @@
   }
 }
 
-// Middle dot divider between each element in a list of items.
-.middle-dot-divider {
-  @include middle-dot-divider;
-}
-
-.middle-dot-divider-sm {
-  @include media-breakpoint-up(sm) {
-    @include middle-dot-divider;
-  }
-}
-
-.profile-user-bio {
-  // Limits the width of the user bio for readability.
-  max-width: 600px;
-  margin: 10px auto;
-}
-
 .user-avatar-button {
   .file-name {
     display: inline-block;
@@ -156,71 +139,6 @@
   }
 }
 
-.user-profile {
-  .profile-header {
-    margin: 0 $gl-padding;
-
-    &.with-no-profile-tabs {
-      margin-bottom: $gl-padding-24;
-    }
-
-    .avatar-holder {
-      width: 90px;
-      margin: 0 auto 10px;
-    }
-  }
-
-  .user-profile-nav {
-    font-size: 0;
-  }
-
-  .fade-right {
-    right: 0;
-  }
-
-  .fade-left {
-    left: 0;
-  }
-
-  .activities-block {
-    .event-item {
-      padding-left: 40px;
-    }
-
-    .gl-label-scoped {
-      --label-inset-border: inset 0 0 0 1px currentColor;
-    }
-
-    @include media-breakpoint-up(lg) {
-      margin-right: 5px;
-    }
-  }
-
-  .projects-block {
-    @include media-breakpoint-up(lg) {
-      margin-left: 5px;
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .cover-block {
-      padding-top: 20px;
-    }
-
-    .user-profile-nav {
-      a {
-        margin-right: 0;
-      }
-    }
-
-    .activities-block {
-      .event-item {
-        padding-left: 0;
-      }
-    }
-  }
-}
-
 table.u2f-registrations {
   th:not(:last-child),
   td:not(:last-child) {
@@ -366,15 +284,3 @@ table.u2f-registrations {
 .gitlab-slack-slack-logo {
   transform: scale(200%); // Slack logo SVG is scaled down 50% and has empty space around it
 }
-
-.skype-icon {
-  color: $skype;
-}
-
-.linkedin-icon {
-  color: $linkedin;
-}
-
-.twitter-icon {
-  color: $twitter;
-}
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index f1865a7dc40..6c909b8d9fa 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -82,19 +82,17 @@ input[type='checkbox']:hover {
     min-width: $search-input-field-x-min-width;
   }
 
-  &.is-active {
-    &.is-searching {
-      .in-search-scope-help {
-        position: absolute;
-        top: $gl-spacing-scale-2;
-        right: 2.125rem;
-        z-index: 2;
-      }
+  &.is-searching {
+    .in-search-scope-help {
+      position: absolute;
+      top: $gl-spacing-scale-2;
+      right: 2.125rem;
+      z-index: 2;
     }
   }
 
-  &.is-not-searching {
-    .in-search-scope-help {
+  &.is-not-focused {
+    .gl-search-box-by-type-clear {
       display: none;
     }
   }
@@ -104,28 +102,11 @@ input[type='checkbox']:hover {
     box-shadow: none;
     border-color: transparent;
   }
-
-  &.is-active {
-    .keyboard-shortcut-helper {
-      display: none;
-    }
-  }
-
-  &.is-not-active {
-    .btn.gl-clear-icon-button,
-    .in-search-scope-help {
-      display: none;
-    }
-  }
 }
 
 .header-search-dropdown-menu {
   max-height: $dropdown-max-height;
-  top: $header-height;
-}
-
-.header-search-dropdown-content {
-  max-height: $dropdown-max-height;
+  top: 100%;
 }
 
 .search {
diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss
deleted file mode 100644
index 7d74070b4f2..00000000000
--- a/app/assets/stylesheets/pages/settings_ci_cd.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.triggers-container {
-  .label-container {
-    display: inline-block;
-    margin-left: 10px;
-  }
-}
-
-.trigger-description {
-  max-width: 100px;
-}
-
-.trigger-actions {
-  white-space: nowrap;
-}
-
-.auto-devops-card {
-  margin-bottom: $gl-vert-padding;
-}
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index 801c9ea828f..ffe4d5dde9d 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -1043,7 +1043,7 @@ kbd {
   text-align: left;
 }
 .context-header .avatar-container {
-  flex: 0 0 40px;
+  flex: 0 0 32px;
   background-color: #333;
 }
 .context-header .sidebar-context-title {
@@ -1376,18 +1376,6 @@ kbd {
 .nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
   flex: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-}
-.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
-  border-style: none;
-}
-.nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
-  border-radius: 4px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items {
   margin-bottom: 60px;
@@ -1400,18 +1388,6 @@ kbd {
 .sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
   flex: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-}
-.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
-  border-style: none;
-}
-.sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
-  border-radius: 4px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items
   > li.active
@@ -1628,7 +1604,6 @@ svg.s16 {
   float: left;
   margin-right: 16px;
   border-radius: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.08);
 }
 .avatar.s16,
 .avatar-container.s16 {
@@ -1649,7 +1624,7 @@ svg.s16 {
   padding: 0;
   background: #222;
   overflow: hidden;
-  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 .avatar.avatar-tile {
   border-radius: 0;
@@ -1676,7 +1651,7 @@ svg.s16 {
   background-color: #232150;
 }
 .identicon.bg3 {
-  background-color: #f1f1ff;
+  background-color: #1a1a40;
 }
 .identicon.bg4 {
   background-color: #033464;
@@ -1714,9 +1689,15 @@ svg.s16 {
 .rect-avatar.s16 {
   border-radius: 2px;
 }
+.rect-avatar.s16 .avatar {
+  border-radius: 2px;
+}
 .rect-avatar.s32 {
   border-radius: 4px;
 }
+.rect-avatar.s32 .avatar {
+  border-radius: 4px;
+}
 :root {
   color-scheme: dark;
 }
@@ -1817,6 +1798,10 @@ body.gl-dark {
   background-color: #262626;
   border-right: 1px solid #303030;
 }
+.avatar-container,
+.avatar {
+  background: rgba(255, 255, 255, 0.04);
+}
 .nav-sidebar li a {
   color: var(--gray-600);
 }
@@ -1907,7 +1892,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 .keyboard-shortcut-helper {
+body.gl-dark .header-search .keyboard-shortcut-helper {
   color: #fafafa;
   background-color: rgba(250, 250, 250, 0.2);
 }
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index 43ca5a512d5..00ca98bfd27 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -1022,7 +1022,7 @@ kbd {
   text-align: left;
 }
 .context-header .avatar-container {
-  flex: 0 0 40px;
+  flex: 0 0 32px;
   background-color: #fff;
 }
 .context-header .sidebar-context-title {
@@ -1355,18 +1355,6 @@ kbd {
 .nav-sidebar-inner-scroll > div.context-header a .avatar-container {
   font-weight: 400;
   flex: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-}
-.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar {
-  border-style: none;
-}
-.nav-sidebar-inner-scroll
-  > div.context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
-  border-radius: 4px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items {
   margin-bottom: 60px;
@@ -1379,18 +1367,6 @@ kbd {
 .sidebar-top-level-items .context-header a .avatar-container {
   font-weight: 400;
   flex: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
-}
-.sidebar-top-level-items .context-header a .avatar-container.rect-avatar {
-  border-style: none;
-}
-.sidebar-top-level-items
-  .context-header
-  a
-  .avatar-container.rect-avatar
-  .avatar.s32 {
-  border-radius: 4px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
 }
 .sidebar-top-level-items
   > li.active
@@ -1607,7 +1583,6 @@ svg.s16 {
   float: left;
   margin-right: 16px;
   border-radius: 50%;
-  border: 1px solid rgba(0, 0, 0, 0.08);
 }
 .avatar.s16,
 .avatar-container.s16 {
@@ -1628,7 +1603,7 @@ svg.s16 {
   padding: 0;
   background: #fdfdfd;
   overflow: hidden;
-  border-color: rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 0 0 1px rgba(31, 31, 31, 0.1);
 }
 .avatar.avatar-tile {
   border-radius: 0;
@@ -1693,9 +1668,15 @@ svg.s16 {
 .rect-avatar.s16 {
   border-radius: 2px;
 }
+.rect-avatar.s16 .avatar {
+  border-radius: 2px;
+}
 .rect-avatar.s32 {
   border-radius: 4px;
 }
+.rect-avatar.s32 .avatar {
+  border-radius: 4px;
+}
 
 .tab-width-8 {
   tab-size: 8;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 3090edfb123..c0e2d8d44d4 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -11,9 +11,6 @@ html {
   font-family: sans-serif;
   line-height: 1.15;
 }
-header {
-  display: block;
-}
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
@@ -31,8 +28,7 @@ hr {
   height: 0;
   overflow: visible;
 }
-h1,
-h3 {
+h1 {
   margin-top: 0;
   margin-bottom: 0.25rem;
 }
@@ -53,10 +49,6 @@ img {
   vertical-align: middle;
   border-style: none;
 }
-svg {
-  overflow: hidden;
-  vertical-align: middle;
-}
 label {
   display: inline-block;
   margin-bottom: 0.5rem;
@@ -86,8 +78,7 @@ fieldset {
 [hidden] {
   display: none !important;
 }
-h1,
-h3 {
+h1 {
   margin-bottom: 0.25rem;
   font-weight: 600;
   line-height: 1.2;
@@ -96,9 +87,6 @@ h3 {
 h1 {
   font-size: 2.1875rem;
 }
-h3 {
-  font-size: 1.53125rem;
-}
 hr {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -132,13 +120,6 @@ hr {
     max-width: 1140px;
   }
 }
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: -15px;
-  margin-left: -15px;
-}
-.col-md-6,
 .col-sm-12,
 .col {
   position: relative;
@@ -151,29 +132,11 @@ hr {
   flex-grow: 1;
   max-width: 100%;
 }
-.order-1 {
-  order: 1;
-}
-.order-12 {
-  order: 12;
-}
 @media (min-width: 576px) {
   .col-sm-12 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .order-sm-1 {
-    order: 1;
-  }
-  .order-sm-12 {
-    order: 12;
-  }
-}
-@media (min-width: 768px) {
-  .col-md-6 {
-    flex: 0 0 50%;
-    max-width: 50%;
-  }
 }
 .form-control {
   display: block;
@@ -241,39 +204,18 @@ hr {
 fieldset:disabled a.btn {
   pointer-events: none;
 }
-.navbar {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.25rem 0.5rem;
-}
-.navbar .container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-}
-.fixed-top {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-}
 .mt-3 {
   margin-top: 1rem !important;
 }
 .mb-3 {
   margin-bottom: 1rem !important;
 }
+.text-nowrap {
+  white-space: nowrap !important;
+}
 .text-center {
   text-align: center !important;
 }
-.font-weight-normal {
-  font-weight: 400 !important;
-}
 .gl-form-input,
 .gl-form-input.form-control {
   background-color: #fff;
@@ -373,8 +315,7 @@ body {
 [type="submit"] {
   cursor: pointer;
 }
-h1,
-h3 {
+h1 {
   margin-top: 20px;
   margin-bottom: 10px;
 }
@@ -384,9 +325,6 @@ a {
 hr {
   overflow: hidden;
 }
-svg {
-  vertical-align: baseline;
-}
 .form-control {
   font-size: 0.875rem;
 }
@@ -442,13 +380,6 @@ body.navless {
   border-color: #e3e3e3;
   color: #303030;
 }
-.btn svg {
-  height: 15px;
-  width: 15px;
-}
-.btn svg:not(:last-child) {
-  margin-right: 5px;
-}
 .light {
   color: #303030;
 }
@@ -504,26 +435,6 @@ label.label-bold {
 .gl-show-field-errors .gl-field-hint {
   color: #303030;
 }
-.navbar-empty {
-  justify-content: center;
-  height: var(--header-height, 48px);
-  background: #fff;
-  border-bottom: 1px solid #dbdbdb;
-}
-.navbar-empty .tanuki-logo,
-.navbar-empty .brand-header-logo {
-  max-height: 100%;
-}
-.tanuki-logo .tanuki {
-  fill: #e24329;
-}
-.tanuki-logo .left-cheek,
-.tanuki-logo .right-cheek {
-  fill: #fc6d26;
-}
-.tanuki-logo .chin {
-  fill: #fca326;
-}
 input::-moz-placeholder {
   color: #868686;
   opacity: 1;
@@ -534,9 +445,6 @@ input::-ms-input-placeholder {
 input:-ms-input-placeholder {
   color: #868686;
 }
-svg {
-  fill: currentColor;
-}
 .login-page .container {
   max-width: 960px;
 }
@@ -569,6 +477,14 @@ svg {
 .login-page p {
   font-size: 13px;
 }
+.login-page .borderless .login-box,
+.login-page .borderless .omniauth-container {
+  box-shadow: none;
+}
+.login-page .borderless .g-recaptcha > div {
+  margin-left: auto;
+  margin-right: auto;
+}
 .login-page .login-box,
 .login-page .omniauth-container {
   box-shadow: 0 0 0 1px #dbdbdb;
@@ -732,61 +648,76 @@ svg {
   }
 }
 
-.gl-border-solid {
-  border-style: solid;
-}
-.gl-border-gray-100 {
-  border-color: #dbdbdb;
-}
-.gl-border-1 {
-  border-width: 1px;
-}
-.gl-rounded-base {
-  border-radius: 0.25rem;
-}
 .gl-text-green-600 {
   color: #217645;
 }
 .gl-text-red-500 {
   color: #dd2b0e;
 }
-.gl-display-flex {
-  display: flex;
-}
 .gl-display-block {
   display: block;
 }
-.gl-align-items-center {
-  align-items: center;
+.gl-w-10 {
+  width: 3.5rem;
 }
-.gl-flex-wrap {
-  flex-wrap: wrap;
+.gl-w-half {
+  width: 50%;
+}
+.gl-w-90p {
+  width: 90%;
 }
 .gl-w-full {
   width: 100%;
 }
+@media (max-width: 575.98px) {
+  .gl-xs-w-full {
+    width: 100%;
+  }
+}
 .gl-p-4 {
   padding: 0.75rem;
 }
+.gl-pt-5 {
+  padding-top: 1rem;
+}
 .gl-mt-2 {
   margin-top: 0.25rem;
 }
 .gl-mt-5 {
   margin-top: 1rem;
 }
+.gl-mr-auto {
+  margin-right: auto;
+}
+.gl-mr-2 {
+  margin-right: 0.25rem;
+}
+.gl-mb-1 {
+  margin-bottom: 0.125rem;
+}
+.gl-mb-2 {
+  margin-bottom: 0.25rem;
+}
 .gl-mb-3 {
   margin-bottom: 0.5rem;
 }
 .gl-mb-5 {
   margin-bottom: 1rem;
 }
-@media (min-width: 576px) {
-  .gl-sm-mt-0 {
-    margin-top: 0;
-  }
+.gl-ml-auto {
+  margin-left: auto;
 }
-.gl-font-weight-bold {
-  font-weight: 600;
+.gl-ml-2 {
+  margin-left: 0.25rem;
+}
+.gl-text-center {
+  text-align: center;
+}
+.gl-font-size-h2 {
+  font-size: 1.1875rem;
+}
+.gl-font-weight-normal {
+  font-weight: 400;
 }
 
 @import "startup/cloaking";
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index e6e736ef47c..eeb4604f32a 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -98,6 +98,8 @@ $white-light: #2b2b2b;
 $white-normal: #333;
 $white-dark: #444;
 
+$theme-indigo-50: #1a1a40;
+
 $border-color: #4f4f4f;
 $nav-active-bg: rgba(255, 255, 255, 0.08);
 
diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss
index 34bb4925249..92740aaf89e 100644
--- a/app/assets/stylesheets/themes/dark_mode_overrides.scss
+++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss
@@ -48,6 +48,17 @@
   border-right: 1px solid $gray-50;
 }
 
+.gl-avatar:not(.gl-avatar-identicon),
+.avatar-container,
+.avatar {
+  background: rgba($gray-950, 0.04);
+}
+
+.gl-avatar {
+  @include gl-border-none;
+  box-shadow: inset 0 0 0 1px rgba($gray-950, $gl-avatar-border-opacity);
+}
+
 .nav-sidebar {
   li {
     a {
@@ -149,3 +160,8 @@ body.gl-dark {
     background-color: $gray-200;
   }
 }
+
+.timeline-entry.internal-note:not(.note-form) {
+  // soften on darkmode
+  background-color: mix($gray-50, $orange-50, 75%);
+}
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index 2b6221a6c87..042e21cebd6 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -176,11 +176,9 @@
       }
     }
 
-    &.is-not-active {
-      .keyboard-shortcut-helper {
-        color: $search-and-nav-links;
-        background-color: rgba($search-and-nav-links, 0.2);
-      }
+    .keyboard-shortcut-helper {
+      color: $search-and-nav-links;
+      background-color: rgba($search-and-nav-links, 0.2);
     }
   }