From 7735978a266b1e305dbee798285b9a88f1041c31 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Thu, 27 Feb 2025 08:58:26 -0500
Subject: [PATCH] improve styles on custom node
---
.../Experiment/Workflows/CustomNode.tsx | 7 ++---
src/renderer/styles.css | 31 +++++++++++++------
2 files changed, 25 insertions(+), 13 deletions(-)
diff --git a/src/renderer/components/Experiment/Workflows/CustomNode.tsx b/src/renderer/components/Experiment/Workflows/CustomNode.tsx
index b55ff77c..b9a5161c 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 c69edfa1..f2dee12b 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
--
GitLab