github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: reactions ui improvement (#1705)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-07-30 02:08:52 +05:30 committed by GitHub
parent 35bb71303e
commit c98edd4a91
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/app/components/core/reaction-selector.tsx
View File

@ -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>

2
apps/app/components/issues/comment/comment-reaction.tsx
View File

@ -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"

2
apps/app/components/issues/issue-reaction.tsx
View File

@ -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"