UX: better like button

Co-authored-by: jjaffeux <j.jaffeux@gmail.com>

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

@@ -285,8 +285,11 @@ export default createWidget('post-menu', {
       replaceButton(orderedButtons, 'reply', 'wiki-edit');
     }
 
-    orderedButtons.forEach(i => {
+    orderedButtons
+      .filter(x => x !== "like-count" && x !== "like")
+      .forEach(i => {
         const button = this.attachButton(i, attrs);
+
         if (button) {
           allButtons.push(button);
 
@@ -350,6 +353,11 @@ export default createWidget('post-menu', {
       }
     });
 
+    visibleButtons.unshift(h('div.like-button', [
+      this.attachButton("like-count", attrs),
+      this.attachButton("like", attrs)
+    ]));
+
     const postControls = [];
 
     const repliesButton = this.attachButton('replies', attrs);

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

@@ -54,6 +54,34 @@ nav.post-controls {
 
   padding: 0;
 
+  .like-button {
+    display: inline-block;
+
+    .widget-button {
+      background: none;
+    }
+
+    &:hover {
+      background: $primary-low;
+
+      .d-hover {
+        background: none;
+      }
+    }
+    &:active {
+      box-shadow: inset 0 1px 3px rgba(0,0,0, .4);
+
+      .widget-button {
+        box-shadow: none;
+      }
+    }
+
+    .like {
+      &:focus {
+        background: none;
+      }
+    }
+
     .like-count {
       font-size: $font-up-1;
       i.fa-heart {
@@ -64,7 +92,12 @@ nav.post-controls {
         margin-right: -2px;
       }
       &.regular-likes {
-      margin-right: -15px;
+        margin-right: -12px;
+      }
+    }
+
+    .toggle-like {
+      padding: 8px 8px;
     }
   }
 

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

@@ -72,7 +72,7 @@ span.badge-posts {
         margin-right: 5px;
       }
       &.regular-likes {
-        margin-right: -8px;
+        margin-right: -5px;
       }
     }
   }