improve styles on custom node

src/renderer/components/Experiment/Workflows/CustomNode.tsx

 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"

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