From 3f0cc57cd5720a331891503e07136073c4c2baac Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 4 Jul 2023 19:24:37 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20fix?=
 =?UTF-8?q?=20styling=20issue=20in=20tooltip=20and=20icon=20rendering=20in?=
 =?UTF-8?q?=20ParameterComponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx   | 81 ++++++++++---------
 1 file changed, 44 insertions(+), 37 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index a986f9410..1432c86d4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -98,45 +98,52 @@ export default function ParameterComponent({
 
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
-      
-  refHtml.current = groupedObj.map((item, i) => {
-    return (
-      <span
-        key={getRandomKeyByssmm() + item.family + i}
-        className={classNames(
-          i > 0 ? "mt-3 flex items-center" : "flex items-center"
-        )}
-      >
-        <div
-          className="h-6 w-6"
-          style={{
-            color: nodeColors[item.family],
-          }}
+
+    refHtml.current = groupedObj.map((item, i) => {
+      const Icon: any = nodeIconsLucide[item.family];
+      return (
+        <span
+          key={getRandomKeyByssmm() + item.family + i}
+          className={classNames(
+            i > 0 ? "mt-2 flex items-center" : "flex items-center"
+          )}
         >
-          {React.createElement(nodeIconsLucide[item.family])}
-        </div>
-        <span className="ps-2 text-foreground">
-          {nodeNames[item.family] ?? ""}{" "}
-          <span>
-            {" "}
-            -&nbsp;
-            {item.type.split(", ").length > 2
-              ? item.type.split(", ").map((el, i) => (
-                  <React.Fragment key={el + i}>
-                    <span>
-                      {i === item.type.split(", ").length - 1
-                        ? el
-                        : (el += `, `)}
-                    </span>
-                  </React.Fragment>
-                ))
-              : item.type}
+          <div
+            className="h-5 w-5"
+            style={{
+              color: nodeColors[item.family],
+            }}
+          >
+            <Icon
+            className="h-5 w-5"
+
+              strokeWidth={1.5}
+              style={{
+                color: nodeColors[item.family] ?? nodeColors.unknown,
+              }}
+            />
+          </div>
+          <span className="ps-2 text-xs text-foreground">
+            {nodeNames[item.family] ?? ""}{" "}
+            <span className="text-xs">
+              {" "}
+              -&nbsp;
+              {item.type.split(", ").length > 2
+                ? item.type.split(", ").map((el, i) => (
+                    <React.Fragment key={el + i}>
+                      <span>
+                        {i === item.type.split(", ").length - 1
+                          ? el
+                          : (el += `, `)}
+                      </span>
+                    </React.Fragment>
+                  ))
+                : item.type}
+            </span>
           </span>
         </span>
-      </span>
-    );
-  });
-  
+      );
+    });
   }, [tooltipTitle]);
 
   return (
@@ -174,7 +181,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            style="max-w-[40vw] max-h-[10vh] overflow-auto custom-scroll"
+            style="max-w-[30vw] max-h-[20vh] overflow-auto custom-scroll"
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}