Updated port icons to directional arrows in GraphInspector

Author: scar17off

src/components/GraphInspector.js

@@ -85,7 +85,7 @@ const GraphInspector = ({
         </div>
         {nodeType.inputs.map((input, index) => (
           <div key={index} className={`${styles.portContainer} ${config.isDarkTheme ? styles.portContainerDark : styles.portContainerLight}`}>
-            <div className={styles.portIcon} />
+            <div className={styles.portIcon} style={{ transform: 'rotate(180deg)' }} />
             <span>"{input.name}"</span>
             <span className={styles.portType}>({input.type})</span>
           </div>

src/components/GraphInspector.module.css

@@ -148,10 +148,32 @@
 }
 
 .portIcon {
-  width: 12px;
+  position: relative;
+  width: 16px;
   height: 12px;
-  border-radius: 50%;
-  background-color: #FFA500;
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.portIcon::before {
+  content: '';
+  position: absolute;
+  width: 10px;
+  height: 2px;
+  background-color: #4CAF50;
+  left: 0;
+}
+
+.portIcon::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 6px solid #4CAF50;
 }
 
 .portType {