diff --git a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx index 1ff2c7c74..b9a2ba38e 100644 --- a/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx +++ b/packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx @@ -1,4 +1,3 @@ -import { ShowPageSubContainerTabListContainer } from '@/ui/layout/show-page/components/ShowPageSubContainerTabListContainer'; import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow'; @@ -16,8 +15,9 @@ import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared'; import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui'; -const StyledTabListContainer = styled(ShowPageSubContainerTabListContainer)` +const StyledTabList = styled(TabList)` background-color: ${({ theme }) => theme.background.secondary}; + padding-left: ${({ theme }) => theme.spacing(2)}; `; type TabId = 'node' | 'input' | 'output'; @@ -69,13 +69,11 @@ export const CommandMenuWorkflowRunViewStep = () => { - - - + {activeTabId === 'node' ? ( ` const StyledTabListContainer = styled.div<{ shouldDisplay: boolean }>` display: ${({ shouldDisplay }) => (shouldDisplay ? 'flex' : 'none')}; -`.withComponent(ShowPageSubContainerTabListContainer); +`; + +const StyledTabList = styled(TabList)` + padding-left: ${({ theme }) => theme.spacing(2)}; +`; const StyledContentContainer = styled.div<{ isInRightDrawer: boolean }>` flex: 1; @@ -122,7 +125,7 @@ export const ShowPageSubContainer = ({ )} 1}> - theme.spacing(2)}; - border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; - box-sizing: border-box; - display: flex; - gap: ${({ theme }) => theme.spacing(2)}; - height: 40px; -`; - -export { StyledTabListContainer as ShowPageSubContainerTabListContainer }; diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx index 6474b4a9b..b11a0d295 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx @@ -41,7 +41,7 @@ const StyledTab = styled('button', { display: flex; gap: ${({ theme }) => theme.spacing(1)}; justify-content: center; - margin-bottom: 0; + margin-bottom: -1px; padding: ${({ theme }) => theme.spacing(2) + ' 0'}; pointer-events: ${({ disabled }) => (disabled ? 'none' : '')}; text-decoration: none; diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx index f1794d7ea..78456c952 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx @@ -33,7 +33,7 @@ const StyledContainer = styled.div` border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`}; box-sizing: border-box; display: flex; - gap: ${({ theme }) => theme.spacing(2)}; + gap: ${({ theme }) => theme.spacing(1)}; height: 40px; user-select: none; `; diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx index b9ffcc93c..999183855 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/RightDrawerWorkflowRunViewStep.tsx @@ -1,4 +1,3 @@ -import { ShowPageSubContainerTabListContainer } from '@/ui/layout/show-page/components/ShowPageSubContainerTabListContainer'; import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow'; @@ -16,8 +15,9 @@ import styled from '@emotion/styled'; import { isDefined } from 'twenty-shared'; import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui'; -const StyledTabListContainer = styled(ShowPageSubContainerTabListContainer)` +const StyledTabList = styled(TabList)` background-color: ${({ theme }) => theme.background.secondary}; + padding-left: ${({ theme }) => theme.spacing(2)}; `; type TabId = 'node' | 'input' | 'output'; @@ -69,13 +69,11 @@ export const RightDrawerWorkflowRunViewStep = () => { - - - + {activeTabId === 'node' ? ( theme.background.secondary}; + padding-left: ${({ theme }) => theme.spacing(2)}; `; type WorkflowEditActionFormServerlessFunctionProps = { @@ -285,13 +285,11 @@ export const WorkflowEditActionFormServerlessFunction = ({ return ( !loading && ( - - - + { updateAction({ name: newName });