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

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>
           )
       )}

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>
           )
       )}

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();

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();