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

Workflow dark mode improvements (#9412)

Browse Source 
## Dark mode

Old vs New

![CleanShot 2025-01-06 at 17 49
19@2x](https://github.com/user-attachments/assets/4fda3da0-3a84-43b5-a60b-ee2f3356e540)

![CleanShot 2025-01-06 at 17 49
32@2x](https://github.com/user-attachments/assets/e2aa498a-fa4d-41d3-af20-fa3ab605bbab)

## Light mode

Old vs New

![CleanShot 2025-01-06 at 17 49
11@2x](https://github.com/user-attachments/assets/0587d18f-4f1d-42bd-94a5-9e06be685bb3)

![CleanShot 2025-01-06 at 17 49
01@2x](https://github.com/user-attachments/assets/aacbc40c-c477-4ece-bed2-12cdf18ab705)
This commit is contained in:
Baptiste Devessier
2025-01-06 18:07:23 +01:00
committed by GitHub
parent a9b95bcf03
commit c61831c78a
2 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
View File

@ -20,7 +20,7 @@ const StyledStepNodeType = styled.div`
border-radius: ${({ theme }) => theme.border.radius.sm} border-radius: ${({ theme }) => theme.border.radius.sm}
${({ theme }) => theme.border.radius.sm} 0 0; ${({ theme }) => theme.border.radius.sm} 0 0;
color: ${({ theme }) => theme.color.gray50}; color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.md}; font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.semiBold}; font-weight: ${({ theme }) => theme.font.weight.semiBold};
@ -53,7 +53,7 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
.selectable.selected &, .selectable.selected &,
.selectable:focus &, .selectable:focus &,
.selectable:focus-visible & { .selectable:focus-visible & {
background-color: ${({ theme }) => theme.color.blue10}; background-color: ${({ theme }) => theme.accent.quaternary};
border-color: ${({ theme }) => theme.color.blue}; border-color: ${({ theme }) => theme.color.blue};
} }
`; `;

7
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
View File

@ -13,6 +13,7 @@ import {
WorkflowDiagramNodeType, WorkflowDiagramNodeType,
} from '@/workflow/workflow-diagram/types/WorkflowDiagram'; } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { getOrganizedDiagram } from '@/workflow/workflow-diagram/utils/getOrganizedDiagram'; import { getOrganizedDiagram } from '@/workflow/workflow-diagram/utils/getOrganizedDiagram';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { import {
applyEdgeChanges, applyEdgeChanges,
@ -29,7 +30,7 @@ import {
import '@xyflow/react/dist/style.css'; import '@xyflow/react/dist/style.css';
import React, { useEffect, useMemo, useRef } from 'react'; import React, { useEffect, useMemo, useRef } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil'; import { useRecoilValue, useSetRecoilState } from 'recoil';
import { GRAY_SCALE, isDefined, THEME_COMMON } from 'twenty-ui'; import { isDefined, THEME_COMMON } from 'twenty-ui';
const StyledResetReactflowStyles = styled.div` const StyledResetReactflowStyles = styled.div`
height: 100%; height: 100%;
@ -87,6 +88,8 @@ export const WorkflowDiagramCanvasBase = ({
>; >;
children?: React.ReactNode; children?: React.ReactNode;
}) => { }) => {
const theme = useTheme();
const reactflow = useReactFlow(); const reactflow = useReactFlow();
const setWorkflowReactFlowRefState = useSetRecoilState( const setWorkflowReactFlowRefState = useSetRecoilState(
workflowReactFlowRefState, workflowReactFlowRefState,
@ -219,7 +222,7 @@ export const WorkflowDiagramCanvasBase = ({
nodesDraggable={false} nodesDraggable={false}
paneClickDistance={10} // Fix small unwanted user dragging does not select node paneClickDistance={10} // Fix small unwanted user dragging does not select node
> >
<Background color={GRAY_SCALE.gray25} size={2} /> <Background color={theme.border.color.medium} size={2} />
{children} {children}
</ReactFlow> </ReactFlow>