Add latest changes from gitlab-org/gitlab@13-4-stable-ee

33 files changed, 117 insertions, 428 deletions

diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss
index 0f889935583..a104c06c853 100644
--- a/app/assets/stylesheets/pages/alert_management/details.scss
+++ b/app/assets/stylesheets/pages/alert_management/details.scss
@@ -1,39 +1,4 @@
 .alert-management-details {
-  // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
-  table {
-    tr {
-      td {
-        @include gl-border-0;
-        @include gl-p-5;
-        border-color: transparent;
-        border-bottom: 1px solid $table-border-color;
-
-        &:first-child {
-          div {
-            font-weight: bold;
-          }
-        }
-
-        &:not(:first-child) {
-          &::before {
-            color: $gray-500;
-            font-weight: normal !important;
-          }
-
-          div {
-            color: $gray-500;
-          }
-        }
-
-        @include media-breakpoint-up(sm) {
-          div {
-            text-align: left !important;
-          }
-        }
-      }
-    }
-  }
-
   @include media-breakpoint-down(xs) {
     .alert-details-incident-button {
       width: 100%;
@@ -67,6 +32,10 @@
     }
   }
 
+  .main-notes-list::before {
+    left: 15px !important;
+  }
+
   .note-header-info {
     @include gl-mt-1;
   }
diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
index 6004697b3e1..f58ad87a673 100644
--- a/app/assets/stylesheets/pages/alert_management/severity-icons.scss
+++ b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
@@ -1,3 +1,4 @@
+.incident-severity,
 .incident-management-list,
 .alert-management-details {
   .icon-critical {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 51a65b88cd0..c4852974a4d 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -116,7 +116,6 @@
 
     .board-title {
       flex-direction: column;
-      height: 100%;
     }
 
     .board-title-caret {
@@ -284,7 +283,7 @@
   }
 
   .confidential-icon {
-    color: $orange-600;
+    color: $orange-500;
     cursor: help;
   }
 
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
index 3c49cc54ac4..d34d309eea3 100644
--- a/app/assets/stylesheets/pages/branches.scss
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -23,7 +23,7 @@
 
     .bar {
       height: 4px;
-      background-color: $gl-gray-100;
+      background-color: $gray-100;
     }
 
     .count {
@@ -34,7 +34,7 @@
   .graph-separator {
     width: $graph-separator-width;
     height: 18px;
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f367d9ea4d8..04167cbee1b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -50,7 +50,7 @@
     top: $header-height;
     border-radius: 2px 2px 0 0;
     color: $orange-600;
-    background-color: $orange-100;
+    background-color: $orange-50;
     border: 1px solid $border-gray-normal;
     padding: 3px 12px;
     margin: auto;
@@ -63,7 +63,7 @@
   }
 
   .top-bar {
-    @include build-trace-top-bar(35px);
+    @include build-trace-top-bar(50px);
 
     &.has-archived-block {
       top: $header-height + 28px;
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 29422c1f7fa..4e27f438e36 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -69,7 +69,7 @@
   align-self: flex-start;
   font-weight: 500;
   font-size: 20px;
-  color: $orange-900;
+  color: $orange-500;
   opacity: 1;
   margin: $gl-padding-8 14px 0 0;
 }
@@ -124,7 +124,7 @@
       background-color: none;
       border: 0;
       font-weight: bold;
-      color: $gl-gray-500;
+      color: $gray-500;
     }
   }
 }
@@ -156,7 +156,7 @@
 }
 
 .cluster-deployments-warning {
-  color: $orange-600;
+  color: $orange-500;
 }
 
 .badge.pods-badge {
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index b97709e140f..c509bf121bc 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -41,15 +41,6 @@
       width: 20%;
     }
 
-    .fa,
-    svg {
-      color: $cycle-analytics-light-gray;
-
-      &:hover {
-        color: $gl-text-color;
-      }
-    }
-
     .stage-header {
       width: 20.5%;
     }
@@ -360,23 +351,3 @@
     }
   }
 }
-
-.cycle-analytics-overview {
-  padding-top: 100px;
-
-  .overview-details {
-    display: flex;
-    align-items: center;
-  }
-
-  .overview-image {
-    text-align: right;
-  }
-
-  .overview-icon {
-    svg {
-      width: 365px;
-      height: 227px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/dev_ops_score.scss b/app/assets/stylesheets/pages/dev_ops_report.scss
index b9ee905f4b6..871cd9c4f02 100644
--- a/app/assets/stylesheets/pages/dev_ops_score.scss
+++ b/app/assets/stylesheets/pages/dev_ops_report.scss
@@ -25,6 +25,10 @@ $space-between-cards: 8px;
     margin-left: 8px;
     font-weight: $gl-font-weight-normal;
 
+    .devops-header-icon {
+      vertical-align: px-to-rem(-$gl-spacing-scale-1);
+    }
+
     a {
       font-size: 18px;
       color: $gl-text-color-secondary;
@@ -88,7 +92,7 @@ $space-between-cards: 8px;
 }
 
 .devops-card-average {
-  border-top-color: $orange-400;
+  border-top-color: $orange-200;
 
   .board-card-score-big {
     background-color: $orange-50;
@@ -247,7 +251,7 @@ $space-between-cards: 8px;
 }
 
 .devops-average-score {
-  color: $orange-400;
+  color: $orange-500;
 }
 
 .devops-low-score {
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index a7b93c9eab7..62af7103b39 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -102,7 +102,7 @@
 
     .file-mode-changed {
       padding: 10px;
-      color: $gl-gray-500;
+      color: $gray-500;
     }
 
     .suppressed-container {
@@ -181,7 +181,7 @@
 
       .swipe-wrap {
         overflow: hidden;
-        border-right: 1px solid $gl-gray-400;
+        border-right: 1px solid $gray-300;
         position: absolute;
         display: block;
         top: 13px;
@@ -190,7 +190,7 @@
         &.left-oriented {
           /* only for commit view (different swipe viewer) */
           border-right: 0;
-          border-left: 1px solid $gl-gray-400;
+          border-left: 1px solid $gray-300;
         }
       }
 
@@ -1062,7 +1062,7 @@ table.code {
 .diff-tree-list {
   position: -webkit-sticky;
   position: sticky;
-  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 11px;
+  $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px;
   top: $top-pos;
   max-height: calc(100vh - #{$top-pos});
   z-index: 202;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index ef7b56ac210..5ce500dad1d 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -83,7 +83,7 @@
 
 .x-axis path,
 .y-axis path {
-  stroke: $gl-gray-350;
+  stroke: $gray-300;
 }
 
 .label-x-axis-line,
@@ -93,7 +93,7 @@
 
 .y-axis {
   line {
-    stroke: $gl-gray-350;
+    stroke: $gray-300;
     stroke-width: 1;
   }
 }
@@ -117,7 +117,7 @@
 }
 
 .selected-metric-line {
-  stroke: $gl-gray-dark;
+  stroke: $gray-900;
   stroke-width: 1;
 }
 
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 500f5816d38..5738cbb4b31 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -94,7 +94,7 @@
         border: 0;
         background: $gray-light;
         border-radius: 0;
-        color: $gl-gray-500;
+        color: $gray-500;
         overflow: hidden;
       }
 
@@ -111,7 +111,7 @@
     }
 
     .event-note-icon {
-      color: $gl-gray-500;
+      color: $gray-500;
       float: left;
       font-size: $gl-font-size;
       margin-right: 5px;
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index c4b6cdd703d..bca4d50973a 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -43,7 +43,7 @@
 
   .y-axis-label {
     line {
-      stroke: $gl-gray-350;
+      stroke: $gray-300;
     }
 
     text {
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index c309c8d157a..69fd094f83b 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -52,7 +52,7 @@
 .save-group-loader {
   margin-top: $gl-padding-50;
   margin-bottom: $gl-padding-50;
-  color: $gl-gray-700;
+  color: $gray-700;
 }
 
 .group-nav-container .nav-controls {
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index ab281bc7f23..540060d60de 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -1,6 +1,6 @@
 .shortcut-mappings {
   font-size: 12px;
-  color: $gl-gray-700;
+  color: $gray-700;
 
   tbody:first-child tr:first-child {
     padding-top: 0;
@@ -22,7 +22,7 @@
 
   .shortcut {
     padding-right: 10px;
-    color: $gl-gray-400;
+    color: $gray-300;
     text-align: right;
     white-space: nowrap;
   }
diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss
index 00ca3cc73e0..316066694a8 100644
--- a/app/assets/stylesheets/pages/incident_management_list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -108,7 +108,7 @@
     border-bottom-width: 0;
 
     .gl-tab-nav-item {
-      color: $gl-gray-600;
+      color: $gray-500;
 
       > .gl-tab-counter-badge {
         color: inherit;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 2f28361f62c..53525a4d877 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,5 +1,5 @@
 .issuable-warning-icon {
-  background-color: $orange-100;
+  background-color: $orange-50;
   border-radius: $border-radius-default;
   width: $issuable-warning-size;
   height: $issuable-warning-size;
@@ -50,6 +50,7 @@
 
   .title-container {
     display: flex;
+    align-items: flex-start;
   }
 
   .title {
@@ -65,7 +66,6 @@
 
   .btn-edit {
     margin-left: auto;
-    height: $gl-padding * 2;
   }
 
   .emoji-block {
@@ -119,11 +119,11 @@
 
 .assignee {
   .merge-icon {
-    color: $orange-500;
+    color: $orange-400;
     position: absolute;
     bottom: 0;
     right: 0;
-    text-shadow: -1px -1px 0 $white, 1px -1px 0 $white, -1px 1px 0 $white, 1px 1px 0 $white;
+    text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white;
   }
 }
 
@@ -234,8 +234,8 @@
 
   .title {
     color: $gl-text-color;
-    margin-bottom: $gl-padding-8;
-    line-height: 1;
+    margin-bottom: $gl-padding-4;
+    line-height: $gl-line-height-20;
 
     .avatar {
       margin-left: 0;
@@ -252,7 +252,8 @@
     }
   }
 
-  .cross-project-reference {
+  .cross-project-reference,
+  .sidebar-mr-source-branch {
     color: inherit;
 
     span {
@@ -360,13 +361,6 @@
       margin: 0;
     }
 
-    .username {
-      display: block;
-      margin-top: 4px;
-      font-size: 13px;
-      font-weight: $gl-font-weight-normal;
-    }
-
     .hide-expanded {
       display: none;
     }
@@ -389,7 +383,8 @@
       border-bottom: 0;
       overflow: hidden;
 
-      &:hover {
+      &.with-sub-blocks .sub-block:hover,
+      &:not(.with-sub-blocks):hover {
         background-color: $gray-100;
       }
 
@@ -444,11 +439,6 @@
         }
       }
 
-      span {
-        display: block;
-        margin-top: 0;
-      }
-
       .sidebar-avatar-counter {
         padding-top: 2px;
       }
@@ -741,7 +731,6 @@
     .issuable-info-container {
       flex: 1;
       display: flex;
-      padding-right: $gl-padding;
 
       .issuable-main-info {
         flex: 1 auto;
@@ -919,12 +908,12 @@
 }
 
 .issuable-todo-btn {
-  .fa-spinner {
+  .gl-spinner {
     display: none;
   }
 
   &.is-loading {
-    .fa-spinner {
+    .gl-spinner {
       display: inline-block;
     }
 
@@ -982,7 +971,7 @@
 }
 
 .suggestion-confidential {
-  color: $orange-600;
+  color: $orange-500;
 }
 
 .suggestion-state-open {
@@ -1006,3 +995,15 @@
     border: 0;
   }
 }
+
+@include media-breakpoint-down(sm) {
+  // Overriding the following rule with the negative margin
+  // https://gitlab.com/gitlab-org/gitlab/-/blob/146c43c931c3743a140529307aea616e4aa9ff21/app/assets/stylesheets/framework/sidebar.scss#L1-5
+  .container-fluid {
+    .issuable-list,
+    .issues-filters,
+    .epics-filters {
+      margin: 0 (-$gl-padding);
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 0c349ab73a3..03603f637c8 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -14,7 +14,7 @@
   }
 
   .issue {
-    padding: 10px 0 10px $gl-padding;
+    padding: 10px $gl-padding;
     position: relative;
 
     .title {
@@ -294,12 +294,12 @@ ul.related-merge-requests > li {
 
       &::after {
         content: image-url('icon_anchor.svg');
-        @include invisible(hidden);
+        visibility: hidden;
       }
     }
 
     &:hover > a.anchor::after {
-      @include invisible(visible);
+      visibility: visible;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 54bca80194f..2d9a9f3029f 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -180,10 +180,6 @@
     word-break: break-all;
   }
 
-  .member-group-link {
-    display: inline-block;
-  }
-
   .form-control {
     width: inherit;
   }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a6d1fc11c3f..8aaeb92eb7a 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -64,7 +64,7 @@ $mr-widget-min-height: 69px;
   background-color: $gray-light;
 
   &.clickable:hover {
-    background-color: $gl-gray-100;
+    background-color: $gray-100;
     cursor: pointer;
   }
 }
@@ -311,7 +311,7 @@ $mr-widget-min-height: 69px;
 
     .bold {
       font-weight: $gl-font-weight-bold;
-      color: $gl-gray-light;
+      color: $gray-600;
       margin-left: 10px;
     }
 
@@ -873,7 +873,6 @@ $mr-widget-min-height: 69px;
   .merge-request-tabs-container,
   .epic-tabs-container {
     flex-direction: column-reverse;
-    padding-top: $gl-padding-8;
   }
 }
 
@@ -883,7 +882,6 @@ $mr-widget-min-height: 69px;
     .epic-tabs-container {
       flex-direction: column-reverse;
       align-items: flex-start;
-      padding-top: $gl-padding-8;
     }
   }
 }
@@ -980,7 +978,7 @@ $mr-widget-min-height: 69px;
     opacity: 0.65;
 
     &:hover {
-      color: $gl-gray-500;
+      color: $gray-500;
       text-decoration: none;
     }
   }
@@ -1035,3 +1033,9 @@ $mr-widget-min-height: 69px;
 .diff-file-row.is-active {
   background-color: $gray-50;
 }
+
+.merge-request-container {
+  .flash-container {
+    @include gl-mb-4;
+  }
+}
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index c473cc44637..e9eb79b071c 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -178,7 +178,6 @@ $status-box-line-height: 26px;
 
 .milestone-detail {
   border-bottom: 1px solid $border-color;
-  padding: 20px 0;
 }
 
 @include media-breakpoint-down(xs) {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 35a15214f68..8b3d3268a8c 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -97,7 +97,7 @@
 
 .issuable-note-warning {
   color: $orange-600;
-  background-color: $orange-100;
+  background-color: $orange-50;
   border-radius: $border-radius-default $border-radius-default 0 0;
   border: 1px solid $border-gray-normal;
   border-bottom: 0;
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e4e54501627..c144fb13322 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -186,8 +186,8 @@ $note-form-margin-left: 72px;
       padding: $gl-padding;
 
       .dummy-avatar {
-        background-color: $gl-gray-100;
-        border: 1px solid darken($gl-gray-100, 25%);
+        background-color: $gray-100;
+        border: 1px solid darken($gray-100, 25%);
       }
 
       .note-headline-light,
@@ -835,7 +835,7 @@ $note-form-margin-left: 72px;
   &[disabled] {
     background: $white;
     border-color: $gray-200;
-    color: $gl-gray-400;
+    color: $gray-300;
     cursor: not-allowed;
   }
 }
diff --git a/app/assets/stylesheets/pages/packages.scss b/app/assets/stylesheets/pages/packages.scss
deleted file mode 100644
index 8f6eee524e5..00000000000
--- a/app/assets/stylesheets/pages/packages.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.commit-row-description {
-  border: 0;
-  border-left: 3px solid $white-dark;
-}
-
-.package-list-table[aria-busy='true'] {
-  td {
-    padding-bottom: 0;
-    padding-top: 0;
-  }
-}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index fc3b786b365..8b104ce9017 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -193,7 +193,6 @@
 
   .icon-container {
     display: inline-block;
-    width: 10px;
 
     &.commit-icon {
       width: 15px;
@@ -782,7 +781,7 @@
   &.ci-status-icon-pending,
   &.ci-status-icon-waiting-for-resource,
   &.ci-status-icon-success-with-warnings {
-    @include mini-pipeline-graph-color($white, $orange-100, $orange-200, $orange-500, $orange-600, $orange-700);
+    @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
   }
 
   &.ci-status-icon-preparing,
@@ -1082,3 +1081,19 @@ button.mini-pipeline-graph-dropdown-toggle {
 .progress-bar.bg-primary {
   background-color: $blue-500 !important;
 }
+
+.pipeline-stage-pill {
+  width: 10rem;
+}
+
+.pipeline-job-pill {
+  width: 8rem;
+}
+
+.stage-left-rounded {
+  border-radius: 2rem 0 0 2rem;
+}
+
+.stage-right-rounded {
+  border-radius: 0 2rem 2rem 0;
+}
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 85836962b06..4dc1f2034f3 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -257,7 +257,8 @@
   }
 }
 
-table.u2f-registrations {
+table.u2f-registrations,
+.webauthn-registrations {
   th:not(:last-child),
   td:not(:last-child) {
     border-right: solid 1px transparent;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d4d6583312c..a2f8447c0b6 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -353,7 +353,7 @@
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
-  color: $gl-gray-700;
+  color: $gray-700;
 }
 
 .transfer-project .select2-container {
@@ -429,7 +429,7 @@
 
   > li + li::before {
     padding: 0 3px;
-    color: $gl-gray-400;
+    color: $gray-300;
   }
 
   a {
@@ -1268,18 +1268,10 @@ pre.light-well {
   position: relative;
 
   .clear-icon {
-    @extend .fa-times;
     display: none;
     position: absolute;
-    right: 7px;
-    top: 7px;
-    color: $location-icon-color;
-
-    &::before {
-      font-family: FontAwesome;
-      font-weight: $gl-font-weight-normal;
-      font-style: normal;
-    }
+    right: 9px;
+    top: 9px;
   }
 
   &.has-value {
@@ -1444,7 +1436,7 @@ pre.light-well {
 
 .project-filters {
   .btn svg {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
 
   .button-filter-group {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 1fc6ad62237..4b8e1da4867 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -105,7 +105,7 @@ input[type='checkbox']:hover {
     }
 
     .dropdown-header {
-      // Necessary because glDropdown doesn't support a second style of headers
+      // Necessary because deprecatedJQueryDropdown doesn't support a second style of headers
       font-weight: $gl-font-weight-bold;
       color: $gl-text-color;
       font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index b82c638a5b7..7b18e3774d8 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -124,8 +124,8 @@
 .settings-message {
   padding: 5px;
   line-height: 1.3;
-  color: $orange-700;
-  background-color: $orange-100;
+  color: $gray-900;
+  background-color: $orange-50;
   border: 1px solid $orange-200;
   border-radius: $border-radius-base;
 }
@@ -135,7 +135,7 @@
 }
 
 .warning-title {
-  color: $orange-500;
+  color: $gray-900;
 }
 
 .danger-title {
@@ -301,7 +301,7 @@
   }
 
   .loading-metrics .metrics-load-spinner {
-    color: $gl-gray-700;
+    color: $gray-700;
   }
 
   .metrics-list {
@@ -384,6 +384,13 @@
         font-weight: $gl-font-weight-bold;
         border: 0;
       }
+
+      // When tables are "stacked", restore td padding
+      @media(max-width: map-get($grid-breakpoints, lg)) {
+        td {
+          padding-left: $gl-spacing-scale-5;
+        }
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 4ad2dcbe92f..b37c5172ad2 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -43,7 +43,7 @@
   &.ci-waiting-for-resource,
   &.ci-failed-with-warnings,
   &.ci-success-with-warnings {
-    @include status-color($orange-100, $orange-500, $orange-700);
+    @include status-color($orange-50, $orange-500, $orange-700);
   }
 
   &.ci-info,
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
deleted file mode 100644
index c6f104a024b..00000000000
--- a/app/assets/stylesheets/pages/todos.scss
+++ /dev/null
@@ -1,263 +0,0 @@
-/**
- * Dashboard Todos
- *
- */
-
-.todos-list > .todo {
-  // workaround because we cannot use border-collapse
-  border-top: 1px solid transparent;
-  display: flex;
-  flex-direction: row;
-
-  &:hover {
-    background-color: $blue-50;
-    border-color: $blue-200;
-    cursor: pointer;
-  }
-
-  // overwrite border style of .content-list
-  &:last-child {
-    border-bottom: 1px solid transparent;
-
-    &:hover {
-      border-color: $blue-200;
-    }
-  }
-
-  .todo-avatar,
-  .todo-actions {
-    @include transition(opacity);
-    flex: 0 0 auto;
-  }
-
-  .todo-actions {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    margin-left: 10px;
-    min-width: 55px;
-  }
-
-  .todo-item {
-    flex: 0 1 100%;
-    min-width: 0;
-  }
-
-  &.todo-pending.done-reversible {
-    background-color: $white;
-
-    &:hover {
-      border-color: $white-normal;
-      background-color: $gray-light;
-      border-top: 1px solid transparent;
-
-      .todo-avatar,
-      .todo-item {
-        opacity: 0.6;
-      }
-    }
-
-    .todo-avatar,
-    .todo-item {
-      opacity: 0.2;
-    }
-
-    .btn {
-      background-color: $gray-light;
-    }
-  }
-}
-
-.todo-item {
-  @include transition(opacity);
-
-  .todo-title {
-    > .title-item {
-      &:first-child {
-        margin-left: 0;
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    .todo-label {
-      flex: 0 1 auto;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .status-box {
-    margin: 0;
-    float: none;
-    display: inline-block;
-    font-weight: $gl-font-weight-normal;
-    padding: 0 5px;
-    line-height: inherit;
-    font-size: 14px;
-  }
-
-  .todo-label,
-  .todo-project {
-    a {
-      color: $blue-600;
-      font-weight: $gl-font-weight-normal;
-    }
-  }
-
-  .todo-body {
-    .badge.badge-pill,
-    p {
-      color: $gl-text-color;
-    }
-
-    .md {
-      color: $gl-grayish-blue;
-      font-size: $gl-font-size;
-    }
-
-    code {
-      white-space: pre-wrap;
-    }
-
-    pre {
-      border: 0;
-      background: $gray-light;
-      border-radius: 0;
-      color: $gl-gray-500;
-      margin: 0 20px;
-      overflow: hidden;
-    }
-
-    .note-image-attach {
-      margin-top: 4px;
-      margin-left: 0;
-      max-width: 200px;
-      float: none;
-    }
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .gl-label-scoped {
-    --label-inset-border: inset 0 0 0 1px currentColor;
-  }
-}
-
-@include media-breakpoint-down(sm) {
-  .todos-filters {
-    .dropdown-menu-toggle {
-      width: 130px;
-    }
-
-    .dropdown-menu-toggle-sort {
-      width: auto;
-    }
-  }
-}
-
-@include media-breakpoint-down(lg) {
-  .todos-filters {
-    .filter-categories {
-      width: 75%;
-
-      .filter-item {
-        margin-bottom: 10px;
-      }
-    }
-  }
-}
-
-@include media-breakpoint-down(sm) {
-  .todo {
-    .avatar {
-      display: none;
-    }
-  }
-
-  .todo-item {
-    .todo-title {
-      margin-bottom: 10px;
-
-      .todo-label {
-        white-space: normal;
-      }
-    }
-
-    .todo-body {
-      margin: 0;
-      border-left: 2px solid $gl-gray-100;
-      padding-left: 10px;
-    }
-  }
-
-  .todos-filters {
-    .filter-categories {
-      width: auto;
-    }
-
-    .dropdown-menu-toggle {
-      width: 100%;
-    }
-  }
-}
-
-.todos-empty {
-  display: flex;
-  flex-direction: column;
-  max-width: 900px;
-  margin-left: auto;
-  margin-right: auto;
-
-  @include media-breakpoint-up(sm) {
-    flex-direction: row;
-    padding-top: 80px;
-  }
-}
-
-.todos-empty-content {
-  align-self: center;
-  max-width: 480px;
-  margin-right: 20px;
-}
-
-.todos-empty-hero {
-  width: 200px;
-  margin-left: auto;
-  margin-right: auto;
-
-  @include media-breakpoint-up(sm) {
-    width: 300px;
-    margin-right: 0;
-    order: 2;
-  }
-}
-
-.todos-all-done {
-  padding-top: 20px;
-
-  @include media-breakpoint-up(sm) {
-    padding-top: 50px;
-  }
-
-  > svg {
-    display: block;
-    max-width: 300px;
-    margin: 0 auto 20px;
-  }
-
-  p {
-    max-width: 470px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  a {
-    font-weight: $gl-font-weight-bold;
-  }
-}
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index b6af395a802..73fe76f139f 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -173,7 +173,7 @@
 
   .tree-truncated-warning {
     color: $orange-600;
-    background-color: $orange-100;
+    background-color: $orange-50;
   }
 
   .tree-time-ago {
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 7744fd814d0..288da4da5c3 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -6,7 +6,7 @@
 
   .example {
     padding: 15px;
-    border: 1px dashed $gl-gray-100;
+    border: 1px dashed $gray-100;
     margin-bottom: 15px;
 
     &::before {
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index 8c4bfdf68cc..ccf11058b5b 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -151,3 +151,7 @@ ul.wiki-pages-list.content-list {
 .empty-state-wiki .text-content {
   max-width: 490px; // Widen to allow for the Confluence button
 }
+
+.wiki-form .markdown-area {
+  max-height: none;
+}