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}
${({ 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-weight: ${({ theme }) => theme.font.weight.semiBold};
@ -53,7 +53,7 @@ const StyledStepNodeInnerContainer = styled.div<{ variant?: Variant }>`
.selectable.selected &,
.selectable:focus &,
.selectable:focus-visible & {
background-color: ${({ theme }) => theme.color.blue10};
background-color: ${({ theme }) => theme.accent.quaternary};
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,
} from '@/workflow/workflow-diagram/types/WorkflowDiagram';
import { getOrganizedDiagram } from '@/workflow/workflow-diagram/utils/getOrganizedDiagram';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import {
applyEdgeChanges,
@ -29,7 +30,7 @@ import {
import '@xyflow/react/dist/style.css';
import React, { useEffect, useMemo, useRef } from 'react';
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`
height: 100%;
@ -87,6 +88,8 @@ export const WorkflowDiagramCanvasBase = ({
>;
children?: React.ReactNode;
}) => {
const theme = useTheme();
const reactflow = useReactFlow();
const setWorkflowReactFlowRefState = useSetRecoilState(
workflowReactFlowRefState,
@ -219,7 +222,7 @@ export const WorkflowDiagramCanvasBase = ({
nodesDraggable={false}
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}
</ReactFlow>