style: updated layouts UI in the space app (#2671)

* style: updated layouts UI in space

* fix: build error

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

@@ -1,3 +1,5 @@
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueGroupFilter } from "constants/data";
 
@@ -8,7 +10,7 @@ export const IssueBlockState = ({ state }: any) => {
   return (
     <div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs">
       <div className="flex items-center w-full gap-1.5 text-custom-text-200">
-        <stateGroup.icon />
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
         <div className="text-xs">{state?.name}</div>
       </div>
     </div>

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

@@ -7,7 +7,6 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 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";
 // interfaces
 import { IIssue } from "types/issue";
@@ -37,7 +36,7 @@ export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
   };
 
   return (
-    <div className="py-3 px-4 h-[118px] flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-sm border-[0.5px] border-custom-border-200">
+    <div className="py-2 px-3 flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border-[0.5px] border-custom-border-200 space-y-2 text-sm">
       {/* id */}
       <div className="text-xs text-custom-text-300 break-words">
         {projectStore?.project?.identifier}-{issue?.sequence_id}

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

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