Merge remote-tracking branch 'origin/master' into 38542-application-control-panel-in-settings-page

58 files changed, 657 insertions, 295 deletions

diff --git a/app/assets/images/ci_favicons/dev/favicon_status_canceled.ico b/app/assets/images/ci_favicons/dev/favicon_status_canceled.ico
deleted file mode 100644
index 4af3582b60d..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_canceled.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_created.ico b/app/assets/images/ci_favicons/dev/favicon_status_created.ico
deleted file mode 100644
index 13639da2e8a..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_created.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_failed.ico b/app/assets/images/ci_favicons/dev/favicon_status_failed.ico
deleted file mode 100644
index 5f0e711b104..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_failed.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_manual.ico b/app/assets/images/ci_favicons/dev/favicon_status_manual.ico
deleted file mode 100644
index 8b1168a1267..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_manual.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_not_found.ico b/app/assets/images/ci_favicons/dev/favicon_status_not_found.ico
deleted file mode 100644
index ed19b69e1c5..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_not_found.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_pending.ico b/app/assets/images/ci_favicons/dev/favicon_status_pending.ico
deleted file mode 100644
index 5dfefd4cc5a..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_pending.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_running.ico b/app/assets/images/ci_favicons/dev/favicon_status_running.ico
deleted file mode 100644
index a41539c0e3e..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_running.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_skipped.ico b/app/assets/images/ci_favicons/dev/favicon_status_skipped.ico
deleted file mode 100644
index 2c1ae552b93..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_skipped.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_success.ico b/app/assets/images/ci_favicons/dev/favicon_status_success.ico
deleted file mode 100644
index 70f0ca61eca..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_success.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/dev/favicon_status_warning.ico b/app/assets/images/ci_favicons/dev/favicon_status_warning.ico
deleted file mode 100644
index db289e03eb1..00000000000
--- a/app/assets/images/ci_favicons/dev/favicon_status_warning.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_canceled.ico b/app/assets/images/ci_favicons/favicon_status_canceled.ico
deleted file mode 100644
index 23adcffff50..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_canceled.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_canceled.png b/app/assets/images/ci_favicons/favicon_status_canceled.png
new file mode 100644
index 00000000000..8adaa9c600b
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_canceled.png
diff --git a/app/assets/images/ci_favicons/favicon_status_created.ico b/app/assets/images/ci_favicons/favicon_status_created.ico
deleted file mode 100644
index f9d93b390d8..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_created.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_created.png b/app/assets/images/ci_favicons/favicon_status_created.png
new file mode 100644
index 00000000000..ca788dd0034
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_created.png
diff --git a/app/assets/images/ci_favicons/favicon_status_failed.ico b/app/assets/images/ci_favicons/favicon_status_failed.ico
deleted file mode 100644
index 28a22ebf724..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_failed.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_failed.png b/app/assets/images/ci_favicons/favicon_status_failed.png
new file mode 100644
index 00000000000..93f1e2772fd
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_failed.png
diff --git a/app/assets/images/ci_favicons/favicon_status_manual.ico b/app/assets/images/ci_favicons/favicon_status_manual.ico
deleted file mode 100644
index dbbf1abf30c..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_manual.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_manual.png b/app/assets/images/ci_favicons/favicon_status_manual.png
new file mode 100644
index 00000000000..c926062c806
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_manual.png
diff --git a/app/assets/images/ci_favicons/favicon_status_not_found.ico b/app/assets/images/ci_favicons/favicon_status_not_found.ico
deleted file mode 100644
index 49b9b232dd1..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_not_found.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_not_found.png b/app/assets/images/ci_favicons/favicon_status_not_found.png
new file mode 100644
index 00000000000..df3049315a9
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_not_found.png
diff --git a/app/assets/images/ci_favicons/favicon_status_pending.ico b/app/assets/images/ci_favicons/favicon_status_pending.ico
deleted file mode 100644
index 05962f3f148..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_pending.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_pending.png b/app/assets/images/ci_favicons/favicon_status_pending.png
new file mode 100644
index 00000000000..f7d67d4a230
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_pending.png
diff --git a/app/assets/images/ci_favicons/favicon_status_running.ico b/app/assets/images/ci_favicons/favicon_status_running.ico
deleted file mode 100644
index 7fa3d4d48d4..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_running.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_running.png b/app/assets/images/ci_favicons/favicon_status_running.png
new file mode 100644
index 00000000000..ff4167c4b20
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_running.png
diff --git a/app/assets/images/ci_favicons/favicon_status_skipped.ico b/app/assets/images/ci_favicons/favicon_status_skipped.ico
deleted file mode 100644
index b0c26b62068..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_skipped.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_skipped.png b/app/assets/images/ci_favicons/favicon_status_skipped.png
new file mode 100644
index 00000000000..a9c36464b69
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_skipped.png
diff --git a/app/assets/images/ci_favicons/favicon_status_success.ico b/app/assets/images/ci_favicons/favicon_status_success.ico
deleted file mode 100644
index b150960b5be..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_success.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_success.png b/app/assets/images/ci_favicons/favicon_status_success.png
new file mode 100644
index 00000000000..bcc30c73f5f
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_success.png
diff --git a/app/assets/images/ci_favicons/favicon_status_warning.ico b/app/assets/images/ci_favicons/favicon_status_warning.ico
deleted file mode 100644
index 7e71d71684d..00000000000
--- a/app/assets/images/ci_favicons/favicon_status_warning.ico
+++ /dev/null
diff --git a/app/assets/images/ci_favicons/favicon_status_warning.png b/app/assets/images/ci_favicons/favicon_status_warning.png
new file mode 100644
index 00000000000..6db3b0280f5
--- /dev/null
+++ b/app/assets/images/ci_favicons/favicon_status_warning.png
diff --git a/app/assets/images/favicon-blue.png b/app/assets/images/favicon-blue.png
new file mode 100644
index 00000000000..2229fe79462
--- /dev/null
+++ b/app/assets/images/favicon-blue.png
diff --git a/app/assets/images/favicon-yellow.ico b/app/assets/images/favicon-yellow.ico
deleted file mode 100644
index b650f277fb6..00000000000
--- a/app/assets/images/favicon-yellow.ico
+++ /dev/null
diff --git a/app/assets/images/favicon-yellow.png b/app/assets/images/favicon-yellow.png
new file mode 100644
index 00000000000..2d5289818b4
--- /dev/null
+++ b/app/assets/images/favicon-yellow.png
diff --git a/app/assets/images/favicon.ico b/app/assets/images/favicon.ico
deleted file mode 100644
index 3479cbbb46f..00000000000
--- a/app/assets/images/favicon.ico
+++ /dev/null
diff --git a/app/assets/images/favicon.png b/app/assets/images/favicon.png
new file mode 100644
index 00000000000..845e0ec34a5
--- /dev/null
+++ b/app/assets/images/favicon.png
diff --git a/app/assets/javascripts/group_label_subscription.js b/app/assets/javascripts/group_label_subscription.js
index 5648cb9a888..d33e3a37580 100644
--- a/app/assets/javascripts/group_label_subscription.js
+++ b/app/assets/javascripts/group_label_subscription.js
@@ -1,7 +1,12 @@
 import $ from 'jquery';
+import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
-import { __ } from './locale';
+
+const tooltipTitles = {
+  group: __('Unsubscribe at group level'),
+  project: __('Unsubscribe at project level'),
+};
 
 export default class GroupLabelSubscription {
   constructor(container) {
@@ -35,6 +40,7 @@ export default class GroupLabelSubscription {
     this.$unsubscribeButtons.attr('data-url', url);
 
     axios.post(url)
+      .then(() => GroupLabelSubscription.setNewTooltip($btn))
       .then(() => this.toggleSubscriptionButtons())
       .catch(() => flash(__('There was an error when subscribing to this label.')));
   }
@@ -44,4 +50,14 @@ export default class GroupLabelSubscription {
     this.$subscribeButtons.toggleClass('hidden');
     this.$unsubscribeButtons.toggleClass('hidden');
   }
+
+  static setNewTooltip($button) {
+    if (!$button.hasClass('js-subscribe-button')) return;
+
+    const type = $button.hasClass('js-group-level') ? 'group' : 'project';
+    const newTitle = tooltipTitles[type];
+
+    $('.js-unsubscribe-button', $button.closest('.label-actions-list'))
+      .tooltip('hide').attr('title', newTitle).tooltip('_fixTitle');
+  }
 }
diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js
index 8c3de6e4045..8b01024b7d4 100644
--- a/app/assets/javascripts/label_manager.js
+++ b/app/assets/javascripts/label_manager.js
@@ -13,6 +13,7 @@ export default class LabelManager {
     this.otherLabels = otherLabels || $('.js-other-labels');
     this.errorMessage = 'Unable to update label prioritization at this time';
     this.emptyState = document.querySelector('#js-priority-labels-empty-state');
+    this.$badgeItemTemplate = $('#js-badge-item-template');
     this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
       filter: '.empty-message',
       forceFallback: true,
@@ -63,7 +64,11 @@ export default class LabelManager {
       $target = this.otherLabels;
       $from = this.prioritizedLabels;
     }
-    $label.detach().appendTo($target);
+
+    const $detachedLabel = $label.detach();
+    this.toggleLabelPriorityBadge($detachedLabel, action);
+    $detachedLabel.appendTo($target);
+
     if ($from.find('li').length) {
       $from.find('.empty-message').removeClass('hidden');
     }
@@ -88,6 +93,14 @@ export default class LabelManager {
     }
   }
 
+  toggleLabelPriorityBadge($label, action) {
+    if (action === 'remove') {
+      $('.js-priority-badge', $label).remove();
+    } else {
+      $('.label-links', $label).append(this.$badgeItemTemplate.clone().html());
+    }
+  }
+
   onPrioritySortUpdate() {
     this.savePrioritySort()
       .catch(() => flash(this.errorMessage));
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 8b5445d012b..d55d0585031 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -384,6 +384,49 @@ export const backOff = (fn, timeout = 60000) => {
   });
 };
 
+export const createOverlayIcon = (iconPath, overlayPath) => {
+  const faviconImage = document.createElement('img');
+
+  return new Promise((resolve) => {
+    faviconImage.onload = () => {
+      const size = 32;
+
+      const canvas = document.createElement('canvas');
+      canvas.width = size;
+      canvas.height = size;
+
+      const context = canvas.getContext('2d');
+      context.clearRect(0, 0, size, size);
+      context.drawImage(
+        faviconImage, 0, 0, faviconImage.width, faviconImage.height, 0, 0, size, size,
+      );
+
+      const overlayImage = document.createElement('img');
+      overlayImage.onload = () => {
+        context.drawImage(
+          overlayImage, 0, 0, overlayImage.width, overlayImage.height, 0, 0, size, size,
+        );
+
+        const faviconWithOverlayUrl = canvas.toDataURL();
+
+        resolve(faviconWithOverlayUrl);
+      };
+      overlayImage.src = overlayPath;
+    };
+    faviconImage.src = iconPath;
+  });
+};
+
+export const setFaviconOverlay = (overlayPath) => {
+  const faviconEl = document.getElementById('favicon');
+
+  if (!faviconEl) { return null; }
+
+  const iconPath = faviconEl.getAttribute('data-original-href');
+
+  return createOverlayIcon(iconPath, overlayPath).then(faviconWithOverlayUrl => faviconEl.setAttribute('href', faviconWithOverlayUrl));
+};
+
 export const setFavicon = (faviconPath) => {
   const faviconEl = document.getElementById('favicon');
   if (faviconEl && faviconPath) {
@@ -393,8 +436,9 @@ export const setFavicon = (faviconPath) => {
 
 export const resetFavicon = () => {
   const faviconEl = document.getElementById('favicon');
-  const originalFavicon = faviconEl ? faviconEl.getAttribute('href') : null;
+
   if (faviconEl) {
+    const originalFavicon = faviconEl.getAttribute('data-original-href');
     faviconEl.setAttribute('href', originalFavicon);
   }
 };
@@ -403,10 +447,9 @@ export const setCiStatusFavicon = pageUrl =>
   axios.get(pageUrl)
     .then(({ data }) => {
       if (data && data.favicon) {
-        setFavicon(data.favicon);
-      } else {
-        resetFavicon();
+        return setFaviconOverlay(data.favicon);
       }
+      return resetFavicon();
     })
     .catch(resetFavicon);
 
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 0ff23bbb061..f850e818bdf 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -270,6 +270,17 @@ export const totalDaysInMonth = date => {
 };
 
 /**
+ * Returns number of days in a quarter from provided
+ * months array.
+ *
+ * @param {Array} quarter
+ */
+export const totalDaysInQuarter = quarter => quarter.reduce(
+  (acc, month) => acc + totalDaysInMonth(month),
+  0,
+);
+
+/**
  * Returns list of Dates referring to Sundays of the month
  * based on provided date
  *
@@ -309,42 +320,27 @@ export const getSundays = date => {
 };
 
 /**
- * Returns list of Dates representing a timeframe of Months from month of provided date (inclusive)
- * up to provided length
- *
- * For eg;
- *    If current month is January 2018 and `length` provided is `6`
- *    Then this method will return list of Date objects as follows;
- *
- *    [ October 2017, November 2017, December 2017, January 2018, February 2018, March 2018 ]
- *
- *    If current month is March 2018 and `length` provided is `3`
- *    Then this method will return list of Date objects as follows;
- *
- *    [ February 2018, March 2018, April 2018 ]
+ * Returns list of Dates representing a timeframe of months from startDate and length
  *
+ * @param {Date} startDate
  * @param {Number} length
- * @param {Date} date
  */
-export const getTimeframeWindow = (length, date) => {
-  if (!length) {
+export const getTimeframeWindowFrom = (startDate, length) => {
+  if (!(startDate instanceof Date) || !length) {
     return [];
   }
 
-  const currentDate = date instanceof Date ? date : new Date();
-  const currentMonthIndex = Math.floor(length / 2);
-  const timeframe = [];
-
-  // Move date object backward to the first month of timeframe
-  currentDate.setDate(1);
-  currentDate.setMonth(currentDate.getMonth() - currentMonthIndex);
-
-  // Iterate and update date for the size of length
+  // Iterate and set date for the size of length
   // and push date reference to timeframe list
-  for (let i = 0; i < length; i += 1) {
-    timeframe.push(new Date(currentDate.getTime()));
-    currentDate.setMonth(currentDate.getMonth() + 1);
-  }
+  const timeframe = new Array(length)
+                      .fill()
+                      .map(
+                        (val, i) => new Date(
+                          startDate.getFullYear(),
+                          startDate.getMonth() + i,
+                          1,
+                        ),
+                      );
 
   // Change date of last timeframe item to last date of the month
   timeframe[length - 1].setDate(totalDaysInMonth(timeframe[length - 1]));
@@ -352,6 +348,29 @@ export const getTimeframeWindow = (length, date) => {
   return timeframe;
 };
 
+/**
+ * Returns count of day within current quarter from provided date
+ * and array of months for the quarter
+ *
+ * Eg;
+ *   If date is 15 Feb 2018
+ *   and quarter is [Jan, Feb, Mar]
+ *
+ *   Then 15th Feb is 46th day of the quarter
+ *   Where 31 (days in Jan) + 15 (date of Feb).
+ *
+ * @param {Date} date
+ * @param {Array} quarter
+ */
+export const dayInQuarter = (date, quarter) => quarter.reduce((acc, month) => {
+  if (date.getMonth() > month.getMonth()) {
+    return acc + totalDaysInMonth(month);
+  } else if (date.getMonth() === month.getMonth()) {
+    return acc + date.getDate();
+  }
+  return acc + 0;
+}, 0);
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index dd17544b656..72b72f4247d 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -85,9 +85,9 @@ export function redirectTo(url) {
 }
 
 export function webIDEUrl(route = undefined) {
-  let returnUrl = `${gon.relative_url_root}/-/ide/`;
+  let returnUrl = `${gon.relative_url_root || ''}/-/ide/`;
   if (route) {
-    returnUrl += `project${route}`;
+    returnUrl += `project${route.replace(new RegExp(`^${gon.relative_url_root || ''}`), '')}`;
   }
   return returnUrl;
 }
diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js
index 6f06944ebb6..9049f87e037 100644
--- a/app/assets/javascripts/project_label_subscription.js
+++ b/app/assets/javascripts/project_label_subscription.js
@@ -3,6 +3,17 @@ import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
 
+const tooltipTitles = {
+  group: {
+    subscribed: __('Unsubscribe at group level'),
+    unsubscribed: __('Subscribe at group level'),
+  },
+  project: {
+    subscribed: __('Unsubscribe at project level'),
+    unsubscribed: __('Subscribe at project level'),
+  },
+};
+
 export default class ProjectLabelSubscription {
   constructor(container) {
     this.$container = $(container);
@@ -15,12 +26,10 @@ export default class ProjectLabelSubscription {
     event.preventDefault();
 
     const $btn = $(event.currentTarget);
-    const $span = $btn.find('span');
     const url = $btn.attr('data-url');
     const oldStatus = $btn.attr('data-status');
 
     $btn.addClass('disabled');
-    $span.toggleClass('hidden');
 
     axios.post(url).then(() => {
       let newStatus;
@@ -32,21 +41,28 @@ export default class ProjectLabelSubscription {
         [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
       }
 
-      $span.toggleClass('hidden');
       $btn.removeClass('disabled');
 
       this.$buttons.attr('data-status', newStatus);
       this.$buttons.find('> span').text(newAction);
 
-      this.$buttons.map((button) => {
+      this.$buttons.map((i, button) => {
         const $button = $(button);
+        const originalTitle = $button.attr('data-original-title');
 
-        if ($button.attr('data-original-title')) {
-          $button.tooltip('hide').attr('data-original-title', newAction).tooltip('_fixTitle');
+        if (originalTitle) {
+          ProjectLabelSubscription.setNewTitle($button, originalTitle, newStatus, newAction);
         }
 
         return button;
       });
     }).catch(() => flash(__('There was an error subscribing to this label.')));
   }
+
+  static setNewTitle($button, originalTitle, newStatus) {
+    const type = /group/.test(originalTitle) ? 'group' : 'project';
+    const newTitle = tooltipTitles[type][newStatus];
+
+    $button.attr('title', newTitle).tooltip('_fixTitle');
+  }
 }
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
index ab7d2d41ece..6ed35c0a981 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_machine_type_dropdown.vue
@@ -89,14 +89,13 @@ export default {
   <div>
     <div
       class="js-gcp-machine-type-dropdown dropdown"
-      :class="{ 'gl-show-field-errors': hasErrors }"
     >
       <dropdown-hidden-input
         :name="fieldName"
         :value="selectedMachineType"
       />
       <dropdown-button
-        :class="{ 'gl-field-error-outline': hasErrors }"
+        :class="{ 'border-danger': hasErrors }"
         :is-disabled="isDisabled"
         :is-loading="isLoading"
         :toggle-text="toggleText"
@@ -132,8 +131,11 @@ export default {
       </div>
     </div>
     <span
-      class="form-text text-muted"
-      :class="{ 'gl-field-error': hasErrors }"
+      class="form-text"
+      :class="{
+        'text-danger': hasErrors,
+        'text-muted': !hasErrors
+      }"
       v-if="hasErrors"
     >
       {{ errorMessage }}
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
index 25350ef0fa9..542d4d21a22 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_project_id_dropdown.vue
@@ -147,7 +147,6 @@ export default {
   <div>
     <div
       class="js-gcp-project-id-dropdown dropdown"
-      :class="{ 'gl-show-field-errors': hasErrors }"
     >
       <dropdown-hidden-input
         :name="fieldName"
@@ -155,7 +154,7 @@ export default {
       />
       <dropdown-button
         :class="{
-          'gl-field-error-outline': hasErrors,
+          'border-danger': hasErrors,
           'read-only': hasOneProject
         }"
         :is-disabled="isDisabled"
@@ -193,8 +192,11 @@ export default {
       </div>
     </div>
     <span
-      class="form-text text-muted"
-      :class="{ 'gl-field-error': hasErrors }"
+      class="form-text"
+      :class="{
+        'text-danger': hasErrors,
+        'text-muted': !hasErrors
+      }"
       v-html="helpText"
     ></span>
   </div>
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
index 8ee4eefcd91..bc28f8b5df4 100644
--- a/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
+++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/components/gke_zone_dropdown.vue
@@ -63,14 +63,13 @@ export default {
   <div>
     <div
       class="js-gcp-zone-dropdown dropdown"
-      :class="{ 'gl-show-field-errors': hasErrors }"
     >
       <dropdown-hidden-input
         :name="fieldName"
         :value="selectedZone"
       />
       <dropdown-button
-        :class="{ 'gl-field-error-outline': hasErrors }"
+        :class="{ 'border-danger': hasErrors }"
         :is-disabled="isDisabled"
         :is-loading="isLoading"
         :toggle-text="toggleText"
@@ -106,8 +105,11 @@ export default {
       </div>
     </div>
     <span
-      class="form-text text-muted"
-      :class="{ 'gl-field-error': hasErrors }"
+      class="form-text"
+      :class="{
+        'text-danger': hasErrors,
+        'text-muted': !hasErrors
+      }"
       v-if="hasErrors"
     >
       {{ errorMessage }}
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index c20d07a169d..098e8178265 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -36,7 +36,7 @@ import {
   notify,
   SourceBranchRemovalStatus,
 } from './dependencies';
-import { setFavicon } from '../lib/utils/common_utils';
+import { setFaviconOverlay } from '../lib/utils/common_utils';
 
 export default {
   el: '#js-vue-mr-widget',
@@ -159,8 +159,9 @@ export default {
     },
     setFaviconHelper() {
       if (this.mr.ciStatusFaviconPath) {
-        setFavicon(this.mr.ciStatusFaviconPath);
+        return setFaviconOverlay(this.mr.ciStatusFaviconPath);
       }
+      return Promise.resolve();
     },
     fetchDeployments() {
       return this.service.fetchDeployments()
diff --git a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
index 9ffbaae3ea5..9bca1993ccc 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
+++ b/app/assets/javascripts/vue_shared/components/file_icon/file_icon_map.js
@@ -513,7 +513,7 @@ const fileNameIcons = {
   'credits.md': 'credits',
   'credits.md.rendered': 'credits',
   '.flowconfig': 'flow',
-  'favicon.ico': 'favicon',
+  'favicon.png': 'favicon',
   'karma.conf.js': 'karma',
   'karma.conf.ts': 'karma',
   'karma.conf.coffee': 'karma',
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 3785aaa43f0..79f580546c3 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -251,3 +251,13 @@ table {
 pre code {
   white-space: pre-wrap;
 }
+
+.alert-danger {
+  background-color: $red-500;
+  border-color: $red-500;
+  color: $white-light;
+
+  h4 {
+    color: $white-light;
+  }
+}
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 0ee5748952a..551a7e852ae 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -299,6 +299,7 @@
     height: 14px;
     width: 14px;
     vertical-align: middle;
+    margin-bottom: 4px;
   }
 
   .dropdown-toggle-text {
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 14dd3879bdc..b40d02f381a 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -3,26 +3,26 @@
  */
 
 @mixin gitlab-theme(
-  $color-100,
-  $color-200,
-  $color-500,
-  $color-700,
-  $color-800,
-  $color-900,
+  $location-badge-color,
+  $search-and-nav-links,
+  $active-tab-border,
+  $border-and-box-shadow,
+  $sidebar-text,
+  $nav-svg-color,
   $color-alternate
 ) {
   // Header
 
   .navbar-gitlab {
-    background-color: $color-900;
+    background-color: $nav-svg-color;
 
     .navbar-collapse {
-      color: $color-200;
+      color: $search-and-nav-links;
     }
 
     .container-fluid {
       .navbar-toggler {
-        border-left: 1px solid lighten($color-700, 10%);
+        border-left: 1px solid lighten($border-and-box-shadow, 10%);
       }
     }
 
@@ -31,40 +31,40 @@
       > li {
         > a:hover,
         > a:focus {
-          background-color: rgba($color-200, 0.2);
+          background-color: rgba($search-and-nav-links, 0.2);
         }
 
         &.active > a,
         &.dropdown.show > a {
-          color: $color-900;
+          color: $nav-svg-color;
           background-color: $color-alternate;
         }
 
         &.line-separator {
-          border-left: 1px solid rgba($color-200, 0.2);
+          border-left: 1px solid rgba($search-and-nav-links, 0.2);
         }
       }
     }
 
     .navbar-sub-nav {
-      color: $color-200;
+      color: $search-and-nav-links;
     }
 
     .nav {
       > li {
-        color: $color-200;
+        color: $search-and-nav-links;
 
         > a {
           &.header-user-dropdown-toggle {
             .header-user-avatar {
-              border-color: $color-200;
+              border-color: $search-and-nav-links;
             }
           }
 
           &:hover,
           &:focus {
             @include media-breakpoint-up(sm) {
-              background-color: rgba($color-200, 0.2);
+              background-color: rgba($search-and-nav-links, 0.2);
             }
 
             svg {
@@ -75,12 +75,12 @@
 
         &.active > a,
         &.dropdown.show > a {
-          color: $color-900;
+          color: $nav-svg-color;
           background-color: $color-alternate;
 
           &:hover {
             svg {
-              fill: $color-900;
+              fill: $nav-svg-color;
             }
           }
         }
@@ -88,7 +88,7 @@
         .impersonated-user,
         .impersonated-user:hover {
           svg {
-            fill: $color-900;
+            fill: $nav-svg-color;
           }
         }
       }
@@ -99,34 +99,34 @@
     > a {
       &:hover,
       &:focus {
-        background-color: rgba($color-200, 0.2);
+        background-color: rgba($search-and-nav-links, 0.2);
       }
     }
   }
 
   .search {
     form {
-      background-color: rgba($color-200, 0.2);
+      background-color: rgba($search-and-nav-links, 0.2);
 
       &:hover {
-        background-color: rgba($color-200, 0.3);
+        background-color: rgba($search-and-nav-links, 0.3);
       }
     }
 
     .location-badge {
-      color: $color-100;
-      background-color: rgba($color-200, 0.1);
-      border-right: 1px solid $color-800;
+      color: $location-badge-color;
+      background-color: rgba($search-and-nav-links, 0.1);
+      border-right: 1px solid $sidebar-text;
     }
 
     .search-input::placeholder {
-      color: rgba($color-200, 0.8);
+      color: rgba($search-and-nav-links, 0.8);
     }
 
     .search-input-wrap {
       .search-icon,
       .clear-icon {
-        fill: rgba($color-200, 0.8);
+        fill: rgba($search-and-nav-links, 0.8);
       }
     }
 
@@ -141,38 +141,34 @@
 
       .search-input-wrap {
         .search-icon {
-          fill: rgba($color-200, 0.8);
+          fill: rgba($search-and-nav-links, 0.8);
         }
       }
     }
   }
 
-  .btn-sign-in {
-    background-color: $color-100;
-    color: $color-900;
-  }
 
   // Sidebar
   .nav-sidebar li.active {
-    box-shadow: inset 4px 0 0 $color-700;
+    box-shadow: inset 4px 0 0 $border-and-box-shadow;
 
     > a {
-      color: $color-800;
+      color: $sidebar-text;
     }
 
     svg {
-      fill: $color-800;
+      fill: $sidebar-text;
     }
   }
 
   .sidebar-top-level-items > li.active .badge.badge-pill {
-    color: $color-800;
+    color: $sidebar-text;
   }
 
   .nav-links li {
     &.active a,
     a.active {
-      border-bottom: 2px solid $color-500;
+      border-bottom: 2px solid $active-tab-border;
 
       .badge.badge-pill {
         font-weight: $gl-font-weight-bold;
@@ -181,27 +177,27 @@
   }
 
   .branch-header-title {
-    color: $color-700;
+    color: $border-and-box-shadow;
   }
 
   .ide-file-list .file.file-active {
-    color: $color-700;
+    color: $border-and-box-shadow;
   }
 
   .ide-sidebar-link {
     &.active {
-      color: $color-700;
-      box-shadow: inset 3px 0 $color-700;
+      color: $border-and-box-shadow;
+      box-shadow: inset 3px 0 $border-and-box-shadow;
 
       &.is-right {
-        box-shadow: inset -3px 0 $color-700;
+        box-shadow: inset -3px 0 $border-and-box-shadow;
       }
     }
   }
 }
 
 body {
-  &.ui_indigo {
+  &.ui-indigo {
     @include gitlab-theme(
       $indigo-100,
       $indigo-200,
@@ -213,19 +209,19 @@ body {
     );
   }
 
-  &.ui_dark {
+  &.ui-light-indigo {
     @include gitlab-theme(
-      $theme-gray-100,
-      $theme-gray-200,
-      $theme-gray-500,
-      $theme-gray-700,
-      $theme-gray-800,
-      $theme-gray-900,
+      $indigo-100,
+      $indigo-200,
+      $indigo-500,
+      $indigo-500,
+      $indigo-700,
+      $indigo-700,
       $white-light
     );
   }
 
-  &.ui_blue {
+  &.ui-blue {
     @include gitlab-theme(
       $theme-blue-100,
       $theme-blue-200,
@@ -237,7 +233,19 @@ body {
     );
   }
 
-  &.ui_green {
+  &.ui-light-blue {
+    @include gitlab-theme(
+      $theme-light-blue-100,
+      $theme-light-blue-200,
+      $theme-light-blue-500,
+      $theme-light-blue-500,
+      $theme-light-blue-700,
+      $theme-light-blue-700,
+      $white-light
+    );
+  }
+
+  &.ui-green {
     @include gitlab-theme(
       $theme-green-100,
       $theme-green-200,
@@ -249,7 +257,55 @@ body {
     );
   }
 
-  &.ui_light {
+  &.ui-light-green {
+    @include gitlab-theme(
+      $theme-green-100,
+      $theme-green-200,
+      $theme-green-500,
+      $theme-green-500,
+      $theme-light-green-700,
+      $theme-light-green-700,
+      $white-light
+    );
+  }
+
+  &.ui-red {
+    @include gitlab-theme(
+      $theme-red-100,
+      $theme-red-200,
+      $theme-red-500,
+      $theme-red-700,
+      $theme-red-800,
+      $theme-red-900,
+      $white-light
+    );
+  }
+
+  &.ui-light-red {
+    @include gitlab-theme(
+      $theme-light-red-100,
+      $theme-light-red-200,
+      $theme-light-red-500,
+      $theme-light-red-500,
+      $theme-light-red-700,
+      $theme-light-red-700,
+      $white-light
+    );
+  }
+
+  &.ui-dark {
+    @include gitlab-theme(
+      $theme-gray-100,
+      $theme-gray-200,
+      $theme-gray-500,
+      $theme-gray-700,
+      $theme-gray-800,
+      $theme-gray-900,
+      $white-light
+    );
+  }
+
+  &.ui-light {
     @include gitlab-theme(
       $theme-gray-900,
       $theme-gray-700,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 094134b63b0..6fbc624dee4 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -139,6 +139,8 @@
     }
 
     .nav {
+      flex-wrap: nowrap;
+
       > li:not(.d-none) a {
         @include media-breakpoint-down(xs) {
           margin-left: 0;
@@ -158,11 +160,12 @@
     }
 
     .navbar-toggler {
+      position: relative;
       right: -10px;
       border-radius: 0;
       min-width: 45px;
       padding: 0;
-      margin-right: -7px;
+      margin: $gl-padding-8 -7px $gl-padding-8 0;
       font-size: 14px;
       text-align: center;
       color: currentColor;
@@ -186,6 +189,7 @@
         display: -webkit-flex;
         display: flex;
         padding-right: 10px;
+        flex-direction: row;
       }
 
       li {
@@ -290,6 +294,10 @@
       margin: 8px;
     }
   }
+
+  .dropdown-menu {
+    position: absolute;
+  }
 }
 
 .navbar-sub-nav {
@@ -437,6 +445,8 @@
 }
 
 .btn-sign-in {
+  background-color: $indigo-100;
+  color: $indigo-900;
   margin-top: 3px;
   font-weight: $gl-font-weight-bold;
 
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index a10bd1544c5..6e1758d7677 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -1,5 +1,6 @@
 .table-holder {
   margin: 0;
+  overflow: auto;
 }
 
 table {
@@ -38,6 +39,11 @@ table {
         &.wide {
           width: 55%;
         }
+
+        &.table-th-transparent {
+          background: none;
+          color: $gl-text-color-secondary;
+        }
       }
 
       td {
@@ -45,9 +51,86 @@ table {
       }
     }
   }
+
+  &.responsive-table {
+    @include media-breakpoint-down(sm) {
+      thead {
+        display: none;
+      }
+
+      td {
+        display: block;
+        color: $gl-text-color-secondary;
+      }
+
+      tbody td.responsive-table-cell {
+        padding: $gl-padding 0;
+        width: 100%;
+        display: flex;
+        text-align: right;
+        align-items: center;
+        justify-content: space-between;
+
+        &[data-column]::before {
+          content: attr(data-column);
+          display: block;
+          text-align: left;
+          padding-right: $gl-padding;
+          color: $gl-text-color-secondary;
+        }
+
+        &:not([data-column]) {
+          flex-direction: row-reverse;
+        }
+      }
+
+      tr.responsive-table-border-start,
+      tr.responsive-table-border-end {
+        display: block;
+        border: solid $gl-text-color-quaternary;
+        padding-left: 0;
+        padding-right: 0;
+
+        > td {
+          border-color: $gl-text-color-quaternary;
+
+          &,
+          &:last-child {
+            padding-left: $gl-padding;
+            padding-right: $gl-padding;
+          }
+        }
+      }
+
+      tr.responsive-table-border-start {
+        border-width: 1px 1px 0;
+        border-radius: $border-radius-default $border-radius-default 0 0;
+        padding-top: 0;
+        padding-bottom: 0;
+
+        > td:first-child {
+          border-top: 0; // always have the <table> top border
+        }
+
+        > td:last-child {
+          border-bottom: 1px solid $gl-text-color-quaternary;
+        }
+      }
+
+      tr.responsive-table-border-end {
+        border-width: 0 1px 1px;
+        border-radius: 0 0 $border-radius-default $border-radius-default;
+        margin-bottom: 2 * $gl-padding;
+
+        > :last-child {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
 }
 
-.responsive-table {
+.responsive-table:not(table) {
   @include media-breakpoint-down(sm) {
     th {
       width: 100%;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 946223cfff0..dd7374c503e 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -117,6 +117,15 @@ $theme-blue-800: #25496e;
 $theme-blue-900: #1a3652;
 $theme-blue-950: #0f2235;
 
+$theme-light-blue-50: #f2f7fc;
+$theme-light-blue-100: #ebf1f7;
+$theme-light-blue-200: #c9dcf2;
+$theme-light-blue-300: #83abd4;
+$theme-light-blue-400: #4d86bf;
+$theme-light-blue-500: #367cc2;
+$theme-light-blue-600: #3771ab;
+$theme-light-blue-700: #2261a1;
+
 $theme-green-50: #f2faf6;
 $theme-green-100: #e4f3ea;
 $theme-green-200: #c0dfcd;
@@ -129,6 +138,29 @@ $theme-green-800: #145d33;
 $theme-green-900: #0d4524;
 $theme-green-950: #072d16;
 
+$theme-light-green-700: #156b39;
+
+$theme-red-50: #fcf4f2;
+$theme-red-100: #fae9e6;
+$theme-red-200: #ebcac5;
+$theme-red-300: #d99b91;
+$theme-red-400: #b0655a;
+$theme-red-500: #ad4a3b;
+$theme-red-600: #9e4133;
+$theme-red-700: #912f20;
+$theme-red-800: #78291d;
+$theme-red-900: #691a16;
+$theme-red-950: #36140f;
+
+$theme-light-red-50: #fff6f5;
+$theme-light-red-100: #fae2de;
+$theme-light-red-200: #f7d5d0;
+$theme-light-red-300: #d9796a;
+$theme-light-red-400: #cf604e;
+$theme-light-red-500: #c24b38;
+$theme-light-red-600: #b03927;
+$theme-light-red-700: #a62e21;
+
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 $almost-black: #242424;
@@ -776,3 +808,5 @@ $modal-body-height: 134px;
 Prometheus
 */
 $prometheus-table-row-highlight-color: $theme-gray-100;
+
+$priority-label-empty-state-width: 114px;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 1c3d312f7ac..b2416a3d5bc 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -282,9 +282,6 @@
   box-shadow: 0 1px 2px $issue-boards-card-shadow;
   list-style: none;
 
-  // as a fallback, hide overflow content so that dragging and dropping still works
-  overflow: hidden;
-
   &:not(:last-child) {
     margin-bottom: 5px;
   }
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 9213ccd4cdf..f030189af06 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -12,26 +12,22 @@
 @keyframes blinking-dots {
   0% {
     background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
-      24px 0 0 0 rgba($white-light, 0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 
   25% {
     background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light, 2),
-      24px 0 0 0 rgba($white-light, 0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 
   75% {
     background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
-      24px 0 0 0 rgba($white-light, 1);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 1);
   }
 
   100% {
     background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2),
-      24px 0 0 0 rgba($white-light, 0.2);
+    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
   }
 }
 
@@ -71,6 +67,10 @@
     .bash {
       display: block;
     }
+
+    &.build-trace-rounded {
+      border-radius: $border-radius-base;
+    }
   }
 
   .top-bar {
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 25f011a534b..785df23a355 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -57,69 +57,8 @@
   border-bottom-left-radius: $border-radius-base;
 }
 
-.label-row {
-  .label-name {
-    display: inline-block;
-    margin-bottom: 10px;
-
-    @include media-breakpoint-up(sm) {
-      width: 200px;
-      margin-left: $gl-padding * 2;
-      margin-bottom: 0;
-    }
-
-    .badge {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
-    }
-  }
-
-  .label-type {
-    display: block;
-    margin-bottom: 10px;
-    margin-left: 50px;
-
-    @include media-breakpoint-up(sm) {
-      display: inline-block;
-      width: 100px;
-      margin-left: 10px;
-      margin-bottom: 0;
-      vertical-align: top;
-    }
-  }
-
-  .label-description {
-    display: block;
-    margin-bottom: 10px;
-
-    .description-text {
-      margin-bottom: $gl-padding;
-    }
-
-    a {
-      color: $blue-600;
-    }
-
-    @include media-breakpoint-up(sm) {
-      display: inline-block;
-      max-width: 50%;
-      margin-left: 10px;
-      margin-bottom: 0;
-      vertical-align: top;
-    }
-  }
-
-  .badge {
-    padding: 4px $grid-size;
-    font-size: $label-font-size;
-    position: relative;
-    top: ($grid-size / 2);
-  }
-}
-
 .color-label {
-  padding: 0 $grid-size;
+  padding: $gl-padding-4 $grid-size;
   line-height: 16px;
   border-radius: $label-border-radius;
   color: $white-light;
@@ -133,26 +72,29 @@
 }
 
 .manage-labels-list {
-  @media(min-width: map-get($grid-breakpoints, md)) {
-    &.content-list li {
-      padding: $gl-padding 0;
-    }
-  }
-
   > li:not(.empty-message):not(.is-not-draggable) {
     background-color: $white-light;
-    cursor: move;
-    cursor: -webkit-grab;
-    cursor: -moz-grab;
-
-    &:active {
-      cursor: -webkit-grabbing;
-      cursor: -moz-grabbing;
-    }
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    padding: $gl-padding;
+    border-radius: $border-radius-default;
 
     &.sortable-ghost {
       opacity: 0.3;
     }
+
+    .prioritized-labels & {
+      box-shadow: 0 1px 2px $issue-boards-card-shadow;
+      cursor: move;
+      cursor: -webkit-grab;
+      cursor: -moz-grab;
+
+      &:active {
+        cursor: -webkit-grabbing;
+        cursor: -moz-grabbing;
+      }
+    }
   }
 
   .btn-action {
@@ -170,36 +112,11 @@
       }
     }
   }
-
-  .dropdown {
-    @include media-breakpoint-up(sm) {
-      float: right;
-    }
-  }
-
-  @include media-breakpoint-down(xs) {
-    .dropdown-menu {
-      min-width: 100%;
-    }
-  }
-}
-
-.draggable-handler {
-  display: inline-block;
-  vertical-align: top;
-  margin: 5px 0;
-  opacity: 0;
-  transition: opacity .3s;
-  color: $gray-darkest;
 }
 
 .prioritized-labels {
   margin-bottom: 30px;
 
-  h5 {
-    font-size: $gl-font-size;
-  }
-
   .add-priority {
     display: none;
     color: $gray-light;
@@ -214,31 +131,11 @@
 }
 
 .other-labels {
-  h5 {
-    font-size: $gl-font-size;
-  }
-
   .remove-priority {
     display: none;
   }
 }
 
-.toggle-priority {
-  display: inline-block;
-  vertical-align: top;
-
-  button {
-    border-color: transparent;
-    padding: 5px 8px;
-    vertical-align: top;
-    font-size: 14px;
-
-    &:hover {
-      border-color: transparent;
-    }
-  }
-}
-
 .filtered-labels {
   font-size: 0;
   padding: 12px 16px;
@@ -292,10 +189,8 @@
 }
 
 .label-subscribe-button {
-  @media(min-width: map-get($grid-breakpoints, md)) {
-    min-width: 105px;
-    margin-left: $gl-padding;
-  }
+  width: 105px;
+  font-weight: 200;
 
   .label-subscribe-button-icon {
     &[disabled] {
@@ -332,3 +227,95 @@
     font-size: $label-font-size;
   }
 }
+
+.labels-container {
+  background-color: $gray-light;
+  border-radius: $border-radius-default;
+  padding: $gl-padding $gl-padding-8;
+}
+
+.label-actions-list {
+  list-style: none;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.label-badge {
+  color: $theme-gray-900;
+  font-weight: $gl-font-weight-normal;
+  padding: $gl-padding-4 $gl-padding-8;
+  border-radius: $border-radius-default;
+  font-size: $label-font-size;
+}
+
+.label-badge-blue {
+  background-color: $theme-blue-100;
+}
+
+.label-badge-gray {
+  background-color: $theme-gray-100;
+}
+
+.label-links {
+  list-style: none;
+  padding: 0;
+  white-space: nowrap;
+}
+
+.label-link-item {
+  padding: 0;
+}
+
+.label-list-item {
+  .content-list &::before,
+  .content-list &::after {
+    content: none;
+  }
+
+  .label-name {
+    width: 150px;
+    flex-shrink: 0;
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+  }
+
+  .label-description {
+    flex-grow: 1;
+
+    a {
+      color: $blue-600;
+    }
+  }
+
+  .label {
+    padding: 4px $grid-size;
+    font-size: $label-font-size;
+    position: relative;
+    top: $gl-padding-4;
+  }
+
+  .label-action {
+    color: $theme-gray-800;
+    cursor: pointer;
+
+    svg {
+      fill: $theme-gray-800;
+    }
+
+    &:hover {
+      color: $blue-600;
+
+      svg {
+        fill: $blue-600;
+      }
+    }
+  }
+}
+
+.priority-labels-empty-state .svg-content img {
+  max-width: $priority-label-empty-state-width;
+}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index f85f66b9c0b..30428fd198d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -321,18 +321,17 @@
 }
 
 .build-failures {
+  th {
+    border-top: 0;
+  }
+
   .build-state {
     padding: 20px 2px;
 
     .build-name {
-      float: right;
       font-weight: $gl-font-weight-normal;
     }
 
-    .ci-status-icon-failed svg {
-      vertical-align: middle;
-    }
-
     .stage {
       color: $gl-text-color-secondary;
       font-weight: $gl-font-weight-normal;
@@ -344,6 +343,81 @@
     border: 0;
     line-height: initial;
   }
+
+  .build-trace-row td {
+    border-top: 0;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    padding-top: 0;
+  }
+
+  .build-trace {
+    width: 100%;
+    text-align: left;
+    margin-top: $gl-padding;
+  }
+
+  .build-name {
+    width: 196px;
+
+    a {
+      font-weight: $gl-font-weight-bold;
+      color: $gl-text-color;
+      text-decoration: none;
+
+      &:focus,
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .build-actions {
+    width: 70px;
+    text-align: right;
+  }
+
+  .build-stage {
+    width: 140px;
+  }
+
+  .ci-status-icon-failed {
+    padding: 10px 0 10px 12px;
+    width: 12px + 24px; // padding-left + svg width
+  }
+
+  .build-icon svg {
+    width: 24px;
+    height: 24px;
+    vertical-align: middle;
+  }
+
+  .build-state,
+  .build-trace-row {
+    > td:last-child {
+      padding-right: 0;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    td:empty {
+      display: none;
+    }
+
+    .ci-table {
+      margin-top: 2 * $gl-padding;
+    }
+
+    .build-trace-container {
+      padding-top: $gl-padding;
+      padding-bottom: $gl-padding;
+    }
+
+    .build-trace {
+      margin-bottom: 0;
+      margin-top: 0;
+    }
+  }
 }
 
 .pipeline-tab-content {
@@ -929,7 +1003,7 @@ button.mini-pipeline-graph-dropdown-toggle {
   &.dropdown-menu {
     transform: translate(-80%, 0);
 
-    @media(min-width: map-get($grid-breakpoints, md)) {
+    @media (min-width: map-get($grid-breakpoints, md)) {
       transform: translate(-50%, 0);
       right: auto;
       left: 50%;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index 68d40b56133..babe81cb0f7 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,25 +1,3 @@
-@mixin application-theme-preview($color-1, $color-2, $color-3, $color-4) {
-  .one {
-    background-color: $color-1;
-    border-top-left-radius: $border-radius-default;
-  }
-
-  .two {
-    background-color: $color-2;
-    border-top-right-radius: $border-radius-default;
-  }
-
-  .three {
-    background-color: $color-3;
-    border-bottom-left-radius: $border-radius-default;
-  }
-
-  .four {
-    background-color: $color-4;
-    border-bottom-right-radius: $border-radius-default;
-  }
-}
-
 .multi-file-editor-options {
   label {
     margin-right: 20px;
@@ -38,44 +16,61 @@
 
 .application-theme {
   label {
-    margin-right: 20px;
+    margin: 0 $gl-padding $gl-padding 0;
     text-align: center;
   }
 
   .preview {
     font-size: 0;
-    margin-bottom: 10px;
+    height: 48px;
+    border-radius: 4px;
+    min-width: 135px;
+    margin-bottom: $gl-padding-8;
+
+    &.ui-indigo {
+      background-color: $indigo-900;
+    }
+
+    &.ui-light-indigo {
+      background-color: $indigo-700;
+    }
 
-    &.indigo {
-      @include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500);
+    &.ui-blue {
+      background-color: $theme-blue-900;
     }
 
-    &.dark {
-      @include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600);
+    &.ui-light-blue {
+      background-color: $theme-light-blue-700;
     }
 
-    &.light {
-      @include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100);
+    &.ui-green {
+      background-color: $theme-green-900;
     }
 
-    &.blue {
-      @include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500);
+    &.ui-light-green {
+      background-color: $theme-light-green-700;
     }
 
-    &.green {
-      @include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500);
+    &.ui-red {
+      background-color: $theme-red-900;
+    }
+
+    &.ui-light-red {
+      background-color: $theme-light-red-700;
+    }
+
+    &.ui-dark {
+      background-color: $theme-gray-900;
+    }
+
+    &.ui-light {
+      background-color: $theme-gray-200;
     }
   }
 
   .preview-row {
     display: block;
   }
-
-  .quadrant {
-    display: inline-block;
-    height: 50px;
-    width: 80px;
-  }
 }
 
 .syntax-theme {
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 06ef58531d7..8cdf2275551 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -15,6 +15,7 @@
   color: $perf-bar-text;
 
   select {
+    color: $perf-bar-text;
     width: 200px;
   }