Merge branch 'master' into 37220-es-modules

* master: (148 commits)
  Remove gaps under nav on build page
  Replace the 'project/snippets.feature' spinach test with an rspec analog
  Use correct group members path for members flyout link
  Replace the 'project/commits/revert.feature' spinach test with an rspec analog
  Merge branch 'rs-incoming-email-domain-docs' into 'security-10-0'
  Replace the 'project/archived.feature' spinach test with an rspec analog
  Fix broken link in docs/api/wiki.md
  Fixed the new sidebars width when browser has scrollbars
  Improve 'spec/features/profiles/*' specs
  Replace the 'search.feature' spinach test with an rspec analog
  dedupe yarn packages
  add dependency approvals (all MIT license)
  update build image to latest with node 8.x, yarn 1.0.2, and chrome 61
  Ensure we use `Entities::User` for non-admin `users/:id` API requests
  Minor update to address Sean McGivern's comment.
  Add data migration
  Fix setting share_with_group_lock
  created services for keys
  Prepare Repository#merge for migration to Gitaly
  Never connect to webpack-dev-server over SSL
  ...

26 files changed, 540 insertions, 252 deletions

diff --git a/app/assets/javascripts/branches/branches_delete_modal.js b/app/assets/javascripts/branches/branches_delete_modal.js
index af8bcdc1794..cbc28374b80 100644
--- a/app/assets/javascripts/branches/branches_delete_modal.js
+++ b/app/assets/javascripts/branches/branches_delete_modal.js
@@ -7,6 +7,7 @@ class DeleteModal {
     this.$branchName = $('.js-branch-name', this.$modal);
     this.$confirmInput = $('.js-delete-branch-input', this.$modal);
     this.$deleteBtn = $('.js-delete-branch', this.$modal);
+    this.$notMerged = $('.js-not-merged', this.$modal);
     this.bindEvents();
   }
 
@@ -16,8 +17,10 @@ class DeleteModal {
   }
 
   setModalData(e) {
-    this.branchName = e.currentTarget.dataset.branchName || '';
-    this.deletePath = e.currentTarget.dataset.deletePath || '';
+    const branchData = e.currentTarget.dataset;
+    this.branchName = branchData.branchName || '';
+    this.deletePath = branchData.deletePath || '';
+    this.isMerged = !!branchData.isMerged;
     this.updateModal();
   }
 
@@ -30,6 +33,7 @@ class DeleteModal {
     this.$confirmInput.val('');
     this.$deleteBtn.attr('href', this.deletePath);
     this.$deleteBtn.attr('disabled', true);
+    this.$notMerged.toggleClass('hidden', this.isMerged);
   }
 }
 
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
index 7246ccbb281..720fbc87ea0 100644
--- a/app/assets/javascripts/filtered_search/dropdown_user.js
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -15,6 +15,7 @@ class DropdownUser extends gl.FilteredSearchDropdown {
         params: {
           per_page: 20,
           active: true,
+          group_id: this.getGroupId(),
           project_id: this.getProjectId(),
           current_user: true,
         },
@@ -47,6 +48,10 @@ class DropdownUser extends gl.FilteredSearchDropdown {
     super.renderContent(forceShowList);
   }
 
+  getGroupId() {
+    return this.input.getAttribute('data-group-id');
+  }
+
   getProjectId() {
     return this.input.getAttribute('data-project-id');
   }
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index 4b19f7b4188..157280d66e3 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -77,10 +77,11 @@ export const hideMenu = (el) => {
 export const moveSubItemsToPosition = (el, subItems) => {
   const boundingRect = el.getBoundingClientRect();
   const top = calculateTop(boundingRect, subItems.offsetHeight);
+  const left = sidebar ? sidebar.offsetWidth : 50;
   const isAbove = top < boundingRect.top;
 
   subItems.classList.add('fly-out-list');
-  subItems.style.transform = `translate3d(0, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign
+  subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign
 
   const subItemsRect = subItems.getBoundingClientRect();
 
@@ -148,7 +149,7 @@ export const documentMouseMove = (e) => {
 export const subItemsMouseLeave = (relatedTarget) => {
   clearTimeout(timeoutId);
 
-  if (!relatedTarget.closest(`.${IS_OVER_CLASS}`)) {
+  if (relatedTarget && !relatedTarget.closest(`.${IS_OVER_CLASS}`)) {
     hideMenu(currentOpenMenu);
   }
 };
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index 7d7f91227f9..2538d9c2093 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -127,13 +127,6 @@ import DropdownUtils from './filtered_search/dropdown_utils';
             $('.has-tooltip', $value).tooltip({
               container: 'body'
             });
-            return $value.find('a').each(function(i) {
-              return setTimeout((function(_this) {
-                return function() {
-                  return gl.animate.animate($(_this), 'pulse');
-                };
-              })(this), 200 * i);
-            });
           });
         };
         $dropdown.glDropdown({
diff --git a/app/assets/javascripts/lib/utils/animate.js b/app/assets/javascripts/lib/utils/animate.js
deleted file mode 100644
index d93c1d0da59..00000000000
--- a/app/assets/javascripts/lib/utils/animate.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-param-reassign, no-void, prefer-template, no-var, new-cap, prefer-arrow-callback, consistent-return, max-len */
-(function() {
-  (function(w) {
-    if (w.gl == null) {
-      w.gl = {};
-    }
-    if (gl.animate == null) {
-      gl.animate = {};
-    }
-    gl.animate.animate = function($el, animation, options, done) {
-      if ((options != null ? options.cssStart : void 0) != null) {
-        $el.css(options.cssStart);
-      }
-      $el.removeClass(animation + ' animated').addClass(animation + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
-        $(this).removeClass(animation + ' animated');
-        if (done != null) {
-          done();
-        }
-        if ((options != null ? options.cssEnd : void 0) != null) {
-          $el.css(options.cssEnd);
-        }
-      });
-    };
-    gl.animate.animateEach = function($els, animation, time, options, done) {
-      var dfd;
-      dfd = $.Deferred();
-      if (!$els.length) {
-        dfd.resolve();
-      }
-      $els.each(function(i) {
-        setTimeout((function(_this) {
-          return function() {
-            var $this;
-            $this = $(_this);
-            return gl.animate.animate($this, animation, options, function() {
-              if (i === $els.length - 1) {
-                dfd.resolve();
-                if (done != null) {
-                  return done();
-                }
-              }
-            });
-          };
-        })(this), time * i);
-      });
-      return dfd.promise();
-    };
-  })(window);
-}).call(window);
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index d99839fadb4..1d2934d653e 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -39,7 +39,6 @@ import './commit/file';
 import './commit/image_file';
 
 // lib/utils
-import './lib/utils/animate';
 import './lib/utils/bootstrap_linked_tabs';
 import { handleLocationHash } from './lib/utils/common_utils';
 import './lib/utils/datetime_utility';
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index 04579058688..4675b1fcb8f 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -45,7 +45,7 @@ import _ from 'underscore';
         if (issueUpdateURL) {
           milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
           milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
-          collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- remaining %>" data-placement="left"> <%- title %> </span>');
+          collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- name %><br /><%- remaining %>" data-placement="left" data-html="true"> <%- title %> </span>');
         }
         return $dropdown.glDropdown({
           showMenuAbove: showMenuAbove,
@@ -208,6 +208,7 @@ import _ from 'underscore';
                 if (data.milestone != null) {
                   data.milestone.full_path = _this.currentProject.full_path;
                   data.milestone.remaining = gl.utils.timeFor(data.milestone.due_date);
+                  data.milestone.name = data.milestone.title;
                   $value.html(milestoneLinkTemplate(data.milestone));
                   return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
                 } else {
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index f39ea643da4..192473b7dd1 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -1,14 +1,13 @@
 <script>
   /* global Flash */
   import _ from 'underscore';
-  import statusCodes from '../../lib/utils/http_status';
   import MonitoringService from '../services/monitoring_service';
   import GraphGroup from './graph_group.vue';
   import Graph from './graph.vue';
   import EmptyState from './empty_state.vue';
   import MonitoringStore from '../stores/monitoring_store';
   import eventHub from '../event_hub';
-  import { backOff, convertPermissionToBoolean } from '../../lib/utils/common_utils';
+  import { convertPermissionToBoolean } from '../../lib/utils/common_utils';
 
   export default {
 
@@ -22,10 +21,9 @@
         hasMetrics: convertPermissionToBoolean(metricsData.hasMetrics),
         documentationPath: metricsData.documentationPath,
         settingsPath: metricsData.settingsPath,
-        endpoint: metricsData.additionalMetrics,
+        metricsEndpoint: metricsData.additionalMetrics,
         deploymentEndpoint: metricsData.deploymentEndpoint,
         showEmptyState: true,
-        backOffRequestCounter: 0,
         updateAspectRatio: false,
         updatedAspectRatios: 0,
         resizeThrottled: {},
@@ -40,50 +38,16 @@
 
     methods: {
       getGraphsData() {
-        const maxNumberOfRequests = 3;
         this.state = 'loading';
-        backOff((next, stop) => {
-          this.service.get().then((resp) => {
-            if (resp.status === statusCodes.NO_CONTENT) {
-              this.backOffRequestCounter = this.backOffRequestCounter += 1;
-              if (this.backOffRequestCounter < maxNumberOfRequests) {
-                next();
-              } else {
-                stop(new Error('Failed to connect to the prometheus server'));
-              }
-            } else {
-              stop(resp);
-            }
-          }).catch(stop);
-        })
-        .then((resp) => {
-          if (resp.status === statusCodes.NO_CONTENT) {
-            this.state = 'unableToConnect';
-            return false;
-          }
-          return resp.json();
-        })
-        .then((metricGroupsData) => {
-          if (!metricGroupsData) return false;
-          this.store.storeMetrics(metricGroupsData.data);
-          return this.getDeploymentData();
-        })
-        .then((deploymentData) => {
-          if (deploymentData !== false) {
-            this.store.storeDeploymentData(deploymentData.deployments);
-            this.showEmptyState = false;
-          }
-          return {};
-        })
-        .catch(() => {
-          this.state = 'unableToConnect';
-        });
-      },
-
-      getDeploymentData() {
-        return this.service.getDeploymentData(this.deploymentEndpoint)
-          .then(resp => resp.json())
-          .catch(() => new Flash('Error getting deployment information.'));
+        Promise.all([
+          this.service.getGraphsData()
+            .then(data => this.store.storeMetrics(data)),
+          this.service.getDeploymentData()
+            .then(data => this.store.storeDeploymentData(data))
+            .catch(() => new Flash('Error getting deployment information.')),
+        ])
+          .then(() => { this.showEmptyState = false; })
+          .catch(() => { this.state = 'unableToConnect'; });
       },
 
       resize() {
@@ -100,7 +64,10 @@
     },
 
     created() {
-      this.service = new MonitoringService(this.endpoint);
+      this.service = new MonitoringService({
+        metricsEndpoint: this.metricsEndpoint,
+        deploymentEndpoint: this.deploymentEndpoint,
+      });
       eventHub.$on('toggleAspectRatio', this.toggleAspectRatio);
     },
 
diff --git a/app/assets/javascripts/monitoring/services/monitoring_service.js b/app/assets/javascripts/monitoring/services/monitoring_service.js
index 1e9ae934853..fed884d5c94 100644
--- a/app/assets/javascripts/monitoring/services/monitoring_service.js
+++ b/app/assets/javascripts/monitoring/services/monitoring_service.js
@@ -1,19 +1,55 @@
 import Vue from 'vue';
 import VueResource from 'vue-resource';
+import statusCodes from '../../lib/utils/http_status';
+import { backOff } from '../../lib/utils/common_utils';
 
 Vue.use(VueResource);
 
+const MAX_REQUESTS = 3;
+
+function backOffRequest(makeRequestCallback) {
+  let requestCounter = 0;
+  return backOff((next, stop) => {
+    makeRequestCallback().then((resp) => {
+      if (resp.status === statusCodes.NO_CONTENT) {
+        requestCounter += 1;
+        if (requestCounter < MAX_REQUESTS) {
+          next();
+        } else {
+          stop(new Error('Failed to connect to the prometheus server'));
+        }
+      } else {
+        stop(resp);
+      }
+    }).catch(stop);
+  });
+}
+
 export default class MonitoringService {
-  constructor(endpoint) {
-    this.graphs = Vue.resource(endpoint);
+  constructor({ metricsEndpoint, deploymentEndpoint }) {
+    this.metricsEndpoint = metricsEndpoint;
+    this.deploymentEndpoint = deploymentEndpoint;
   }
 
-  get() {
-    return this.graphs.get();
+  getGraphsData() {
+    return backOffRequest(() => Vue.http.get(this.metricsEndpoint))
+      .then(resp => resp.json())
+      .then((response) => {
+        if (!response || !response.data) {
+          throw new Error('Unexpected metrics data response from prometheus endpoint');
+        }
+        return response.data;
+      });
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  getDeploymentData(endpoint) {
-    return Vue.http.get(endpoint);
+  getDeploymentData() {
+    return backOffRequest(() => Vue.http.get(this.deploymentEndpoint))
+      .then(resp => resp.json())
+      .then((response) => {
+        if (!response || !response.deployments) {
+          throw new Error('Unexpected deployment data response from prometheus endpoint');
+        }
+        return response.deployments;
+      });
   }
 }
diff --git a/app/assets/javascripts/new_sidebar.js b/app/assets/javascripts/new_sidebar.js
index cea4f35096a..f2eb2338a1e 100644
--- a/app/assets/javascripts/new_sidebar.js
+++ b/app/assets/javascripts/new_sidebar.js
@@ -15,7 +15,6 @@ export default class NewNavSidebar {
     this.$openSidebar = $('.toggle-mobile-nav');
     this.$closeSidebar = $('.close-nav-button');
     this.$sidebarToggle = $('.js-toggle-sidebar');
-    this.$topLevelLinks = $('.sidebar-top-level-items > li > a');
   }
 
   bindEvents() {
@@ -56,10 +55,6 @@ export default class NewNavSidebar {
       this.$page.toggleClass('page-with-icon-sidebar', breakpoint === 'sm' ? true : collapsed);
     }
     NewNavSidebar.setCollapsedCookie(collapsed);
-
-    this.$topLevelLinks.attr('title', function updateTopLevelTitle() {
-      return collapsed ? this.getAttribute('aria-label') : '';
-    });
   }
 
   render() {
diff --git a/app/assets/javascripts/notes/components/issue_note_actions.vue b/app/assets/javascripts/notes/components/issue_note_actions.vue
index 60c172321d1..feb3e73194b 100644
--- a/app/assets/javascripts/notes/components/issue_note_actions.vue
+++ b/app/assets/javascripts/notes/components/issue_note_actions.vue
@@ -86,7 +86,7 @@
   <div class="note-actions">
     <span
       v-if="accessLevel"
-      class="note-role">{{accessLevel}}</span>
+      class="note-role note-role-access">{{accessLevel}}</span>
     <div
       v-if="canAddAwardEmoji"
       class="note-actions-item">
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index c0524bf6aa3..35e7a10379f 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -19,6 +19,7 @@
 @import "framework/flash";
 @import "framework/forms";
 @import "framework/gfm";
+@import "framework/gitlab-theme";
 @import "framework/header";
 @import "framework/highlight";
 @import "framework/issue_box";
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
new file mode 100644
index 00000000000..f844d6f1d5a
--- /dev/null
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -0,0 +1,281 @@
+/**
+ * Styles the GitLab application with a specific color theme
+ */
+
+@mixin gitlab-theme($color-100, $color-200, $color-500, $color-700, $color-800, $color-900, $color-alternate) {
+  // Header
+
+  header.navbar-gitlab-new {
+    background: linear-gradient(to right, $color-900, $color-800);
+
+    .navbar-collapse {
+      color: $color-200;
+    }
+
+    .container-fluid {
+      .navbar-toggle {
+        border-left: 1px solid lighten($color-700, 10%);
+      }
+    }
+
+    .navbar-sub-nav,
+    .navbar-nav {
+      > li {
+        > a:hover,
+        > a:focus {
+          background-color: rgba($color-200, .2);
+        }
+
+        &.active > a,
+        &.dropdown.open > a {
+          color: $color-900;
+          background-color: $color-alternate;
+
+          svg {
+            fill: currentColor;
+          }
+        }
+
+        &.line-separator {
+          border-left: 1px solid rgba($color-200, .2);
+        }
+      }
+    }
+
+    .navbar-sub-nav {
+      color: $color-200;
+    }
+
+    .nav {
+      > li {
+        color: $color-200;
+
+        > a {
+          svg {
+            fill: $color-200;
+          }
+
+          &.header-user-dropdown-toggle {
+            .header-user-avatar {
+              border-color: $color-200;
+            }
+          }
+
+          &:hover,
+          &:focus {
+            @media (min-width: $screen-sm-min) {
+              background-color: rgba($color-200, .2);
+            }
+
+            svg {
+              fill: currentColor;
+            }
+          }
+        }
+
+        &.active > a,
+        &.dropdown.open > a {
+          color: $color-900;
+          background-color: $color-alternate;
+
+          &:hover {
+            svg {
+              fill: $color-900;
+            }
+          }
+        }
+
+        .impersonated-user,
+        .impersonated-user:hover {
+          svg {
+            fill: $color-900;
+          }
+        }
+      }
+    }
+  }
+
+  .title {
+    > a {
+      &:hover,
+      &:focus {
+        background-color: rgba($color-200, .2);
+      }
+    }
+  }
+
+  .search {
+    form {
+      background-color: rgba($color-200, .2);
+
+      &:hover {
+        background-color: rgba($color-200, .3);
+      }
+    }
+
+    .location-badge {
+      color: $color-100;
+      background-color: rgba($color-200, .1);
+      border-right: 1px solid $color-800;
+    }
+
+    .search-input::placeholder {
+      color: rgba($color-200, .8);
+    }
+
+    .search-input-wrap {
+      .search-icon,
+      .clear-icon {
+        color: rgba($color-200, .8);
+      }
+    }
+
+    &.search-active {
+      form {
+        background-color: $white-light;
+      }
+
+      .location-badge {
+        color: $gl-text-color;
+      }
+
+      .search-input-wrap {
+        .search-icon {
+          color: rgba($color-200, .8);
+        }
+      }
+    }
+  }
+
+  .btn-sign-in {
+    background-color: $color-100;
+    color: $color-900;
+  }
+
+
+  // Sidebar
+  .nav-sidebar li.active {
+    box-shadow: inset 4px 0 0 $color-700;
+
+    > a {
+      color: $color-800;
+    }
+
+    svg {
+      fill: $color-800;
+    }
+  }
+
+  .sidebar-top-level-items > li.active .badge {
+    color: $color-800;
+  }
+
+  .nav-links li.active a {
+    border-bottom-color: $color-500;
+
+    .badge {
+      font-weight: $gl-font-weight-bold;
+    }
+  }
+}
+
+
+body {
+  &.ui_indigo {
+    @include gitlab-theme($indigo-100, $indigo-200, $indigo-500, $indigo-700, $indigo-800, $indigo-900, $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_blue {
+    @include gitlab-theme($theme-blue-100, $theme-blue-200, $theme-blue-500, $theme-blue-700, $theme-blue-800, $theme-blue-900, $white-light);
+  }
+
+  &.ui_green {
+    @include gitlab-theme($theme-green-100, $theme-green-200, $theme-green-500, $theme-green-700, $theme-green-800, $theme-green-900, $white-light);
+  }
+
+  &.ui_light {
+    @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700);
+
+    header.navbar-gitlab-new {
+      background: $theme-gray-100;
+      box-shadow: 0 2px 0 0 $border-color;
+
+      .logo-text svg {
+        fill: $theme-gray-900;
+      }
+
+      .navbar-sub-nav,
+      .navbar-nav {
+        > li {
+          > a:hover,
+          > a:focus {
+            color: $theme-gray-900;
+          }
+
+          &.active > a {
+            color: $white-light;
+
+            &:hover {
+              color: $white-light;
+            }
+          }
+        }
+      }
+
+      .container-fluid {
+        .navbar-toggle,
+        .navbar-toggle:hover {
+          color: $theme-gray-700;
+          border-left: 1px solid $theme-gray-200;
+        }
+      }
+    }
+
+    .search {
+      form {
+        background-color: $white-light;
+        box-shadow: inset 0 0 0 1px $border-color;
+
+        &:hover {
+          background-color: $white-light;
+          box-shadow: inset 0 0 0 1px $blue-100;
+
+          .location-badge {
+            box-shadow: inset 0 0 0 1px $blue-100;
+          }
+        }
+      }
+
+      .search-input-wrap {
+        .search-icon {
+          color: $theme-gray-200;
+        }
+      }
+
+      .location-badge {
+        color: $theme-gray-700;
+        box-shadow: inset 0 0 0 1px $border-color;
+        background-color: $nav-badge-bg;
+        border-right: 0;
+      }
+    }
+
+    .nav-sidebar li.active {
+      > a {
+        color: $theme-gray-900;
+      }
+
+      svg {
+        fill: $theme-gray-900;
+      }
+    }
+
+    .sidebar-top-level-items > li.active .badge {
+      color: $theme-gray-900;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index b00a2d053e2..ab3c34df1fb 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -111,7 +111,6 @@ header {
         svg {
           height: 16px;
           width: 23px;
-          fill: currentColor;
         }
       }
 
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 5ffa67a1220..2f7717760ec 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -328,7 +328,7 @@
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
   text-align: center;
-  margin-top: $header-height;
+  margin-top: $new-navbar-height;
 
   .container-fluid {
     position: relative;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index ef58382ba41..48dc25d343b 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -78,16 +78,16 @@
 
 .right-sidebar {
   border-left: 1px solid $border-color;
-  height: calc(100% - #{$header-height});
+  height: calc(100% - #{$new-navbar-height});
 
   &.affix {
     position: fixed;
-    top: $header-height;
+    top: $new-navbar-height;
   }
 }
 
 .with-performance-bar .right-sidebar.affix {
-  top: $header-height + $performance-bar-height;
+  top: $new-navbar-height + $performance-bar-height;
 }
 
 @mixin maintain-sidebar-dimensions {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index e300b006026..a3da9fd44e8 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -13,6 +13,7 @@ $sidebar-breakpoint: 1024px;
 $darken-normal-factor: 7%;
 $darken-dark-factor: 10%;
 $darken-border-factor: 5%;
+$darken-border-dashed-factor: 25%;
 
 $white-light: #fff;
 $white-normal: #f0f0f0;
@@ -74,6 +75,8 @@ $red-700: #a62d19;
 $red-800: #8b2615;
 $red-900: #711e11;
 
+// GitLab themes
+
 $indigo-50: #f7f7ff;
 $indigo-100: #ebebfa;
 $indigo-200: #d1d1f0;
@@ -86,6 +89,43 @@ $indigo-800: #393982;
 $indigo-900: #292961;
 $indigo-950: #1a1a40;
 
+$theme-gray-50: #fafafa;
+$theme-gray-100: #f2f2f2;
+$theme-gray-200: #dfdfdf;
+$theme-gray-300: #cccccc;
+$theme-gray-400: #bababa;
+$theme-gray-500: #a7a7a7;
+$theme-gray-600: #949494;
+$theme-gray-700: #707070;
+$theme-gray-800: #4f4f4f;
+$theme-gray-900: #2e2e2e;
+$theme-gray-950: #1f1f1f;
+
+$theme-blue-50: #f4f8fc;
+$theme-blue-100: #e6edf5;
+$theme-blue-200: #c8d7e6;
+$theme-blue-300: #97b3cf;
+$theme-blue-400: #648cb4;
+$theme-blue-500: #4a79a8;
+$theme-blue-600: #3e6fa0;
+$theme-blue-700: #305c88;
+$theme-blue-800: #25496e;
+$theme-blue-900: #1a3652;
+$theme-blue-950: #0f2235;
+
+$theme-green-50: #f2faf6;
+$theme-green-100: #e4f3ea;
+$theme-green-200: #c0dfcd;
+$theme-green-300: #8ac2a1;
+$theme-green-400: #52a274;
+$theme-green-500: #35935c;
+$theme-green-600: #288a50;
+$theme-green-700: #1c7441;
+$theme-green-800: #145d33;
+$theme-green-900: #0d4524;
+$theme-green-950: #072d16;
+
+
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 $almost-black: #242424;
@@ -95,6 +135,7 @@ $border-white-normal: darken($white-normal, $darken-border-factor);
 
 $border-gray-light: darken($gray-light, $darken-border-factor);
 $border-gray-normal: darken($gray-normal, $darken-border-factor);
+$border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
 $border-gray-dark: darken($white-normal, $darken-border-factor);
 
 /*
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/new_nav.scss
index 2b6c0fc015c..58e205537ef 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/new_nav.scss
@@ -9,10 +9,20 @@
 
 header.navbar-gitlab-new {
   color: $white-light;
-  background: linear-gradient(to right, $indigo-900, $indigo-800);
   border-bottom: 0;
   min-height: $new-navbar-height;
 
+  .logo-text {
+    line-height: initial;
+
+    svg {
+      width: 55px;
+      height: 14px;
+      margin: 0;
+      fill: $white-light;
+    }
+  }
+
   .header-content {
     display: -webkit-flex;
     display: flex;
@@ -38,10 +48,10 @@ header.navbar-gitlab-new {
 
       img {
         height: 28px;
-        margin-right: 10px;
+        margin-right: 8px;
       }
 
-      > a {
+      a {
         display: -webkit-flex;
         display: flex;
         align-items: center;
@@ -54,22 +64,6 @@ header.navbar-gitlab-new {
             margin-right: 8px;
           }
         }
-
-        .logo-text {
-          line-height: initial;
-
-          svg {
-            width: 55px;
-            height: 14px;
-            margin: 0;
-            fill: $white-light;
-          }
-        }
-
-        &:hover,
-        &:focus {
-          background-color: rgba($indigo-200, .2);
-        }
       }
     }
 
@@ -106,7 +100,6 @@ header.navbar-gitlab-new {
 
   .navbar-collapse {
     padding-left: 0;
-    color: $indigo-200;
     box-shadow: 0;
 
     @media (max-width: $screen-xs-max) {
@@ -132,7 +125,6 @@ header.navbar-gitlab-new {
       font-size: 14px;
       text-align: center;
       color: currentColor;
-      border-left: 1px solid lighten($indigo-700, 10%);
 
       &:hover,
       &:focus,
@@ -167,63 +159,49 @@ header.navbar-gitlab-new {
         will-change: color;
         margin: 4px 2px;
         padding: 6px 8px;
-        color: $indigo-200;
         height: 32px;
 
         @media (max-width: $screen-xs-max) {
           padding: 0;
         }
 
-        svg {
-          fill: $indigo-200;
-        }
-
         &.header-user-dropdown-toggle {
           margin-left: 2px;
 
           .header-user-avatar {
-            border-color: $indigo-200;
             margin-right: 0;
           }
         }
-      }
-
-      .header-new-dropdown-toggle {
-        margin-right: 0;
-      }
 
-      > a:hover,
-      > a:focus {
-        text-decoration: none;
-        outline: 0;
-        opacity: 1;
-        color: $white-light;
-
-        @media (min-width: $screen-sm-min) {
-          background-color: rgba($indigo-200, .2);
-        }
+        &:hover,
+        &:focus {
+          text-decoration: none;
+          outline: 0;
+          opacity: 1;
+          color: $white-light;
 
-        svg {
-          fill: currentColor;
-        }
+          svg {
+            fill: currentColor;
+          }
 
-        &.header-user-dropdown-toggle {
-          .header-user-avatar {
-            border-color: $white-light;
+          &.header-user-dropdown-toggle {
+            .header-user-avatar {
+              border-color: $white-light;
+            }
           }
         }
       }
 
+      .header-new-dropdown-toggle {
+        margin-right: 0;
+      }
+
       .impersonated-user,
       .impersonated-user:hover {
         margin-right: 1px;
         background-color: $white-light;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
-
-        svg {
-          fill: $indigo-900;
-        }
       }
 
       .impersonation-btn,
@@ -241,8 +219,6 @@ header.navbar-gitlab-new {
 
       &.active > a,
       &.dropdown.open > a {
-        color: $indigo-900;
-        background-color: $white-light;
 
         svg {
           fill: currentColor;
@@ -256,7 +232,6 @@ header.navbar-gitlab-new {
   display: -webkit-flex;
   display: flex;
   margin: 0 0 0 6px;
-  color: $indigo-200;
 
   .dropdown-chevron {
     position: relative;
@@ -274,17 +249,6 @@ header.navbar-gitlab-new {
         text-decoration: none;
         outline: 0;
         color: $white-light;
-        background-color: rgba($indigo-200, .2);
-
-        svg {
-          fill: currentColor;
-        }
-      }
-
-      &.active > a,
-      &.dropdown.open > a {
-        color: $indigo-900;
-        background-color: $white-light;
 
         svg {
           fill: currentColor;
@@ -309,7 +273,6 @@ header.navbar-gitlab-new {
       }
 
       &.line-separator {
-        border-left: 1px solid rgba($indigo-200, .2);
         margin: 8px;
       }
     }
@@ -339,17 +302,14 @@ header.navbar-gitlab-new {
     height: 32px;
     border: 0;
     border-radius: $border-radius-default;
-    background-color: rgba($indigo-200, .2);
     transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
 
     &:hover {
-      background-color: rgba($indigo-200, .3);
       box-shadow: none;
     }
   }
 
   &.search-active form {
-    background-color: $white-light;
     box-shadow: none;
 
     .search-input {
@@ -377,43 +337,26 @@ header.navbar-gitlab-new {
   }
 
   .search-input::placeholder {
-    color: rgba($indigo-200, .8);
     transition: color ease-in-out 0.15s;
   }
 
   .location-badge {
     font-size: 12px;
-    color: $indigo-100;
-    background-color: rgba($indigo-200, .1);
-    will-change: color;
     margin: -4px 4px -4px -4px;
     line-height: 25px;
     padding: 4px 8px;
     border-radius: 2px 0 0 2px;
-    border-right: 1px solid $indigo-800;
     height: 32px;
     transition: border-color ease-in-out 0.15s;
   }
 
-  .search-input-wrap {
-    .search-icon,
-    .clear-icon {
-      color: rgba($indigo-200, .8);
-    }
-  }
-
   &.search-active {
     .location-badge {
-      color: $gl-text-color;
       background-color: $nav-badge-bg;
       border-color: $border-color;
     }
 
     .search-input-wrap {
-      .search-icon {
-        color: rgba($indigo-200, .8);
-      }
-
       .clear-icon {
         color: $white-light;
       }
@@ -488,6 +431,7 @@ header.navbar-gitlab-new {
 
 .breadcrumb-item-text {
   @include str-truncated(128px);
+  text-decoration: inherit;
 }
 
 .breadcrumbs-list-angle {
@@ -517,8 +461,6 @@ header.navbar-gitlab-new {
 
 .btn-sign-in {
   margin-top: 3px;
-  background-color: $indigo-100;
-  color: $indigo-900;
   font-weight: $gl-font-weight-bold;
 
   &:hover {
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss
index 378ef8926d5..8030854e527 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/new_sidebar.scss
@@ -3,8 +3,6 @@
 @import "bootstrap/variables";
 
 $active-background: rgba(0, 0, 0, .04);
-$active-border: $indigo-500;
-$active-color: $indigo-700;
 $active-hover-background: $active-background;
 $active-hover-color: $gl-text-color;
 $inactive-badge-background: rgba(0, 0, 0, .08);
@@ -107,7 +105,8 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   &.sidebar-icons-only {
-    width: $new-sidebar-collapsed-width;
+    width: auto;
+    min-width: $new-sidebar-collapsed-width;
 
     .nav-sidebar-inner-scroll {
       overflow-x: hidden;
@@ -126,6 +125,10 @@ $new-sidebar-collapsed-width: 50px;
     .fly-out-top-item {
       display: block;
     }
+
+    .avatar-container {
+      margin-right: 0;
+    }
   }
 
   &.nav-sidebar-expanded {
@@ -162,16 +165,9 @@ $new-sidebar-collapsed-width: 50px;
   }
 
   li.active {
-    box-shadow: inset 4px 0 0 $active-border;
-
     > a {
-      color: $active-color;
       font-weight: $gl-font-weight-bold;
     }
-
-    svg {
-      fill: $active-color;
-    }
   }
 
   @media (max-width: $screen-xs-max) {
@@ -196,7 +192,7 @@ $new-sidebar-collapsed-width: 50px;
 .nav-sidebar-inner-scroll {
   height: 100%;
   width: 100%;
-  overflow: auto;
+  overflow: scroll;
 }
 
 .with-performance-bar .nav-sidebar {
@@ -224,7 +220,6 @@ $new-sidebar-collapsed-width: 50px;
         &:hover,
         &:focus {
           background: $active-background;
-          color: $active-color;
         }
       }
     }
@@ -258,7 +253,7 @@ $new-sidebar-collapsed-width: 50px;
         @media (min-width: $screen-sm-min) {
           position: fixed;
           top: 0;
-          left: $new-sidebar-width;
+          left: 0;
           min-width: 150px;
           margin-top: -1px;
           padding: 4px 1px;
@@ -324,7 +319,6 @@ $new-sidebar-collapsed-width: 50px;
       }
 
       .badge {
-        color: $active-color;
         font-weight: $gl-font-weight-bold;
       }
 
@@ -397,10 +391,6 @@ $new-sidebar-collapsed-width: 50px;
     }
 
     .sidebar-sub-level-items {
-      @media (min-width: $screen-sm-min) {
-        left: $new-sidebar-collapsed-width;
-      }
-
       &:not(.flyout-list) {
         display: none;
       }
@@ -501,13 +491,3 @@ $new-sidebar-collapsed-width: 50px;
 .with-performance-bar .boards-list {
   height: calc(100vh - #{$new-navbar-height} - #{$performance-bar-height});
 }
-
-
-// Change color of all horizontal tabs to match the new indigo color
-.nav-links li.active a {
-  border-bottom-color: $active-border;
-
-  .badge {
-    font-weight: $gl-font-weight-bold;
-  }
-}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 50ec5110bf1..359dd388d05 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -64,10 +64,10 @@
     color: $gl-text-color;
     position: sticky;
     position: -webkit-sticky;
-    top: $header-height;
+    top: $new-navbar-height;
 
     &.affix {
-      top: $header-height;
+      top: $new-navbar-height;
     }
 
     // with sidebar
@@ -174,10 +174,10 @@
 
 .with-performance-bar .build-page {
   .top-bar {
-    top: $header-height + $performance-bar-height;
+    top: $new-navbar-height + $performance-bar-height;
 
     &.affix {
-      top: $header-height + $performance-bar-height;
+      top: $new-navbar-height + $performance-bar-height;
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 54c3c0173ae..951580ea1fe 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -634,8 +634,16 @@
     padding-top: 8px;
     padding-bottom: 8px;
   }
+
+  .diff-changed-file {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .diff-file-changes-path {
-  @include str-truncated(78%);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index d8a15faf7e9..d01ee4b033c 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -449,6 +449,12 @@
         }
       }
     }
+
+    .milestone-title span {
+      @include str-truncated(100%);
+      display: block;
+      margin: 0 4px;
+    }
   }
 
   a {
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index d4dc43035eb..cf5f933a762 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -95,6 +95,8 @@
   }
 
   .omniauth-container {
+    font-size: 13px;
+
     p {
       margin: 0;
     }
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index 305feaacaa1..c197494b152 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,3 +1,67 @@
+@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;
+  }
+}
+
+.application-theme {
+  label {
+    margin-right: 20px;
+    text-align: center;
+  }
+
+  .preview {
+    font-size: 0;
+    margin-bottom: 10px;
+
+    &.indigo {
+      @include application-theme-preview($indigo-900, $indigo-700, $indigo-800, $indigo-500);
+    }
+
+    &.dark {
+      @include application-theme-preview($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-600);
+    }
+
+    &.light {
+      @include application-theme-preview($theme-gray-600, $theme-gray-200, $theme-gray-400, $theme-gray-100);
+    }
+
+    &.blue {
+      @include application-theme-preview($theme-blue-900, $theme-blue-700, $theme-blue-800, $theme-blue-500);
+    }
+
+    &.green {
+      @include application-theme-preview($theme-green-900, $theme-green-700, $theme-green-800, $theme-green-500);
+    }
+  }
+
+  .preview-row {
+    display: block;
+  }
+
+  .quadrant {
+    display: inline-block;
+    height: 50px;
+    width: 80px;
+  }
+}
+
 .syntax-theme {
   label {
     margin-right: 20px;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 94e4f4334d4..6400b72742c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -752,7 +752,7 @@ a.deploy-project-label {
   }
 
   li.missing {
-    border: 1px dashed $border-gray-normal;
+    border: 1px dashed $border-gray-normal-dashed;
     border-radius: $border-radius-default;
 
     a {
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 69abb13add4..7dfcf7b7d9c 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -71,6 +71,11 @@
     height: 100%;
 
     .monaco-editor.vs {
+      .current-line {
+        border: none;
+        background: $well-light-border;
+      }
+
       .line-numbers {
         cursor: pointer;
 
@@ -84,6 +89,13 @@
       }
     }
 
+    .blob-no-preview {
+      .vertical-center {
+        justify-content: center;
+        width: 100%;
+      }
+    }
+
     &.edit-mode {
       .blob-viewer-container {
         overflow: hidden;
@@ -103,7 +115,7 @@
       overflow: auto;
 
       > div,
-      .file-content {
+      .file-content:not(.wiki) {
         display: flex;
       }