thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-917] style: update urgent priority icon design. (#4146)

Browse Source
This commit is contained in:
Prateek Shourya 2024-04-09 13:37:18 +05:30 committed by GitHub
parent 7e0520d1cf
commit e86397b649
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/icons/priority-icon.tsx
View File

@ -16,7 +16,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props; const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
const priorityClasses = { const priorityClasses = {
urgent: "bg-red-500 text-red-500 border-red-500", urgent: "bg-red-600 text-red-500 border-red-600",
high: "bg-orange-500/20 text-orange-500 border-orange-500", high: "bg-orange-500/20 text-orange-500 border-orange-500",
medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500", medium: "bg-yellow-500/20 text-yellow-500 border-yellow-500",
low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100", low: "bg-custom-primary-100/20 text-custom-primary-100 border-custom-primary-100",
@ -40,7 +40,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
{withContainer ? ( {withContainer ? (
<div <div
className={cn( className={cn(
"grid place-items-center border rounded p-0.5 flex-shrink-0", "flex items-center justify-center border rounded p-0.5 flex-shrink-0",
priorityClasses[priority], priorityClasses[priority],
containerClassName containerClassName
)} )}
@ -63,8 +63,9 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
<Icon <Icon
size={size} size={size}
className={cn( className={cn(
"flex-shrink-0",
{ {
"text-red-500": priority === "urgent", "text-red-600": priority === "urgent",
"text-orange-500": priority === "high", "text-orange-500": priority === "high",
"text-yellow-500": priority === "medium", "text-yellow-500": priority === "medium",
"text-custom-primary-100": priority === "low", "text-custom-primary-100": priority === "low",

12
web/components/dropdowns/priority.tsx
View File

@ -79,7 +79,7 @@ const BorderButton = (props: ButtonProps) => {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
// highlight the whole button if text is hidden and priority is urgent // highlight the whole button if text is hidden and priority is urgent
"bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent, "bg-red-600 border-red-600": priority === "urgent" && hideText && highlightUrgent,
}, },
className className
)} )}
@ -88,7 +88,7 @@ const BorderButton = (props: ButtonProps) => {
<div <div
className={cn({ className={cn({
// highlight just the icon if text is visible and priority is urgent // highlight just the icon if text is visible and priority is urgent
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
})} })}
> >
<PriorityIcon <PriorityIcon
@ -155,7 +155,7 @@ const BackgroundButton = (props: ButtonProps) => {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
// highlight the whole button if text is hidden and priority is urgent // highlight the whole button if text is hidden and priority is urgent
"bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent, "bg-red-600 border-red-600": priority === "urgent" && hideText && highlightUrgent,
}, },
className className
)} )}
@ -164,7 +164,7 @@ const BackgroundButton = (props: ButtonProps) => {
<div <div
className={cn({ className={cn({
// highlight just the icon if text is visible and priority is urgent // highlight just the icon if text is visible and priority is urgent
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
})} })}
> >
<PriorityIcon <PriorityIcon
@ -232,7 +232,7 @@ const TransparentButton = (props: ButtonProps) => {
// compact the icons if text is hidden // compact the icons if text is hidden
"px-0.5": hideText, "px-0.5": hideText,
// highlight the whole button if text is hidden and priority is urgent // highlight the whole button if text is hidden and priority is urgent
"bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent, "bg-red-600 border-red-600": priority === "urgent" && hideText && highlightUrgent,
"bg-custom-background-80": isActive, "bg-custom-background-80": isActive,
}, },
className className
@ -242,7 +242,7 @@ const TransparentButton = (props: ButtonProps) => {
<div <div
className={cn({ className={cn({
// highlight just the icon if text is visible and priority is urgent // highlight just the icon if text is visible and priority is urgent
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, "bg-red-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
})} })}
> >
<PriorityIcon <PriorityIcon