fix: state group icon in the space app

space/components/issues/filters-render/state/filter-state-block.tsx

@@ -29,7 +29,7 @@ export const RenderIssueState = observer(({ state }: { state: IIssueState }) =>
   return (
     <div className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 ${stateGroup.className || ``}`}>
       <div className="flex-shrink-0 w-3 h-3 flex justify-center items-center overflow-hidden rounded-full">
-        <stateGroup.icon />
+        {/* <stateGroup.icon /> */}
       </div>
       <div className="text-xs font-medium whitespace-nowrap">{state?.name}</div>
       <div

space/components/issues/navbar/issue-filter.tsx

@@ -77,7 +77,7 @@ export const NavbarIssueFilter = observer(() => {
             return {
               display: (
                 <span className="capitalize flex items-center gap-x-2">
-                  {stateGroup && <stateGroup.icon />}
+                  {/* {stateGroup && <stateGroup.icon />} */}
                   {state.name}
                 </span>
               ),

space/components/issues/peek-overview/issue-properties.tsx

@@ -1,5 +1,7 @@
 // hooks
 import useToast from "hooks/use-toast";
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // icons
 import { Icon } from "components/ui";
 // helpers
@@ -63,7 +65,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
             {stateGroup && (
               <div className="inline-flex bg-custom-background-80 text-sm rounded px-2.5 py-0.5">
                 <div className="flex items-center gap-1.5 text-left text-custom-text-100">
-                  <stateGroup.icon />
+                  <StateGroupIcon stateGroup={state.group} color={state.color} />
                   {addSpaceIfCamelCase(state?.name ?? "")}
                 </div>
               </div>

space/constants/data.ts

@@ -1,21 +1,12 @@
 // interfaces
 import {
-  IIssueBoardViews,
   // priority
   TIssuePriorityKey,
   // state groups
   TIssueGroupKey,
   IIssuePriorityFilters,
   IIssueGroup,
 } from "types/issue";
-// icons
-import {
-  BacklogGroupIcon,
-  CancelledGroupIcon,
-  CompletedGroupIcon,
-  StartedGroupIcon,
-  UnstartedGroupIcon,
-} from "@plane/ui";
 
 // all issue views
 export const issueViews: any = {
@@ -92,35 +83,30 @@ export const issueGroups: IIssueGroup[] = [
     title: "Backlog",
     color: "#d9d9d9",
     className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
-    icon: BacklogGroupIcon,
   },
   {
     key: "unstarted",
     title: "Unstarted",
     color: "#3f76ff",
     className: `text-[#3f76ff] bg-[#3f76ff]/10`,
-    icon: UnstartedGroupIcon,
   },
   {
     key: "started",
     title: "Started",
     color: "#f59e0b",
     className: `text-[#f59e0b] bg-[#f59e0b]/10`,
-    icon: StartedGroupIcon,
   },
   {
     key: "completed",
     title: "Completed",
     color: "#16a34a",
     className: `text-[#16a34a] bg-[#16a34a]/10`,
-    icon: CompletedGroupIcon,
   },
   {
     key: "cancelled",
     title: "Cancelled",
     color: "#dc2626",
     className: `text-[#dc2626] bg-[#dc2626]/10`,
-    icon: CancelledGroupIcon,
   },
 ];
 

space/types/issue.ts

@@ -24,7 +24,6 @@ export interface IIssueGroup {
   title: TIssueGroupTitle;
   color: string;
   className: string;
-  icon: React.FC;
 }
 
 export interface IIssue {
@@ -40,7 +39,12 @@ export interface IIssue {
   sequence_id: number;
   start_date: any;
   state: string;
-  state_detail: any;
+  state_detail: {
+    id: string;
+    name: string;
+    group: TIssueGroupKey;
+    color: string;
+  };
   target_date: any;
   votes: IVote[];
 }