stylish editor

Edurz135 · Aug 9, 2023 · 6a4f874 · 6a4f874
1 parent 6a372c8
commit 6a4f874
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 20 deletions.
diff --git a/src/Components/MainFlow/MainFlow.component.jsx b/src/Components/MainFlow/MainFlow.component.jsx
@@ -80,17 +80,6 @@ const OverviewFlow = () => {
       position,
       sourcePosition: Position.Right,
       targetPosition: Position.Left,
-      style: {
-        borderRadius: "100%",
-        backgroundColor: "#f9e9d1",
-        width: 50,
-        height: 50,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        fontSize: "1.5rem",
-        color: " #2e0b07"
-      },
       data: { label: `${(newNodeId + 9).toString(36).toUpperCase()}` },
     };
 
@@ -186,14 +175,6 @@ const OverviewFlow = () => {
 
   const changeAnimatedEdgeHelper = (edge, value) => {
     edge.animated = value;
-    edge.style =
-      value === true
-        ? {
-            stroke: "#DC2510",
-          }
-        : {
-            stroke: "#b8b8b8",
-          };
     return edge;
   };
 
@@ -250,7 +231,7 @@ const OverviewFlow = () => {
           }}
         ></input>
       </div>
-      {/* <Sidebar FindPathHandler={FindShortestPath} /> */}
+      <Sidebar FindPathHandler={FindShortestPath} />
       <ReactFlowProvider>
         <div className="reactflow-wrapper" ref={reactFlowWrapper}>
           <ReactFlow

diff --git a/src/Components/MainFlow/overview.css b/src/Components/MainFlow/overview.css
@@ -24,14 +24,22 @@
   justify-content: center;
 }
 
+/* When a edge is animated */
+.react-flow__edge.animated > .react-flow__edge-path {
+  stroke: var(--secondary) !important;
+}
+
+/* Edge */
 .react-flow__edge-path {
   stroke: var(--on-secondary);
 }
 
+/* Edge Text */
 .react-flow__edge-text {
   fill: var(--on-secondary);
 }
 
+/* Edge Text BG */
 .react-flow__edge-textbg {
   fill: var(--on-primary);
 }