From c98edd4a91a8cbaef29f7d185f66317446c48920 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Sun, 30 Jul 2023 02:08:52 +0530
Subject: [PATCH] style: reactions ui improvement (#1705)
---
apps/app/components/core/reaction-selector.tsx | 14 ++++++++------
.../components/issues/comment/comment-reaction.tsx | 2 +-
apps/app/components/issues/issue-reaction.tsx | 2 +-
3 files changed, 10 insertions(+), 8 deletions(-)
diff --git a/apps/app/components/core/reaction-selector.tsx b/apps/app/components/core/reaction-selector.tsx
index 585afa430..06b410785 100644
--- a/apps/app/components/core/reaction-selector.tsx
+++ b/apps/app/components/core/reaction-selector.tsx
@@ -40,8 +40,8 @@ export const ReactionSelector: React.FC<Props> = (props) => {
} group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
>
<span
- className={`flex justify-center items-center rounded-md ${
- size === "sm" ? "w-6 h-6" : size === "md" ? "w-8 h-8" : "w-10 h-10"
+ className={`flex justify-center items-center rounded-md px-2 ${
+ size === "sm" ? "w-6 h-6" : size === "md" ? "w-7 h-7" : "w-8 h-8"
}`}
>
<Icon iconName="add_reaction" className="text-custom-text-100 scale-125" />
@@ -57,10 +57,12 @@ export const ReactionSelector: React.FC<Props> = (props) => {
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel
- className={`absolute -left-2 z-10 ${position === "top" ? "-top-12" : "-bottom-12"}`}
+ className={`bg-custom-sidebar-background-100 absolute -left-2 z-10 ${
+ position === "top" ? "-top-12" : "-bottom-12"
+ }`}
>
- <div className="bg-custom-background-0 border rounded-md px-2 py-1.5">
- <div className="flex gap-x-2">
+ <div className="bg-custom-sidebar-background-100 border border-custom-border-200 rounded-md p-1">
+ <div className="flex gap-x-1">
{reactionEmojis.map((emoji) => (
<button
key={emoji}
@@ -69,7 +71,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
onSelect(emoji);
closePopover();
}}
- className="flex h-5 w-5 select-none items-center justify-between text-sm"
+ className="flex select-none items-center justify-between rounded-md text-sm p-1 hover:bg-custom-sidebar-background-90"
>
{renderEmoji(emoji)}
</button>
diff --git a/apps/app/components/issues/comment/comment-reaction.tsx b/apps/app/components/issues/comment/comment-reaction.tsx
index 0f77df025..33e12bc6f 100644
--- a/apps/app/components/issues/comment/comment-reaction.tsx
+++ b/apps/app/components/issues/comment/comment-reaction.tsx
@@ -64,7 +64,7 @@ export const CommentReaction: React.FC<Props> = (props) => {
handleReactionClick(reaction);
}}
key={reaction}
- className={`flex items-center gap-1 text-custom-text-100 h-full px-2 py-1 rounded-md ${
+ className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
commentReactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
? "bg-custom-primary-100/10"
: "bg-custom-background-80"
diff --git a/apps/app/components/issues/issue-reaction.tsx b/apps/app/components/issues/issue-reaction.tsx
index 9277954a4..06c05c85d 100644
--- a/apps/app/components/issues/issue-reaction.tsx
+++ b/apps/app/components/issues/issue-reaction.tsx
@@ -54,7 +54,7 @@ export const IssueReaction: React.FC<Props> = (props) => {
handleReactionClick(reaction);
}}
key={reaction}
- className={`flex items-center gap-1 text-custom-text-100 h-full px-2 py-1 rounded-md ${
+ className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
? "bg-custom-primary-100/10"
: "bg-custom-background-80"