Bug 1367867 - Improve recognition of user Initial labels

ui/css/treeherder-global.css

@@ -220,16 +220,6 @@ a:visited {
   content: none;
 }
 
-.label-initials {
-  display: inline-block;
-  margin-right: 0.5em;
-  padding: 0.2em 0.3em;
-  width: 2.5em;
-  border: 1px solid #999999;
-  background-color: white;
-  color: #999999;
-}
-
 .label[href] {
   color: #fff;
 }

ui/css/treeherder-resultsets.css

@@ -135,10 +135,24 @@ fieldset[disabled] .btn-resultset:hover {
 
 .revision-holder {
   padding-left: 20px;
-  padding-right: 11px;
+  padding-right: 6px;
   display: inline-block;
 }
 
+.user-push-icon {
+  color: gray;
+}
+
+.user-push-initials {
+  display: inline-block;
+  min-width: 18px;
+  font-size: 8px;
+  font-style: italic;
+  font-weight: bold;
+  padding-left: 3px;
+  color: gray;
+}
+
 .revision-comment {
   color: #777;
 }

ui/js/filters.js

@@ -99,12 +99,15 @@ treeherder.filter('initials', function () {
         var words = str.split(' ');
         var firstLetters = _.filter(_.map(words, function (word) { return word.replace(/[^A-Z]/gi, '')[0]; }));
         var initials = "";
+
         if (firstLetters.length === 1) {
             initials = firstLetters[0];
         } else if (firstLetters.length > 1) {
             initials = firstLetters[0] + firstLetters[firstLetters.length - 1];
         }
-        return '<span class="label label-initials">' + initials + '</span>';
+
+        return '<span class="user-push-icon"><i class="fa fa-user-o" aria-hidden="true"></i></span>' +
+               '<div class="icon-superscript user-push-initials">' + initials + '</div>';
     };
 });