UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: приведение модалки создания рабочего элемента к дизайн-канону

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" />

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">

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%),