Merge remote-tracking branch 'origin/master' into deprecation-warning-for-dynamic-milestones

25 files changed, 633 insertions, 296 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 06dabcc77b5..b10cdf206a0 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -446,6 +446,19 @@
   }
 }
 
+.btn-missing {
+  color: $notes-light-color;
+  border: 1px dashed $border-gray-normal-dashed;
+  border-radius: $border-radius-default;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $notes-light-color;
+    background-color: $white-normal;
+  }
+}
+
 .btn-svg svg {
   @include btn-svg;
 }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index ae517c41cb2..37d33320445 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -14,6 +14,10 @@
   color: $gl-text-color-secondary;
 }
 
+.text-tertiary {
+  color: $gl-text-color-tertiary;
+}
+
 .text-primary,
 .text-primary:hover {
   color: $brand-primary;
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 1acde98c3ae..e2d97d0298f 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -9,7 +9,8 @@
     padding-left: $contextual-sidebar-width;
   }
 
-  .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
+  .issues-bulk-update.right-sidebar.right-sidebar-expanded
+    .issuable-sidebar-header {
     padding: 10px 0 15px;
   }
 }
@@ -61,7 +62,8 @@
 }
 
 .nav-sidebar {
-  transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
+  transition: width $sidebar-transition-duration,
+    left $sidebar-transition-duration;
   position: fixed;
   z-index: 400;
   width: $contextual-sidebar-width;
@@ -75,7 +77,7 @@
   &:not(.sidebar-collapsed-desktop) {
     @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
       box-shadow: inset -2px 0 0 $border-color,
-                  2px 1px 3px $dropdown-shadow-color;
+        2px 1px 3px $dropdown-shadow-color;
     }
   }
 
@@ -234,7 +236,7 @@
           border-radius: 0 3px 3px 0;
 
           &::before {
-            content: "";
+            content: '';
             position: absolute;
             top: -30px;
             bottom: -30px;
@@ -305,7 +307,6 @@
   }
 }
 
-
 // Collapsed nav
 
 .toggle-sidebar-button,
@@ -454,18 +455,3 @@
     z-index: 300;
   }
 }
-
-
-// Make issue boards full-height now that sub-nav is gone
-
-.boards-list {
-  height: calc(100vh - #{$header-height});
-
-  @media (min-width: $screen-sm-min) {
-    height: calc(100vh - 180px);
-  }
-}
-
-.with-performance-bar .boards-list {
-  height: calc(100vh - #{$header-height} - #{$performance-bar-height});
-}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 1d7b0b602cc..6397757bf88 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -272,7 +272,7 @@
 
   .divider {
     height: 1px;
-    margin: 6px 0;
+    margin: #{$grid-size / 2} 0;
     padding: 0;
     background-color: $dropdown-divider-color;
 
@@ -501,10 +501,8 @@
           -moz-osx-font-smoothing: grayscale;
         }
 
-        &.dropdown-menu-user-link {
-          &::before {
-            top: 50%;
-          }
+        &.dropdown-menu-user-link::before {
+          top: 50%;
         }
       }
 
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index 88ce119ee3a..cb2f71b0033 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -12,6 +12,12 @@
     margin: 0;
   }
 
+  .flash-warning {
+    @extend .alert;
+    @extend .alert-warning;
+    margin: 0;
+  }
+
   .flash-alert {
     @extend .alert;
     @extend .alert-danger;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 634593aefd0..0136af76a13 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -1,60 +1,24 @@
 .navbar-gitlab {
-  &.navbar-gitlab {
-    padding: 0 16px;
-    z-index: 1000;
-    margin-bottom: 0;
-    min-height: $header-height;
-    border: 0;
-    border-bottom: 1px solid $border-color;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    border-radius: 0;
-
-    .logo-text {
-      line-height: initial;
-
-      svg {
-        width: 55px;
-        height: 14px;
-        margin: 0;
-        fill: $white-light;
-      }
-    }
-
-    .container-fluid {
-      padding: 0;
-
-      .user-counter {
-        svg {
-          margin-right: 3px;
-        }
-      }
-
-      .navbar-toggle {
-        right: -10px;
-        border-radius: 0;
-        min-width: 45px;
-        padding: 0;
-        margin-right: -7px;
-        font-size: 14px;
-        text-align: center;
-        color: currentColor;
-
-        &:hover,
-        &:focus,
-        &.active {
-          color: currentColor;
-          background-color: transparent;
-        }
-
-        .more-icon,
-        .close-icon {
-          fill: $white-light;
-          margin: auto;
-        }
-      }
+  padding: 0 16px;
+  z-index: 1000;
+  margin-bottom: 0;
+  min-height: $header-height;
+  border: 0;
+  border-bottom: 1px solid $border-color;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-radius: 0;
+
+  .logo-text {
+    line-height: initial;
+
+    svg {
+      width: 55px;
+      height: 14px;
+      margin: 0;
+      fill: $white-light;
     }
   }
 
@@ -184,6 +148,37 @@
   }
 
   .container-fluid {
+    padding: 0;
+
+    .user-counter {
+      svg {
+        margin-right: 3px;
+      }
+    }
+
+    .navbar-toggle {
+      right: -10px;
+      border-radius: 0;
+      min-width: 45px;
+      padding: 0;
+      margin-right: -7px;
+      font-size: 14px;
+      text-align: center;
+      color: currentColor;
+
+      &:hover,
+      &:focus,
+      &.active {
+        color: currentColor;
+        background-color: transparent;
+      }
+
+      .more-icon,
+      .close-icon {
+        fill: $white-light;
+        margin: auto;
+      }
+    }
 
     .navbar-nav {
       @media (max-width: $screen-xs-max) {
@@ -337,7 +332,7 @@
 .breadcrumbs {
   display: -webkit-flex;
   display: flex;
-  min-height: 48px;
+  min-height: $breadcrumb-min-height;
   color: $gl-text-color;
 }
 
@@ -466,7 +461,7 @@
       padding: 0 5px;
       line-height: 12px;
       border-radius: 7px;
-      box-shadow: 0 1px 0 rgba($gl-header-color, .2);
+      box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
 
       &.issues-count {
         background-color: $green-500;
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 2d015ef086b..df1cafc9f8e 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -20,7 +20,7 @@
     width: 100%;
   }
 
-  $image-widths: 250 306 394 430;
+  $image-widths: 80 250 306 394 430;
   @each $width in $image-widths {
     &.svg-#{$width} {
       img,
@@ -39,12 +39,35 @@
 svg {
   fill: currentColor;
 
-  &.s8 { @include svg-size(8px); }
-  &.s12 { @include svg-size(12px); }
-  &.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); }
-  &.s72 { @include svg-size(72px); }
+  &.s8 {
+    @include svg-size(8px);
+  }
+
+  &.s12 {
+    @include svg-size(12px);
+  }
+
+  &.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);
+  }
+
+  &.s72 {
+    @include svg-size(72px);
+  }
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index ddd9dbb2be4..e12b5aab381 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -17,8 +17,6 @@
  */
 @mixin markdown-table {
   width: auto;
-  display: block;
-  overflow-x: auto;
 }
 
 /*
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index a12f28efce6..8604e753c18 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -63,10 +63,6 @@
     }
   }
 
-  .project-stats {
-    display: none;
-  }
-
   .group-buttons {
     display: none;
   }
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index a6b1bf9b099..48b981dd31f 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -2,14 +2,17 @@
   background-color: $modal-body-bg;
   padding: #{3 * $grid-size} #{2 * $grid-size};
 
-  .page-title {
-    margin-top: 0;
-
+  .page-title,
+  .modal-title {
     .color-label {
       font-size: $gl-font-size;
       padding: $gl-vert-padding $label-padding-modal;
     }
   }
+
+  .page-title {
+    margin-top: 0;
+  }
 }
 
 .modal-body {
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index d61809cb0a4..d1d98270ad9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -3,7 +3,6 @@
   transition: padding $sidebar-transition-duration;
 
   .container-fluid {
-    background: $white-light;
     padding: 0 $gl-padding;
 
     &.container-blank {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index d0999e60e65..294c59f037f 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -296,7 +296,7 @@ body {
   line-height: 1.3;
   font-size: 1.25em;
   font-weight: $gl-font-weight-bold;
-  margin: 12px 7px;
+  margin: 12px 0;
 }
 
 h1,
@@ -333,6 +333,10 @@ a > code {
   font-family: $monospace_font;
 }
 
+.weight-normal {
+  font-weight: $gl-font-weight-normal;
+}
+
 .commit-sha,
 .ref-name {
   @extend .monospace;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 26f03948bae..b8e0811e92c 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -5,9 +5,9 @@ $grid-size: 8px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
 $gutter_inner_width: 250px;
-$sidebar-transition-duration: .3s;
+$sidebar-transition-duration: 0.3s;
 $sidebar-breakpoint: 1024px;
-$default-transition-duration: .15s;
+$default-transition-duration: 0.15s;
 $contextual-sidebar-width: 220px;
 $contextual-sidebar-collapsed-width: 50px;
 
@@ -129,7 +129,6 @@ $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;
@@ -163,7 +162,7 @@ $gl-text-color-secondary: #707070;
 $gl-text-color-tertiary: #949494;
 $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: rgba(255, 255, 255, 1);
-$gl-text-color-secondary-inverted: rgba(255, 255, 255, .85);
+$gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85);
 $gl-text-color-disabled: #919191;
 $gl-text-green: $green-600;
 $gl-text-green-hover: $green-700;
@@ -215,8 +214,8 @@ $tooltip-font-size: 12px;
  */
 $gl-padding: 16px;
 $gl-padding-8: 8px;
+$gl-padding-4: 4px;
 $gl-col-padding: 15px;
-$gl-btn-padding: 10px;
 $gl-input-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top: 10px;
@@ -262,6 +261,7 @@ $highlight-changes-color: rgb(235, 255, 232);
 $performance-bar-height: 35px;
 $flash-height: 52px;
 $context-header-height: 60px;
+$breadcrumb-min-height: 48px;
 
 /*
 * Common component specific colors
@@ -296,7 +296,7 @@ $tanuki-yellow: #fca326;
  */
 $gl-primary: $blue-500;
 $gl-success: $green-500;
-$gl-success-focus: rgba($gl-success, .4);
+$gl-success-focus: rgba($gl-success, 0.4);
 $gl-info: $blue-500;
 $gl-warning: $orange-500;
 $gl-danger: $red-500;
@@ -331,8 +331,11 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 /*
  * Fonts
  */
-$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
-$regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas',
+  'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
+$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif,
+  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
 /*
 * Dropdowns
@@ -343,16 +346,16 @@ $dropdown-max-height: 312px;
 $dropdown-vertical-offset: 4px;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
-$dropdown-empty-row-bg: rgba(#000, .04);
+$dropdown-empty-row-bg: rgba(#000, 0.04);
 $dropdown-border-color: $border-color;
-$dropdown-shadow-color: rgba(#000, .1);
-$dropdown-divider-color: rgba(#000, .1);
+$dropdown-shadow-color: rgba(#000, 0.1);
+$dropdown-divider-color: rgba(#000, 0.1);
 $dropdown-title-btn-color: #bfbfbf;
 $dropdown-input-color: #555;
 $dropdown-input-fa-color: #c7c7c7;
 $dropdown-input-focus-border: $focus-border-color;
-$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
-$dropdown-loading-bg: rgba(#fff, .6);
+$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, 0.4);
+$dropdown-loading-bg: rgba(#fff, 0.6);
 $dropdown-chevron-size: 10px;
 $dropdown-toggle-active-border-color: darken($border-color, 14%);
 $dropdown-item-hover-bg: $gray-darker;
@@ -367,9 +370,9 @@ $dropdown-hover-color: $blue-400;
 /*
 * Contextual Sidebar
 */
-$link-active-background: rgba(0, 0, 0, .04);
-$link-hover-background: rgba(0, 0, 0, .06);
-$inactive-badge-background: rgba(0, 0, 0, .08);
+$link-active-background: rgba(0, 0, 0, 0.04);
+$link-hover-background: rgba(0, 0, 0, 0.06);
+$inactive-badge-background: rgba(0, 0, 0, 0.08);
 
 /*
 * Buttons
@@ -377,6 +380,10 @@ $inactive-badge-background: rgba(0, 0, 0, .08);
 $btn-active-gray: #ececec;
 $btn-active-gray-light: e4e7ed;
 $btn-white-active: #848484;
+$gl-btn-padding: 10px;
+$gl-btn-line-height: 16px;
+$gl-btn-vert-padding: 8px;
+$gl-btn-horz-padding: 12px;
 
 /*
 * Badges
@@ -393,14 +400,14 @@ $status-icon-margin: $gl-btn-padding;
 /*
  *  Award emoji
  */
-$award-emoji-menu-shadow: rgba(0, 0, 0, .175);
+$award-emoji-menu-shadow: rgba(0, 0, 0, 0.175);
 $award-emoji-positive-add-bg: #fed159;
 $award-emoji-positive-add-lines: #bb9c13;
 
 /*
  * Search Box
  */
-$search-input-border-color: rgba($blue-400, .8);
+$search-input-border-color: rgba($blue-400, 0.8);
 $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
 $search-input-width: 220px;
 $location-badge-active-bg: $blue-500;
@@ -425,7 +432,7 @@ $zen-control-color: #555;
 * Calendar
 */
 $calendar-hover-bg: #ecf3fe;
-$calendar-border-color: rgba(#000, .1);
+$calendar-border-color: rgba(#000, 0.1);
 $calendar-user-contrib-text: #959494;
 
 /*
@@ -448,6 +455,17 @@ $ci-skipped-color: #888;
 */
 $issue-boards-font-size: 14px;
 $issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
+/*
+ The following heights are used in boards.scss and are used for calculation of the board height.
+ They probably should be derived in a smarter way.
+*/
+$issue-boards-filter-height: 68px;
+$issue-boards-breadcrumbs-height-xs: 63px;
+$issue-board-list-difference-xs: $header-height +
+  $issue-boards-breadcrumbs-height-xs;
+$issue-board-list-difference-sm: $header-height + $breadcrumb-min-height;
+$issue-board-list-difference-md: $issue-board-list-difference-sm +
+  $issue-boards-filter-height;
 
 /*
 * Avatar
@@ -563,14 +581,14 @@ $label-padding: 7px;
 $label-padding-modal: 10px;
 $label-gray-bg: #f8fafc;
 $label-inverse-bg: #333;
-$label-remove-border: rgba(0, 0, 0, .1);
+$label-remove-border: rgba(0, 0, 0, 0.1);
 $label-border-radius: 100px;
 
 /*
 * Animation
 */
 $fade-in-duration: 200ms;
-$fade-mask-transition-duration: .1s;
+$fade-mask-transition-duration: 0.1s;
 $fade-mask-transition-curve: ease-in-out;
 
 /*
@@ -638,7 +656,6 @@ $stat-graph-selection-stroke: #333;
 $select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
 $select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
 
-
 /*
 * Todo
 */
@@ -675,7 +692,6 @@ CI variable lists
 */
 $ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
 
-
 /*
 Filtered Search
 */
@@ -702,7 +718,14 @@ Repo editor
 */
 $repo-editor-grey: #f6f7f9;
 $repo-editor-grey-darker: #e9ebee;
-$repo-editor-linear-gradient: linear-gradient(to right, $repo-editor-grey 0%, $repo-editor-grey-darker, 20%, $repo-editor-grey 40%, $repo-editor-grey 100%);
+$repo-editor-linear-gradient: linear-gradient(
+  to right,
+  $repo-editor-grey 0%,
+  $repo-editor-grey-darker,
+  20%,
+  $repo-editor-grey 40%,
+  $repo-editor-grey 100%
+);
 
 /*
 Performance Bar
@@ -713,8 +736,8 @@ $perf-bar-staging: #291430;
 $perf-bar-development: #4c1210;
 $perf-bar-bucket-bg: #111;
 $perf-bar-bucket-color: #ccc;
-$perf-bar-bucket-box-shadow-from: rgba($white-light, .2);
-$perf-bar-bucket-box-shadow-to: rgba($black, .25);
+$perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2);
+$perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
 
 /*
 Issuable warning
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 2803144ef1d..c03d4c2eebf 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -1,4 +1,4 @@
-@import "./issues/issue_count_badge";
+@import './issues/issue_count_badge';
 
 [v-cloak] {
   display: none;
@@ -72,22 +72,37 @@
 }
 
 .boards-list {
-  height: calc(100vh - 105px);
+  height: calc(100vh - #{$issue-board-list-difference-xs});
   width: 100%;
-  padding-top: 25px;
-  padding-bottom: 25px;
-  padding-right: ($gl-padding / 2);
-  padding-left: ($gl-padding / 2);
+  padding: $gl-padding ($gl-padding / 2);
   overflow-x: scroll;
   white-space: nowrap;
+  min-height: 200px;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    height: calc(100vh - 90px);
+    height: calc(100vh - #{$issue-board-list-difference-sm});
   }
 
   @media (min-width: $screen-md-min) {
-    height: calc(100vh - 160px);
-    min-height: 475px;
+    height: calc(100vh - #{$issue-board-list-difference-md});
+  }
+
+  .with-performance-bar & {
+    height: calc(
+      100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}
+    );
+
+    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      height: calc(
+        100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}
+      );
+    }
+
+    @media (min-width: $screen-md-min) {
+      height: calc(
+        100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}
+      );
+    }
   }
 }
 
@@ -454,7 +469,7 @@
   &.boards-sidebar-slide-enter-active,
   &.boards-sidebar-slide-leave-active {
     transition: width $sidebar-transition-duration,
-                padding $sidebar-transition-duration;
+      padding $sidebar-transition-duration;
   }
 
   &.boards-sidebar-slide-enter,
@@ -473,7 +488,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: rgba($black, .3);
+  background-color: rgba($black, 0.3);
   z-index: 9999;
 }
 
@@ -490,7 +505,7 @@
   padding: 25px 15px 0;
   background-color: $white-light;
   border-radius: $border-radius-default;
-  box-shadow: 0 2px 12px rgba($black, .5);
+  box-shadow: 0 2px 12px rgba($black, 0.5);
 
   .empty-state {
     display: -webkit-flex;
@@ -568,7 +583,7 @@
 
   .card {
     border: 1px solid $border-gray-dark;
-    box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3);
+    box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3);
     cursor: pointer;
   }
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 17801ed5910..b487f6278c2 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -194,25 +194,15 @@
 
 .commit-actions {
   @media (min-width: $screen-sm-min) {
-    font-size: 0;
-
-    div {
-      display: inline;
-    }
-
     .fa-spinner {
       font-size: 12px;
     }
-
-    span {
-      font-size: 6px;
-    }
   }
 
   .ci-status-link {
     display: inline-block;
     position: relative;
-    top: 1px;
+    top: 2px;
   }
 
   .btn-clipboard,
@@ -234,7 +224,7 @@
 
   .ci-status-icon {
     position: relative;
-    top: 1px;
+    top: 2px;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 884665d35c7..58700661142 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -369,7 +369,8 @@
       }
 
       > text {
-        font-size: 12px;
+        fill: $theme-gray-600;
+        font-size: 10px;
       }
     }
 
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 0cf67734237..e21a9f0afc9 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -103,6 +103,7 @@
 .issuable-show-labels {
   a {
     margin-bottom: 5px;
+    margin-right: 5px;
     display: inline-block;
 
     .color-label {
@@ -116,6 +117,12 @@
   }
 
   &.has-labels {
+    // this font size is a fix to
+    // prevent unintended spacing between labels
+    // which shows up when rendering markup has white-space
+    // characters present.
+    // see: https://css-tricks.com/fighting-the-space-between-inline-block-elements/#article-header-id-3
+    font-size: 0;
     margin-bottom: -5px;
   }
 }
@@ -130,12 +137,22 @@
   z-index: 200;
   overflow: hidden;
 
-  a:not(.btn-retry),
-  .btn-link {
+  a:not(.btn) {
     color: inherit;
+
+    &:hover {
+      color: $gl-link-hover-color;
+
+      .avatar {
+        border-color: rgba($avatar-border, .2);
+      }
+
+    }
+
   }
 
   .btn-link {
+    color: inherit;
     outline: none;
   }
 
@@ -207,7 +224,7 @@
 
       &:hover {
         text-decoration: underline;
-        color: $md-link-color;
+        color: $gl-link-hover-color;
       }
     }
   }
@@ -479,16 +496,6 @@
     }
   }
 
-  a:not(.btn-retry) {
-    &:hover {
-      color: $md-link-color;
-
-      .avatar {
-        border-color: rgba($avatar-border, .2);
-      }
-    }
-  }
-
   .dropdown-menu-toggle {
     width: 100%;
     padding-top: 6px;
@@ -496,6 +503,20 @@
 
   .dropdown-menu {
     width: 100%;
+
+    /*
+     * Overwrite hover style for dropdown items, so that they are not blue
+     * This should be removed during dev of https://gitlab.com/gitlab-org/gitlab-ce/issues/44040
+     */
+    li a {
+      &:hover,
+      &:active,
+      &:focus,
+      &.is-focused {
+        @include dropdown-item-hover;
+      }
+    }
+
   }
 }
 
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 6763af4e98b..b9390450477 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -13,10 +13,20 @@
       display: inline-block;
     }
 
+    .issuable-meta {
+      .author_link {
+        display: inline-block;
+      }
+
+      .issuable-comments {
+        height: 18px;
+      }
+    }
+
     .icon-merge-request-unmerged {
       height: 13px;
       margin-bottom: 3px;
-     }
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f887a11004f..4692d0fb873 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -718,6 +718,8 @@
 }
 
 .mr-memory-usage {
+  width: 100%;
+
   p.usage-info-loading .usage-info-load-spinner {
     margin-right: 10px;
     font-size: 16px;
@@ -727,3 +729,36 @@
 .fork-sprite {
   margin-right: -5px;
 }
+
+.deploy-heading {
+  .media-body {
+    min-width: 0;
+  }
+}
+
+.deploy-body {
+  display: flex;
+  flex-wrap: wrap;
+
+  @media (min-width: $screen-xs) {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+  > *:not(:last-child) {
+    margin-right: .3em;
+  }
+}
+
+.deploy-link {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 100px;
+  max-width: 150px;
+
+  @media (min-width: $screen-xs) {
+    min-width: 0;
+    max-width: 100%;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 26e6e8688b6..81e98f358a8 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -16,7 +16,7 @@ ul.notes {
 
   .note-created-ago,
   .note-updated-at {
-    white-space: nowrap;
+    white-space: normal;
   }
 
   .discussion-body {
@@ -140,12 +140,6 @@ ul.notes {
         @include bulleted-list;
         word-wrap: break-word;
 
-        ul.task-list {
-          ul:not(.task-list) {
-            padding-left: 1.3em;
-          }
-        }
-
         table {
           @include markdown-table;
         }
@@ -723,7 +717,7 @@ ul.notes {
 .line-resolve-all {
   vertical-align: middle;
   display: inline-block;
-  padding: 5px 10px 6px;
+  padding: 6px 10px;
   background-color: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index bf41005b6d5..85de0d8e70f 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -678,6 +678,9 @@ a.deploy-project-label {
   }
 }
 
+.project-empty-note-panel {
+  border-bottom: 1px solid $border-color;
+}
 
 .project-stats {
   font-size: 0;
@@ -686,11 +689,13 @@ a.deploy-project-label {
   border-bottom: 1px solid $border-color;
 
   .nav {
-    padding-top: 12px;
-    padding-bottom: 12px;
+    margin-top: $gl-padding-8;
+    margin-bottom: $gl-padding-8;
 
     > li {
       display: inline-block;
+      margin-top: $gl-padding-4;
+      margin-bottom: $gl-padding-4;
 
       &:not(:last-child) {
         margin-right: $gl-padding;
@@ -704,36 +709,32 @@ a.deploy-project-label {
           float: right;
         }
       }
+    }
 
-      > a {
-        padding: 0;
-        background-color: transparent;
-        font-size: 14px;
-        line-height: 29px;
-        color: $notes-light-color;
+    .stat-text,
+    .stat-link {
+      padding: $gl-btn-vert-padding 0;
+      background-color: transparent;
+      font-size: $gl-font-size;
+      line-height: $gl-btn-line-height;
+      color: $notes-light-color;
+    }
 
-        &:hover,
-        &:focus {
-          color: $gl-text-color;
-          text-decoration: underline;
-        }
+    .stat-link {
+      &:hover,
+      &:focus {
+        color: $gl-text-color;
+        text-decoration: underline;
       }
     }
-  }
 
-  li.missing {
-    border: 1px dashed $border-gray-normal-dashed;
-    border-radius: $border-radius-default;
-
-    a {
-      padding-left: 10px;
-      padding-right: 10px;
-      color: $notes-light-color;
-      display: block;
+    .btn {
+      padding: $gl-btn-vert-padding $gl-btn-horz-padding;
+      line-height: $gl-btn-line-height;
     }
 
-    &:hover {
-      background-color: $gray-normal;
+    .btn-missing {
+      @extend .btn-missing;
     }
   }
 }
@@ -743,7 +744,7 @@ pre.light-well {
 }
 
 .git-empty {
-  margin: 0 7px 7px;
+  margin-bottom: 7px;
 
   h5 {
     color: $gl-text-color;
@@ -895,6 +896,12 @@ pre.light-well {
   }
 }
 
+.project-tip-command {
+  > .input-group-btn:first-child {
+    width: auto;
+  }
+}
+
 .protected-branches-list,
 .protected-tags-list {
   margin-bottom: 30px;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 8265b8370f7..7a8fbfc517d 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -19,6 +19,7 @@
 .ide-view {
   display: flex;
   height: calc(100vh - #{$header-height});
+  margin-top: 40px;
   color: $almost-black;
   border-top: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
@@ -28,6 +29,11 @@
       max-width: 250px;
     }
   }
+
+  .file-status-icon {
+    width: 10px;
+    height: 10px;
+  }
 }
 
 .ide-file-list {
@@ -40,31 +46,41 @@
       background: $white-normal;
     }
 
-    .repo-file-name {
+    .ide-file-name {
+      flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
+
+      svg {
+        vertical-align: middle;
+        margin-right: 2px;
+      }
+
+      .loading-container {
+        margin-right: 4px;
+        display: inline-block;
+      }
     }
 
-    .unsaved-icon {
-      color: $indigo-700;
-      float: right;
-      font-size: smaller;
-      line-height: 20px;
+    .ide-file-changed-icon {
+      margin-left: auto;
     }
 
-    .repo-new-btn {
+    .ide-new-btn {
       display: none;
-      margin-top: -4px;
       margin-bottom: -4px;
+      margin-right: -8px;
     }
 
     &:hover {
-      .repo-new-btn {
+      .ide-new-btn {
         display: block;
       }
+    }
 
-      .unsaved-icon {
-        display: none;
+    &.folder {
+      svg {
+        fill: $gl-text-color-secondary;
       }
     }
   }
@@ -79,10 +95,10 @@
   }
 }
 
-.multi-file-table-name,
-.multi-file-table-col-commit-message {
+.file-name,
+.file-col-commit-message {
+  display: flex;
   overflow: visible;
-  max-width: 0;
   padding: 6px 12px;
 }
 
@@ -99,21 +115,6 @@
   }
 }
 
-table.table tr td.multi-file-table-name {
-  width: 350px;
-  padding: 6px 12px;
-
-  svg {
-    vertical-align: middle;
-    margin-right: 2px;
-  }
-
-  .loading-container {
-    margin-right: 4px;
-    display: inline-block;
-  }
-}
-
 .multi-file-table-col-commit-message {
   white-space: nowrap;
   width: 50%;
@@ -129,13 +130,35 @@ table.table tr td.multi-file-table-name {
 
 .multi-file-tabs {
   display: flex;
-  overflow-x: auto;
   background-color: $white-normal;
   box-shadow: inset 0 -1px $white-dark;
 
-  > li {
+  > ul {
+    display: flex;
+    overflow-x: auto;
+  }
+
+  li {
     position: relative;
   }
+
+  .dropdown {
+    display: flex;
+    margin-left: auto;
+    margin-bottom: 1px;
+    padding: 0 $grid-size;
+    border-left: 1px solid $white-dark;
+    background-color: $white-light;
+
+    &.shadow {
+      box-shadow: 0 0 10px $dropdown-shadow-color;
+    }
+
+    .btn {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
 }
 
 .multi-file-tab {
@@ -160,20 +183,32 @@ table.table tr td.multi-file-table-name {
   position: absolute;
   right: 8px;
   top: 50%;
+  width: 16px;
+  height: 16px;
   padding: 0;
   background: none;
   border: 0;
-  font-size: $gl-font-size;
-  color: $gray-darkest;
+  border-radius: $border-radius-default;
+  color: $theme-gray-900;
   transform: translateY(-50%);
 
-  &:not(.modified):hover,
-  &:not(.modified):focus {
-    color: $hint-color;
+  svg {
+    position: relative;
+    top: -1px;
   }
 
-  &.modified {
-    color: $indigo-700;
+  &:hover {
+    background-color: $theme-gray-200;
+  }
+
+  &:focus {
+    background-color: $blue-500;
+    color: $white-light;
+    outline: 0;
+
+    svg {
+      fill: currentColor;
+    }
   }
 }
 
@@ -192,6 +227,70 @@ table.table tr td.multi-file-table-name {
   .vertical-center {
     min-height: auto;
   }
+
+  .monaco-editor .lines-content .cigr {
+    display: none;
+  }
+
+  .monaco-diff-editor.vs {
+    .editor.modified {
+      box-shadow: none;
+    }
+
+    .diagonal-fill {
+      display: none !important;
+    }
+
+    .diffOverview {
+      background-color: $white-light;
+      border-left: 1px solid $white-dark;
+      cursor: ns-resize;
+    }
+
+    .diffViewport {
+      display: none;
+    }
+
+    .char-insert {
+      background-color: $line-added-dark;
+    }
+
+    .char-delete {
+      background-color: $line-removed-dark;
+    }
+
+    .line-numbers {
+      color: $black-transparent;
+    }
+
+    .view-overlays {
+      .line-insert {
+        background-color: $line-added;
+      }
+
+      .line-delete {
+        background-color: $line-removed;
+      }
+    }
+
+    .margin {
+      background-color: $gray-light;
+      border-right: 1px solid $white-normal;
+
+      .line-insert {
+        border-right: 1px solid $line-added-dark;
+      }
+
+      .line-delete {
+        border-right: 1px solid $line-removed-dark;
+      }
+    }
+
+    .margin-view-overlays .insert-sign,
+    .margin-view-overlays .delete-sign {
+      opacity: 0.4;
+    }
+  }
 }
 
 .multi-file-editor-holder {
@@ -252,7 +351,7 @@ table.table tr td.multi-file-table-name {
   display: flex;
   position: relative;
   flex-direction: column;
-  width: 290px;
+  width: 340px;
   padding: 0;
   background-color: $gray-light;
   padding-right: 3px;
@@ -350,6 +449,11 @@ table.table tr td.multi-file-table-name {
   flex: 1;
 }
 
+.multi-file-commit-empty-state-container {
+  align-items: center;
+  justify-content: center;
+}
+
 .multi-file-commit-panel-header {
   display: flex;
   align-items: center;
@@ -376,7 +480,7 @@ table.table tr td.multi-file-table-name {
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
-  padding: $gl-btn-padding;
+  padding: 0 $gl-btn-padding;
 
   svg {
     margin-right: $gl-btn-padding;
@@ -390,12 +494,34 @@ table.table tr td.multi-file-table-name {
 .multi-file-commit-list {
   flex: 1;
   overflow: auto;
-  padding: $gl-padding;
+  padding: $gl-padding 0;
+  min-height: 60px;
 }
 
 .multi-file-commit-list-item {
   display: flex;
+  padding: 0;
   align-items: center;
+
+  .multi-file-discard-btn {
+    display: none;
+    margin-left: auto;
+    color: $gl-link-color;
+    padding: 0 2px;
+
+    &:focus,
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  &:hover {
+    background: $white-normal;
+
+    .multi-file-discard-btn {
+      display: block;
+    }
+  }
 }
 
 .multi-file-addition {
@@ -414,29 +540,58 @@ table.table tr td.multi-file-table-name {
     margin-left: auto;
     margin-right: auto;
   }
+
+  .file-status-icon {
+    width: 10px;
+    height: 10px;
+    margin-left: 3px;
+  }
 }
 
 .multi-file-commit-list-path {
+  padding: $grid-size / 2;
+  padding-left: $gl-padding;
+  background: none;
+  border: 0;
+  text-align: left;
+  width: 100%;
+  min-width: 0;
+
+  svg {
+    min-width: 16px;
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  &:hover,
+  &:focus {
+    outline: 0;
+  }
+}
+
+.multi-file-commit-list-file-path {
   @include str-truncated(100%);
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    text-decoration: none;
+  }
 }
 
 .multi-file-commit-form {
   padding: $gl-padding;
   border-top: 1px solid $white-dark;
-}
-
-.multi-file-commit-fieldset {
-  display: flex;
-  align-items: center;
-  padding-bottom: 12px;
 
   .btn {
-    flex: 1;
+    font-size: $gl-font-size;
   }
 }
 
 .multi-file-commit-message.form-control {
-  height: 80px;
+  height: 160px;
   resize: none;
 }
 
@@ -468,7 +623,7 @@ table.table tr td.multi-file-table-name {
       top: 0;
       width: 100px;
       height: 1px;
-      background-color: rgba($red-500, .5);
+      background-color: rgba($red-500, 0.5);
     }
   }
 }
@@ -487,7 +642,7 @@ table.table tr td.multi-file-table-name {
   justify-content: center;
 }
 
-.repo-new-btn {
+.ide-new-btn {
   .dropdown-toggle svg {
     margin-top: -2px;
     margin-bottom: 2px;
@@ -505,36 +660,39 @@ table.table tr td.multi-file-table-name {
   }
 }
 
-.ide.nav-only {
-  .flash-container {
-    margin-top: $header-height;
-    margin-bottom: 0;
-  }
-
-  .alert-wrapper .flash-container .flash-alert:last-child,
-  .alert-wrapper .flash-container .flash-notice:last-child {
-    margin-bottom: 0;
-  }
+.ide {
+  overflow: hidden;
 
-  .content {
-    margin-top: $header-height;
-  }
+  &.nav-only {
+    .flash-container {
+      margin-top: $header-height;
+      margin-bottom: 0;
+    }
 
-  .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-    max-height: calc(100vh - #{$header-height + $context-header-height});
-  }
+    .alert-wrapper .flash-container .flash-alert:last-child,
+    .alert-wrapper .flash-container .flash-notice:last-child {
+      margin-bottom: 0;
+    }
 
-  &.flash-shown {
-    .content {
-      margin-top: 0;
+    .content-wrapper {
+      margin-top: $header-height;
+      padding-bottom: 0;
     }
 
-    .ide-view {
-      height: calc(100vh - #{$header-height + $flash-height});
+    &.flash-shown {
+      .content-wrapper {
+        margin-top: 0;
+      }
+
+      .ide-view {
+        height: calc(100vh - #{$header-height + $flash-height});
+      }
     }
 
-    .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-      max-height: calc(100vh - #{$header-height + $flash-height + $context-header-height});
+    .projects-sidebar {
+      .multi-file-commit-panel-inner-scroll {
+        flex: 1;
+      }
     }
   }
 }
@@ -544,34 +702,28 @@ table.table tr td.multi-file-table-name {
     margin-top: #{$header-height + $performance-bar-height};
   }
 
-  .content {
+  .content-wrapper {
     margin-top: #{$header-height + $performance-bar-height};
+    padding-bottom: 0;
   }
 
   .ide-view {
     height: calc(100vh - #{$header-height + $performance-bar-height});
   }
 
-  .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-    max-height: calc(100vh - #{$header-height + $performance-bar-height + 60});
-  }
-
   &.flash-shown {
-    .content {
+    .content-wrapper {
       margin-top: 0;
     }
 
     .ide-view {
-      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
-    }
-
-    .multi-file-commit-panel .multi-file-commit-panel-inner-scroll {
-      max-height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height + $context-header-height});
+      height: calc(
+        100vh - #{$header-height + $performance-bar-height + $flash-height}
+      );
     }
   }
 }
 
-
 .dragHandle {
   position: absolute;
   top: 0;
@@ -587,3 +739,44 @@ table.table tr td.multi-file-table-name {
     left: 0;
   }
 }
+
+.ide-commit-radios {
+  label {
+    font-weight: normal;
+  }
+
+  .help-block {
+    margin-top: 0;
+    line-height: 0;
+  }
+}
+
+.ide-commit-new-branch {
+  margin-left: 25px;
+}
+
+.ide-external-links {
+  p {
+    margin: 0;
+  }
+}
+
+.ide-sidebar-link {
+  padding: $gl-padding-8 $gl-padding;
+  background: $indigo-700;
+  color: $white-light;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+
+  &:focus,
+  &:hover {
+    color: $white-light;
+    text-decoration: underline;
+    background: $indigo-500;
+  }
+
+  &:active {
+    background: $indigo-800;
+  }
+}
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 47672783d5a..a6ca8ed5016 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -205,7 +205,8 @@
     }
 
     .badge {
-      font-size: inherit;
+      font-size: 12px;
+      line-height: 12px;
     }
 
     .panel-heading .badge-count {
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index e70a57c2a67..9a0ec936979 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -180,6 +180,11 @@ ul.wiki-pages-list.content-list {
   }
 }
 
+.wiki-holder {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
 .wiki {
   table {
     @include markdown-table;
diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss
index 6e539e39ca1..d06148a7bf8 100644
--- a/app/assets/stylesheets/performance_bar.scss
+++ b/app/assets/stylesheets/performance_bar.scss
@@ -1,8 +1,8 @@
-@import "framework/variables";
-@import "peek/views/performance_bar";
-@import "peek/views/rblineprof";
+@import 'framework/variables';
+@import 'peek/views/performance_bar';
+@import 'peek/views/rblineprof';
 
-#peek {
+#js-peek {
   position: fixed;
   left: 0;
   top: 0;
@@ -21,14 +21,26 @@
 
   &.production {
     background-color: $perf-bar-production;
+
+    select {
+      background: $perf-bar-production;
+    }
   }
 
   &.staging {
     background-color: $perf-bar-staging;
+
+    select {
+      background: $perf-bar-staging;
+    }
   }
 
   &.development {
     background-color: $perf-bar-development;
+
+    select {
+      background: $perf-bar-development;
+    }
   }
 
   .wrapper {
@@ -42,11 +54,12 @@
     background: $perf-bar-bucket-bg;
     display: inline-block;
     padding: 4px 6px;
-    font-family: Consolas, "Liberation Mono", Courier, monospace;
+    font-family: Consolas, 'Liberation Mono', Courier, monospace;
     line-height: 1;
     color: $perf-bar-bucket-color;
     border-radius: 3px;
-    box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from, inset 0 1px 2px $perf-bar-bucket-box-shadow-to;
+    box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
+      inset 0 1px 2px $perf-bar-bucket-box-shadow-to;
 
     .hidden {
       display: none;
@@ -94,6 +107,10 @@
       max-width: 10000px !important;
     }
   }
+
+  .performance-bar-modal .modal-footer {
+    display: none;
+  }
 }
 
 #modal-peek-pg-queries-content {