18 files changed, 58 insertions, 292 deletions

diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 4e27f438e36..f7b8a4c5b84 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -58,22 +58,6 @@
   }
 }
 
-.cluster-application-banner {
-  height: 45px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.cluster-application-banner-close {
-  align-self: flex-start;
-  font-weight: 500;
-  font-size: 20px;
-  color: $orange-500;
-  opacity: 1;
-  margin: $gl-padding-8 14px 0 0;
-}
-
 .cluster-application-description {
   flex: 1;
 }
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 17474b95e50..9b17da80023 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -174,12 +174,6 @@
 }
 
 .commit-actions {
-  @include media-breakpoint-up(sm) {
-    .fa-spinner {
-      font-size: 12px;
-    }
-  }
-
   .ci-status-icon svg {
     vertical-align: text-bottom;
   }
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index f357d508d5d..f237d57aa88 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -41,12 +41,6 @@
   @include media-breakpoint-down(xs) {
     width: 100%;
     margin-top: 10px;
-
-    > .issue-btn-group {
-      > .btn {
-        width: 100%;
-      }
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 5c845c37e90..e0e10d63f8e 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -74,10 +74,6 @@
     justify-content: flex-end;
   }
 
-  .select2 {
-    float: right;
-  }
-
   .encoding-selector,
   .soft-wrap-toggle {
     display: inline-block;
@@ -220,10 +216,6 @@
   }
 }
 
-.editor-title-row {
-  margin-bottom: 20px;
-}
-
 .popover.suggest-gitlab-ci-yml {
   z-index: $header-zindex - 1;
 }
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index e73b6b18afd..aeda91c1714 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -80,12 +80,6 @@
     .btn-success {
       width: 100%;
     }
-
-    .dropdown .dropdown-toggle .fa-chevron-down {
-      position: absolute;
-      top: 11px;
-      right: 8px;
-    }
   }
 }
 
@@ -299,12 +293,6 @@ table.pipeline-project-metrics tr td {
   padding: $gl-padding;
 }
 
-.mattermost-icon svg {
-  width: 16px;
-  height: 16px;
-  vertical-align: text-bottom;
-}
-
 .mattermost-team-name {
   color: $gl-text-color-secondary;
 }
diff --git a/app/assets/stylesheets/pages/import.scss b/app/assets/stylesheets/pages/import.scss
deleted file mode 100644
index 74f80a11471..00000000000
--- a/app/assets/stylesheets/pages/import.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.import-jobs-to-col {
-  width: 39%;
-}
-
-.import-jobs-status-col {
-  width: 15%;
-}
-
-.import-jobs-cta-col {
-  width: 1%;
-}
-
-.import-project-name-input {
-  border-radius: 0 $border-radius-default $border-radius-default 0;
-  position: relative;
-  left: -1px;
-  max-width: 300px;
-}
-
-.import-namespace-select {
-  > .select2-choice {
-    border-radius: $border-radius-default 0 0 $border-radius-default;
-    position: relative;
-    left: 1px;
-  }
-}
-
-.import-slash-divider {
-  background-color: $gray-lightest;
-  border: 1px solid $border-color;
-}
-
-.import-row {
-  height: 55px;
-}
-
-.import-table {
-  .import-jobs-from-col,
-  .import-jobs-to-col,
-  .import-jobs-status-col,
-  .import-jobs-cta-col {
-    border-bottom-width: 1px;
-    padding-left: $gl-padding;
-  }
-}
-
-.import-projects-loading-icon {
-  margin-top: $gl-padding-32;
-}
-
-.btn-import {
-  .loading-icon {
-    display: none;
-  }
-
-  &.is-loading {
-    .loading-icon {
-      display: inline-block;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index cc4827f75d4..e5528c25e82 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -10,6 +10,7 @@
 }
 
 .limit-container-width {
+  .flash-container,
   .detail-page-header,
   .page-content-header,
   .commit-box,
@@ -112,7 +113,7 @@
     position: absolute;
     bottom: 0;
     right: 0;
-    text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white;
+    filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white);
   }
 }
 
@@ -199,10 +200,6 @@
       border: 0;
     }
 
-    .select2-container span {
-      margin-top: 0;
-    }
-
     &.assignee {
       .author-link {
         display: block;
@@ -395,6 +392,13 @@
       text-align: center;
     }
 
+    .merge-icon {
+      height: 12px;
+      width: 12px;
+      bottom: -5px;
+      right: 4px;
+    }
+
     .sidebar-collapsed-icon {
       display: flex;
       flex-direction: column;
@@ -405,7 +409,7 @@
       text-align: center;
       color: $gl-text-color-secondary;
 
-      svg {
+      > svg {
         fill: $gl-text-color-secondary;
       }
 
@@ -413,7 +417,7 @@
       &:hover .todo-undone {
         color: $gl-text-color;
 
-        svg {
+        > svg {
           fill: $gl-text-color;
         }
       }
@@ -485,10 +489,6 @@
       display: none;
     }
 
-    .merge-icon {
-      font-size: 10px;
-    }
-
     .multiple-users {
       position: relative;
       height: 24px;
@@ -697,10 +697,6 @@
 
 .issuable-list {
   li {
-    .issue-box {
-      display: flex;
-    }
-
     .issuable-info-container {
       flex: 1;
       display: flex;
@@ -894,29 +890,6 @@
   }
 }
 
-.issuable-close-button,
-.issuable-close-toggle {
-  @include transition(border-color, color);
-}
-
-.issuable-close-dropdown {
-  .dropdown-menu {
-    min-width: 270px;
-    left: auto;
-    right: 0;
-  }
-
-  .description {
-    .text {
-      margin: 0;
-    }
-  }
-
-  .dropdown-toggle > .icon {
-    margin: 0 3px;
-  }
-}
-
 /*
  * Following overrides are done to prevent
  * legacy dropdown styles from influencing
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 08faebc8ec0..1caf62067a6 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -92,6 +92,11 @@ ul.related-merge-requests > li {
   }
 }
 
+.issues-footer {
+  padding-top: $gl-padding;
+  padding-bottom: 37px;
+}
+
 .issues-nav-controls,
 .new-branch-col {
   font-size: 0;
@@ -196,14 +201,6 @@ ul.related-merge-requests > li {
       }
     }
   }
-
-  .create-merge-request-dropdown-toggle {
-    .fa-caret-down {
-      pointer-events: none;
-      color: inherit;
-      margin-left: 0;
-    }
-  }
 }
 
 .discussion-reply-holder {
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index a8b489f1273..0ccde57746a 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -30,20 +30,6 @@
     margin-bottom: 0;
   }
 
-  .member-controls {
-    .fa {
-      line-height: inherit;
-    }
-  }
-
-  .btn-remove {
-    width: 100%;
-
-    @include media-breakpoint-up(sm) {
-      width: auto;
-    }
-  }
-
   &.existing-title {
     @include media-breakpoint-up(sm) {
       float: left;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a0ac55e4c6c..efca82def92 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -53,6 +53,7 @@ $mr-widget-min-height: 69px;
   position: relative;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
+  background: var(--white, $white);
 
   .gl-skeleton-loader {
     display: block;
@@ -61,7 +62,7 @@ $mr-widget-min-height: 69px;
 
 .mr-widget-extension {
   border-top: 1px solid $border-color;
-  background-color: $gray-light;
+  background-color: $gray-50;
 
   &.clickable:hover {
     background-color: $gray-100;
@@ -87,6 +88,7 @@ $mr-widget-min-height: 69px;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
   border-top: 0;
+  background: var(--white, $white);
 }
 
 .mr-widget-body,
@@ -161,12 +163,6 @@ $mr-widget-min-height: 69px;
 
   .btn {
     font-size: $gl-font-size;
-
-    &.dropdown-toggle {
-      .fa {
-        color: inherit;
-      }
-    }
   }
 
   .accept-merge-holder {
@@ -287,10 +283,6 @@ $mr-widget-min-height: 69px;
       margin-top: 0;
       margin-bottom: 0;
 
-      &.has-conflicts .fa-exclamation-triangle {
-        color: $orange-500;
-      }
-
       time {
         font-weight: $gl-font-weight-normal;
       }
@@ -343,13 +335,6 @@ $mr-widget-min-height: 69px;
       }
     }
 
-    .dropdown-toggle {
-      .fa {
-        margin-left: 0;
-        color: inherit;
-      }
-    }
-
     .has-custom-error {
       display: inline-block;
     }
@@ -507,19 +492,6 @@ $mr-widget-min-height: 69px;
   display: none;
 }
 
-#modal_merge_info .modal-dialog {
-  .dark {
-    margin-right: 40px;
-  }
-
-  .btn-clipboard {
-    margin-right: 20px;
-    margin-top: 5px;
-    position: absolute;
-    right: 0;
-  }
-}
-
 .mr-links {
   padding-left: $gl-padding-8 + $status-icon-size + $gl-btn-padding;
 
@@ -560,16 +532,13 @@ $mr-widget-min-height: 69px;
   border-radius: $border-radius-default;
   padding: $gl-padding;
   border: 1px solid $border-color;
+  background: var(--white, $white);
   min-height: $mr-widget-min-height;
 
   @include media-breakpoint-up(md) {
     align-items: center;
   }
 
-  .dropdown-toggle .fa {
-    color: $gl-text-color;
-  }
-
   .git-merge-container {
     justify-content: space-between;
     flex: 1;
@@ -720,7 +689,7 @@ $mr-widget-min-height: 69px;
     z-index: 199;
     white-space: nowrap;
 
-    .dropdown-menu-toggle {
+    .gl-dropdown-toggle {
       width: auto;
       max-width: 170px;
 
@@ -778,7 +747,7 @@ $mr-widget-min-height: 69px;
 .epic-tabs-holder {
   top: $header-height;
   z-index: 250;
-  background-color: $white;
+  background-color: $body-bg;
   border-bottom: 1px solid $border-color;
 
   .with-system-header & {
@@ -1039,3 +1008,11 @@ $mr-widget-min-height: 69px;
 .diff-file-row.is-active {
   background-color: $gray-50;
 }
+
+.mr-conflict-loader {
+  max-width: 334px;
+
+  > svg {
+    vertical-align: middle;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e23ec25a2f3..4216091e8a9 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -190,8 +190,7 @@ $note-form-margin-left: 72px;
         border: 1px solid darken($gray-100, 25%);
       }
 
-      .note-headline-light,
-      .fa-spinner {
+      .note-headline-light {
         margin-left: 3px;
       }
     }
@@ -249,16 +248,6 @@ $note-form-margin-left: 72px;
     .note-emoji-button {
       position: relative;
       line-height: 1;
-
-      .fa-spinner {
-        display: none;
-      }
-
-      &.is-loading {
-        .fa-spinner {
-          display: inline-block;
-        }
-      }
     }
   }
 
@@ -361,7 +350,7 @@ $note-form-margin-left: 72px;
             left: $gl-padding-24;
             right: 0;
             bottom: 0;
-            background: linear-gradient(rgba($white, 0.1) -100px, $white 100%);
+            background: linear-gradient(rgba($white, 0.1) -100px, $body-bg 100%);
           }
         }
       }
@@ -407,8 +396,6 @@ $note-form-margin-left: 72px;
 .discussion-body .diff-file {
   .file-title {
     cursor: default;
-    line-height: 42px;
-    padding: 0 $gl-padding;
     border-top: 1px solid $border-color;
     border-radius: 0;
 
@@ -791,13 +778,6 @@ $note-form-margin-left: 72px;
     outline: none;
     color: $blue-600;
   }
-
-  .fa {
-    margin-right: 3px;
-    font-size: 10px;
-    line-height: 18px;
-    vertical-align: top;
-  }
 }
 
 .note-role {
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss
index e1cbf0e6654..33ab42b5511 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/pages/notifications.scss
@@ -1,6 +1,4 @@
 .notification-list-item {
-  line-height: 34px;
-
   .dropdown-menu {
     @extend .dropdown-menu-right;
   }
@@ -37,8 +35,4 @@
 .notification {
   position: relative;
   top: 1px;
-
-  .fa {
-    font-size: 18px;
-  }
 }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index b37aa6cd285..89be1c024db 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -46,11 +46,6 @@
       fill: $gl-text-color;
     }
 
-    .fa {
-      font-size: 12px;
-      color: $gl-text-color;
-    }
-
     .commit-sha {
       color: $blue-600;
     }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 09501d3713d..7fafd28be56 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -10,12 +10,6 @@
   }
 
   .input-group {
-    .select2-container {
-      display: unset;
-      max-width: unset;
-      flex-grow: 1;
-    }
-
     > div {
       &:last-child {
         padding-right: 0;
@@ -52,7 +46,6 @@
       flex-grow: 1;
     }
 
-    + .select2 a,
     + .btn-default {
       border-radius: 0 $border-radius-base $border-radius-base 0;
     }
@@ -147,23 +140,10 @@
       margin-left: 0;
     }
 
-    .fa {
-      color: $layout-link-gray;
-    }
-
     svg {
       fill: $layout-link-gray;
     }
 
-    .fa-caret-down {
-      margin-left: 3px;
-      line-height: 0;
-
-      &.dropdown-btn-icon {
-        margin-left: 0;
-      }
-    }
-
     .notifications-icon {
       top: 1px;
       margin-right: 0;
@@ -179,13 +159,6 @@
     height: 24px;
   }
 
-  .dropdown-toggle,
-  .clone-dropdown-btn {
-    .fa {
-      color: unset;
-    }
-  }
-
   .home-panel-action-button,
   .project-action-button {
     margin: $gl-padding $gl-padding-8 0 0;
@@ -258,10 +231,6 @@
   color: $gray-700;
 }
 
-.transfer-project .select2-container {
-  min-width: 200px;
-}
-
 .deploy-key {
   // Ensure that the fingerprint does not overflow on small screens
   .fingerprint {
@@ -512,7 +481,7 @@
       top: 0;
       height: calc(100% - #{$browser-scrollbar-size});
 
-      .fa {
+      svg {
         top: 50%;
         margin-top: -$gl-padding-8;
       }
@@ -1057,11 +1026,6 @@ pre.light-well {
       margin-bottom: 0;
     }
   }
-
-  .select2-choice {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
 }
 
 .project-home-empty {
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 8ed6936475b..856e49bd144 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -12,16 +12,18 @@
   }
 }
 
-.runner-status-online {
-  color: $green-600;
-}
+.runner-status {
+  &.runner-status-online {
+    background-color: $green-600;
+  }
 
-.runner-status-offline {
-  color: $gray-darkest;
-}
+  &.runner-status-offline {
+    background-color: $gray-darkest;
+  }
 
-.runner-status-paused {
-  color: $red-500;
+  &.runner-status-paused {
+    background-color: $red-500;
+  }
 }
 
 .runner {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 502a1881fd2..cd99c667001 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -1,5 +1,7 @@
 $search-dropdown-max-height: 400px;
 $search-avatar-size: 16px;
+$search-sidebar-min-width: 240px;
+$search-sidebar-max-width: 300px;
 
 .search-results {
   .search-result-row {
@@ -17,6 +19,13 @@ $search-avatar-size: 16px;
   }
 }
 
+.search-sidebar {
+  @include media-breakpoint-up(md) {
+    min-width: $search-sidebar-min-width;
+    max-width: $search-sidebar-max-width;
+  }
+}
+
 .search form:hover,
 .file-finder-input:hover,
 .issuable-search-form:hover,
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 7b18e3774d8..335e177d169 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -169,11 +169,6 @@
   .form-check {
     margin-bottom: 10px;
 
-    i.fa {
-      margin: 2px 0;
-      font-size: 20px;
-    }
-
     .option-title {
       font-weight: $gl-font-weight-normal;
       display: inline-block;
@@ -193,7 +188,7 @@
     }
 
     &.disabled {
-      i.fa {
+      svg {
         opacity: 0.5;
       }
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 429181c2ad4..8f3574a337b 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,8 +1,11 @@
+.project-last-commit {
+  min-height: 4.75rem;
+}
+
 .tree-holder {
   .nav-block {
     margin: 16px 0;
 
-    .btn .fa,
     .btn svg {
       color: $gl-text-color-secondary;
     }
@@ -69,7 +72,7 @@
       }
 
       .btn {
-        margin: 10px 0 0;
+        margin-top: 10px;
       }
     }
   }