Standarding priority icons across the platform (#2776)

packages/ui/src/icons/priority-icon.tsx

@@ -15,24 +15,42 @@ import { IPriorityIcon } from "./type";
 export const PriorityIcon: React.FC<IPriorityIcon> = ({
   priority,
   className = "",
+  transparentBg = false
 }) => {
-  if (!className || className === "") className = "h-3.5 w-3.5";
+  if (!className || className === "") className = "h-4 w-4";
 
   // Convert to lowercase for string comparison
   const lowercasePriority = priority?.toLowerCase();
 
+  //get priority icon
+  const getPriorityIcon = (): React.ReactNode => {
+    switch (lowercasePriority) {
+      case 'urgent':
+        return <AlertCircle className={`text-red-500 ${ transparentBg ? '' : 'p-0.5' } ${className}`} />;
+      case 'high':
+        return <SignalHigh className={`text-orange-500 ${ transparentBg ? '' : 'pl-1' } ${className}`} />;
+      case 'medium':
+        return <SignalMedium className={`text-yellow-500 ${ transparentBg ? '' : 'ml-1.5' } ${className}`} />;
+      case 'low':
+        return <SignalLow className={`text-green-500 ${ transparentBg ? '' : 'ml-2' } ${className}`} />;
+      default:
+        return <Ban className={`text-custom-text-200 ${ transparentBg ? '' : 'p-0.5' } ${className}`} />;
+    }
+  };
+
   return (
     <>
-      {lowercasePriority === "urgent" ? (
-        <AlertCircle className={`text-red-500 ${className}`} />
-      ) : lowercasePriority === "high" ? (
-        <SignalHigh className={`text-orange-500 ${className}`} />
-      ) : lowercasePriority === "medium" ? (
-        <SignalMedium className={`text-yellow-500 ${className}`} />
-      ) : lowercasePriority === "low" ? (
-        <SignalLow className={`text-green-500 ${className}`} />
+      { transparentBg ? (
+        getPriorityIcon()
       ) : (
-        <Ban className={`text-custom-text-200 ${className}`} />
+        <div className={`grid h-5 w-5 place-items-center rounded border items-center ${
+          lowercasePriority === "urgent"
+            ? "border-red-500/20 bg-red-500/20"
+            : "border-custom-border-200"
+          }`}
+        >
+          { getPriorityIcon() }
+        </div>
       )}
     </>
   );

packages/ui/src/icons/type.d.ts

@@ -7,4 +7,5 @@ export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
 export interface IPriorityIcon {
   priority: TIssuePriorities | null;
   className?: string;
+  transparentBg?: boolean | false;
 }