From 1053c55d19fcfcdfab8083da7e335e15bcb547ca Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 29 Aug 2017 09:01:40 -0300
Subject: [PATCH] Adding zero state style for 0 counts

---
 client/talk-plugin-history/Comment.css | 11 ++++++++++-
 client/talk-plugin-history/Comment.js  | 14 +++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/client/talk-plugin-history/Comment.css b/client/talk-plugin-history/Comment.css
index ba63aaeb1..1200709a3 100644
--- a/client/talk-plugin-history/Comment.css
+++ b/client/talk-plugin-history/Comment.css
@@ -27,9 +27,18 @@
 }
 
 .commentSummaryReactions {
-  margin-right: 5px;
+  margin-right: 10px;
 }
 
+.reactionCount, .replyCount {
+  margin: 0 4px;
+}
+
+.countZero {
+  color: #9E9E9E;
+}
+
+
 .sidebar {
   ul {
     margin-top: 0;
diff --git a/client/talk-plugin-history/Comment.js b/client/talk-plugin-history/Comment.js
index 2ddd45816..b813e514b 100644
--- a/client/talk-plugin-history/Comment.js
+++ b/client/talk-plugin-history/Comment.js
@@ -25,15 +25,19 @@ class Comment extends React.Component {
             data={data}
             queryData={{root, comment, asset: comment.asset}}
           />
-          <div className={cn(styles.commentSummary, 'comment_summary')}>
-            <span className={cn(styles.commentSummaryReactions, 'comment_summary_reactions')}>
+          <div className={cn(styles.commentSummary, 'comment-summary')}>
+            <span className={cn(styles.commentSummaryReactions, 'comment-summary-reactions', {[styles.countZero]: reactionCount === 0})}>
               <Icon name="thumb_up" />
-              {reactionCount}
+              <span className={cn(styles.reactionCount, 'comment-summary-reaction-count')}>
+                {reactionCount}
+              </span>
               {reactionCount === 1 ? t('common.reaction') : t('common.reactions')}
             </span>
-            <span className={cn('comment_summary_replies')}>
+            <span className={cn('comment-summary-replies', {[styles.countZero]: comment.replyCount === 0})}>
               <Icon name="reply" />
-              {comment.replyCount}
+              <span className={cn(styles.replyCount, 'comment-summary-reply-count')}>
+                {comment.replyCount} 
+              </span>
               {comment.replyCount === 1 ? t('common.reply') : t('common.replies')}
             </span>
           </div>