From fe17ee692496610ef66e6790e8d271997ea3d352 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Fri, 30 Mar 2018 10:10:55 +0530
Subject: [PATCH] UX: own post likes glyph margin was off

---
 .../javascripts/discourse/widgets/post-menu.js.es6   |  4 ++--
 .../stylesheets/common/foundation/variables.scss     | 12 ++++++------
 app/assets/stylesheets/desktop/topic-post.scss       |  7 ++++++-
 app/assets/stylesheets/mobile/topic-post.scss        |  8 +++++++-
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/post-menu.js.es6 b/app/assets/javascripts/discourse/widgets/post-menu.js.es6
index 93900f238f..be2fdc0569 100644
--- a/app/assets/javascripts/discourse/widgets/post-menu.js.es6
+++ b/app/assets/javascripts/discourse/widgets/post-menu.js.es6
@@ -70,11 +70,11 @@ registerButton('like-count', attrs => {
       ? count === 1 ? 'post.has_likes_title_only_you' : 'post.has_likes_title_you'
       : 'post.has_likes_title';
       const icon = attrs.yours ? 'heart' : '';
-
+      const additionalClass = attrs.yours ? 'my-likes' : 'regular-likes';
 
     return { action: 'toggleWhoLiked',
       title,
-      className: 'like-count highlight-action',
+      className: `like-count highlight-action ${additionalClass}`,
       contents: count,
       icon,
       iconRight: true,
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index f028ab048d..6c28ae2416 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -26,13 +26,13 @@ $github: #6d6d6d !default;
 $base-font-size: 14px !default;
 $base-font-family: Helvetica, Arial, sans-serif !default;
 
-// Font-size defintions, multiplier ^ (step / interval) 
+// Font-size defintions, multiplier ^ (step / interval)
 $font-up-6: 2.296em;
 $font-up-5: 2em;
 $font-up-4: 1.7511em;
 $font-up-3: 1.5157em;
 $font-up-2: 1.3195em;
-$font-up-1: 1.1487em; // 2^(1/5) 
+$font-up-1: 1.1487em; // 2^(1/5)
 $font-0: 1em;
 $font-down-1: .8706em; // 2^(-1/5)
 $font-down-2: .7579em; // Smallest size we use based on the 1em base
@@ -46,7 +46,7 @@ $line-height-small: 1;
 $line-height-medium: 1.2; // Headings or large text
 $line-height-large: 1.4; // Normal or small text
 
-// These files don't actually exist. They're injected by Stylesheet::Compiler. 
+// These files don't actually exist. They're injected by Stylesheet::Compiler.
 // --------------------------------------------------
 
 @import "theme_variables";
@@ -57,10 +57,10 @@ $line-height-large: 1.4; // Normal or small text
 // --------------------------------------------------
 
 $z-layers: (
-  "max":              9999, 
+  "max":              9999,
   "fullscreen":       1700,
   "modal": (
-    "tooltip":        1600,   
+    "tooltip":        1600,
     "popover":        1500,
     "dropdown":       1400,
     "content":        1300,
@@ -73,7 +73,7 @@ $z-layers: (
       "popover":      500,
       "content":      400,
   ),
-  "dropdown":         300,  
+  "dropdown":         300,
   "usercard":         200,
   "timeline":         100,
   "base":             1
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 3a3fded468..97dc40d058 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -56,11 +56,16 @@ nav.post-controls {
 
   .like-count {
     font-size: $font-up-1;
-    margin-right: -15px;
     i.fa-heart {
       padding-left: 5px;
       color: $love;
     }
+    &.my-likes {
+      margin-right: -2px;
+    }
+    &.regular-likes {
+      margin-right: -15px;
+    }
   }
 
   .highlight-action {
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index bfb6feaa3c..8d2687d721 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -62,12 +62,18 @@ span.badge-posts {
     }
 
     button.like-count {
-      font-size: $font-0;
+      font-size: $font-up-1;
       padding: 8px 4px;
       i.fa-heart {
         padding-left: 5px;
         color: $love;
       }
+      &.my-likes {
+        margin-right: 5px;
+      }
+      &.regular-likes {
+        margin-right: -8px;
+      }
     }
   }
 }