feat(client): add base styles for edges and handles

client/src/components/edges/defaultEdgeStyle.tsx

@@ -0,0 +1,17 @@
+import { MarkerType } from "@xyflow/react";
+
+const customEdgeStyle = {
+  markerEnd: {
+    type: MarkerType.Arrow,
+    width: 20,
+    height: 20,
+    color: "#BDBDBD",
+  },
+  style: {
+    strokeWidth: 2,
+    stroke: "#BDBDBD",
+  },
+  type: "step",
+};
+
+export default customEdgeStyle;

client/src/components/nodes/IfElseNode.tsx

@@ -1,7 +1,8 @@
 import { Handle, NodeProps, Position, Node } from "@xyflow/react";
+import DEFAULT_HANDLE_STYLE from "./defaultHandleStyle";
 
 type IfElseNodeData = {
-  condition?: string;
+  condition: string;
 };
 
 export default function IfElseNode({ data }: NodeProps<Node & IfElseNodeData>) {
@@ -13,74 +14,65 @@ export default function IfElseNode({ data }: NodeProps<Node & IfElseNodeData>) {
         backgroundColor: "white",
         width: "248px",
         height: "144px",
-        fontFamily: "sans-serif",
-        position: "relative",
-        overflow: "hidden",
-      }}
-      onClick={(e) => {
-        e.stopPropagation();
-        console.log("data", data);
       }}
     >
       <div
         style={{
           display: "flex",
           alignItems: "center",
-          padding: "8px 12px",
+          paddingLeft: "12px",
-          borderBottom: "1px solid #E2E2E2",
-          backgroundColor: "#fff",
           height: "48px",
-          fontWeight: 600,
+          fontWeight: "600px",
-          fontSize: 16,
+          fontSize: "16px",
-          gap: 8,
+          gap: "12px",
         }}
       >
-        <img src="./icons/node/ifElse.svg" /> ЕСЛИ - ТО
+        <img
+          style={{ height: "24px", width: "24px" }}
+          src="/icons/node/ifElse.svg"
+          alt="if else logo"
+        />{" "}
+        ЕСЛИ - ТО
       </div>
+      <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
 
       <div
         style={{
           display: "flex",
           alignItems: "center",
           paddingLeft: "12px",
-          borderBottom: "1px solid #E2E2E2",
+          fontSize: "14px",
-          fontSize: 14,
           height: "48px",
         }}
       >
         Если {data.condition as string}, то
       </div>
+      <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
 
       <div
         style={{
           display: "flex",
           alignItems: "center",
           paddingLeft: "12px",
-          fontSize: 14,
+          fontSize: "14px",
           height: "48px",
         }}
       >
         Иначе
       </div>
 
-      <Handle
+      <Handle type="target" position={Position.Top} id="input" />
-        type="target"
-        position={Position.Top}
-        style={{ background: "#555" }}
-        id="input"
-      />
-
       <Handle
         type="source"
         position={Position.Right}
-        style={{ background: "#555" }}
         id="true"
+        style={{ ...DEFAULT_HANDLE_STYLE }}
       />
       <Handle
         type="source"
         position={Position.Bottom}
-        style={{ background: "#555" }}
         id="false"
+        style={{ ...DEFAULT_HANDLE_STYLE }}
       />
     </div>
   );

client/src/components/nodes/defaultHandleStyle.ts

@@ -0,0 +1,7 @@
+const DEFAULT_HANDLE_STYLE = {
+  width: 8,
+  height: 8,
+  backgroundColor: "#BDBDBD",
+};
+
+export default DEFAULT_HANDLE_STYLE;