From aea186679a05333425b0195bcd9e4fad0ad68a70 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 7 Nov 2023 10:50:01 +0530
Subject: [PATCH] fix: state icon

---
 .../filters-render/state/filter-state-block.tsx     |  2 +-
 space/components/issues/navbar/issue-filter.tsx     |  2 +-
 .../issues/peek-overview/issue-properties.tsx       |  4 +++-
 space/constants/data.ts                             | 13 -------------
 space/types/issue.ts                                |  8 ++++++--
 5 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/space/components/issues/filters-render/state/filter-state-block.tsx b/space/components/issues/filters-render/state/filter-state-block.tsx
index 8445386a48a..9b6447cb6d3 100644
--- a/space/components/issues/filters-render/state/filter-state-block.tsx
+++ b/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
diff --git a/space/components/issues/navbar/issue-filter.tsx b/space/components/issues/navbar/issue-filter.tsx
index 08c9f3e2bbf..83d5159d61f 100644
--- a/space/components/issues/navbar/issue-filter.tsx
+++ b/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>
               ),
diff --git a/space/components/issues/peek-overview/issue-properties.tsx b/space/components/issues/peek-overview/issue-properties.tsx
index f7ccab18f08..54e9c4f6afb 100644
--- a/space/components/issues/peek-overview/issue-properties.tsx
+++ b/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>
diff --git a/space/constants/data.ts b/space/constants/data.ts
index 29d411342fb..598c9b855be 100644
--- a/space/constants/data.ts
+++ b/space/constants/data.ts
@@ -8,14 +8,6 @@ import {
   IIssuePriorityFilters,
   IIssueGroup,
 } from "types/issue";
-// icons
-import {
-  BacklogStateIcon,
-  UnstartedStateIcon,
-  StartedStateIcon,
-  CompletedStateIcon,
-  CancelledStateIcon,
-} from "components/icons";
 
 // all issue views
 export const issueViews: any = {
@@ -92,35 +84,30 @@ export const issueGroups: IIssueGroup[] = [
     title: "Backlog",
     color: "#d9d9d9",
     className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
-    icon: BacklogStateIcon,
   },
   {
     key: "unstarted",
     title: "Unstarted",
     color: "#3f76ff",
     className: `text-[#3f76ff] bg-[#3f76ff]/10`,
-    icon: UnstartedStateIcon,
   },
   {
     key: "started",
     title: "Started",
     color: "#f59e0b",
     className: `text-[#f59e0b] bg-[#f59e0b]/10`,
-    icon: StartedStateIcon,
   },
   {
     key: "completed",
     title: "Completed",
     color: "#16a34a",
     className: `text-[#16a34a] bg-[#16a34a]/10`,
-    icon: CompletedStateIcon,
   },
   {
     key: "cancelled",
     title: "Cancelled",
     color: "#dc2626",
     className: `text-[#dc2626] bg-[#dc2626]/10`,
-    icon: CancelledStateIcon,
   },
 ];
 
diff --git a/space/types/issue.ts b/space/types/issue.ts
index 206327fcdac..4b76c75e8d9 100644
--- a/space/types/issue.ts
+++ b/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[];
 }