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`} } group inline-flex items-center rounded-md bg-custom-background-80 focus:outline-none`}
> >
<span <span
className={`flex justify-center items-center rounded-md ${ className={`flex justify-center items-center rounded-md px-2 ${
size === "sm" ? "w-6 h-6" : size === "md" ? "w-8 h-8" : "w-10 h-10" 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" /> <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" leaveTo="opacity-0 translate-y-1"
> >
<Popover.Panel <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="bg-custom-sidebar-background-100 border border-custom-border-200 rounded-md p-1">
<div className="flex gap-x-2"> <div className="flex gap-x-1">
{reactionEmojis.map((emoji) => ( {reactionEmojis.map((emoji) => (
<button <button
key={emoji} key={emoji}
@ -69,7 +71,7 @@ export const ReactionSelector: React.FC<Props> = (props) => {
onSelect(emoji); onSelect(emoji);
closePopover(); 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)} {renderEmoji(emoji)}
</button> </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); handleReactionClick(reaction);
}} }}
key={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) commentReactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
? "bg-custom-primary-100/10" ? "bg-custom-primary-100/10"
: "bg-custom-background-80" : "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); handleReactionClick(reaction);
}} }}
key={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) reactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
? "bg-custom-primary-100/10" ? "bg-custom-primary-100/10"
: "bg-custom-background-80" : "bg-custom-background-80"