feat: enhance UI components with improved styling and interactions

src/components/elements/Arrow.tsx

@@ -26,9 +26,10 @@ const Arrow: React.FC<ArrowProps> = ({ element, isSelected, onSelect, onChange }
     onChange({ points: newPoints });
   };
 
-  // Arrow head pointer
-  const pointerLength = props.head === 'none' ? 0 : props.thickness * 4;
-  const pointerWidth = props.head === 'none' ? 0 : props.thickness * 3;
+  // Modern arrow head calculations
+  // Make the head slightly sleeker
+  const pointerLength = props.head === 'none' ? 0 : Math.max(props.thickness * 3, 12);
+  const pointerWidth = props.head === 'none' ? 0 : Math.max(props.thickness * 2.5, 12);
 
   return (
     <Group>
@@ -40,9 +41,14 @@ const Arrow: React.FC<ArrowProps> = ({ element, isSelected, onSelect, onChange }
         fill={props.head === 'filled' ? props.color : 'transparent'}
         pointerLength={pointerLength}
         pointerWidth={pointerWidth}
-        tension={props.style === 'curved' ? 0.5 : 0}
+        tension={props.style === 'curved' ? 0.4 : 0}
         lineCap="round"
         lineJoin="round"
+        // Add subtle glow/shadow for modern feel
+        shadowColor={props.color}
+        shadowBlur={8}
+        shadowOpacity={0.2}
+        shadowOffset={{ x: 0, y: 0 }}
         onClick={onSelect}
         onTap={onSelect}
         hitStrokeWidth={20}
@@ -54,13 +60,26 @@ const Arrow: React.FC<ArrowProps> = ({ element, isSelected, onSelect, onChange }
           key={index}
           x={point.x}
           y={point.y}
-          radius={8}
-          fill="#3b82f6"
-          stroke="#ffffff"
+          radius={5}
+          fill="#ffffff"
+          stroke="#3b82f6"
           strokeWidth={2}
+          shadowColor="rgba(0,0,0,0.15)"
+          shadowBlur={4}
+          shadowOffset={{ x: 0, y: 1 }}
           draggable={!element.locked}
           onDragMove={(e) => handlePointDrag(index, e)}
           onDragEnd={(e) => handlePointDrag(index, e)}
+          onMouseEnter={(e) => {
+            const container = e.target.getStage()?.container();
+            if (container) container.style.cursor = 'grab';
+            e.target.scale({ x: 1.5, y: 1.5 });
+          }}
+          onMouseLeave={(e) => {
+            const container = e.target.getStage()?.container();
+            if (container) container.style.cursor = 'default';
+            e.target.scale({ x: 1, y: 1 });
+          }}
         />
       ))}
     </Group>