admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix design to match figma (#9864)

Browse Source 
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)
This commit is contained in:
martmull
2025-01-27 15:23:28 +01:00
committed by GitHub
parent 4bb8e3a50e
commit 68c4f9cb0d
4 changed files with 49 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepContainer.tsx Normal file
View File

@ -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 };

13
packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowSelectStepTitle.tsx Normal file
View File

@ -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 };

35
packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/RightDrawerWorkflowSelectActionContent.tsx
View File

@ -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>
);
};

41
packages/twenty-front/src/modules/workflow/workflow-trigger/components/RightDrawerWorkflowSelectTriggerTypeContent.tsx
View File

@ -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>
);
};