fix: Corrected the gradient direction

interactivethings · Oct 2, 2024 · 15b6b61 · 15b6b61
1 parent fc39217
commit 15b6b61
Showing 1 changed file with 14 additions and 30 deletions.
diff --git a/components/team-communication/internal/TeamDefs.tsx b/components/team-communication/internal/TeamDefs.tsx
@@ -15,43 +15,27 @@ const TeamDefs: FC<ITeamDefsProps> = ({ edges }) => {
               id={`source-${String(edge.source.id)}-${
                 edge.source.color.split('#')[1]
               }-${edge.target.color.split('#')[1]}`}
-              x1={edge.source.x > edge.target.x ? '100%' : '0'}
-              y1={edge.source.y > edge.target.y ? '100%' : '0'}
-              x2={edge.source.x > edge.target.x ? '0' : '100%'}
-              y2={edge.source.y > edge.target.y ? '0' : '100%'}
+              gradientUnits="userSpaceOnUse"
+              x1={edge.source.x}
+              y1={edge.source.y}
+              x2={edge.target.x}
+              y2={edge.target.y}
             >
-              <stop offset="0%" stopOpacity={1} stopColor={edge.source.color} />
-              <stop
-                offset="75%"
-                stopOpacity={1}
-                stopColor={edge.source.color}
-              />
-              <stop
-                offset="100%"
-                stopOpacity={1}
-                stopColor={edge.target.color}
-              />
+              <stop offset="0%" stopColor={edge.source.color} />
+              <stop offset="100%" stopColor={edge.target.color} />
             </linearGradient>
             <linearGradient
               id={`target-${String(edge.target.id)}-${
                 edge.target.color.split('#')[1]
               }-${edge.source.color.split('#')[1]}`}
-              x1={edge.target.x > edge.source.x ? '100%' : '0'}
-              y1={edge.target.y > edge.source.y ? '100%' : '0'}
-              x2={edge.target.x > edge.source.x ? '0' : '100%'}
-              y2={edge.target.y > edge.source.y ? '0' : '100%'}
+              gradientUnits="userSpaceOnUse"
+              x1={edge.target.x}
+              y1={edge.target.y}
+              x2={edge.source.x}
+              y2={edge.source.y}
             >
-              <stop offset="0%" stopOpacity={1} stopColor={edge.target.color} />
-              <stop
-                offset="75%"
-                stopOpacity={1}
-                stopColor={edge.target.color}
-              />
-              <stop
-                offset="100%"
-                stopOpacity={1}
-                stopColor={edge.source.color}
-              />
+              <stop offset="0%" stopColor={edge.target.color} />
+              <stop offset="100%" stopColor={edge.source.color} />
             </linearGradient>
           </Fragment>
         );