Refactor WorkflowCanvasNode styling for improved layout and visual feedback
This commit is contained in:
@@ -996,13 +996,14 @@ function WorkflowConnectionLine({ fromX, fromY, toX, toY }: ConnectionLineCompon
|
|||||||
<g>
|
<g>
|
||||||
<path
|
<path
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke="hsl(var(--primary) / 0.72)"
|
stroke="var(--primary)"
|
||||||
|
opacity={0.72}
|
||||||
strokeDasharray="6 5"
|
strokeDasharray="6 5"
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
d={edgePath}
|
d={edgePath}
|
||||||
/>
|
/>
|
||||||
<circle cx={toX} cy={toY} r={4} fill="hsl(var(--primary))" />
|
<circle cx={toX} cy={toY} r={4} fill="var(--primary)" />
|
||||||
</g>
|
</g>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@@ -1217,7 +1218,7 @@ function WorkflowCanvasNode({ id, data, selected }: NodeProps<WorkflowFlowNode>)
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={[
|
className={[
|
||||||
"group/node relative w-52 overflow-hidden rounded-xl border bg-background shadow-[0_12px_34px_rgba(15,23,42,0.08)] transition-all hover:-translate-y-0.5 hover:shadow-[0_18px_42px_rgba(15,23,42,0.12)]",
|
"group/node relative w-52 rounded-xl border bg-background shadow-[0_12px_34px_rgba(15,23,42,0.08)] transition-all hover:-translate-y-0.5 hover:shadow-[0_18px_42px_rgba(15,23,42,0.12)]",
|
||||||
selected ? "border-primary ring-4 ring-primary/10" : "",
|
selected ? "border-primary ring-4 ring-primary/10" : "",
|
||||||
hasIssue ? "border-destructive/70" : "border-border/70",
|
hasIssue ? "border-destructive/70" : "border-border/70",
|
||||||
].join(" ")}
|
].join(" ")}
|
||||||
@@ -1227,8 +1228,9 @@ function WorkflowCanvasNode({ id, data, selected }: NodeProps<WorkflowFlowNode>)
|
|||||||
<WorkflowNodeHandle
|
<WorkflowNodeHandle
|
||||||
type="target"
|
type="target"
|
||||||
position={Position.Left}
|
position={Position.Left}
|
||||||
className={cn("!-left-2.5", handleClassName)}
|
className={cn("!left-0", handleClassName)}
|
||||||
/>
|
/>
|
||||||
|
<div className="overflow-hidden rounded-xl">
|
||||||
<div className="flex items-start gap-2 border-b border-border/60 bg-muted/20 px-3 py-2.5">
|
<div className="flex items-start gap-2 border-b border-border/60 bg-muted/20 px-3 py-2.5">
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -1262,10 +1264,11 @@ function WorkflowCanvasNode({ id, data, selected }: NodeProps<WorkflowFlowNode>)
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<WorkflowNodeHandle
|
<WorkflowNodeHandle
|
||||||
type="source"
|
type="source"
|
||||||
position={Position.Right}
|
position={Position.Right}
|
||||||
className={cn("!-right-2.5", handleClassName)}
|
className={cn("!right-0", handleClassName)}
|
||||||
/>
|
/>
|
||||||
<WorkflowAddAfterButton
|
<WorkflowAddAfterButton
|
||||||
nodeId={id}
|
nodeId={id}
|
||||||
|
|||||||
Reference in New Issue
Block a user