From 44011f3dd5ebb21643326f562e5972d561ccad4b Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 4 Jul 2023 23:25:18 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(GenericNode/index.tsx):=20fi?=
 =?UTF-8?q?x=20class=20order=20in=20div=20element=20to=20ensure=20correct?=
 =?UTF-8?q?=20styling=20=E2=9C=A8=20feat(GenericNode/index.tsx):=20improve?=
 =?UTF-8?q?=20readability=20and=20maintainability=20by=20extracting=20repe?=
 =?UTF-8?q?ated=20class=20names=20into=20variables=20The=20class=20order?=
 =?UTF-8?q?=20in=20the=20div=20element=20has=20been=20fixed=20to=20ensure?=
 =?UTF-8?q?=20the=20correct=20styling=20is=20applied.=20Repeated=20class?=
 =?UTF-8?q?=20names=20have=20been=20extracted=20into=20variables=20to=20im?=
 =?UTF-8?q?prove=20readability=20and=20maintainability=20of=20the=20code.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/CustomNodes/GenericNode/index.tsx     | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c994dc919..4e0f4ef18 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -93,7 +93,7 @@ export default function GenericNode({
                 color: nodeColors[types[data.type]] ?? nodeColors.unknown,
               }}
             />
-            <div className="ml-2 truncate flex-1">
+            <div className="ml-2 flex-1 truncate">
               <ShadTooltip
                 delayDuration={1500}
                 content={data.node.display_name}
@@ -133,25 +133,25 @@ export default function GenericNode({
                   <div
                     className={classNames(
                       validationStatus && validationStatus.valid
-                        ? "w-4 h-4 rounded-full bg-status-red opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full bg-status-green opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       validationStatus && !validationStatus.valid
-                        ? "w-4 h-4 rounded-full  bg-status-red opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full  bg-status-red opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                   <div
                     className={classNames(
                       !validationStatus || isBuilding
-                        ? "w-4 h-4 rounded-full  bg-status-yellow opacity-100"
-                        : "w-4 h-4 rounded-full bg-ring opacity-0 hidden animate-spin",
-                      "absolute w-4 hover:text-accent-foreground hover:transition-all ease-in-out duration-200"
+                        ? "h-4 w-4 rounded-full  bg-status-yellow opacity-100"
+                        : "hidden h-4 w-4 animate-spin rounded-full bg-ring opacity-0",
+                      "absolute w-4 duration-200 ease-in-out hover:text-accent-foreground hover:transition-all"
                     )}
                   ></div>
                 </div>
@@ -207,9 +207,19 @@ export default function GenericNode({
                       }
                       info={data.node.template[t].info}
                       name={t}
-                      tooltipTitle={data.node.template[t].input_types?.join("\n") ?? data.node.template[t].type}
+                      tooltipTitle={
+                        data.node.template[t].input_types?.join("\n") ??
+                        data.node.template[t].type
+                      }
                       required={data.node.template[t].required}
-                      id={(data.node.template[t].input_types?.join(";") ?? data.node.template[t].type) + "|" + t + "|" + data.id}
+                      id={
+                        (data.node.template[t].input_types?.join(";") ??
+                          data.node.template[t].type) +
+                        "|" +
+                        t +
+                        "|" +
+                        data.id
+                      }
                       left={true}
                       type={data.node.template[t].type}
                       optionalHandle={data.node.template[t].input_types}
@@ -233,7 +243,11 @@ export default function GenericNode({
             <ParameterComponent
               data={data}
               color={nodeColors[types[data.type]] ?? nodeColors.unknown}
-              title={data.node.output_types && data.node.output_types.length > 0 ? data.node.output_types.join("|") : data.type}
+              title={
+                data.node.output_types && data.node.output_types.length > 0
+                  ? data.node.output_types.join("|")
+                  : data.type
+              }
               tooltipTitle={data.node.base_classes.join("\n")}
               id={[data.type, data.id, ...data.node.base_classes].join("|")}
               type={data.node.base_classes.join("|")}