From 68c4f9cb0df98459e8ed4b051bf19f1a9ddd7f8f Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Mon, 27 Jan 2025 15:23:28 +0100
Subject: [PATCH] Fix design to match figma (#9864)

As title
Fixes
https://discord.com/channels/1130383047699738754/1331212573902770228

## Before

![image](https://github.com/user-attachments/assets/4b556022-92c3-4197-ab18-91c089117936)

## After

![image](https://github.com/user-attachments/assets/67f97c60-d08b-4ae1-87b4-79c24ae79b93)
---
 ...RightDrawerWorkflowSelectStepContainer.tsx | 13 ++++++
 .../RightDrawerWorkflowSelectStepTitle.tsx    | 13 ++++++
 ...RightDrawerWorkflowSelectActionContent.tsx | 35 +++++-----------
 ...DrawerWorkflowSelectTriggerTypeContent.tsx | 41 ++++++-------------
 4 files changed, 49 insertions(+), 53 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx

diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx
new file mode 100644
index 000000000..88c97ea0e
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const StyledStepListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+
+  padding-block: ${({ theme }) => theme.spacing(1)};
+  padding-inline: ${({ theme }) => theme.spacing(2)};
+`;
+
+export { StyledStepListContainer as RightDrawerStepListContainer };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx
new file mode 100644
index 000000000..43280c813
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx
@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+const StyledSelectStepTitle = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+  padding-bottom: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;
+
+export { StyledSelectStepTitle as RightDrawerWorkflowSelectStepTitle };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx
index c21e1b0e4..73fd1a4f6 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx
@@ -2,28 +2,9 @@ import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import { useCreateStep } from '@/workflow/workflow-steps/hooks/useCreateStep';
 import { OTHER_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/OtherActions';
 import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
-import styled from '@emotion/styled';
 import { MenuItemCommand, useIcons } from 'twenty-ui';
-
-const StyledActionListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-
-  padding-block: ${({ theme }) => theme.spacing(1)};
-  padding-inline: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledSectionTitle = styled.span`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  padding-top: ${({ theme }) => theme.spacing(2)};
-  padding-bottom: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-`;
+import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer';
+import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
 
 export const RightDrawerWorkflowSelectActionContent = ({
   workflow,
@@ -36,8 +17,10 @@ export const RightDrawerWorkflowSelectActionContent = ({
   });
 
   return (
-    <StyledActionListContainer>
-      <StyledSectionTitle>Records</StyledSectionTitle>
+    <RightDrawerStepListContainer>
+      <RightDrawerWorkflowSelectStepTitle>
+        Records
+      </RightDrawerWorkflowSelectStepTitle>
       {RECORD_ACTIONS.map((action) => (
         <MenuItemCommand
           key={action.type}
@@ -46,7 +29,9 @@ export const RightDrawerWorkflowSelectActionContent = ({
           onClick={() => createStep(action.type)}
         />
       ))}
-      <StyledSectionTitle>Other</StyledSectionTitle>
+      <RightDrawerWorkflowSelectStepTitle>
+        Other
+      </RightDrawerWorkflowSelectStepTitle>
       {OTHER_ACTIONS.map((action) => (
         <MenuItemCommand
           key={action.type}
@@ -55,6 +40,6 @@ export const RightDrawerWorkflowSelectActionContent = ({
           onClick={() => createStep(action.type)}
         />
       ))}
-    </StyledActionListContainer>
+    </RightDrawerStepListContainer>
   );
 };
diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
index 676962e76..5a5cf5011 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
@@ -8,29 +8,10 @@ import { OTHER_TRIGGER_TYPES } from '@/workflow/workflow-trigger/constants/Other
 import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
 import { useUpdateWorkflowVersionTrigger } from '@/workflow/workflow-trigger/hooks/useUpdateWorkflowVersionTrigger';
 import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/getTriggerDefaultDefinition';
-import styled from '@emotion/styled';
 import { useSetRecoilState } from 'recoil';
-import { MenuItem, useIcons } from 'twenty-ui';
-
-const StyledActionListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-
-  padding-block: ${({ theme }) => theme.spacing(1)};
-  padding-inline: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledSectionTitle = styled.span`
-  color: ${({ theme }) => theme.font.color.tertiary};
-  font-size: ${({ theme }) => theme.font.size.sm};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  padding-top: ${({ theme }) => theme.spacing(2)};
-  padding-bottom: ${({ theme }) => theme.spacing(1)};
-  padding-left: ${({ theme }) => theme.spacing(1)};
-  padding-right: ${({ theme }) => theme.spacing(1)};
-`;
+import { MenuItemCommand, useIcons } from 'twenty-ui';
+import { RightDrawerStepListContainer } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer';
+import { RightDrawerWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle';
 
 export const RightDrawerWorkflowSelectTriggerTypeContent = ({
   workflow,
@@ -46,10 +27,12 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
   const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
 
   return (
-    <StyledActionListContainer>
-      <StyledSectionTitle>Data</StyledSectionTitle>
+    <RightDrawerStepListContainer>
+      <RightDrawerWorkflowSelectStepTitle>
+        Data
+      </RightDrawerWorkflowSelectStepTitle>
       {DATABASE_TRIGGER_TYPES.map((action) => (
-        <MenuItem
+        <MenuItemCommand
           key={action.defaultLabel}
           LeftIcon={getIcon(action.icon)}
           text={action.defaultLabel}
@@ -71,9 +54,11 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
           }}
         />
       ))}
-      <StyledSectionTitle>Others</StyledSectionTitle>
+      <RightDrawerWorkflowSelectStepTitle>
+        Others
+      </RightDrawerWorkflowSelectStepTitle>
       {OTHER_TRIGGER_TYPES.map((action) => (
-        <MenuItem
+        <MenuItemCommand
           key={action.defaultLabel}
           LeftIcon={getIcon(action.icon)}
           text={action.defaultLabel}
@@ -95,6 +80,6 @@ export const RightDrawerWorkflowSelectTriggerTypeContent = ({
           }}
         />
       ))}
-    </StyledActionListContainer>
+    </RightDrawerStepListContainer>
   );
 };