improve who liked styling

app/assets/javascripts/discourse/components/who-liked.js.es6

@@ -1,14 +1,13 @@
 import StringBuffer from 'discourse/mixins/string-buffer';
 
 export default Ember.Component.extend(StringBuffer, {
-  classNames: ['who-liked'],
   likedUsers: Ember.computed.alias('post.actionByName.like.users'),
   rerenderTriggers: ['likedUsers.length'],
 
   renderString(buffer) {
     const likedUsers = this.get('likedUsers');
     if (likedUsers && likedUsers.length > 0) {
-      buffer.push("<i class='fa fa-heart'></i>");
+      buffer.push("<div class='who-liked'>");
       let iconsHtml = "";
       likedUsers.forEach(function(u) {
         iconsHtml += "<a href=\"" + Discourse.getURL("/users/") + u.get('username_lower') + "\" data-user-card=\"" + u.get('username_lower') + "\">";
@@ -19,7 +18,8 @@ export default Ember.Component.extend(StringBuffer, {
         });
         iconsHtml += "</a>";
       });
-      buffer.push(iconsHtml);
+      buffer.push(I18n.t('post.actions.people.like',{icons: iconsHtml}));
+      buffer.push("</div>");
     }
   }
 });

app/assets/stylesheets/common/base/topic-post.scss

@@ -235,18 +235,11 @@ blockquote > *:last-child {
 }
 
 .who-liked {
+  transition: height 0.5s;
   a {
     margin: 0 0.25em 0.5em 0;
     display: inline-block;
   }
-
-  .fa-heart {
-    font-size: 20px;
-    margin-right: 5px;
-    display: inline-block;
-    vertical-align: middle;
-    color: $love;
-  }
 }
 
 

app/assets/stylesheets/desktop/topic-post.scss

@@ -899,6 +899,7 @@ $topic-avatar-width: 45px;
     }
   }
 }
+
 .topic-post {
   &.selected {
     article.boxed {
@@ -979,6 +980,13 @@ a.attachment:before {
 
 }
 
+.who-liked {
+  margin-top: 20px;
+  margin-bottom: 0px;
+  width: 100%;
+  text-align: right;
+}
+
 span.highlighted {
   background-color: dark-light-diff($tertiary, $secondary, 85%, -65%);
 }
@@ -1035,6 +1043,8 @@ and (max-width : 870px) {
 
 }
 
+
+
 /* below standard tablet portrait ----------- */
 
 @media all

app/assets/stylesheets/mobile/topic-post.scss

@@ -32,7 +32,7 @@ nav.post-controls {
 }
 
 .who-liked {
-  margin-left: 20px;
+  margin-left: 10px;
 }
 
 button.like-count {