From d2f28dee6b4721a5976743aa4d116dd853ea1c90 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 10 Jul 2023 22:43:34 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20add?=
 =?UTF-8?q?=20refNumberComponents=20to=20keep=20track=20of=20the=20number?=
 =?UTF-8?q?=20of=20components=20=F0=9F=90=9B=20fix(parameterComponent):=20?=
 =?UTF-8?q?change=20text-destructive=20class=20to=20text-status-red=20for?=
 =?UTF-8?q?=20better=20semantics=20=F0=9F=90=9B=20fix(ModalField):=20chang?=
 =?UTF-8?q?e=20text-destructive=20class=20to=20text-status-red=20for=20bet?=
 =?UTF-8?q?ter=20semantics=20=F0=9F=90=9B=20fix(codeAreaModal):=20change?=
 =?UTF-8?q?=20text-destructive=20class=20to=20text-status-red=20for=20bett?=
 =?UTF-8?q?er=20semantics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../GenericNode/components/parameterComponent/index.tsx   | 8 ++++++--
 .../src/modals/NodeModal/components/ModalField/index.tsx  | 2 +-
 src/frontend/src/modals/codeAreaModal/index.tsx           | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 3d931fbe2..ed6cd1f7a 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -41,6 +41,7 @@ export default function ParameterComponent({
 }: ParameterComponentType) {
   const ref = useRef(null);
   const refHtml = useRef(null);
+  const refNumberComponents = useRef(0);
   const infoHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
@@ -91,9 +92,12 @@ export default function ParameterComponent({
     );
   }, [info]);
 
+
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle, left, data.type);
 
+    refNumberComponents.current = groupedObj[0]?.component?.length;
+
     refHtml.current = groupedObj.map((item, i) => {
       const Icon: any = nodeIconsLucide[item.family];
 
@@ -155,7 +159,7 @@ export default function ParameterComponent({
           }
         >
           {title}
-          <span className="text-destructive">{required ? " *" : ""}</span>
+          <span className="text-status-red">{required ? " *" : ""}</span>
           <div className="">
             {info !== "" && (
               <ShadTooltip content={infoHtml.current}>
@@ -176,7 +180,7 @@ export default function ParameterComponent({
           <></>
         ) : (
           <ShadTooltip
-            style="tooltip-fixed-width custom-scroll"
+            style={refNumberComponents.current > 10 ? "tooltip-fixed-width custom-scroll overflow-y-scroll nowheel" : "tooltip-fixed-width"}
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index 3208b989b..ad82d0c0d 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -52,7 +52,7 @@ export default function ModalField({
       {display && (
         <div>
           <span className="mx-2">{title}</span>
-          <span className="text-destructive">{required ? " *" : ""}</span>
+          <span className="text-status-red">{required ? " *" : ""}</span>
         </div>
       )}
 
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index fc012f6b7..f79fb5d4f 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -129,7 +129,7 @@ export default function CodeAreaModal({
             }
           >
             <div className="mt-1 h-full w-full overflow-x-clip overflow-y-scroll text-left custom-scroll">
-              <h1 className="text-lg text-destructive">
+              <h1 className="text-lg text-status-red">
                 {error?.detail?.error}
               </h1>
               <div className="ml-2 w-full break-all text-sm text-status-red">