diff --git a/components/canvas/CanvasWorkspace.tsx b/components/canvas/CanvasWorkspace.tsx index 05ad0f5da..e95ff3a9e 100644 --- a/components/canvas/CanvasWorkspace.tsx +++ b/components/canvas/CanvasWorkspace.tsx @@ -39,7 +39,7 @@ function isNodeInViewport( export function CanvasWorkspace() { const SNAP_THRESHOLD = 10; const SNAP_GAP = 12; - const SELECTION_COLOR = "#3182ed"; + const SELECTION_COLOR = "#27a8ff"; const containerRef = useRef(null); const [isPanning, setIsPanning] = useState(false); const [panStart, setPanStart] = useState({ x: 0, y: 0 }); @@ -698,39 +698,39 @@ export function CanvasWorkspace() { const imageResizeHandleStyles = isImageNode ? { topRight: { - width: 12, - height: 12, - right: -6, - top: -6, + width: 16, + height: 16, + right: -8, + top: -8, borderRadius: 999, - border: `2px solid ${SELECTION_COLOR}`, + border: `3px solid ${SELECTION_COLOR}`, backgroundColor: "#ffffff", }, bottomRight: { - width: 12, - height: 12, - right: -6, - bottom: -6, + width: 16, + height: 16, + right: -8, + bottom: -8, borderRadius: 999, - border: `2px solid ${SELECTION_COLOR}`, + border: `3px solid ${SELECTION_COLOR}`, backgroundColor: "#ffffff", }, bottomLeft: { - width: 12, - height: 12, - left: -6, - bottom: -6, + width: 16, + height: 16, + left: -8, + bottom: -8, borderRadius: 999, - border: `2px solid ${SELECTION_COLOR}`, + border: `3px solid ${SELECTION_COLOR}`, backgroundColor: "#ffffff", }, topLeft: { - width: 12, - height: 12, - left: -6, - top: -6, + width: 16, + height: 16, + left: -8, + top: -8, borderRadius: 999, - border: `2px solid ${SELECTION_COLOR}`, + border: `3px solid ${SELECTION_COLOR}`, backgroundColor: "#ffffff", }, } diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx index cd1bbdad1..85e174861 100644 --- a/components/canvas/nodes/ImageNode.tsx +++ b/components/canvas/nodes/ImageNode.tsx @@ -1477,7 +1477,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) { className={cn( "relative w-full h-full bg-card rounded-[4px] overflow-hidden border shadow-sm transition-colors", isSelected - ? "border-[#3182ed] shadow-none" + ? "rounded-none border-[1.5px] border-[#27a8ff] shadow-none" : "border-transparent" )} onMouseEnter={() => setIsHovered(true)}