From c6645bb4fc2e7051acaed68e7629cbbf2212a9a1 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Tue, 21 Apr 2026 08:14:35 +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=BF?=
 =?UTF-8?q?=D1=80=D0=B8=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BC?=
 =?UTF-8?q?=D0=BE=D0=B4=D0=B0=D0=BB=D0=BA=D0=B8=20=D1=81=D0=BE=D0=B7=D0=B4?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F=20=D1=80=D0=B0=D0=B1=D0=BE=D1=87=D0=B5?=
 =?UTF-8?q?=D0=B3=D0=BE=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D0=B0?=
 =?UTF-8?q?=20=D0=BA=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD-=D0=BA=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=BD=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/default-properties.tsx         | 17 +++++--
 .../components/issues/issue-modal/form.tsx    |  8 +--
 plane-src/apps/web/styles/globals.css         | 50 +++++++++++++++++++
 3 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/plane-src/apps/web/core/components/issues/issue-modal/components/default-properties.tsx b/plane-src/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
index dee03b2..f740065 100644
--- a/plane-src/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -84,9 +84,10 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
 
   const maxDate = getDate(targetDate);
   maxDate?.setDate(maxDate.getDate());
+  const propertyButtonClassName = "nodedc-work-item-property-button";
 
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className="nodedc-work-item-properties-row">
       <Controller
         control={control}
         name="state_id"
@@ -100,6 +101,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
               }}
               projectId={projectId ?? undefined}
               buttonVariant="border-with-text"
+              buttonClassName={propertyButtonClassName}
               tabIndex={getIndex("state_id")}
               isForWorkItemCreation={!id}
             />
@@ -118,6 +120,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                 handleFormChange();
               }}
               buttonVariant="border-with-text"
+              buttonClassName={propertyButtonClassName}
               tabIndex={getIndex("priority")}
             />
           </div>
@@ -136,7 +139,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                 handleFormChange();
               }}
               buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
-              buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
+              buttonClassName={propertyButtonClassName}
               placeholder={t("assignees")}
               multiple
               tabIndex={getIndex("assignee_ids")}
@@ -156,6 +159,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                 handleFormChange();
               }}
               projectId={projectId ?? undefined}
+              buttonClassName={propertyButtonClassName}
               tabIndex={getIndex("label_ids")}
               createLabelEnabled={!!canCreateLabel}
             />
@@ -174,6 +178,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                 handleFormChange();
               }}
               buttonVariant="border-with-text"
+              buttonClassName={propertyButtonClassName}
               maxDate={maxDate ?? undefined}
               placeholder={t("start_date")}
               tabIndex={getIndex("start_date")}
@@ -193,6 +198,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                 handleFormChange();
               }}
               buttonVariant="border-with-text"
+              buttonClassName={propertyButtonClassName}
               minDate={minDate ?? undefined}
               placeholder={t("due_date")}
               tabIndex={getIndex("target_date")}
@@ -215,6 +221,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                 placeholder={t("cycle.label", { count: 1 })}
                 value={value}
                 buttonVariant="border-with-text"
+                buttonClassName={propertyButtonClassName}
                 tabIndex={getIndex("cycle_id")}
               />
             </div>
@@ -236,6 +243,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                 }}
                 placeholder={t("modules")}
                 buttonVariant="border-with-text"
+                buttonClassName={propertyButtonClassName}
                 tabIndex={getIndex("module_ids")}
                 multiple
                 showCount
@@ -258,6 +266,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
                 }}
                 projectId={projectId}
                 buttonVariant="border-with-text"
+                buttonClassName={propertyButtonClassName}
                 tabIndex={getIndex("estimate_point")}
                 placeholder={t("estimate")}
               />
@@ -271,7 +280,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
             customButton={
               <button
                 type="button"
-                className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
+                className={`${propertyButtonClassName} flex h-full cursor-pointer items-center justify-between gap-1 whitespace-nowrap`}
               >
                 {selectedParentIssue?.project_id && (
                   <IssueIdentifier
@@ -313,7 +322,7 @@ export const IssueDefaultProperties = observer(function IssueDefaultProperties(p
         ) : (
           <button
             type="button"
-            className="flex h-full cursor-pointer items-center justify-between gap-1 rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
+            className={`${propertyButtonClassName} flex h-full cursor-pointer items-center justify-between gap-1 whitespace-nowrap`}
             onClick={() => setParentIssueListModalOpen(true)}
           >
             <ParentPropertyIcon className="h-3 w-3 flex-shrink-0" />
diff --git a/plane-src/apps/web/core/components/issues/issue-modal/form.tsx b/plane-src/apps/web/core/components/issues/issue-modal/form.tsx
index 4cde3e3..ff0bb0e 100644
--- a/plane-src/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-modal/form.tsx
@@ -486,7 +486,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                 workspaceSlug={workspaceSlug?.toString()}
               />
             </div>
-            <div className={cn("border-t border-subtle/70 bg-transparent px-6 py-4")}>
+            <div className="bg-transparent px-6 pt-3 pb-4">
               <div className="pb-3">
                 <IssueDefaultProperties
                   control={control}
@@ -504,12 +504,12 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
               </div>
               {showActionButtons && (
                 <div
-                  className="flex items-center justify-end gap-4 border-t border-subtle/70 pt-6 pb-2"
+                  className="nodedc-work-item-actions-row"
                   tabIndex={getIndex("create_more")}
                 >
                   {!data?.id && (
                     <div
-                      className="inline-flex cursor-pointer items-center gap-1.5"
+                      className="nodedc-work-item-create-more"
                       onClick={() => onCreateMoreToggleChange(!isCreateMoreToggleEnabled)}
                       onKeyDown={(e) => {
                         if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
@@ -517,7 +517,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
                       role="button"
                     >
                       <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
-                      <span className="text-caption-sm-regular">{t("create_more")}</span>
+                      <span className="text-caption-sm-regular text-secondary">{t("create_more")}</span>
                     </div>
                   )}
                   <div className="flex items-center gap-2">
diff --git a/plane-src/apps/web/styles/globals.css b/plane-src/apps/web/styles/globals.css
index 5351442..abf1057 100644
--- a/plane-src/apps/web/styles/globals.css
+++ b/plane-src/apps/web/styles/globals.css
@@ -315,6 +315,56 @@
       rgba(255, 255, 255, 0.04);
   }
 
+  .nodedc-work-item-properties-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .nodedc-work-item-property-button {
+    min-height: 1.75rem !important;
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 1rem !important;
+    padding-inline: 0.85rem !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.032) 0%, rgba(255, 255, 255, 0.014) 100%),
+      rgba(255, 255, 255, 0.028) !important;
+    color: var(--text-color-primary) !important;
+    -webkit-backdrop-filter: blur(18px);
+    backdrop-filter: blur(18px);
+  }
+
+  .nodedc-work-item-property-button:hover,
+  .nodedc-work-item-property-button:focus-visible,
+  .nodedc-work-item-property-button:focus-within {
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.018) 100%),
+      rgba(255, 255, 255, 0.04) !important;
+    color: var(--text-color-primary) !important;
+  }
+
+  .nodedc-work-item-actions-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.25rem;
+  }
+
+  .nodedc-work-item-create-more {
+    display: inline-flex;
+    cursor: pointer;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   .nodedc-modal-input {
     background:
       linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),