From 655ff7fc4a93f0b3025702fe93d0df9fd6f07669 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Fri, 24 Apr 2026 11:56:23 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D1=80=D0=B0=D0=B2=D0=BD=D0=B8=D0=B2=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=B5=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA=20?=
 =?UTF-8?q?=D0=B2=D0=BD=D1=83=D1=82=D1=80=D0=B5=D0=BD=D0=BD=D0=B5=D0=B3?=
 =?UTF-8?q?=D0=BE=20=D0=BA=D0=BE=D0=BD=D1=82=D1=83=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kanban/internal-contour-card.tsx          | 130 ++++++++++--------
 .../propel/src/icons/state/helper.tsx         |  13 +-
 2 files changed, 81 insertions(+), 62 deletions(-)

diff --git a/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx b/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx
index 7c6fb93..1eb6217 100644
--- a/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-layouts/kanban/internal-contour-card.tsx
@@ -8,7 +8,7 @@ import { useMemo } from "react";
 import { CalendarDays, MoreHorizontal } from "lucide-react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
-import { PriorityIcon, StateGroupIcon } from "@plane/propel/icons";
+import { PriorityIcon, StateGroupIcon, getStateGroupColor } from "@plane/propel/icons";
 import type { IIssueDisplayProperties, TIssue } from "@plane/types";
 import { Avatar } from "@plane/ui";
 import { cn, getFileURL, renderFormattedDate, renderFormattedPayloadDate } from "@plane/utils";
@@ -21,10 +21,7 @@ import { useMember } from "@/hooks/store/use-member";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import {
-  NodedcWorkItemCard,
-  getNodedcWorkItemCardAppearance,
-} from "../shared/nodedc-work-item-card";
+import { NodedcWorkItemCard, getNodedcWorkItemCardAppearance } from "../shared/nodedc-work-item-card";
 import type { TRenderQuickActions } from "../list/list-view-types";
 
 type Props = {
@@ -74,30 +71,60 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
   const sourceContourName = issue.source_project_name ?? getProjectById(issue.project_id)?.name ?? t("common.none");
   const selectedState = getStateById(issue.state_id);
   const projectStateIds = issue.project_id ? getProjectStateIds(issue.project_id) : [];
-  const { pillBackgroundClasses, iconBubbleClasses } = getNodedcWorkItemCardAppearance(isActive);
-  const statusIconColor =
-    selectedState?.color ?? (isActive ? "rgb(var(--nodedc-on-card-active-rgb))" : "var(--text-color-primary)");
+  const { pillBackgroundClasses } = getNodedcWorkItemCardAppearance(isActive);
+  const statusIconColor = getStateGroupColor(selectedState?.group, selectedState?.color);
 
   const creatorName = creatorDetails?.display_name ?? t("common.none");
   const dueDateLabel = issue.target_date ? renderFormattedDate(issue.target_date, "d MMM, yyyy") : t("common.none");
+  const cornerControlClasses =
+    "flex h-12 w-12 items-center justify-center rounded-full border-0 bg-white text-[#0B1117] shadow-none outline-none ring-0 transition-transform hover:scale-[1.03]";
+  const dateButton = (
+    <DateDropdown
+      className="h-auto self-start"
+      buttonContainerClassName="h-auto w-auto text-left"
+      value={issue.target_date}
+      rangePreview={{
+        from: issue.start_date,
+        to: issue.target_date,
+      }}
+      onChange={(targetDate) =>
+        updateIssue?.(issue.project_id ?? null, issue.id, {
+          target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
+        })
+      }
+      disabled={isReadOnly || !updateIssue}
+      button={
+        <div
+          data-control-link-ignore="true"
+          className={cn(
+            "inline-flex max-w-full items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] leading-4 font-medium",
+            pillBackgroundClasses
+          )}
+        >
+          <CalendarDays className="h-3.5 w-3.5 shrink-0" />
+          <span className="truncate">{dueDateLabel}</span>
+        </div>
+      }
+    />
+  );
 
   const customActionButton = (
     <div
       data-control-link-ignore="true"
       className={cn(
-        "flex h-8 w-8 cursor-pointer items-center justify-center rounded-full p-1 transition-colors",
+        "flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-black text-white shadow-none ring-0 transition-transform outline-none hover:scale-[1.03]",
         isActive
-          ? "bg-black text-[rgb(var(--nodedc-card-active-rgb))] hover:bg-black/90"
+          ? "text-[rgb(var(--nodedc-card-active-rgb))] hover:bg-black/90"
           : "bg-[#111214] text-white hover:bg-[#0A0B0C]"
       )}
     >
-      <MoreHorizontal className="h-3.5 w-3.5" />
+      <MoreHorizontal className="h-4 w-4" />
     </div>
   );
 
   const header = (
-    <div className="flex items-center justify-between gap-3">
-      <div className="flex min-w-0 flex-1 items-center gap-3">
+    <div className="relative z-10">
+      <div className="flex min-w-0 items-start gap-2.5 pt-3 pr-[96px] pl-3">
         <div className="shrink-0">
           <Avatar
             src={getFileURL(creatorDetails?.avatar_url ?? "")}
@@ -106,28 +133,20 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
             showTooltip={!isMobile}
           />
         </div>
-        <div className="truncate text-body-sm-medium leading-5">{creatorName}</div>
+        <div className="flex min-w-0 flex-col gap-1">
+          <div className="truncate text-body-sm-medium leading-5">{sourceContourName}</div>
+          {dateButton}
+        </div>
       </div>
 
-      <div className="flex shrink-0 items-center gap-2">
-        {quickActions({
-          issue,
-          parentRef: cardRef,
-          customActionButton,
-        })}
+      <div className="absolute top-0 right-0 flex shrink-0 items-center gap-0">
         <PriorityDropdown
           value={issue.priority}
           onChange={(priority) => updateIssue?.(issue.project_id ?? null, issue.id, { priority })}
           disabled={isReadOnly || !updateIssue}
           button={
-            <div
-              data-control-link-ignore="true"
-              className={cn(
-                "flex h-8 w-8 items-center justify-center rounded-full border-0 shadow-none outline-none",
-                iconBubbleClasses
-              )}
-            >
-              <PriorityIcon priority={issue.priority} className="h-3.5 w-3.5" />
+            <div data-control-link-ignore="true" className={cornerControlClasses}>
+              <PriorityIcon priority={issue.priority} className="h-4 w-4" />
             </div>
           }
         />
@@ -138,14 +157,11 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
           onChange={(stateId) => updateIssue?.(issue.project_id ?? null, issue.id, { state_id: stateId })}
           disabled={isReadOnly || !updateIssue}
           button={
-            <div
-              data-control-link-ignore="true"
-              className={cn("flex h-8 w-8 items-center justify-center rounded-full", iconBubbleClasses)}
-            >
+            <div data-control-link-ignore="true" className={cornerControlClasses}>
               <StateGroupIcon
                 stateGroup={selectedState?.group ?? "backlog"}
                 color={statusIconColor}
-                className="h-3.5 w-3.5"
+                className="h-4 w-4"
                 percentage={selectedState?.order}
               />
             </div>
@@ -155,6 +171,12 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
     </div>
   );
 
+  const title = (
+    <div className="flex flex-col items-center">
+      <span>{issue.name}</span>
+    </div>
+  );
+
   const footer = (
     <>
       <MemberDropdown
@@ -162,33 +184,25 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
         value={issue.assignee_ids}
         onChange={(assigneeIds) => updateIssue?.(issue.project_id ?? null, issue.id, { assignee_ids: assigneeIds })}
         disabled={isReadOnly || !updateIssue}
+        multiple
+        className="h-11 w-11"
+        buttonContainerClassName="h-11 w-11"
         button={
-          <div data-control-link-ignore="true" className={cn(basePillClasses, pillBackgroundClasses, "min-h-9 pl-1 pr-2")}>
+          <div
+            data-control-link-ignore="true"
+            className={cn(basePillClasses, "h-11 min-w-11 justify-center rounded-full bg-transparent px-0 py-0")}
+          >
             <ButtonAvatars showTooltip={false} userIds={issue.assignee_ids} size="sm" />
           </div>
         }
       />
 
       <div className="flex items-center justify-end">
-        <DateDropdown
-          value={issue.target_date}
-          rangePreview={{
-            from: issue.start_date,
-            to: issue.target_date,
-          }}
-          onChange={(targetDate) =>
-            updateIssue?.(issue.project_id ?? null, issue.id, {
-              target_date: targetDate ? renderFormattedPayloadDate(targetDate) : null,
-            })
-          }
-          disabled={isReadOnly || !updateIssue}
-          button={
-            <div data-control-link-ignore="true" className={cn(basePillClasses, pillBackgroundClasses)}>
-              <CalendarDays className="h-3.5 w-3.5" />
-              <span className="truncate">{dueDateLabel}</span>
-            </div>
-          }
-        />
+        {quickActions({
+          issue,
+          parentRef: cardRef,
+          customActionButton,
+        })}
       </div>
     </>
   );
@@ -196,12 +210,14 @@ export const InternalContourKanbanCard = observer(function InternalContourKanban
   return (
     <NodedcWorkItemCard
       isActive={isActive}
-      surfaceClassName="px-0"
-      contentClassName="px-1"
+      surfaceClassName="!rounded-[24px] !p-0"
+      contentClassName="min-h-[220px]"
       header={header}
-      subtitle={sourceContourName}
-      title={issue.name}
+      title={title}
+      titleContainerClassName="px-6 pt-7 pb-14"
+      titleClassName="line-clamp-none w-full text-[15px] leading-5"
       footer={footer}
+      footerClassName="pointer-events-auto absolute inset-x-0 bottom-0 h-12 items-end gap-0"
     />
   );
 });
diff --git a/plane-src/packages/propel/src/icons/state/helper.tsx b/plane-src/packages/propel/src/icons/state/helper.tsx
index 2ceb3c7..82a6f80 100644
--- a/plane-src/packages/propel/src/icons/state/helper.tsx
+++ b/plane-src/packages/propel/src/icons/state/helper.tsx
@@ -28,13 +28,16 @@ export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "
 export const STATE_GROUP_COLORS: {
   [key in TStateGroups]: string;
 } = {
-  backlog: "#60646C",
-  unstarted: "#60646C",
-  started: "#F59E0B",
-  completed: "#46A758",
-  cancelled: "#9AA4BC",
+  backlog: "#050505",
+  unstarted: "#7C7F85",
+  started: "#050505",
+  completed: "rgb(var(--nodedc-card-active-rgb, 195 255 102))",
+  cancelled: "#050505",
 };
 
+export const getStateGroupColor = (stateGroup: TStateGroups | undefined, fallbackColor?: string) =>
+  stateGroup ? STATE_GROUP_COLORS[stateGroup] : (fallbackColor ?? STATE_GROUP_COLORS.unstarted);
+
 export const INTAKE_STATE_GROUP_COLORS: { [key in TIntakeStateGroups]: string } = { triage: "#4E5355" };
 
 export const STATE_GROUP_SIZES: {