UX: Use empty heart for unliked state

app/assets/javascripts/discourse-common/lib/icon-library.js.es6

@@ -9,7 +9,7 @@ const REPLACEMENTS = {
   'd-watching-first': 'dot-circle-o',
   'd-drop-expanded': 'caret-down',
   'd-drop-collapsed': 'caret-right',
-  'd-unliked': 'heart',
+  'd-unliked': 'heart-o',
   'd-liked': 'heart',
   'notification.mentioned': "at",
   'notification.group_mentioned': "at",

app/assets/javascripts/discourse/widgets/post-menu.js.es6

@@ -12,7 +12,7 @@ function animateHeart($elem, start, end, complete) {
        .animate({ textIndent: end }, {
           complete,
           step(now) {
-            $(this).css('transform','scale('+now+')');
+            $(this).css('transform','scale('+now+')').addClass("fa-heart").removeClass("fa-heart-o");
           },
           duration: 150
         }, 'linear');
@@ -69,7 +69,7 @@ registerButton('like-count', attrs => {
     const title = attrs.liked
       ? count === 1 ? 'post.has_likes_title_only_you' : 'post.has_likes_title_you'
       : 'post.has_likes_title';
-      const icon = attrs.yours ? 'heart' : '';
+      const icon = attrs.yours ? 'heart-o' : '';
       const additionalClass = attrs.yours ? 'my-likes' : 'regular-likes';
 
     return { action: 'toggleWhoLiked',

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

@@ -101,7 +101,7 @@ nav.post-controls {
       }
       &.my-likes {
         margin-right: -2px;
-        i.fa-heart {
+        i.fa-heart-o {
           padding-left: 10px;
         }
       }

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

@@ -64,7 +64,7 @@ span.badge-posts {
     button.like-count {
       font-size: $font-up-1;
       padding: 8px 4px;
-      i.fa-heart {
+      i.fa-heart, i.fa-heart-o {
         padding-left: 8px;
         color: dark-light-choose($primary-low-mid, $secondary-high);
       }