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

29 files changed, 225 insertions, 153 deletions

diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss
index 73a4af00c5a..0f889935583 100644
--- a/app/assets/stylesheets/pages/alert_management/details.scss
+++ b/app/assets/stylesheets/pages/alert_management/details.scss
@@ -16,12 +16,12 @@
 
         &:not(:first-child) {
           &::before {
-            color: $gray-700;
+            color: $gray-500;
             font-weight: normal !important;
           }
 
           div {
-            color: $gray-700;
+            color: $gray-500;
           }
         }
 
@@ -35,7 +35,7 @@
   }
 
   @include media-breakpoint-down(xs) {
-    .alert-details-issue-button {
+    .alert-details-incident-button {
       width: 100%;
     }
   }
diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
index b400e80d5c5..6004697b3e1 100644
--- a/app/assets/stylesheets/pages/alert_management/severity-icons.scss
+++ b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
@@ -1,4 +1,4 @@
-.alert-management-list,
+.incident-management-list,
 .alert-management-details {
   .icon-critical {
     color: $red-800;
@@ -21,6 +21,6 @@
   }
 
   .icon-unknown {
-    color: $gray-400;
+    color: $gray-200;
   }
 }
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 049660220df..51a65b88cd0 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -59,6 +59,10 @@
     height: calc(100vh - #{$issue-board-list-difference-md});
   }
 
+  @include media-breakpoint-up(lg) {
+    height: calc(100vh - #{$issue-board-list-difference-lg});
+  }
+
   .with-performance-bar & {
     height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height});
 
@@ -69,6 +73,10 @@
     @include media-breakpoint-up(md) {
       height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height});
     }
+
+    @include media-breakpoint-up(lg) {
+      height: calc(100vh - #{$issue-board-list-difference-lg} - #{$performance-bar-height});
+    }
   }
 }
 
@@ -191,7 +199,8 @@
   align-items: center;
   font-size: 1em;
   border-bottom: 1px solid $gray-100;
-  padding: $gl-padding-8;
+  padding: 0 $gl-spacing-scale-3;
+  height: 3rem;
 
   .js-max-issue-size::before {
     content: '/';
@@ -521,7 +530,7 @@
   }
 
   &.board-card-weight {
-    color: $gl-text-color;
+    color: $gl-text-color-secondary;
     cursor: pointer;
 
     &:hover {
@@ -531,8 +540,9 @@
   }
 
   .board-card-info-icon {
-    color: $gray-600;
+    color: $gray-500;
     margin-right: $gl-padding-4;
+    vertical-align: text-top;
   }
 
   @include media-breakpoint-down(md) {
@@ -584,3 +594,21 @@
 .board-header-collapsed-info-icon:hover {
   color: $gray-900;
 }
+
+$epic-icons-spacing: 40px;
+
+.board-epic-lane {
+  max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
+
+  .page-with-icon-sidebar & {
+    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing});
+  }
+
+  .page-with-icon-sidebar .is-compact & {
+    max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing});
+  }
+
+  .is-compact & {
+    max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing});
+  }
+}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 02c42d5b779..f367d9ea4d8 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -108,7 +108,7 @@
 
     svg {
       position: relative;
-      top: 5px;
+      top: 3px;
       margin-right: 5px;
       width: 22px;
       height: 22px;
@@ -275,8 +275,6 @@
     overflow: auto;
 
     svg {
-      position: relative;
-      top: 3px;
       margin-right: 3px;
       height: 14px;
       width: 14px;
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 5a69aa15303..29422c1f7fa 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -166,6 +166,6 @@
 
 .cluster-status-indicator {
   &.disabled {
-    background-color: $gray-600;
+    background-color: $gray-400;
   }
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 9a69afc6044..e6378fd9168 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -388,3 +388,9 @@
   display: block;
   color: $link-color;
 }
+
+.add-review-item {
+  .gl-tab-nav-item {
+    height: 100%;
+  }
+}
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index fd5b3ff1dd8..a7b93c9eab7 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -992,7 +992,8 @@ table.code {
 }
 
 .frame .badge.badge-pill,
-.frame .image-comment-badge {
+.frame .image-comment-badge,
+.frame .comment-indicator {
   // Center align badges on the frame
   transform: translate(-50%, -50%);
 }
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index fd11d0e3a69..9f9964ac447 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -16,6 +16,11 @@
     padding: 0;
     position: relative;
     width: 100%;
+
+    .editor-loading-content {
+      height: 100%;
+      border: 0;
+    }
   }
 
   .ace_gutter-cell {
@@ -160,9 +165,8 @@
   vertical-align: top;
 
   @media(max-width: map-get($grid-breakpoints, lg)-1) {
-    display: block;
+    display: inline-block;
     width: 100%;
-    margin: 5px 0;
     padding: 0;
     border-left: 0;
   }
@@ -182,7 +186,8 @@
   .gitignore-selector,
   .gitlab-ci-yml-selector,
   .dockerfile-selector,
-  .template-type-selector {
+  .template-type-selector,
+  .metrics-dashboard-selector {
     display: inline-block;
     vertical-align: top;
     font-family: $regular_font;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index ab6716903c7..ef7b56ac210 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -98,19 +98,10 @@
   }
 }
 
-.refresh-dashboard-button {
-  margin-top: 22px;
-
-  @media(max-width: map-get($grid-breakpoints, sm)) {
-    margin-top: 0;
-  }
-}
-
 .metric-area {
   opacity: 0.25;
 }
 
-
 .rect-text-metric {
   fill: $white;
   stroke-width: 1;
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index f9beb6fe037..c4b6cdd703d 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -49,7 +49,7 @@
     text {
       font-weight: bold;
       font-size: 12px;
-      fill: $gray-800;
+      fill: $gray-700;
     }
   }
 }
@@ -70,5 +70,5 @@
 
 .animate-flicker {
   animation: flickerAnimation 1.5s infinite;
-  fill: $gray-500;
+  fill: $gray-300;
 }
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/incident_management_list.scss
index e420209b1fc..00ca3cc73e0 100644
--- a/app/assets/stylesheets/pages/alert_management/list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -1,11 +1,11 @@
-.alert-management-list {
+.incident-management-list {
   .new-alert {
     background-color: $issues-today-bg;
   }
 
   // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
   table {
-    color: $gray-700;
+    @include gl-text-gray-500;
 
     tr {
       &:focus {
@@ -14,16 +14,15 @@
 
       td,
       th {
-        @include gl-pl-9;
         @include gl-py-5;
         @include gl-outline-none;
         @include gl-relative;
       }
 
       th {
-        background-color: transparent;
-        font-weight: $gl-font-weight-bold;
-        color: $gl-gray-600;
+        @include gl-bg-transparent;
+        @include gl-font-weight-bold;
+        @include gl-text-gray-400;
 
         &[aria-sort='none']:hover {
           background-image: url('data:image/svg+xml, %3csvg   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"%3e   %3cpath style="fill: %23BABABA;" fill-rule="evenodd" d="M11.707085,11.7071   L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375,   10.6834 4.292875,10.2929 C4.683375,9.90237   5.316575,9.90237 5.707075,10.2929 L6.999975,   11.5858 L6.999975,2 C6.999975,1.44771   7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771   8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395   ,9.90237 11.316555,9.90237 11.707085,10.2929   C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/%3e   %3c/svg%3e');
@@ -39,19 +38,37 @@
           }
         }
       }
+
+      .sortable-cell {
+        padding-left: calc(0.75rem + 0.65em);
+      }
     }
   }
 
   @include media-breakpoint-down(sm) {
-    .alert-management-table {
+    table {
       tr {
-        border-top: 0;
+        @include gl-border-t-0;
 
         .table-col {
           min-height: 68px;
+        }
+
+        &:hover {
+          @include gl-bg-white;
+          @include gl-border-none;
+        }
+
+        th,
+        td {
+          @include gl-pt-6;
+        }
+      }
 
+      &.alert-management-table {
+        .table-col {
           &:last-child {
-            background-color: $gray-10;
+            @include gl-bg-gray-10;
 
             &::before {
               content: none !important;
@@ -63,23 +80,56 @@
             }
           }
         }
+      }
 
-        &:hover {
-          background-color: $white;
-          border-color: $white;
-          border-bottom-style: none;
+      .b-table-empty-row {
+        td {
+          @include gl-border-b-0;
+
+          div {
+            text-align: unset !important;
+          }
         }
       }
+
+      .b-table-busy-slot {
+        td {
+          @include gl-border-b-0;
+
+          div {
+            text-align: center !important;
+          }
+        }
+      }
+    }
+  }
+
+  .gl-tabs-nav {
+    border-bottom-width: 0;
+
+    .gl-tab-nav-item {
+      color: $gl-gray-600;
+
+      > .gl-tab-counter-badge {
+        color: inherit;
+        @include gl-font-sm;
+        background-color: $gray-50;
+      }
     }
   }
 
-  .gl-tab-nav-item {
-    color: $gl-gray-600;
+  @include media-breakpoint-down(xs) {
+    .incident-management-list-header {
+      flex-direction: column-reverse;
+    }
 
-    > .gl-tab-counter-badge {
-      color: inherit;
-      @include gl-font-sm;
-      background-color: $white-normal;
+    .create-incident-button {
+      @include gl-w-full;
     }
   }
+
+  // TODO: Abstract to `@gitlab/ui` utility set: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/921
+  .gl-fill-green-500 {
+    fill: $green-500;
+  }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index a7d0d4259ea..2f28361f62c 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -166,6 +166,14 @@
     color: inherit;
   }
 
+  // TODO remove this class once we can generate a correct hover utility from `gitlab/ui`,
+  // see here: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39286#note_396767000
+  .btn-link-hover:hover {
+    * {
+      @include gl-text-blue-800;
+    }
+  }
+
   .issuable-header-text {
     margin-top: 7px;
   }
@@ -598,18 +606,18 @@
   padding: 16px 0;
 
   small {
-    color: $gray-700;
+    color: $gray-500;
   }
 }
 
 .edited-text {
-  color: $gray-700;
+  color: $gray-500;
   display: block;
   margin: 16px 0 0;
   font-size: 85%;
 
   .author-link {
-    color: $gray-700;
+    color: $gray-500;
   }
 }
 
@@ -804,6 +812,10 @@
           }
         }
       }
+
+      .milestone {
+        color: $gray-700;
+      }
     }
 
     @media(max-width: map-get($grid-breakpoints, lg)-1) {
@@ -956,7 +968,7 @@
     .sidebar-collapsed-divider {
       line-height: 5px;
       font-size: 12px;
-      color: $gray-700;
+      color: $gray-500;
 
       + .sidebar-collapsed-icon {
         padding-top: 0;
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 73d2c3ca2f8..e37b26187e7 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -336,11 +336,11 @@
   }
 
   .label-action {
-    color: $gray-800;
+    color: $gray-700;
     cursor: pointer;
 
     svg {
-      fill: $gray-800;
+      fill: $gray-700;
     }
 
     &:hover {
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 5cf2d847405..a6d1fc11c3f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -760,11 +760,6 @@ $mr-widget-min-height: 69px;
     color: $gl-text-color;
   }
 
-  .fa-info-circle {
-    color: $orange-500;
-    padding-right: 5px;
-  }
-
   // Shortening button height by 1px to make compare-versions
   // header 56px and fit into our 8px design grid
   button {
@@ -1010,7 +1005,7 @@ $mr-widget-min-height: 69px;
 
   .coverage {
     font-size: 12px;
-    color: $gray-700;
+    color: $gray-500;
     line-height: initial;
   }
 
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 3a210d66420..35a15214f68 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -152,7 +152,7 @@
   }
 
   .sidebar-item-value & {
-    fill: $gray-700;
+    fill: $gray-500;
   }
 }
 
@@ -282,7 +282,7 @@ table {
     display: table;
 
     svg {
-      fill: $gray-700;
+      fill: $gray-500;
     }
 
     .btn-group {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 40f0104a2bf..e4e54501627 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -674,7 +674,7 @@ $note-form-margin-left: 72px;
 
 .note-headline-meta {
   .system-note-separator {
-    color: $gray-700;
+    color: $gray-500;
   }
 
   .note-timestamp {
@@ -727,7 +727,7 @@ $note-form-margin-left: 72px;
   display: inline-flex;
   align-items: center;
   margin-left: 10px;
-  color: $gray-600;
+  color: $gray-400;
 
   @include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
     float: none;
@@ -820,9 +820,7 @@ $note-form-margin-left: 72px;
   }
 }
 
-.add-diff-note {
-  @include btn-comment-icon;
-  opacity: 0;
+.tooltip-wrapper.add-diff-note {
   margin-left: -52px;
   position: absolute;
   top: 50%;
@@ -830,6 +828,18 @@ $note-form-margin-left: 72px;
   z-index: 10;
 }
 
+.note-button.add-diff-note {
+  @include btn-comment-icon;
+  opacity: 0;
+
+  &[disabled] {
+    background: $white;
+    border-color: $gray-200;
+    color: $gl-gray-400;
+    cursor: not-allowed;
+  }
+}
+
 .disabled-comment {
   background-color: $gray-light;
   border-radius: $border-radius-base;
@@ -867,7 +877,7 @@ $note-form-margin-left: 72px;
     line-height: $gl-line-height;
 
     svg {
-      fill: $gray-700;
+      fill: $gray-500;
     }
 
     &.discussion-create-issue-btn {
@@ -904,7 +914,7 @@ $note-form-margin-left: 72px;
   border-right: 0;
 
   .line-resolve-btn {
-    color: $gray-700;
+    color: $gray-500;
 
     svg {
       vertical-align: text-top;
@@ -989,11 +999,6 @@ $note-form-margin-left: 72px;
 }
 
 .discussion-filter-container {
-  .btn > svg {
-    width: $gl-col-padding;
-    height: $gl-col-padding;
-  }
-
   .dropdown-menu {
     margin-bottom: $gl-padding-4;
 
diff --git a/app/assets/stylesheets/pages/packages.scss b/app/assets/stylesheets/pages/packages.scss
new file mode 100644
index 00000000000..8f6eee524e5
--- /dev/null
+++ b/app/assets/stylesheets/pages/packages.scss
@@ -0,0 +1,11 @@
+.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 57ad9abef4b..fc3b786b365 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -445,6 +445,7 @@
 .pipeline-tab-content {
   display: flex;
   width: 100%;
+  min-height: $dropdown-max-height-lg;
   background-color: $gray-light;
   padding: $gl-padding 0;
   overflow: auto;
@@ -669,24 +670,13 @@
     &.ci-action-icon-wrapper {
       height: 30px;
       width: 30px;
-      background: $white;
-      border: 1px solid $border-color;
       border-radius: 100%;
       display: block;
-
-      &:hover {
-        background-color: $gray-darker;
-        border: 1px solid $dropdown-toggle-active-border-color;
-
-        svg {
-          fill: $gl-text-color;
-        }
-      }
+      padding: 0;
+      line-height: 0;
 
       svg {
         fill: $gl-text-color-secondary;
-        position: relative;
-        top: -1px;
       }
 
       .spinner {
@@ -695,7 +685,8 @@
 
       &.play {
         svg {
-          left: 2px;
+          left: 1px;
+          top: 1px;
         }
       }
     }
@@ -804,12 +795,12 @@
   &.ci-status-icon-disabled,
   &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
-    @include mini-pipeline-graph-color($white, $gray-700, $gray-800, $gray-900, $gray-950, $black);
+    @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
   }
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color($white, $gray-100, $gray-300, $gray-500, $gray-600, $gray-700);
+    @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
   }
 }
 
@@ -845,15 +836,12 @@ button.mini-pipeline-graph-dropdown-toggle {
     &.ci-action-icon-wrapper {
       height: $ci-action-dropdown-button-size;
       width: $ci-action-dropdown-button-size;
-
-      background: $white;
-      border: 1px solid $border-color;
       border-radius: 50%;
       display: block;
 
       &:hover {
+        box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color;
         background-color: $gray-darker;
-        border: 1px solid $dropdown-toggle-active-border-color;
 
         svg {
           fill: $gl-text-color;
@@ -866,7 +854,7 @@ button.mini-pipeline-graph-dropdown-toggle {
         height: $ci-action-dropdown-svg-size;
         fill: $gl-text-color-secondary;
         position: relative;
-        top: auto;
+        top: 1px;
         vertical-align: initial;
       }
     }
@@ -874,7 +862,7 @@ button.mini-pipeline-graph-dropdown-toggle {
 
   // SVGs in the commit widget and mr widget
   a.ci-action-icon-container.ci-action-icon-wrapper svg {
-    top: 4px;
+    top: 5px;
   }
 
   .scrollable-menu {
@@ -1052,13 +1040,6 @@ button.mini-pipeline-graph-dropdown-toggle {
   .text-center {
     padding-top: 12px;
   }
-
-  .header-action-buttons {
-    .btn,
-    a {
-      margin-left: 10px;
-    }
-  }
 }
 
 .pipelines-container .top-area .nav-controls > .btn:last-child {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 438f6c2546e..d4d6583312c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -143,8 +143,8 @@
 
 .group-home-panel,
 .project-home-panel {
-  padding-top: $gl-padding;
-  padding-bottom: $gl-padding;
+  margin-top: $gl-padding;
+  margin-bottom: $gl-padding;
 
   .home-panel-avatar {
     width: $home-panel-title-row-height;
@@ -159,7 +159,7 @@
     font-weight: bold;
 
     .icon {
-      font-size: $gl-font-size-large;
+      vertical-align: -1px;
     }
 
     .home-panel-topic-list {
@@ -224,12 +224,6 @@
       font-size: $gl-font-size-large;
     }
   }
-
-  .notifications-btn {
-    .fa-bell {
-      margin-right: 0;
-    }
-  }
 }
 
 .nav > .project-buttons {
@@ -472,17 +466,9 @@
     margin-right: auto;
   }
 
-  a {
-    display: block;
-    width: 100%;
-    height: 100%;
-    padding-top: $gl-padding;
-    text-decoration: none;
-
-    &.disabled {
-      opacity: 0.3;
-      cursor: not-allowed;
-    }
+  a.disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
   }
 }
 
@@ -839,7 +825,7 @@
 }
 
 .repository-language-bar-tooltip-share {
-  color: $gray-400;
+  color: $gray-200;
 }
 
 pre.light-well {
@@ -1538,3 +1524,10 @@ pre.light-well {
     }
   }
 }
+
+@include media-breakpoint-down(xs) {
+  .fork-filtered-search {
+    width: 100%;
+    margin: $gl-spacing-scale-2 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index 6461d09bb47..a3b6cbdff25 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -48,7 +48,7 @@
 
   &.sortable-chosen .draggable-panel {
     background: $white;
-    box-shadow: 0 0 4px $gray-500;
+    box-shadow: 0 0 4px $gray-300;
   }
 
   .draggable-remove {
@@ -56,18 +56,13 @@
 
     .draggable-remove-link {
       cursor: pointer;
-      color: $gray-600;
+      color: $gray-400;
       background-color: $white;
     }
   }
 }
 
 .prometheus-graphs-header {
-  .monitor-environment-dropdown-header header,
-  .monitor-dashboard-dropdown-header header {
-    font-size: $gl-font-size;
-  }
-
   .monitor-environment-dropdown-menu,
   .monitor-dashboard-dropdown-menu {
     &.show {
@@ -117,7 +112,7 @@
 
 .prometheus-graph-cursor {
   position: absolute;
-  background: $gray-600;
+  background: $gray-400;
   width: 1px;
 }
 
@@ -290,7 +285,7 @@
       }
 
       > text {
-        fill: $gray-600;
+        fill: $gray-400;
         font-size: 10px;
       }
     }
@@ -341,3 +336,11 @@
   opacity: 0;
   pointer-events: all;
 }
+
+.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/pages/reports.scss b/app/assets/stylesheets/pages/reports.scss
index 56194f0af67..0c0605b0b3d 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/pages/reports.scss
@@ -77,7 +77,7 @@
   }
 
   &.neutral svg {
-    color: $gray-700;
+    color: $gray-500;
   }
 
   .ci-status-icon {
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 66d2f76c558..8ed6936475b 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -44,10 +44,6 @@
   .btn-default {
     color: $gl-text-color-secondary;
   }
-
-  .fa-pause {
-    font-size: 11px;
-  }
 }
 
 @include media-breakpoint-down(md) {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index d8084a20af9..1fc6ad62237 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -249,7 +249,7 @@ input[type='checkbox']:hover {
 .search-clear {
   position: absolute;
   right: 10px;
-  top: 10px;
+  top: 9px;
   padding: 0;
   color: $gray-darkest;
   line-height: 0;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index f1df9099d82..b82c638a5b7 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -183,7 +183,7 @@
 
     .option-description,
     .option-disabled-reason {
-      margin-left: 30px;
+      margin-left: 20px;
       color: $project-option-descr-color;
       margin-top: -5px;
     }
@@ -366,7 +366,8 @@
   margin-top: 1em;
 }
 
-.ci-variable-table {
+.ci-variable-table,
+.deploy-freeze-table {
   table {
     thead {
       border-bottom: 1px solid $white-normal;
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 4f3d6fb0d44..4ad2dcbe92f 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -12,8 +12,6 @@
   svg {
     height: 13px;
     width: 13px;
-    position: relative;
-    top: 2px;
     overflow: visible;
   }
 
@@ -38,7 +36,7 @@
   }
 
   &.ci-preparing {
-    @include status-color($gray-100, $gray-500, $gray-600);
+    @include status-color($gray-100, $gray-300, $gray-400);
   }
 
   &.ci-pending,
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index bbb37479fb0..c6f104a024b 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -143,6 +143,10 @@
       margin-bottom: 0;
     }
   }
+
+  .gl-label-scoped {
+    --label-inset-border: inset 0 0 0 1px currentColor;
+  }
 }
 
 @include media-breakpoint-down(sm) {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 22b5859e297..b6af395a802 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -138,12 +138,6 @@
   }
 
   .tree-item {
-    .file-icon,
-    .folder-icon {
-      position: relative;
-      top: 2px;
-    }
-
     .link-container {
       padding: 0;
 
diff --git a/app/assets/stylesheets/pages/users.scss b/app/assets/stylesheets/pages/users.scss
index 3b018c1e087..0863b573f75 100644
--- a/app/assets/stylesheets/pages/users.scss
+++ b/app/assets/stylesheets/pages/users.scss
@@ -25,8 +25,12 @@
   }
 
   .form-control {
-    width: 100%;
     padding-right: 35px;
+  }
+
+  .search-control-wrap,
+  .form-control {
+    width: 100%;
 
     @include media-breakpoint-up(sm) {
       width: 250px;