fix: Improve Connection Line Styling and Cleanup Unused Code in FlowPage Components (#4449)

✨ (ConnectionLineComponent/index.tsx): introduce accentColor variable to dynamically set stroke and accent color based on handleDragging color
♻️ (PageComponent/index.tsx): refactor code to remove unused variables zoomIn, zoomOut, fitView, and zoom to improve code readability and maintainability

Co-authored-by: Mike Fortman <michael.fortman@datastax.com>

src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx

@@ -10,6 +10,7 @@ const ConnectionLineComponent = ({
 }: ConnectionLineComponentProps): JSX.Element => {
   const handleDragging = useFlowStore((state) => state.handleDragging);
   const color = handleDragging?.color;
+  const accentColor = `hsl(var(--accent-${color}))`;
 
   return (
     <g>
@@ -19,7 +20,7 @@ const ConnectionLineComponent = ({
         strokeWidth={2}
         className={`animated`}
         style={{
-          stroke: handleDragging ? handleDragging.color : "",
+          stroke: handleDragging ? accentColor : "",
           ...connectionLineStyle,
         }}
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
@@ -29,7 +30,7 @@ const ConnectionLineComponent = ({
         cy={toY}
         fill="#fff"
         r={5}
-        stroke={color}
+        stroke={accentColor}
         className=""
         strokeWidth={1.5}
       />

src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx

@@ -125,8 +125,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
   const [isHighlightingCursor, setIsHighlightingCursor] = useState(false);
 
   const addComponent = useAddComponent();
-  const { zoomIn, zoomOut, fitView } = useReactFlow();
-  const { zoom } = useViewport();
 
   useEffect(() => {
     const handleVisibilityChange = () => {