Style author dropdown

app/assets/javascripts/filtered_search/dropdown_hint.js.es6

@@ -32,8 +32,8 @@
     }
 
     itemClicked(e) {
-      const token = e.detail.selected.querySelector('.dropdown-filter-hint').innerText.trim();
-      const tag = e.detail.selected.querySelector('.dropdown-filter-tag').innerText.trim();
+      const token = e.detail.selected.querySelector('.js-filter-hint').innerText.trim();
+      const tag = e.detail.selected.querySelector('.js-filter-tag').innerText.trim();
 
       if (tag.length) {
         gl.FilteredSearchManager.addWordToInput(this.getSelectedText(token));

app/assets/stylesheets/framework/filters.scss

@@ -85,8 +85,17 @@
     }
   }
 
-  .dropdown-filter-tag {
+  .dropdown-light-content {
     font-size: 14px;
     font-weight: 400;
   }
+
+  .dropdown-user {
+    display: flex;
+  }
+
+  .dropdown-user-details {
+    display: flex;
+    flex-direction: column;
+  }
 }

app/views/shared/issuable/_search_bar.html.haml

@@ -20,22 +20,23 @@
             %li.filter-dropdown
               %button.btn.btn-link
                 %i.fa{ 'class': '{{icon}}'}
-                %span.dropdown-filter-hint
+                %span.js-filter-hint
                   {{hint}}
-                %span.dropdown-filter-tag
+                %span.js-filter-tag.dropdown-light-content
                   {{tag}}
           #js-dropdown-author.dropdown-menu{ 'data-dropdown' => true }
             %ul{ 'data-dynamic' => true }
-              %li
-                %button.btn.btn-link
+              %li.filter-dropdown
+                %button.btn.btn-link.dropdown-user
                   %img.avatar.avatar-inline{ 'data-src': '{{avatar_url}}', width: '30' }
-                  %strong
-                    {{name}}
-                  %span
-                    {{username}}
+                  .dropdown-user-details
+                    %span
+                      {{name}}
+                    %span.dropdown-light-content
+                      @{{username}}
           #js-dropdown-assignee.dropdown-menu{ 'data-dropdown' => true }
             %ul{ 'data-dynamic' => true }
-              %li
+              %li.filter-dropdown
                 %button.btn.btn-link
                   %img.avatar.avatar-inline{ 'data-src': '{{avatar_url}}', width: '30' }
                   %strong
@@ -44,12 +45,12 @@
                     {{username}}
           #js-dropdown-milestone.dropdown-menu{ 'data-dropdown' => true }
             %ul{ 'data-dynamic' => true }
-              %li
+              %li.filter-dropdown
                 %button.btn.btn-link
                   {{title}}
           #js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
             %ul{ 'data-dynamic' => true }
-              %li
+              %li.filter-dropdown
                 %button.btn.btn-link
                   %span.dropdown-label-box{ 'style': 'background: {{color}}'}
                     {{title}}