From 8930840a76331904ad80a2615da0d6db28b983d0 Mon Sep 17 00:00:00 2001
From: Dakshesh Jain <65905942+dakshesh14@users.noreply.github.com>
Date: Fri, 28 Jul 2023 10:46:35 +0530
Subject: [PATCH] style: text color & position  (#1692)

* feat: developed reaction selector component

* feat add reaction on issue & issue comment

refactor: reaction selector component, made hooks to abstracted reaction logic & state by making custom hook

* fix: emoji.helper.tsx function

* refactor: reaction not working on inbox issue

* fix: user not been passed to create/delete function

* style: text position & color
---
 .../app/components/issues/comment/comment-reaction.tsx | 10 +++++++++-
 apps/app/components/issues/issue-reaction.tsx          | 10 +++++++++-
 apps/app/hooks/use-comment-reaction.tsx                |  6 ++++--
 apps/app/hooks/use-issue-reaction.tsx                  |  6 ++++--
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/apps/app/components/issues/comment/comment-reaction.tsx b/apps/app/components/issues/comment/comment-reaction.tsx
index d701fa943ec..0f77df025c8 100644
--- a/apps/app/components/issues/comment/comment-reaction.tsx
+++ b/apps/app/components/issues/comment/comment-reaction.tsx
@@ -70,8 +70,16 @@ export const CommentReaction: React.FC<Props> = (props) => {
                   : "bg-custom-background-80"
               }`}
             >
-              <span>{groupedReactions?.[reaction].length} </span>
               <span>{renderEmoji(reaction)}</span>
+              <span
+                className={
+                  commentReactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                    ? "text-custom-primary-100"
+                    : ""
+                }
+              >
+                {groupedReactions?.[reaction].length}{" "}
+              </span>
             </button>
           )
       )}
diff --git a/apps/app/components/issues/issue-reaction.tsx b/apps/app/components/issues/issue-reaction.tsx
index d183685fec7..9277954a48a 100644
--- a/apps/app/components/issues/issue-reaction.tsx
+++ b/apps/app/components/issues/issue-reaction.tsx
@@ -60,8 +60,16 @@ export const IssueReaction: React.FC<Props> = (props) => {
                   : "bg-custom-background-80"
               }`}
             >
-              <span>{groupedReactions?.[reaction].length} </span>
               <span>{renderEmoji(reaction)}</span>
+              <span
+                className={
+                  reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                    ? "text-custom-primary-100"
+                    : ""
+                }
+              >
+                {groupedReactions?.[reaction].length}{" "}
+              </span>
             </button>
           )
       )}
diff --git a/apps/app/hooks/use-comment-reaction.tsx b/apps/app/hooks/use-comment-reaction.tsx
index d52c65d09fd..16469f66a4d 100644
--- a/apps/app/hooks/use-comment-reaction.tsx
+++ b/apps/app/hooks/use-comment-reaction.tsx
@@ -52,7 +52,8 @@ const useCommentReaction = (
       workspaceSlug.toString(),
       projectId.toString(),
       commendId.toString(),
-      { reaction }
+      { reaction },
+      user.user
     );
 
     mutateCommentReactions((prev) => [...(prev || []), data]);
@@ -76,7 +77,8 @@ const useCommentReaction = (
       workspaceSlug.toString(),
       projectId.toString(),
       commendId.toString(),
-      reaction
+      reaction,
+      user.user
     );
 
     mutateCommentReactions();
diff --git a/apps/app/hooks/use-issue-reaction.tsx b/apps/app/hooks/use-issue-reaction.tsx
index 42a0dacdefa..89c65c5ed31 100644
--- a/apps/app/hooks/use-issue-reaction.tsx
+++ b/apps/app/hooks/use-issue-reaction.tsx
@@ -52,7 +52,8 @@ const useIssueReaction = (
       workspaceSlug.toString(),
       projectId.toString(),
       issueId.toString(),
-      { reaction }
+      { reaction },
+      user.user
     );
 
     mutateReaction((prev) => [...(prev || []), data]);
@@ -77,7 +78,8 @@ const useIssueReaction = (
       workspaceSlug.toString(),
       projectId.toString(),
       issueId.toString(),
-      reaction
+      reaction,
+      user.user
     );
 
     mutateReaction();