Fix all the fucking connection coloring

src/components/Connection.tsx

@@ -3,11 +3,10 @@ import React from 'react';
 interface ConnectionProps {
   from: { x: number; y: number };
   to: { x: number; y: number };
-  fromColor?: string;
-  toColor?: string;
+  color?: string;
 }
 
-export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor, toColor }) => {
+export const Connection: React.FC<ConnectionProps> = ({ from, to, color }) => {
   return (
     <g>
       {/* Glow effect */}
@@ -16,8 +15,8 @@ export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor, toC
         y1={from.y}
         x2={to.x}
         y2={to.y}
-        stroke={fromColor || "#a855f7"}
-        strokeWidth="3"
+        stroke={color || "#a855f7"}
+        strokeWidth="5"
         opacity="0.3"
       />
       
@@ -27,7 +26,7 @@ export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor, toC
         y1={from.y}
         x2={to.x}
         y2={to.y}
-        stroke={fromColor || "#a855f7"}
+        stroke={color || "#a855f7"}
         strokeWidth="1"
         opacity="0.7"
         className="transition-all duration-300"

src/components/GalaxyMap.tsx

@@ -177,23 +177,22 @@ export const GalaxyMap = () => {
                 if (!fromPos || !toPos) return null;
 
                 // Get colors for both regions
-                const fromColor = getSecurityColor(region.security);
                 const toRegion = regions.find(r => r.regionName === connectedRegion);
-                const toColor = toRegion ? getSecurityColor(toRegion.security) : fromColor;
+                const avgSecurity = (region.security + toRegion.security) / 2;
+                const color = getSecurityColor(avgSecurity);
 
                 return (
                   <Connection
                     key={`${region.regionName}-${connectedRegion}`}
                     from={fromPos}
                     to={toPos}
-                    fromColor={fromColor}
-                    toColor={toColor}
+                    color={color}
                   />
                 );
               })
             )}
 
-            {/* Render nodes */}
+            {/* Render fromCodes */}
             {regions?.map((region) => (
               <MapNode
                 key={region.regionName}

src/components/RegionMap.tsx

@@ -24,8 +24,7 @@ interface ProcessedConnection {
   key: string;
   from: Position;
   to: Position;
-  fromColor: string;
-  toColor: string;
+  color: string;
 }
 
 const fetchRegionData = async (regionName: string): Promise<SolarSystem[]> => {
@@ -80,8 +79,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
           key: connectionKey,
           from: fromPos,
           to: toPos,
-          fromColor: connectionColor,
-          toColor: connectionColor
+          color: connectionColor
         });
       });
     });
@@ -244,8 +242,7 @@ export const RegionMap: React.FC<{ regionName: string }> = ({ regionName }) => {
                 key={connection.key}
                 from={connection.from}
                 to={connection.to}
-                fromColor={connection.fromColor}
-                toColor={connection.toColor}
+                color={connection.color}
               />
             ))}