From 9406a497ba6214995d60be3f74252d295fac2da2 Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Tue, 6 Nov 2018 08:57:21 +0200
Subject: Fix miss-aligned approvers dropdown

Fixed the miss-alignment by adding the correct classes.
Cleaned up the method to rather use string interpolation.
---
 app/assets/javascripts/users_select.js        | 28 +++++++++++++++------------
 app/assets/stylesheets/framework/selects.scss |  2 ++
 2 files changed, 18 insertions(+), 12 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 4b090212d83..ce051582299 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -1,4 +1,4 @@
-/* eslint-disable func-names, one-var, no-var, prefer-rest-params, vars-on-top, prefer-arrow-callback, consistent-return, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, yoda, prefer-spread, no-void, camelcase, no-param-reassign */
+/* eslint-disable func-names, one-var, no-var, prefer-rest-params, vars-on-top, prefer-arrow-callback, consistent-return, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, yoda, prefer-spread, camelcase, no-param-reassign */
 /* global Issuable */
 /* global emitSidebarEvent */
 
@@ -696,17 +696,21 @@ UsersSelect.prototype.formatResult = function(user) {
   } else {
     avatar = gon.default_avatar_url;
   }
-  return (
-    "<div class='user-result " +
-    (!user.username ? 'no-username' : void 0) +
-    "'> <div class='user-image'><img class='avatar avatar-inline s32' src='" +
-    avatar +
-    "'></div> <div class='user-name dropdown-menu-user-full-name'>" +
-    _.escape(user.name) +
-    "</div> <div class='user-username dropdown-menu-user-username'>" +
-    (!user.invite ? '@' + _.escape(user.username) : '') +
-    '</div> </div>'
-  );
+  return `
+    <div class='user-result'>
+      <div class='user-image'>
+        <img class='avatar avatar-inline s32' src='${avatar}'>
+      </div>
+      <div class='user-info'>
+        <div class='user-name dropdown-menu-user-full-name'>
+          ${_.escape(user.name)}
+        </div>
+        <div class='user-username dropdown-menu-user-username text-secondary'>
+          ${!user.invite ? '@' + _.escape(user.username) : ''}
+        </div>
+      </div>
+    </div>
+  `;
 };
 
 UsersSelect.prototype.formatSelection = function(user) {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 381c0290d32..7f0edd88dfb 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -243,6 +243,8 @@
 
 .user-result {
   min-height: 24px;
+  display: flex;
+  align-items: center;
 
   .user-image {
     float: left;
-- 
cgit v1.2.1