feat: improve design

twentyhq · Jan 23, 2025 · fa06fe3 · fa06fe3
1 parent bddca09
commit fa06fe3
Show file tree

Hide file tree

Showing 9 changed files with 274 additions and 37 deletions.
diff --git a/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx b/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
@@ -3,10 +3,20 @@ import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import React from 'react';
 import { capitalize } from 'twenty-shared';
-import { isDefined, OverflowingTextWithTooltip } from 'twenty-ui';
+import { isDefined, OverflowingTextWithTooltip, THEME_COMMON } from 'twenty-ui';
 
 type Variant = 'placeholder';
 
+const NODE_HANDLE_WIDTH_PX = 4;
+const NODE_HANDLE_HEIGHT_PX = NODE_HANDLE_WIDTH_PX;
+export const NODE_ICON_WIDTH = Number(
+  THEME_COMMON.spacing(6).replace('px', ''),
+);
+export const NODE_ICON_LEFT_MARGIN = Number(
+  THEME_COMMON.spacing(2).replace('px', ''),
+);
+export const NODE_BORDER_WIDTH = 1;
+
 const StyledStepNodeContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -21,7 +31,7 @@ const StyledStepNodeType = styled.div`
     ${({ theme }) => theme.border.radius.sm} 0 0;
 
   color: ${({ theme }) => theme.font.color.light};
-  font-size: ${({ theme }) => theme.font.size.md};
+  font-size: 9px;
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
 
   margin-left: ${({ theme }) => theme.spacing(2)};
@@ -38,9 +48,8 @@ const StyledStepNodeType = styled.div`
 
 const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
   background-color: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-style: ${({ variant }) =>
-    variant === 'placeholder' ? 'dashed' : null};
+  border: ${NODE_BORDER_WIDTH}px solid
+    ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
   display: flex;
   gap: ${({ theme }) => theme.spacing(2)};
@@ -61,7 +70,7 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
 const StyledStepNodeLabel = styled.div<{ variant?: Variant }>`
   align-items: center;
   display: flex;
-  font-size: ${({ theme }) => theme.font.size.lg};
+  font-size: 13px;
   font-weight: ${({ theme }) => theme.font.weight.medium};
   column-gap: ${({ theme }) => theme.spacing(2)};
   color: ${({ variant, theme }) =>
@@ -71,24 +80,27 @@ const StyledStepNodeLabel = styled.div<{ variant?: Variant }>`
   max-width: 200px;
 `;
 
-const StyledSourceHandle = styled(Handle)`
+export const StyledHandle = styled(Handle)`
   background-color: ${({ theme }) => theme.grayScale.gray25};
   border: none;
-  width: 4px;
-  height: 4px;
-  left: ${({ theme }) => theme.spacing(10)};
+  width: ${NODE_HANDLE_WIDTH_PX}px;
+  height: ${NODE_HANDLE_HEIGHT_PX}px;
+`;
+
+const StyledSourceHandle = styled(StyledHandle)`
+  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
 `;
 
-export const StyledTargetHandle = styled(Handle)`
-  left: ${({ theme }) => theme.spacing(10)};
+const StyledTargetHandle = styled(StyledSourceHandle)`
+  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
   visibility: hidden;
 `;
 
 const StyledRightFloatingElementContainer = styled.div`
   display: flex;
   align-items: center;
   position: absolute;
-  right: ${({ theme }) => theme.spacing(-3)};
+  right: ${({ theme }) => theme.spacing(-4)};
   bottom: 0;
   top: 0;
   transform: translateX(100%);

diff --git a/...-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx b/...-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
@@ -1,15 +1,22 @@
+import {
+  NODE_BORDER_WIDTH,
+  NODE_ICON_LEFT_MARGIN,
+  NODE_ICON_WIDTH,
+  StyledHandle,
+} from '@/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode';
 import styled from '@emotion/styled';
-import { Handle, Position } from '@xyflow/react';
+import { Position } from '@xyflow/react';
 import { IconButton, IconPlus } from 'twenty-ui';
 
 const StyledContainer = styled.div`
   padding-left: ${({ theme }) => theme.spacing(6)};
   padding-top: ${({ theme }) => theme.spacing(1)};
+  transform: translateX(-50%);
   position: relative;
+  left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;
 `;
 
-export const StyledTargetHandle = styled(Handle)`
-  left: ${({ theme }) => theme.spacing(10)};
+const StyledTargetHandle = styled(StyledHandle)`
   visibility: hidden;
 `;
 

diff --git a/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx b/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEmptyTrigger.tsx
@@ -22,7 +22,10 @@ export const WorkflowDiagramEmptyTrigger = () => {
       variant="placeholder"
       Icon={
         <StyledStepNodeLabelIconContainer>
-          <IconPlaylistAdd size={16} color={theme.font.color.tertiary} />
+          <IconPlaylistAdd
+            size={theme.icon.size.md}
+            color={theme.font.color.tertiary}
+          />
         </StyledStepNodeLabelIconContainer>
       }
     />

diff --git a/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx b/...ty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx
@@ -37,7 +37,7 @@ export const WorkflowDiagramStepNodeBase = ({
             return (
               <StyledStepNodeLabelIconContainer>
                 <IconPlaylistAdd
-                  size={theme.icon.size.lg}
+                  size={theme.icon.size.md}
                   color={theme.font.color.tertiary}
                 />
               </StyledStepNodeLabelIconContainer>
@@ -47,7 +47,7 @@ export const WorkflowDiagramStepNodeBase = ({
             return (
               <StyledStepNodeLabelIconContainer>
                 <IconHandMove
-                  size={theme.icon.size.lg}
+                  size={theme.icon.size.md}
                   color={theme.font.color.tertiary}
                 />
               </StyledStepNodeLabelIconContainer>
@@ -63,16 +63,17 @@ export const WorkflowDiagramStepNodeBase = ({
             return (
               <StyledStepNodeLabelIconContainer>
                 <IconCode
-                  size={theme.icon.size.lg}
+                  size={theme.icon.size.md}
                   color={theme.color.orange}
+                  stroke={theme.icon.stroke.sm}
                 />
               </StyledStepNodeLabelIconContainer>
             );
           }
           case 'SEND_EMAIL': {
             return (
               <StyledStepNodeLabelIconContainer>
-                <IconMail size={theme.icon.size.lg} color={theme.color.blue} />
+                <IconMail size={theme.icon.size.md} color={theme.color.blue} />
               </StyledStepNodeLabelIconContainer>
             );
           }
@@ -82,7 +83,7 @@ export const WorkflowDiagramStepNodeBase = ({
             return (
               <StyledStepNodeLabelIconContainer>
                 <IconAddressBook
-                  size={theme.icon.size.lg}
+                  size={theme.icon.size.md}
                   color={theme.font.color.tertiary}
                   stroke={theme.icon.stroke.sm}
                 />

diff --git a/...ront/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditable.tsx b/...ront/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditable.tsx
@@ -1,11 +1,10 @@
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { assertWorkflowWithCurrentVersionIsDefined } from '@/workflow/utils/assertWorkflowWithCurrentVersionIsDefined';
-import { WorkflowDiagramStepNodeBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase';
+import { WorkflowDiagramStepNodeEditableContent } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditableContent';
 import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { useDeleteStep } from '@/workflow/workflow-steps/hooks/useDeleteStep';
 import { useRecoilValue } from 'recoil';
-import { FloatingIconButton, IconTrash } from 'twenty-ui';
 
 export const WorkflowDiagramStepNodeEditable = ({
   id,
@@ -26,19 +25,12 @@ export const WorkflowDiagramStepNodeEditable = ({
   });
 
   return (
-    <WorkflowDiagramStepNodeBase
+    <WorkflowDiagramStepNodeEditableContent
       data={data}
-      RightFloatingElement={
-        selected ? (
-          <FloatingIconButton
-            size="medium"
-            Icon={IconTrash}
-            onClick={() => {
-              deleteStep(id);
-            }}
-          />
-        ) : undefined
-      }
+      selected={selected ?? false}
+      onDelete={() => {
+        deleteStep(id);
+      }}
     />
   );
 };
diff --git a/...c/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditableContent.tsx b/...c/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeEditableContent.tsx
@@ -0,0 +1,28 @@
+import { WorkflowDiagramStepNodeBase } from '@/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase';
+import { WorkflowDiagramStepNodeData } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { FloatingIconButton, IconTrash } from 'twenty-ui';
+
+export const WorkflowDiagramStepNodeEditableContent = ({
+  data,
+  selected,
+  onDelete,
+}: {
+  data: WorkflowDiagramStepNodeData;
+  selected: boolean;
+  onDelete: () => void;
+}) => {
+  return (
+    <WorkflowDiagramStepNodeBase
+      data={data}
+      RightFloatingElement={
+        selected ? (
+          <FloatingIconButton
+            size="medium"
+            Icon={IconTrash}
+            onClick={onDelete}
+          />
+        ) : undefined
+      }
+    />
+  );
+};
diff --git a/.../workflow/workflow-diagram/components/__stories__/WorkflowDiagramEmptyTrigger.stories.tsx b/.../workflow/workflow-diagram/components/__stories__/WorkflowDiagramEmptyTrigger.stories.tsx
@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentDecorator } from 'twenty-ui';
+
+import { ReactFlowProvider } from '@xyflow/react';
+import { WorkflowDiagramEmptyTrigger } from '../WorkflowDiagramEmptyTrigger';
+
+const meta: Meta<typeof WorkflowDiagramEmptyTrigger> = {
+  title: 'Modules/Workflow/WorkflowDiagramEmptyTrigger',
+  component: WorkflowDiagramEmptyTrigger,
+};
+
+export default meta;
+type Story = StoryObj<typeof WorkflowDiagramEmptyTrigger>;
+
+export const Default: Story = {
+  decorators: [
+    ComponentDecorator,
+    (Story) => (
+      <ReactFlowProvider>
+        <Story />
+      </ReactFlowProvider>
+    ),
+  ],
+};
+
+export const Selected: Story = {
+  decorators: [
+    ComponentDecorator,
+    (Story) => (
+      <ReactFlowProvider>
+        <Story />
+      </ReactFlowProvider>
+    ),
+    (Story) => (
+      <div className="selectable selected">
+        <Story />
+      </div>
+    ),
+  ],
+};