Fix: Show Priority icon in custom analytics table. (#2744)

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

@@ -18,18 +18,21 @@ export const PriorityIcon: React.FC<IPriorityIcon> = ({
 }) => {
   if (!className || className === "") className = "h-3.5 w-3.5";
 
+  // Convert to lowercase for string comparison
+  const lowercasePriority = priority?.toLowerCase();
+
   return (
     <>
-      {priority === "urgent" ? (
-        <AlertCircle className={`${className}`} />
-      ) : priority === "high" ? (
-        <SignalHigh className={`${className}`} />
-      ) : priority === "medium" ? (
-        <SignalMedium className={`${className}`} />
-      ) : priority === "low" ? (
-        <SignalLow className={`${className}`} />
+      {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}`} />
       ) : (
-        <Ban className={`${className}`} />
+        <Ban className={`text-custom-text-200 ${className}`} />
       )}
     </>
   );

web/components/analytics/custom-analytics/table.tsx

@@ -69,7 +69,6 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
                   }`}
                 >
                   {params.x_axis === "priority" ? (
-                    // TODO: incorrect priority icon being rendered
                     <PriorityIcon priority={item.name as TIssuePriorities} />
                   ) : (
                     <span

web/components/inbox/issue-card.tsx

@@ -45,13 +45,13 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               <div
                 className={`grid h-6 w-6 place-items-center rounded border items-center shadow-sm ${
                   issue.priority === "urgent"
-                    ? "border-red-500/20 bg-red-500/20 text-red-500"
+                    ? "border-red-500/20 bg-red-500/20"
                     : issue.priority === "high"
-                    ? "border-orange-500/20 bg-orange-500/20 text-orange-500"
+                    ? "border-orange-500/20 bg-orange-500/20"
                     : issue.priority === "medium"
-                    ? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
+                    ? "border-yellow-500/20 bg-yellow-500/20"
                     : issue.priority === "low"
-                    ? "border-green-500/20 bg-green-500/20 text-green-500"
+                    ? "border-green-500/20 bg-green-500/20"
                     : "border-custom-border-200"
                 }`}
               >

web/components/issues/issue-layouts/filters/applied-filters/priority.tsx

@@ -20,17 +20,7 @@ export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
         <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
           <PriorityIcon
             priority={priority as TIssuePriorities}
-            className={`h-3 w-3 ${
-              priority === "urgent"
-                ? "text-red-500"
-                : priority === "high"
-                ? "text-orange-500"
-                : priority === "medium"
-                ? "text-yellow-500"
-                : priority === "low"
-                ? "text-green-500"
-                : ""
-            }`}
+            className={`h-3 w-3`}
           />
           {priority}
           <button

web/components/project/priority-select.tsx

@@ -74,15 +74,7 @@ export const PrioritySelect: React.FC<Props> = ({
       <div className="flex items-center gap-2">
         <PriorityIcon
           priority={value}
-          className={`h-3.5 w-3.5 ${
-            value === "high"
-              ? "text-orange-500"
-              : value === "medium"
-              ? "text-yellow-500"
-              : value === "low"
-              ? "text-green-500"
-              : "text-custom-text-200"
-          } ${value === "urgent" ? (highlightUrgentPriority ? "text-white" : "text-red-500") : ""}`}
+          className={`h-3.5 w-3.5 ${value === "urgent" ? (highlightUrgentPriority ? "text-white" : "text-red-500") : ""}`}
         />
         {showTitle && <span className="capitalize text-xs">{value}</span>}
       </div>