Merge branch 'master' of gitlab.com:gitlab-org/gitlab-ce into 18608-lock-issues-v2

# Conflicts:
#	db/schema.rb

25 files changed, 236 insertions, 282 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 923d14f2c3d..74b846217bb 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -31,10 +31,12 @@
 @import "framework/mobile";
 @import "framework/modal";
 @import "framework/nav";
+@import "framework/new-nav";
 @import "framework/pagination";
 @import "framework/panels";
 @import "framework/selects";
 @import "framework/sidebar";
+@import "framework/new-sidebar";
 @import "framework/tables";
 @import "framework/notes";
 @import "framework/timeline";
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 5c68059f485..1d72a70f0f5 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -260,7 +260,7 @@
   position: relative;
   border: 1px solid $blue-300;
   border-radius: $border-radius-default;
-  background-color: $blue-25;
+  background-color: $blue-50;
   justify-content: center;
 
   .dismiss-button {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 2bcd23a15e6..c0d8e6c328c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -779,6 +779,14 @@
         white-space: normal;
         width: 100%;
 
+        &.dropdown-menu-user-link {
+          white-space: nowrap;
+
+          .dropdown-menu-user-username {
+            display: block;
+          }
+        }
+
         // make sure the text color is not overriden
         &.text-danger {
           color: $brand-danger;
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
index 7fa58b11d9d..6b69e8018be 100644
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ b/app/assets/stylesheets/framework/gitlab-theme.scss
@@ -126,7 +126,7 @@
     .search-input-wrap {
       .search-icon,
       .clear-icon {
-        color: rgba($color-200, .8);
+        fill: rgba($color-200, .8);
       }
     }
 
@@ -141,7 +141,7 @@
 
       .search-input-wrap {
         .search-icon {
-          color: rgba($color-200, .8);
+          fill: rgba($color-200, .8);
         }
       }
     }
@@ -242,17 +242,21 @@ body {
 
         &:hover {
           background-color: $white-light;
-          box-shadow: inset 0 0 0 1px $blue-100;
+          box-shadow: inset 0 0 0 1px $blue-200;
 
           .location-badge {
-            box-shadow: inset 0 0 0 1px $blue-100;
+            box-shadow: inset 0 0 0 1px $blue-200;
           }
         }
       }
 
       .search-input-wrap {
         .search-icon {
-          color: $theme-gray-200;
+          fill: $theme-gray-200;
+        }
+
+        .search-input {
+          color: $gl-text-color;
         }
       }
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index ab3c34df1fb..d932ea8794f 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -109,8 +109,7 @@ header {
 
       .user-counter {
         svg {
-          height: 16px;
-          width: 23px;
+          margin-right: 3px;
         }
       }
 
@@ -133,16 +132,16 @@ header {
   }
 
   &.navbar-gitlab-new {
-    .fa-times {
+    .close-icon {
       display: none;
     }
 
     .menu-expanded {
-      .fa-ellipsis-v {
+      .more-icon {
         display: none;
       }
 
-      .fa-times {
+      .close-icon {
         display: block;
       }
     }
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 60d61c68d63..59bfc5a8d77 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -27,7 +27,9 @@
 }
 
 svg {
+  &.s8 { @include svg-size(8px); }
   &.s16 { @include svg-size(16px); }
+  &.s18 { @include svg-size(18px); }
   &.s24 { @include svg-size(24px); }
   &.s32 { @include svg-size(32px); }
   &.s48 { @include svg-size(48px); }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index d40b65bb2cc..2fee2164190 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -142,5 +142,41 @@
 }
 
 @mixin green-status-color {
-  @include status-color($green-50, $green-500, $green-700);
+  @include status-color($green-100, $green-500, $green-700);
+}
+
+@mixin fade($gradient-direction, $gradient-color) {
+  visibility: hidden;
+  opacity: 0;
+  z-index: 2;
+  position: absolute;
+  bottom: 12px;
+  width: 43px;
+  height: 30px;
+  transition-duration: .3s;
+  -webkit-transform: translateZ(0);
+  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
+
+  &.scrolling {
+    visibility: visible;
+    opacity: 1;
+    transition-duration: .3s;
+  }
+
+  .fa {
+    position: relative;
+    top: 5px;
+    font-size: 18px;
+  }
+}
+
+@mixin scrolling-links() {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 2f7717760ec..f8777d1fd9d 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,38 +1,4 @@
-@mixin fade($gradient-direction, $gradient-color) {
-  visibility: hidden;
-  opacity: 0;
-  z-index: 2;
-  position: absolute;
-  bottom: 12px;
-  width: 43px;
-  height: 30px;
-  transition-duration: .3s;
-  -webkit-transform: translateZ(0);
-  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
-
-  &.scrolling {
-    visibility: visible;
-    opacity: 1;
-    transition-duration: .3s;
-  }
-
-  .fa {
-    position: relative;
-    top: 5px;
-    font-size: 18px;
-  }
-}
 
-@mixin scrolling-links() {
-  overflow-x: auto;
-  overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
-  display: flex;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
 
 .nav-links {
   display: flex;
diff --git a/app/assets/stylesheets/new_nav.scss b/app/assets/stylesheets/framework/new-nav.scss
index 8c5bafac637..3abf3e4ac7d 100644
--- a/app/assets/stylesheets/new_nav.scss
+++ b/app/assets/stylesheets/framework/new-nav.scss
@@ -120,17 +120,24 @@ header.navbar-gitlab-new {
   .container-fluid {
     .navbar-toggle {
       min-width: 45px;
-      padding: 4px $gl-padding;
+      padding: 0 $gl-padding;
       margin-right: -7px;
-      font-size: 14px;
       text-align: center;
       color: currentColor;
 
+      svg {
+        fill: currentColor;
+      }
+
       &:hover,
       &:focus,
       &.active {
         color: currentColor;
         background-color: transparent;
+
+        svg {
+          fill: currentColor;
+        }
       }
     }
 
@@ -279,10 +286,6 @@ header.navbar-gitlab-new {
   }
 }
 
-.admin-icon i {
-  font-size: 18px;
-}
-
 .caret-down {
   height: 11px;
   width: 11px;
@@ -295,75 +298,6 @@ header.navbar-gitlab-new {
   margin-top: 4px;
 }
 
-.search {
-  margin: 4px 8px 0;
-
-  form {
-    height: 32px;
-    border: 0;
-    border-radius: $border-radius-default;
-    transition: border-color ease-in-out 0.15s, background-color ease-in-out 0.15s;
-
-    &:hover {
-      box-shadow: none;
-    }
-  }
-
-  &.search-active form {
-    box-shadow: none;
-
-    .search-input {
-      color: $gl-text-color;
-      transition: color ease-in-out 0.15s;
-    }
-
-    .search-input::placeholder {
-      color: $gl-text-color-tertiary;
-    }
-
-    .search-input-wrap {
-      .search-icon,
-      .clear-icon {
-        color: $gl-text-color-tertiary;
-        transition: color ease-in-out 0.15s;
-      }
-    }
-  }
-
-  .search-input {
-    color: $white-light;
-    background: none;
-    transition: color ease-in-out 0.15s;
-  }
-
-  .search-input::placeholder {
-    transition: color ease-in-out 0.15s;
-  }
-
-  .location-badge {
-    font-size: 12px;
-    margin: -4px 4px -4px -4px;
-    line-height: 25px;
-    padding: 4px 8px;
-    border-radius: 2px 0 0 2px;
-    height: 32px;
-    transition: border-color ease-in-out 0.15s;
-  }
-
-  &.search-active {
-    .location-badge {
-      background-color: $nav-badge-bg;
-      border-color: $border-color;
-    }
-
-    .search-input-wrap {
-      .clear-icon {
-        color: $white-light;
-      }
-    }
-  }
-}
-
 .breadcrumbs {
   display: flex;
   min-height: 48px;
@@ -375,6 +309,8 @@ header.navbar-gitlab-new {
   display: flex;
   width: 100%;
   position: relative;
+  padding-top: $gl-padding / 2;
+  padding-bottom: $gl-padding / 2;
   align-items: center;
   border-bottom: 1px solid $border-color;
 }
@@ -386,11 +322,6 @@ header.navbar-gitlab-new {
   align-self: center;
   color: $gl-text-color-secondary;
 
-  @media (max-width: $screen-xs-max) {
-    padding-left: 17px;
-    border-left: 1px solid $gl-text-color-quaternary;
-  }
-
   .avatar-tile {
     margin-right: 4px;
     border: 1px solid $border-color;
@@ -420,6 +351,7 @@ header.navbar-gitlab-new {
     display: flex;
     align-items: center;
     position: relative;
+    padding: 2px 0;
 
     &:not(:last-child) {
       margin-right: 20px;
@@ -455,7 +387,7 @@ header.navbar-gitlab-new {
   margin: 0;
   font-size: 12px;
   font-weight: 600;
-  line-height: 1;
+  line-height: 16px;
 
   a {
     color: $gl-text-color;
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/framework/new-sidebar.scss
index 9c404b7e542..8332cec2962 100644
--- a/app/assets/stylesheets/new_sidebar.scss
+++ b/app/assets/stylesheets/framework/new-sidebar.scss
@@ -56,8 +56,8 @@ $new-sidebar-collapsed-width: 50px;
     color: $hover-color;
 
     .settings-avatar {
-      i {
-        color: $hover-color;
+      svg {
+        fill: $hover-color;
       }
     }
   }
@@ -76,12 +76,9 @@ $new-sidebar-collapsed-width: 50px;
 .settings-avatar {
   background-color: $white-light;
 
-  i {
-    font-size: 20px;
-    width: 100%;
-    color: $gl-text-color-secondary;
-    text-align: center;
-    align-self: center;
+  svg {
+    fill: $gl-text-color-secondary;
+    margin: auto;
   }
 }
 
@@ -177,16 +174,16 @@ $new-sidebar-collapsed-width: 50px;
   .nav-icon-container {
     display: flex;
     margin-right: 8px;
-
-    svg {
-      height: 16px;
-      width: 16px;
-    }
   }
 
   .fly-out-top-item {
     display: none;
   }
+
+  svg {
+    height: 16px;
+    width: 16px;
+  }
 }
 
 .nav-sidebar-inner-scroll {
@@ -354,18 +351,22 @@ $new-sidebar-collapsed-width: 50px;
   display: flex;
   align-items: center;
 
-  i {
-    font-size: 20px;
+  svg {
+    fill: $gl-text-color-secondary;
     margin-right: 8px;
   }
 
-  .fa-angle-double-right {
+  .icon-angle-double-right {
     display: none;
   }
 
   &:hover {
     background-color: $border-color;
     color: $gl-text-color;
+
+    svg {
+      fill: $gl-text-color;
+    }
   }
 }
 
@@ -407,15 +408,16 @@ $new-sidebar-collapsed-width: 50px;
 
   .toggle-sidebar-button {
     width: $new-sidebar-collapsed-width - 2px;
-    padding: 16px 18px;
+    padding: 16px;
 
     .collapse-text,
-    .fa-angle-double-left {
+    .icon-angle-double-left {
       display: none;
     }
 
-    .fa-angle-double-right {
+    .icon-angle-double-right {
       display: block;
+      margin: 0;
     }
   }
 }
@@ -461,6 +463,13 @@ $new-sidebar-collapsed-width: 50px;
       font-size: 18px;
     }
   }
+
+  @media (max-width: $screen-xs-max) {
+    + .breadcrumbs-links {
+      padding-left: 17px;
+      border-left: 1px solid $gl-text-color-quaternary;
+    }
+  }
 }
 
 @media (max-width: $screen-xs-max) {
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 4c35e3a9c3c..3ea77eb7a43 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -137,7 +137,7 @@ $well-border: #eee;
 //##
 
 $code-color: $red-600;
-$code-bg: lighten($red-50, 2%);
+$code-bg: lighten($red-100, 2%);
 
 $kbd-color: $white-light;
 $kbd-bg: #333;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 75cb9e009bb..d7a8bfab08a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -6,6 +6,8 @@ $gutter_width: 290px;
 $gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
+$default-transition-duration: .15s;
+$right-sidebar-transition-duration: .3s;
 
 /*
  * Color schema
@@ -27,46 +29,45 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
 
-$green-25: #f6fcf8;
-$green-50: #e4f5eb;
-$green-100: #bae6cc;
-$green-200: #8dd5aa;
-$green-300: #5fc488;
-$green-400: #3cb76f;
+$green-50: #f1fdf6;
+$green-100: #dcf5e7;
+$green-200: #b3e6c8;
+$green-300: #75d09b;
+$green-400: #37b96d;
 $green-500: #1aaa55;
 $green-600: #168f48;
 $green-700: #12753a;
 $green-800: #0e5a2d;
 $green-900: #0a4020;
+$green-950: #072b15;
 
-$blue-25: #f6fafd;
-$blue-50: #e4eff9;
-$blue-100: #bcd7f1;
-$blue-200: #8fbce8;
-$blue-300: #62a1df;
-$blue-400: #418cd8;
+$blue-50: #f6fafe;
+$blue-100: #e4f0fb;
+$blue-200: #b8d6f4;
+$blue-300: #73afea;
+$blue-400: #2e87e0;
 $blue-500: #1f78d1;
 $blue-600: #1b69b6;
 $blue-700: #17599c;
 $blue-800: #134a81;
 $blue-900: #0f3b66;
+$blue-950: #0a2744;
 
-$orange-25: #fffcf8;
-$orange-50: #fff2e1;
-$orange-100: #fedfb3;
-$orange-200: #feca81;
-$orange-300: #fdb44f;
-$orange-400: #fca429;
+$orange-50: #fffaf4;
+$orange-100: #fff1de;
+$orange-200: #fed69f;
+$orange-300: #fdbc60;
+$orange-400: #fca121;
 $orange-500: #fc9403;
 $orange-600: #de7e00;
 $orange-700: #c26700;
-$orange-800: #a35100;
-$orange-900: #853b00;
+$orange-800: #a35200;
+$orange-900: #853c00;
+$orange-950: #592800;
 
-$red-25: #fef7f6;
-$red-50: #fbe7e4;
-$red-100: #f4c4bc;
-$red-200: #ed9d90;
+$red-50: #fef6f5;
+$red-100: #fbe5e1;
+$red-200: #f2b4a9;
 $red-300: #e67664;
 $red-400: #e05842;
 $red-500: #db3b21;
@@ -74,6 +75,7 @@ $red-600: #c0341d;
 $red-700: #a62d19;
 $red-800: #8b2615;
 $red-900: #711e11;
+$red-950: #4b140b;
 
 // GitLab themes
 
@@ -184,8 +186,8 @@ $list-text-disabled-color: $gl-text-color-tertiary;
 $list-border-light: #eee;
 $list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
-$list-warning-row-bg: $orange-50;
-$list-warning-row-border: $orange-100;
+$list-warning-row-bg: $orange-100;
+$list-warning-row-border: $orange-200;
 $list-warning-row-color: $orange-700;
 
 /*
@@ -214,8 +216,8 @@ $gl-sidebar-padding: 22px;
 /*
  * Misc
  */
-$row-hover: $blue-25;
-$row-hover-border: $blue-100;
+$row-hover: $blue-50;
+$row-hover-border: $blue-200;
 $progress-color: #c0392b;
 $header-height: 50px;
 $new-navbar-height: 40px;
@@ -265,8 +267,8 @@ $time-color: #999;
 $project-member-show-color: #aaa;
 $gl-promo-color: #aaa;
 $error-bg: $red-400;
-$warning-message-bg: $orange-50;
-$warning-message-border: $orange-100;
+$warning-message-bg: $orange-100;
+$warning-message-border: $orange-200;
 $warning-message-color: $orange-700;
 $control-group-descr-color: #666;
 $table-permission-x-bg: #d9edf7;
@@ -451,17 +453,17 @@ $builds-trace-bg: #111;
 /*
 * Callout
 */
-$callout-danger-bg: $red-50;
-$callout-danger-border: $red-100;
+$callout-danger-bg: $red-100;
+$callout-danger-border: $red-200;
 $callout-danger-color: $red-700;
-$callout-warning-bg: $orange-50;
-$callout-warning-border: $orange-100;
+$callout-warning-bg: $orange-100;
+$callout-warning-border: $orange-200;
 $callout-warning-color: $orange-700;
-$callout-info-bg: $blue-50;
-$callout-info-border: $blue-100;
+$callout-info-bg: $blue-100;
+$callout-info-border: $blue-200;
 $callout-info-color: $blue-700;
-$callout-success-bg: $green-50;
-$callout-success-border: $green-100;
+$callout-success-bg: $green-100;
+$callout-success-border: $green-200;
 $callout-success-color: $green-700;
 
 /*
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 700be173039..3305a482a0d 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -55,6 +55,15 @@
 
 .boards-app {
   position: relative;
+
+  @media (min-width: $screen-sm-min) {
+    transition: width $right-sidebar-transition-duration;
+    width: 100%;
+
+    &.is-compact {
+      width: calc(100% - #{$gutter_width});
+    }
+  }
 }
 
 .boards-app-loading {
@@ -78,11 +87,6 @@
     height: calc(100vh - 222px);
     // scss-lint:enable DuplicateProperty
     min-height: 475px;
-    transition: width .2s;
-
-    &.is-compact {
-      width: calc(100% - 290px);
-    }
   }
 }
 
@@ -412,14 +416,6 @@
 
 .page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar,
 .page-with-new-sidebar.page-with-sidebar .issue-boards-sidebar {
-  position: absolute;
-
-  &.right-sidebar {
-    top: 0;
-    bottom: 0;
-    height: 100%;
-  }
-
   .issuable-sidebar-header {
     position: relative;
   }
@@ -457,8 +453,8 @@
 .right-sidebar.right-sidebar-expanded {
   &.boards-sidebar-slide-enter-active,
   &.boards-sidebar-slide-leave-active {
-    transition: width .2s,
-                padding .2s;
+    transition: width $right-sidebar-transition-duration,
+                padding $right-sidebar-transition-duration;
   }
 
   &.boards-sidebar-slide-enter,
diff --git a/app/assets/stylesheets/pages/convdev_index.scss b/app/assets/stylesheets/pages/convdev_index.scss
index 16702442f50..fb1899284fd 100644
--- a/app/assets/stylesheets/pages/convdev_index.scss
+++ b/app/assets/stylesheets/pages/convdev_index.scss
@@ -83,7 +83,7 @@ $space-between-cards: 8px;
   border-top-color: $color-low-score;
 
   .card-score-big {
-    background-color: $red-25;
+    background-color: $red-50;
   }
 }
 
@@ -91,7 +91,7 @@ $space-between-cards: 8px;
   border-top-color: $color-average-score;
 
   .card-score-big {
-    background-color: $orange-25;
+    background-color: $orange-50;
   }
 }
 
@@ -99,7 +99,7 @@ $space-between-cards: 8px;
   border-top-color: $color-high-score;
 
   .card-score-big {
-    background-color: $green-25;
+    background-color: $green-50;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 951580ea1fe..e4bd783c8bc 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -451,7 +451,7 @@
 }
 
 .files {
-  margin-top: -1px;
+  margin-top: 1px;
 
   .diff-file:last-child {
     margin-bottom: 0;
@@ -535,7 +535,6 @@
 }
 
 .diff-notes-collapse {
-  position: relative;
   width: 19px;
   height: 19px;
   padding: 0;
@@ -543,11 +542,7 @@
   z-index: 100;
 
   svg {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -5.5px;
-    margin-top: -5.5px;
+    vertical-align: text-top;
   }
 
   path {
@@ -586,11 +581,6 @@
       top: 76px;
     }
 
-    + .files,
-    + .alert {
-      margin-top: 1px;
-    }
-
     &:not(.is-stuck) .diff-stats-additions-deletions-collapsed {
       display: none;
     }
@@ -605,11 +595,6 @@
       .inline-parallel-buttons {
         display: none;
       }
-
-      + .files,
-      + .alert {
-        margin-top: 32px;
-      }
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index a88484d1a9e..e8d57214cb7 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -7,7 +7,7 @@
 
 .issuable-warning-icon {
   color: $orange-600;
-  background-color: $orange-50;
+  background-color: $orange-100;
   border-radius: $border-radius-default;
   padding: 5px;
   margin: 0 $btn-side-margin 0 0;
@@ -221,14 +221,14 @@
   top: $new-navbar-height;
   bottom: 0;
   right: 0;
-  transition: width .3s;
+  transition: width $right-sidebar-transition-duration;
   background: $gray-light;
   z-index: 200;
   overflow: hidden;
 
   .issuable-sidebar {
     width: calc(100% + 100px);
-    height: calc(100% - #{$new-navbar-height});
+    height: 100%;
     overflow-y: scroll;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 35cefd449f1..dbf3e2b763c 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -255,7 +255,7 @@ $colors: (
 
     &.saved {
       .editor {
-        border-top: solid 2px $green-200;
+        border-top: solid 2px $green-300;
       }
     }
 
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 5b93ff5ce14..14ce8b97c13 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -103,7 +103,7 @@
 
 .issuable-note-warning {
   color: $orange-600;
-  background-color: $orange-50;
+  background-color: $orange-100;
   border-radius: $border-radius-default $border-radius-default 0 0;
   border: 1px solid $border-gray-normal;
   border-bottom: none;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 9d03a042aa3..086dd528579 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -644,20 +644,20 @@ button.mini-pipeline-graph-dropdown-toggle {
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    @include mini-pipeline-graph-color($green-50, $green-500, $green-600);
+    @include mini-pipeline-graph-color($green-100, $green-500, $green-600);
   }
 
   &.ci-status-icon-failed {
-    @include mini-pipeline-graph-color($red-50, $red-500, $red-600);
+    @include mini-pipeline-graph-color($red-100, $red-500, $red-600);
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-success_with_warnings {
-    @include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600);
+    @include mini-pipeline-graph-color($orange-100, $orange-500, $orange-600);
   }
 
   &.ci-status-icon-running {
-    @include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600);
+    @include mini-pipeline-graph-color($blue-100, $blue-400, $blue-600);
   }
 
   &.ci-status-icon-canceled,
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index c5d6ff66dd6..67abe6e88ed 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -291,7 +291,7 @@ table.u2f-registrations {
   .bordered-box {
     border: 1px solid $blue-300;
     border-radius: $border-radius-default;
-    background-color: $blue-25;
+    background-color: $blue-50;
     position: relative;
     display: flex;
     justify-content: center;
@@ -379,7 +379,7 @@ table.u2f-registrations {
 
 .nav-wip {
   border: 1px solid $blue-500;
-  background: $blue-25;
+  background: $blue-50;
   padding: $gl-padding;
   margin-bottom: $gl-padding;
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 6400b72742c..1f7b6703909 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -516,7 +516,7 @@ a.deploy-project-label {
       text-align: center;
       width: 169px;
 
-      &:hover,
+      &:hover:not(.disabled),
       &.forked {
         background-color: $row-hover;
         border-color: $row-hover-border;
@@ -543,6 +543,15 @@ a.deploy-project-label {
         padding-top: $gl-padding;
         color: $gl-text-color;
 
+        &.disabled {
+          opacity: .3;
+          cursor: not-allowed;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
         .caption {
           min-height: 30px;
           padding: $gl-padding 0;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 4d4d92f9494..c36fe25f74d 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -54,6 +54,10 @@
   border-radius: $border-radius-default;
   color: $almost-black;
 
+  .code.white pre .hll {
+    background-color: $well-light-border !important;
+  }
+
   .tree-content-holder {
     display: flex;
     min-height: 300px;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 13dd7b5a780..89ebe3f9917 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -28,9 +28,7 @@ input[type="checkbox"]:hover {
 }
 
 .search {
-  margin-right: 10px;
-  margin-left: 10px;
-  margin-top: ($header-height - 35) / 2;
+  margin: 4px 8px 0;
 
   form {
     @extend .form-control;
@@ -38,15 +36,23 @@ input[type="checkbox"]:hover {
     padding: 4px;
     width: $search-input-width;
     line-height: 24px;
+    height: 32px;
+    border: 0;
+    border-radius: $border-radius-default;
+    transition: border-color ease-in-out $default-transition-duration, background-color ease-in-out $default-transition-duration;
 
     &:hover {
-      border-color: lighten($dropdown-input-focus-border, 20%);
-      box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+      box-shadow: none;
     }
   }
 
-  .location-text {
-    font-style: normal;
+  .location-badge {
+    font-size: 12px;
+    margin: -4px 4px -4px -4px;
+    line-height: 25px;
+    padding: 4px 8px;
+    border-radius: $border-radius-default 0 0 $border-radius-default;
+    transition: border-color ease-in-out $default-transition-duration;
   }
 
   .search-input {
@@ -56,59 +62,36 @@ input[type="checkbox"]:hover {
     margin-left: 5px;
     line-height: 25px;
     width: 98%;
+    color: $white-light;
+    background: none;
+    transition: color ease-in-out $default-transition-duration;
   }
 
-  .location-badge {
-    line-height: 25px;
-    padding: 0 5px;
-    border-radius: $border-radius-default;
-    font-size: 14px;
-    font-style: normal;
-    color: $note-disabled-comment-color;
-    display: inline-block;
-    background-color: $gray-normal;
-    vertical-align: top;
-    cursor: default;
+  .search-input::placeholder {
+    transition: color ease-in-out $default-transition-duration;
   }
 
   .search-input-container {
-    display: -webkit-flex;
     display: flex;
     position: relative;
   }
 
   .search-input-wrap {
-    // Fallback if flexbox is not supported
-    display: inline-block;
-  }
-
-  .search-input-wrap {
-    width: 100%;
-
     .search-icon,
     .clear-icon {
       position: absolute;
       right: 5px;
-      top: 0;
-      color: $location-icon-color;
-
-      &::before {
-        font-family: FontAwesome;
-        font-weight: $gl-font-weight-normal;
-        font-style: normal;
-      }
+      top: 4px;
     }
 
     .search-icon {
-      @extend .fa-search;
-      transition: color 0.15s;
+      transition: color $default-transition-duration;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
     }
 
     .clear-icon {
-      @extend .fa-times;
       display: none;
     }
 
@@ -148,21 +131,32 @@ input[type="checkbox"]:hover {
     form {
       @extend .form-control:focus;
       border-color: $dropdown-input-focus-border;
-      box-shadow: 0 0 4px $search-input-focus-shadow-color;
-    }
+      box-shadow: none;
+
+      .search-input-wrap {
+        .search-icon,
+        .clear-icon {
+          color: $gl-text-color-tertiary;
+          transition: color ease-in-out $default-transition-duration;
+        }
+      }
 
-    .location-badge {
-      transition: all 0.15s;
-      background-color: $location-badge-active-bg;
-      color: $white-light;
-    }
+      .search-input {
+        color: $gl-text-color;
+        transition: color ease-in-out $default-transition-duration;
+      }
 
-    .search-input-wrap {
-      i {
-        color: $layout-link-gray;
+      .search-input::placeholder {
+        color: $gl-text-color-tertiary;
       }
     }
 
+    .location-badge {
+      transition: all $default-transition-duration;
+      background-color: $nav-badge-bg;
+      border-color: $border-color;
+    }
+
     .dropdown-menu {
       transition-duration: 100ms, 75ms;
       transition-delay: 75ms, 100ms;
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 36f622db136..25c80e1f950 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -18,7 +18,7 @@
   }
 
   &.ci-failed {
-    @include status-color($red-50, $red-500, $red-600);
+    @include status-color($red-100, $red-500, $red-600);
   }
 
   &.ci-success {
@@ -39,12 +39,12 @@
   &.ci-pending,
   &.ci-failed_with_warnings,
   &.ci-success_with_warnings {
-    @include status-color($orange-50, $orange-500, $orange-700);
+    @include status-color($orange-100, $orange-500, $orange-700);
   }
 
   &.ci-info,
   &.ci-running {
-    @include status-color($blue-50, $blue-500, $blue-600);
+    @include status-color($blue-100, $blue-500, $blue-600);
   }
 
   &.ci-created,
diff --git a/app/assets/stylesheets/test.scss b/app/assets/stylesheets/test.scss
index 7d9f3da79c5..06733b7f1a9 100644
--- a/app/assets/stylesheets/test.scss
+++ b/app/assets/stylesheets/test.scss
@@ -15,3 +15,9 @@
   -ms-animation: none !important;
   animation: none !important;
 }
+
+// Disable sticky changes bar for tests
+.diff-files-changed {
+  position: relative !important;
+  top: 0 !important;
+}