binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: urgent priority icon improvement (#5879)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2024-10-22 13:25:22 +05:30 • committed by GitHub
parent 0f25f39404
commit 8a1d3c4cf9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
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-600 text-red-500 border-red-600", urgent: "bg-red-600/20 text-red-600 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",
@ -49,8 +49,6 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
size={size} size={size}
className={cn( className={cn(
{ {
"text-white": priority === "urgent",
// centre align the icons
"translate-x-[0.0625rem]": priority === "high", "translate-x-[0.0625rem]": priority === "high",
"translate-x-0.5": priority === "medium", "translate-x-0.5": priority === "medium",
"translate-x-1": priority === "low", "translate-x-1": priority === "low",

22
web/core/components/dropdowns/priority.tsx
View file

@ -63,7 +63,7 @@ const BorderButton = (props: ButtonProps) => {
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority); const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
const priorityClasses = { const priorityClasses = {
urgent: "bg-red-500/20 text-red-950 border-red-500", urgent: "bg-red-600/10 text-red-600 border-red-600 px-1",
high: "bg-orange-500/20 text-orange-950 border-orange-500", high: "bg-orange-500/20 text-orange-950 border-orange-500",
medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500", medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100", low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
@ -88,7 +88,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-600 border-red-600": priority === "urgent" && hideText && highlightUrgent, "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
}, },
className className
)} )}
@ -98,7 +98,8 @@ 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-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, "bg-red-600/20 p-0.5 rounded border border-red-600":
priority === "urgent" && !hideText && highlightUrgent,
})} })}
> >
<PriorityIcon <PriorityIcon
@ -112,7 +113,6 @@ const BorderButton = (props: ButtonProps) => {
"translate-x-0.5": hideText && priority === "medium", "translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low", "translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent // highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})} })}
/> />
</div> </div>
@ -145,7 +145,7 @@ const BackgroundButton = (props: ButtonProps) => {
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority); const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
const priorityClasses = { const priorityClasses = {
urgent: "bg-red-500/20 text-red-950", urgent: "bg-red-600/20 text-red-600",
high: "bg-orange-500/20 text-orange-950", high: "bg-orange-500/20 text-orange-950",
medium: "bg-yellow-500/20 text-yellow-950", medium: "bg-yellow-500/20 text-yellow-950",
low: "bg-blue-500/20 text-blue-950", low: "bg-blue-500/20 text-blue-950",
@ -170,7 +170,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-600 border-red-600": priority === "urgent" && hideText && highlightUrgent, "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
}, },
className className
)} )}
@ -180,7 +180,8 @@ 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-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, "bg-red-600/20 p-0.5 rounded border border-red-600":
priority === "urgent" && !hideText && highlightUrgent,
})} })}
> >
<PriorityIcon <PriorityIcon
@ -194,7 +195,6 @@ const BackgroundButton = (props: ButtonProps) => {
"translate-x-0.5": hideText && priority === "medium", "translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low", "translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent // highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})} })}
/> />
</div> </div>
@ -253,7 +253,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-600 border-red-600": priority === "urgent" && hideText && highlightUrgent, "bg-red-600/10 border-red-600": priority === "urgent" && hideText && highlightUrgent,
"bg-custom-background-80": isActive, "bg-custom-background-80": isActive,
}, },
className className
@ -264,7 +264,8 @@ 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-600 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent, "bg-red-600/20 p-0.5 rounded border border-red-600":
priority === "urgent" && !hideText && highlightUrgent,
})} })}
> >
<PriorityIcon <PriorityIcon
@ -278,7 +279,6 @@ const TransparentButton = (props: ButtonProps) => {
"translate-x-0.5": hideText && priority === "medium", "translate-x-0.5": hideText && priority === "medium",
"translate-x-1": hideText && priority === "low", "translate-x-1": hideText && priority === "low",
// highlight the icon if priority is urgent // highlight the icon if priority is urgent
"text-white": priority === "urgent" && highlightUrgent,
})} })}
/> />
</div> </div>