From e27c72e8b060fcd0d9a34c88a42b2956f0054af0 Mon Sep 17 00:00:00 2001
From: Junyi <mytharcher@users.noreply.github.com>
Date: Tue, 25 Jul 2023 15:41:42 +0700
Subject: [PATCH] fix(plugin-workflow): fix styles (#2316)

---
 .../antd/action/Action.style.ts               | 74 +++++++++----------
 .../schema-component/antd/action/Action.tsx   | 50 +++++++------
 .../workflow/src/client/nodes/index.tsx       | 15 ++++
 .../plugins/workflow/src/client/style.tsx     |  9 ++-
 4 files changed, 83 insertions(+), 65 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/action/Action.style.ts b/packages/core/client/src/schema-component/antd/action/Action.style.ts
index 0c89a12907..9a512d45e3 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.style.ts
+++ b/packages/core/client/src/schema-component/antd/action/Action.style.ts
@@ -5,50 +5,42 @@ const useStyles = genStyleHook('nb-action', (token) => {
 
   return {
     [componentCls]: {
-      '.renderButton': {
-        position: 'relative',
-        '&:hover': { '> .general-schema-designer': { display: 'block' } },
-        '&.nb-action-link': {
-          '> .general-schema-designer': {
-            top: '-10px',
-            bottom: '-10px',
-            left: '-10px',
-            right: '-10px',
-          },
-        },
+      position: 'relative',
+      '&:hover': { '> .general-schema-designer': { display: 'block' } },
+      '&.nb-action-link': {
         '> .general-schema-designer': {
-          position: 'absolute',
-          zIndex: 999,
-          top: '0',
-          bottom: '0',
-          left: '0',
-          right: '0',
-          display: 'none',
-          background: 'var(--colorBgSettingsHover)',
-          border: '0',
-          pointerEvents: 'none',
-          '> .general-schema-designer-icons': {
-            position: 'absolute',
-            right: '2px',
-            top: '2px',
-            lineHeight: '16px',
-            pointerEvents: 'all',
-            '.ant-space-item': {
-              backgroundColor: token.colorSettings,
-              color: '#fff',
-              lineHeight: '16px',
-              width: '16px',
-              paddingLeft: '1px',
-              alignSelf: 'stretch',
-            },
-          },
+          top: '-10px',
+          bottom: '-10px',
+          left: '-10px',
+          right: '-10px',
         },
       },
-
-      '.popover': {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        width: '100%',
+      '> .general-schema-designer': {
+        position: 'absolute',
+        zIndex: 999,
+        top: '0',
+        bottom: '0',
+        left: '0',
+        right: '0',
+        display: 'none',
+        background: 'var(--colorBgSettingsHover)',
+        border: '0',
+        pointerEvents: 'none',
+        '> .general-schema-designer-icons': {
+          position: 'absolute',
+          right: '2px',
+          top: '2px',
+          lineHeight: '16px',
+          pointerEvents: 'all',
+          '.ant-space-item': {
+            backgroundColor: token.colorSettings,
+            color: '#fff',
+            lineHeight: '16px',
+            width: '16px',
+            paddingLeft: '1px',
+            alignSelf: 'stretch',
+          },
+        },
       },
     },
   };
diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx
index e68dfdb376..dc53882d10 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.tsx
@@ -1,4 +1,5 @@
 import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
+import { lodash } from '@nocobase/utils';
 import { App, Button, Popover } from 'antd';
 import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
@@ -21,7 +22,6 @@ import { ActionContextProvider } from './context';
 import { useA } from './hooks';
 import { ComposedAction } from './types';
 import { linkageAction } from './utils';
-import { lodash } from '@nocobase/utils';
 
 export const Action: ComposedAction = observer(
   (props: any) => {
@@ -105,7 +105,7 @@ export const Action: ComposedAction = observer(
             }
           }}
           component={tarComponent || Button}
-          className={classnames('renderButton', className)}
+          className={classnames(componentCls, hashId, className)}
           type={props.type === 'danger' ? undefined : props.type}
         >
           {actionTitle}
@@ -115,24 +115,22 @@ export const Action: ComposedAction = observer(
     };
 
     return wrapSSR(
-      <div className={`${componentCls} ${hashId}`}>
-        <ActionContextProvider
-          button={renderButton()}
-          visible={visible}
-          setVisible={setVisible}
-          formValueChanged={formValueChanged}
-          setFormValueChanged={setFormValueChanged}
-          openMode={openMode}
-          openSize={openSize}
-          containerRefKey={containerRefKey}
-          fieldSchema={fieldSchema}
-        >
-          {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
-          {!popover && renderButton()}
-          {!popover && <div onClick={(e) => e.stopPropagation()}>{props.children}</div>}
-          {element}
-        </ActionContextProvider>
-      </div>,
+      <ActionContextProvider
+        button={renderButton()}
+        visible={visible}
+        setVisible={setVisible}
+        formValueChanged={formValueChanged}
+        setFormValueChanged={setFormValueChanged}
+        openMode={openMode}
+        openSize={openSize}
+        containerRefKey={containerRefKey}
+        fieldSchema={fieldSchema}
+      >
+        {popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
+        {!popover && renderButton()}
+        {!popover && <div onClick={(e) => e.stopPropagation()}>{props.children}</div>}
+        {element}
+      </ActionContextProvider>,
     );
   },
   { displayName: 'Action' },
@@ -160,7 +158,17 @@ Action.Popover = observer(
 
 Action.Popover.Footer = observer(
   (props) => {
-    return <div className="popover">{props.children}</div>;
+    return (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          width: '100%',
+        }}
+      >
+        {props.children}
+      </div>
+    );
   },
   { displayName: 'Action.Popover.Footer' },
 );
diff --git a/packages/plugins/workflow/src/client/nodes/index.tsx b/packages/plugins/workflow/src/client/nodes/index.tsx
index 5613f5e233..6646924f7f 100644
--- a/packages/plugins/workflow/src/client/nodes/index.tsx
+++ b/packages/plugins/workflow/src/client/nodes/index.tsx
@@ -441,10 +441,25 @@ export function NodeDefaultView(props) {
                       'x-component': 'fieldset',
                       'x-component-props': {
                         className: css`
+                          .ant-input,
                           .ant-select,
                           .ant-cascader-picker,
                           .ant-picker,
                           .ant-input-number,
+                          .ant-input-affix-wrapper {
+                            &:not(.full-width) {
+                              width: auto;
+                              min-width: 6em;
+                            }
+                          }
+                          .ant-input-affix-wrapper {
+                            &:not(.full-width) {
+                              .ant-input {
+                                width: auto;
+                                min-width: 6em;
+                              }
+                            }
+                          }
                         `,
                       },
                       properties: instruction.fieldset,
diff --git a/packages/plugins/workflow/src/client/style.tsx b/packages/plugins/workflow/src/client/style.tsx
index be0b7f2a0e..3f14dcae6b 100644
--- a/packages/plugins/workflow/src/client/style.tsx
+++ b/packages/plugins/workflow/src/client/style.tsx
@@ -96,7 +96,7 @@ const useStyles = createStyles(({ css, token }) => {
         bottom: 0;
         left: calc(50% - 0.5px);
         width: 1px;
-        background-color: ${token.colorBorder};
+        background-color: ${token.colorBgLayout};
       }
     `,
 
@@ -220,7 +220,9 @@ const useStyles = createStyles(({ css, token }) => {
         font-weight: bold;
 
         &:not(:focus) {
-          transition: background-color 0.3s ease, border-color 0.3s ease;
+          transition:
+            background-color 0.3s ease,
+            border-color 0.3s ease;
           border-color: ${token.colorBorderBg};
           background-color: ${token.colorBgContainerDisabled};
 
@@ -254,7 +256,7 @@ const useStyles = createStyles(({ css, token }) => {
       right: 1em;
       justify-content: center;
       align-items: center;
-      color: ${token.colorText};
+      color: ${token.colorTextLightSolid};
 
       &[type='button'] {
         border: none;
@@ -327,6 +329,7 @@ const useStyles = createStyles(({ css, token }) => {
         top: calc(1.5em - 1px);
         line-height: 1em;
         color: ${token.colorTextSecondary};
+        background-color: ${token.colorBgLayout};
         padding: 1px;
       }
     `,