fix: state group icon not rendering correct color

space/components/icons/index.ts

@@ -1,5 +1 @@
-export * from "./issue-group/backlog-state-icon";
-export * from "./issue-group/unstarted-state-icon";
-export * from "./issue-group/started-state-icon";
-export * from "./issue-group/completed-state-icon";
-export * from "./issue-group/cancelled-state-icon";
+export * from "./state-group";

space/components/icons/state-group/index.ts

@@ -0,0 +1,6 @@
+export * from "./backlog-state-icon";
+export * from "./cancelled-state-icon";
+export * from "./completed-state-icon";
+export * from "./started-state-icon";
+export * from "./state-group-icon";
+export * from "./unstarted-state-icon";

space/components/icons/state-group/state-group-icon.tsx

@@ -0,0 +1,29 @@
+// icons
+import {
+  BacklogStateIcon,
+  CancelledStateIcon,
+  CompletedStateIcon,
+  StartedStateIcon,
+  UnstartedStateIcon,
+} from "components/icons";
+import { TIssueGroupKey } from "types/issue";
+
+type Props = {
+  stateGroup: TIssueGroupKey;
+  color: string;
+  className?: string;
+  height?: string;
+  width?: string;
+};
+
+export const StateGroupIcon: React.FC<Props> = ({ stateGroup, className, color, height = "12px", width = "12px" }) => {
+  if (stateGroup === "backlog")
+    return <BacklogStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "cancelled")
+    return <CancelledStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "completed")
+    return <CompletedStateIcon className={className} color={color} height={height} width={width} />;
+  else if (stateGroup === "started")
+    return <StartedStateIcon className={className} color={color} height={height} width={width} />;
+  else return <UnstartedStateIcon className={className} color={color} height={height} width={width} />;
+};

space/components/issues/board-views/kanban/header.tsx

@@ -1,11 +1,11 @@
-"use client";
-
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // interfaces
 import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
+// icons
+import { StateGroupIcon } from "components/icons";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -20,7 +20,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   return (
     <div className="pb-2 px-2 flex items-center">
       <div className="w-4 h-4 flex justify-center items-center flex-shrink-0">
-        <stateGroup.icon />
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
       </div>
       <div className="font-semibold text-custom-text-200 capitalize ml-2 mr-3 truncate">{state?.name}</div>
       <span className="text-custom-text-300 rounded-full flex-shrink-0">

space/components/issues/board-views/list/block.tsx

@@ -6,15 +6,12 @@ import { IssueBlockPriority } from "components/issues/board-views/block-priority
 import { IssueBlockState } from "components/issues/board-views/block-state";
 import { IssueBlockLabels } from "components/issues/board-views/block-labels";
 import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
-import { IssueBlockUpVotes } from "components/issues/board-views/block-upvotes";
-import { IssueBlockDownVotes } from "components/issues/board-views/block-downvotes";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 // interfaces
 import { IIssue } from "types/issue";
 // store
 import { RootStore } from "store/root";
-import { IssueVotes } from "components/issues/peek-overview";
 
 export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
   const { issue } = props;
@@ -40,9 +37,6 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
     // router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
   };
 
-  const totalUpVotes = issue.votes.filter((v) => v.vote === 1);
-  const totalDownVotes = issue.votes.filter((v) => v.vote === -1);
-
   return (
     <div className="flex items-center px-6 py-3.5 relative gap-10 bg-custom-background-100">
       <div className="relative flex items-center gap-5 w-full flex-grow overflow-hidden">

space/components/issues/board-views/list/header.tsx

@@ -1,9 +1,9 @@
-"use client";
-
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // interfaces
 import { IIssueState } from "types/issue";
+// icons
+import { StateGroupIcon } from "components/icons";
 // constants
 import { issueGroupFilter } from "constants/data";
 // mobx hook
@@ -20,7 +20,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   return (
     <div className="px-6 py-2 flex items-center">
       <div className="w-4 h-4 flex justify-center items-center">
-        <stateGroup.icon />
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
       </div>
       <div className="font-semibold capitalize ml-2 mr-3">{state?.name}</div>
       <div className="text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>

space/components/issues/board-views/list/index.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { observer } from "mobx-react-lite";
 // components
 import { IssueListHeader } from "components/issues/board-views/list/header";
@@ -9,7 +8,6 @@ import { IIssueState, IIssue } from "types/issue";
 import { useMobxStore } from "lib/mobx/store-provider";
 // store
 import { RootStore } from "store/root";
-import { useRouter } from "next/router";
 
 export const IssueListView = observer(() => {
   const { issue: issueStore }: RootStore = useMobxStore();

space/components/views/project-details.tsx

@@ -67,7 +67,7 @@ export const ProjectDetailsView = observer(() => {
                   </div>
                 )}
                 {projectStore?.activeBoard === "kanban" && (
-                  <div className="relative w-full h-full mx-auto px-9 py-5">
+                  <div className="relative w-full h-full mx-auto p-5">
                     <IssueKanbanView />
                   </div>
                 )}