diff --git a/src/renderer/components/Experiment/Workflows/CustomNode.tsx b/src/renderer/components/Experiment/Workflows/CustomNode.tsx index b55ff77c75a943c988f6df9b47fd67b141c68b15..b9a5161cacc8ef5223c0ef100bf72bb61ba53317 100644 --- a/src/renderer/components/Experiment/Workflows/CustomNode.tsx +++ b/src/renderer/components/Experiment/Workflows/CustomNode.tsx @@ -1,6 +1,6 @@ import { BuiltInNode, Handle } from '@xyflow/react'; import { NodeProps, Position } from '@xyflow/system'; -import { CircleXIcon, SquareXIcon } from 'lucide-react'; +import { CircleXIcon, SquareXIcon, XIcon } from 'lucide-react'; export default function CustomNode({ data, @@ -14,12 +14,11 @@ export default function CustomNode({ className="custom-node-delete-button" style={{ position: 'absolute', - top: -8, - right: -8, cursor: 'pointer', + borderRadius: '50%', }} > - <SquareXIcon size="16px" /> + <XIcon size="12px" /> </div> <Handle type="target" diff --git a/src/renderer/styles.css b/src/renderer/styles.css index c69edfa10e41c539b357281511dbd923c2b19c8d..f2dee12b120c03a847660596afcde179d6207bbc 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -235,11 +235,7 @@ code if we want */ background-color: var(--xy-node-background-color, var(--xy-node-background-color-default)); } -.react-flow__node-customNode:hover { - /* add a light shadow effect */ - box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); - transition: box-shadow 0.2s ease-in-out; -} + .custom-node-delete-button { opacity: 0.0; @@ -249,8 +245,25 @@ code if we want */ opacity: 1.0; transition: opacity 0.2s ease-in-out; color: rgb(156, 144, 144); - background-color: rgba(255, 255, 255, 0.8); - height: 15px; - width: 15px; - border-radius: 30%; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgb(156, 144, 144); + height: 14px; + width: 14px; + top: -5px; + right: -5px; + padding-left: 0.5px; + cursor: 'pointer'; + display: flex; + border-radius: '50%'; + justify-content: center; + align-items: center; + + color: var(--joy-palette-danger-400); + border-color: var(--joy-palette-danger-400), +} + +.react-flow__node-customNode:hover { + /* add a light shadow effect */ + box-shadow: 0 0 10px var(--joy-palette-primary-400); + transition: box-shadow 0.2s ease-in-out; } \ No newline at end of file