4 files changed, 86 insertions, 19 deletions
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index ebef92e9f00..c63703c5791 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -578,6 +578,7 @@
 
 .dropdown-input-field,
 .default-dropdown-input {
+  display: block;
   width: 100%;
   min-height: 30px;
   padding: 0 7px;
@@ -726,3 +727,57 @@
   @include set-invisible;
   overflow: hidden;
 }
+
+// TODO: change global style and remove mixin
+@mixin new-style-dropdown {
+  .dropdown-menu,
+  .dropdown-menu-nav {
+    .divider {
+      margin: 6px 0;
+    }
+
+    li {
+      padding: 0 1px;
+
+      &.dropdown-header {
+        padding: 8px 16px;
+      }
+
+      a {
+        border-radius: 0;
+        padding: 8px 16px;
+
+        &.is-focused,
+        &:hover,
+        &:active,
+        &:focus {
+          background-color: $gray-darker;
+        }
+
+        &.is-active {
+          font-weight: inherit;
+
+          &::before {
+            top: 16px;
+          }
+        }
+      }
+    }
+
+    &.dropdown-menu-selectable {
+      li {
+        a {
+          padding: 8px 40px;
+
+          &.is-active::before {
+            left: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown-menu-align-right {
+    margin-top: 2px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 1c4238bc564..555e444a062 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -4,6 +4,8 @@
  */
 
 header {
+  @include new-style-dropdown;
+
   transition: padding $sidebar-transition-duration;
 
   &.navbar-empty {
@@ -313,25 +315,6 @@ header {
   .impersonation i {
     color: $red-500;
   }
-
-  // TODO: fallback to global style
-  .dropdown-menu,
-  .dropdown-menu-nav {
-    li {
-      padding: 0 1px;
-
-      a {
-        border-radius: 0;
-        padding: 8px 16px;
-
-        &:hover,
-        &:active,
-        &:focus {
-          background-color: $gray-darker;
-        }
-      }
-    }
-  }
 }
 
 .with-performance-bar header.navbar-gitlab {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 868e65a8f46..ab754f4a492 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -369,6 +369,10 @@ ul.indent-list {
       background-color: $row-hover;
       cursor: pointer;
     }
+
+    .avatar-container > a {
+      width: 100%;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index a2de4598167..fcd4c72b430 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -185,3 +185,28 @@
     text-overflow: ellipsis;
   }
 }
+
+// TODO: fallback to global style
+.atwho-view {
+  .atwho-view-ul {
+    padding: 8px 1px;
+
+    li {
+      padding: 8px 16px;
+      border: 0;
+
+      &.cur {
+        background-color: $gray-darker;
+        color: $gl-text-color;
+
+        small {
+          color: inherit;
+        }
+      }
+
+      strong {
+        color: $gl-text-color;
+      }
+    }
+  }
+}