From 3e99fa431bd85ae894049ddfcc28e05f63dd429d Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 20 Jul 2023 18:09:46 -0300
Subject: [PATCH 1/5] =?UTF-8?q?=F0=9F=94=A7=20fix(floatComponent):=20repla?=
 =?UTF-8?q?ce=20input=20element=20with=20custom=20Input=20component=20for?=
 =?UTF-8?q?=20consistency=20and=20reusability=20=F0=9F=94=A7=20fix(inputCo?=
 =?UTF-8?q?mponent):=20replace=20input=20element=20with=20custom=20Input?=
 =?UTF-8?q?=20component=20for=20consistency=20and=20reusability=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(inputListComponent):=20replace=20input=20ele?=
 =?UTF-8?q?ment=20with=20custom=20Input=20component=20for=20consistency=20?=
 =?UTF-8?q?and=20reusability=20=F0=9F=94=A7=20fix(intComponent):=20replace?=
 =?UTF-8?q?=20input=20element=20with=20custom=20Input=20component=20for=20?=
 =?UTF-8?q?consistency=20and=20reusability=20=F0=9F=94=A7=20fix(textAreaCo?=
 =?UTF-8?q?mponent):=20replace=20input=20element=20with=20custom=20Input?=
 =?UTF-8?q?=20component=20for=20consistency=20and=20reusability=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(ui/input):=20update=20Input=20component=20st?=
 =?UTF-8?q?yles=20to=20match=20the=20design=20requirements=20=F0=9F=94=A7?=
 =?UTF-8?q?=20fix(index.css):=20update=20styles=20for=20Input=20component?=
 =?UTF-8?q?=20to=20match=20the=20design=20requirements=20=F0=9F=94=A7=20fi?=
 =?UTF-8?q?x(extraSidebarComponent):=20replace=20input=20element=20with=20?=
 =?UTF-8?q?custom=20Input=20component=20for=20consistency=20and=20reusabil?=
 =?UTF-8?q?ity?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/floatComponent/index.tsx     | 11 +++++------
 .../src/components/inputComponent/index.tsx     | 12 ++++++------
 .../src/components/inputListComponent/index.tsx | 17 +++++++----------
 .../src/components/intComponent/index.tsx       | 17 +++++++----------
 .../src/components/textAreaComponent/index.tsx  | 11 +++++------
 src/frontend/src/components/ui/input.tsx        |  2 +-
 src/frontend/src/index.css                      | 10 ++++------
 .../components/extraSidebarComponent/index.tsx  |  3 ++-
 8 files changed, 37 insertions(+), 46 deletions(-)

diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 278b3d203..a3d29b798 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { FloatComponentType } from "../../types/components";
+import { Input } from "../ui/input";
 
 export default function FloatComponent({
   value,
@@ -19,8 +20,8 @@ export default function FloatComponent({
   }, [disabled, onChange]);
 
   return (
-    <div className={"w-full " + (disabled ? "float-component-pointer" : "")}>
-      <input
+    <div className="w-full">
+      <Input
         type="number"
         step={step}
         min={min}
@@ -34,11 +35,9 @@ export default function FloatComponent({
         }}
         max={max}
         value={value ?? ""}
+        disabled={disabled}
         className={
-          "nopan nodrag noundo nocopy " +
-          (editNode
-            ? "input-edit-node"
-            : "input-primary" + (disabled ? " input-disable " : ""))
+          (editNode ? "input-edit-node" : "")
         }
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 682d5716c..78b06c411 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils/utils";
+import { Input } from "../ui/input";
 
 export default function InputComponent({
   value,
@@ -19,16 +20,15 @@ export default function InputComponent({
   }, [disabled, onChange]);
 
   return (
-    <div className={disabled ? "input-component-div" : "relative"}>
-      <input
+    <div className="relative w-full">
+      <Input
         value={value}
+        disabled={disabled}
         className={classNames(
-          disabled ? " input-disable " : "",
           password && !pwdVisible && value !== "" ? " text-clip password " : "",
-          editNode ? " input-edit-node " : " input-primary ",
+          editNode ? " input-edit-node " : "",
           password && editNode ? "pr-8" : "",
-          password && !editNode ? "pr-10" : "",
-          "nopan nodrag noundo nocopy"
+          password && !editNode ? "pr-10" : ""
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
         onChange={(e) => {
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index a54b4151f..8fde7cf4c 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -3,6 +3,7 @@ import { InputListComponentType } from "../../types/components";
 
 import _ from "lodash";
 import IconComponent from "../genericIconComponent";
+import { Input } from "../ui/input";
 
 export default function InputListComponent({
   value,
@@ -27,23 +28,19 @@ export default function InputListComponent({
   }, [disabled, onChange]);
 
   return (
-    <div
-      className={
-        (disabled ? "pointer-events-none cursor-not-allowed" : "") +
-        "flex flex-col gap-3"
-      }
+    <div className="flex flex-col gap-3"
     >
       {inputList.map((i, idx) => {
         return (
           <div key={idx} className="flex w-full gap-3">
-            <input
+            <Input
+            disabled={disabled}
               type="text"
               value={i}
               className={
-                "nopan nodrag noundo nocopy " +
-                (editNode
-                  ? "input-edit-node "
-                  : "input-primary " + (disabled ? "input-disable" : ""))
+                editNode
+                  ? "input-edit-node"
+                  : ""
               }
               placeholder="Type something..."
               onChange={(e) => {
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 24d28e4f5..8a4da22b6 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { FloatComponentType } from "../../types/components";
+import { Input } from "../ui/input";
 
 export default function IntComponent({
   value,
@@ -17,13 +18,9 @@ export default function IntComponent({
   }, [disabled, onChange]);
 
   return (
-    <div
-      className={
-        "w-full " +
-        (disabled ? "pointer-events-none w-full cursor-not-allowed" : "")
-      }
+    <div className="w-full"
     >
-      <input
+      <Input
         onKeyDown={(event) => {
           if (
             event.key !== "Backspace" &&
@@ -52,11 +49,11 @@ export default function IntComponent({
         }}
         value={value ?? ""}
         className={
-          "nopan nodrag noundo nocopy " +
-          (editNode
-            ? " input-edit-node "
-            : " input-primary " + (disabled ? " input-disable" : ""))
+          editNode
+            ? "input-edit-node"
+            : ""
         }
+        disabled={disabled}
         placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {
           onChange(e.target.value);
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 2bead9a2d..e3cbb672f 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -3,6 +3,7 @@ import { TypeModal } from "../../constants/enums";
 import GenericModal from "../../modals/genericModal";
 import { TextAreaComponentType } from "../../types/components";
 import IconComponent from "../genericIconComponent";
+import { Input } from "../ui/input";
 
 export default function TextAreaComponent({
   value,
@@ -18,15 +19,14 @@ export default function TextAreaComponent({
   }, [disabled]);
 
   return (
-    <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
       <div className="flex w-full items-center">
-        <input
+        <Input
           value={value}
+          disabled={disabled}
           className={
             (editNode
-              ? " input-edit-node "
-              : " input-primary " + (disabled ? " input-disable" : "")) +
-            " nopan nodrag noundo nocopy w-full"
+              ? "input-edit-node"
+              : "")
           }
           placeholder={"Type something..."}
           onChange={(e) => {
@@ -55,6 +55,5 @@ export default function TextAreaComponent({
           </GenericModal>
         </div>
       </div>
-    </div>
   );
 }
diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx
index 0942a3930..33b7f8813 100644
--- a/src/frontend/src/components/ui/input.tsx
+++ b/src/frontend/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "nopan nodrag noundo nocopy flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "input-primary nopan nodrag noundo nocopy",
           className
         )}
         ref={ref}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 0bb5b46e9..ca1a4a207 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -239,11 +239,9 @@ The cursor: default; property value restores the browser's default cursor style
   .button-div-style {
     @apply gap-2 flex
   }
-  .input-primary:focus{
-    @apply focus:placeholder-transparent focus:ring-ring focus:border-ring
-  }
-  .input-primary {
-    @apply bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full;
+ 
+  .input-primary{
+    @apply placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full
   }
 
   .input-edit-node{
@@ -550,7 +548,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm
   }
   .dropdown-component-true-options {
-    @apply dropdown-component-options lg:w-[31.5%]
+    @apply dropdown-component-options lg:w-[32%]
   }
   .dropdown-component-false-options {
     @apply dropdown-component-options w-full
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 45aa67526..6d08cabd1 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -15,6 +15,7 @@ import {
 } from "../../../../utils/styleUtils";
 import { classNames } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
+import { Input } from "../../../../components/ui/input";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
@@ -109,7 +110,7 @@ export default function ExtraSidebar() {
       </div>
       <Separator />
       <div className="side-bar-search-div-placement">
-        <input
+        <Input
           type="text"
           name="search"
           id="search"

From 25235a0d1148a18360b58801f9e15657e959fca8 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 20 Jul 2023 18:40:24 -0300
Subject: [PATCH 2/5] =?UTF-8?q?=F0=9F=94=A7=20chore(textarea.tsx):=20refac?=
 =?UTF-8?q?tor=20textarea=20component=20class=20names=20for=20improved=20r?=
 =?UTF-8?q?eadability=20and=20maintainability=20=F0=9F=94=A7=20chore(index?=
 =?UTF-8?q?.css):=20refactor=20input-primary=20class=20to=20remove=20unnec?=
 =?UTF-8?q?essary=20styles=20and=20improve=20readability=20=F0=9F=94=A7=20?=
 =?UTF-8?q?chore(index.css):=20add=20new=20textarea-primary=20class=20for?=
 =?UTF-8?q?=20textarea=20component=20with=20similar=20styles=20as=20input-?=
 =?UTF-8?q?primary=20but=20without=20truncation=20=F0=9F=94=A7=20chore(cha?=
 =?UTF-8?q?tInput/index.tsx):=20replace=20textarea=20element=20with=20Text?=
 =?UTF-8?q?area=20component=20for=20consistency=20and=20reusability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/components/ui/textarea.tsx           |  2 +-
 src/frontend/src/index.css                            | 10 +++++++---
 src/frontend/src/modals/formModal/chatInput/index.tsx |  3 ++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/ui/textarea.tsx b/src/frontend/src/components/ui/textarea.tsx
index 64aec41a1..2dcafa1f9 100644
--- a/src/frontend/src/components/ui/textarea.tsx
+++ b/src/frontend/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "textarea-primary nopan nodrag noundo nocopy",
           className
         )}
         ref={ref}
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index ca1a4a207..a7e04d3da 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -239,11 +239,15 @@ The cursor: default; property value restores the browser's default cursor style
   .button-div-style {
     @apply gap-2 flex
   }
- 
   .input-primary{
-    @apply placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm truncate w-full
+    @apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full truncate
   }
-
+  
+/* The same as input-primary but no-truncate*/
+  .textarea-primary{
+    @apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full
+  }
+  
   .input-edit-node{
     @apply input-primary border-border pt-0.5 pb-0.5 text-left w-full
   }
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index 63f224e92..e03078a10 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import IconComponent from "../../../components/genericIconComponent";
 import { classNames } from "../../../utils/utils";
+import { Textarea } from "../../../components/ui/textarea";
 
 export default function ChatInput({
   lockChat,
@@ -25,7 +26,7 @@ export default function ChatInput({
 
   return (
     <div className="relative">
-      <textarea
+      <Textarea 
         onKeyDown={(event) => {
           if (event.key === "Enter" && !lockChat && !event.shiftKey) {
             sendMessage();

From 207ed3b0f0adfe201ef1254f28b98f36b73e5e50 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 20 Jul 2023 18:58:29 -0300
Subject: [PATCH 3/5] formatting

---
 .../src/components/floatComponent/index.tsx   |  4 +-
 .../components/inputListComponent/index.tsx   | 11 +---
 .../src/components/intComponent/index.tsx     |  9 +--
 .../components/textAreaComponent/index.tsx    | 62 +++++++++----------
 src/frontend/src/components/ui/input.tsx      |  5 +-
 src/frontend/src/components/ui/textarea.tsx   |  5 +-
 .../src/modals/formModal/chatInput/index.tsx  |  4 +-
 .../extraSidebarComponent/index.tsx           |  2 +-
 8 files changed, 40 insertions(+), 62 deletions(-)

diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index a3d29b798..40d6fc3fe 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -36,9 +36,7 @@ export default function FloatComponent({
         max={max}
         value={value ?? ""}
         disabled={disabled}
-        className={
-          (editNode ? "input-edit-node" : "")
-        }
+        className={editNode ? "input-edit-node" : ""}
         placeholder={
           editNode ? "Number 0 to 1" : "Type a number from zero to one"
         }
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 8fde7cf4c..c3651d95e 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -28,20 +28,15 @@ export default function InputListComponent({
   }, [disabled, onChange]);
 
   return (
-    <div className="flex flex-col gap-3"
-    >
+    <div className="flex flex-col gap-3">
       {inputList.map((i, idx) => {
         return (
           <div key={idx} className="flex w-full gap-3">
             <Input
-            disabled={disabled}
+              disabled={disabled}
               type="text"
               value={i}
-              className={
-                editNode
-                  ? "input-edit-node"
-                  : ""
-              }
+              className={editNode ? "input-edit-node" : ""}
               placeholder="Type something..."
               onChange={(e) => {
                 setInputList((old) => {
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 8a4da22b6..c43055b47 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -18,8 +18,7 @@ export default function IntComponent({
   }, [disabled, onChange]);
 
   return (
-    <div className="w-full"
-    >
+    <div className="w-full">
       <Input
         onKeyDown={(event) => {
           if (
@@ -48,11 +47,7 @@ export default function IntComponent({
           }
         }}
         value={value ?? ""}
-        className={
-          editNode
-            ? "input-edit-node"
-            : ""
-        }
+        className={editNode ? "input-edit-node" : ""}
         disabled={disabled}
         placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index e3cbb672f..cd598f01e 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -19,41 +19,37 @@ export default function TextAreaComponent({
   }, [disabled]);
 
   return (
-      <div className="flex w-full items-center">
-        <Input
+    <div className="flex w-full items-center">
+      <Input
+        value={value}
+        disabled={disabled}
+        className={editNode ? "input-edit-node" : ""}
+        placeholder={"Type something..."}
+        onChange={(e) => {
+          onChange(e.target.value);
+        }}
+      />
+      <div>
+        <GenericModal
+          type={TypeModal.TEXT}
+          buttonText="Finishing Editing"
+          modalTitle="Edit Text"
           value={value}
-          disabled={disabled}
-          className={
-            (editNode
-              ? "input-edit-node"
-              : "")
-          }
-          placeholder={"Type something..."}
-          onChange={(e) => {
-            onChange(e.target.value);
+          setValue={(t: string) => {
+            onChange(t);
           }}
-        />
-        <div>
-          <GenericModal
-            type={TypeModal.TEXT}
-            buttonText="Finishing Editing"
-            modalTitle="Edit Text"
-            value={value}
-            setValue={(t: string) => {
-              onChange(t);
-            }}
-          >
-            {!editNode && (
-              <IconComponent
-                name="ExternalLink"
-                className={
-                  "icons-parameters-comp" +
-                  (disabled ? " text-ring" : " hover:text-accent-foreground")
-                }
-              />
-            )}
-          </GenericModal>
-        </div>
+        >
+          {!editNode && (
+            <IconComponent
+              name="ExternalLink"
+              className={
+                "icons-parameters-comp" +
+                (disabled ? " text-ring" : " hover:text-accent-foreground")
+              }
+            />
+          )}
+        </GenericModal>
       </div>
+    </div>
   );
 }
diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx
index 33b7f8813..c025f8de3 100644
--- a/src/frontend/src/components/ui/input.tsx
+++ b/src/frontend/src/components/ui/input.tsx
@@ -9,10 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn(
-          "input-primary nopan nodrag noundo nocopy",
-          className
-        )}
+        className={cn("nopan nodrag noundo nocopy input-primary", className)}
         ref={ref}
         {...props}
       />
diff --git a/src/frontend/src/components/ui/textarea.tsx b/src/frontend/src/components/ui/textarea.tsx
index 2dcafa1f9..cfad1cf72 100644
--- a/src/frontend/src/components/ui/textarea.tsx
+++ b/src/frontend/src/components/ui/textarea.tsx
@@ -8,10 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
-        className={cn(
-          "textarea-primary nopan nodrag noundo nocopy",
-          className
-        )}
+        className={cn("nopan nodrag noundo nocopy textarea-primary", className)}
         ref={ref}
         {...props}
       />
diff --git a/src/frontend/src/modals/formModal/chatInput/index.tsx b/src/frontend/src/modals/formModal/chatInput/index.tsx
index e03078a10..30dfdcd6d 100644
--- a/src/frontend/src/modals/formModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/formModal/chatInput/index.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import IconComponent from "../../../components/genericIconComponent";
-import { classNames } from "../../../utils/utils";
 import { Textarea } from "../../../components/ui/textarea";
+import { classNames } from "../../../utils/utils";
 
 export default function ChatInput({
   lockChat,
@@ -26,7 +26,7 @@ export default function ChatInput({
 
   return (
     <div className="relative">
-      <Textarea 
+      <Textarea
         onKeyDown={(event) => {
           if (event.key === "Enter" && !lockChat && !event.shiftKey) {
             sendMessage();
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 6d08cabd1..3111f74a2 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -1,6 +1,7 @@
 import { useContext, useState } from "react";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import IconComponent from "../../../../components/genericIconComponent";
+import { Input } from "../../../../components/ui/input";
 import { Separator } from "../../../../components/ui/separator";
 import { alertContext } from "../../../../contexts/alertContext";
 import { TabsContext } from "../../../../contexts/tabsContext";
@@ -15,7 +16,6 @@ import {
 } from "../../../../utils/styleUtils";
 import { classNames } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
-import { Input } from "../../../../components/ui/input";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);

From df14fd0d58966fc30799554a5e7405ad62a8ab9c Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 21 Jul 2023 10:27:50 -0300
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=94=A8=20refactor(inputListComponent)?=
 =?UTF-8?q?:=20extract=20classNames=20function=20to=20improve=20code=20rea?=
 =?UTF-8?q?dability=20and=20reusability=20=F0=9F=90=9B=20fix(inputListComp?=
 =?UTF-8?q?onent):=20add=20conditional=20styling=20to=20the=20parent=20div?=
 =?UTF-8?q?=20based=20on=20the=20length=20of=20inputList=20and=20the=20pre?=
 =?UTF-8?q?sence=20of=20editNode=20to=20fix=20layout=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/components/inputListComponent/index.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index c3651d95e..4df66639f 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -4,6 +4,7 @@ import { InputListComponentType } from "../../types/components";
 import _ from "lodash";
 import IconComponent from "../genericIconComponent";
 import { Input } from "../ui/input";
+import { classNames } from "../../utils/utils";
 
 export default function InputListComponent({
   value,
@@ -28,7 +29,13 @@ export default function InputListComponent({
   }, [disabled, onChange]);
 
   return (
-    <div className="flex flex-col gap-3">
+    <div 
+    className={
+    classNames(
+      inputList.length > 1 && editNode ? "my-1" : "",
+      "flex flex-col gap-3"
+    )
+  }>
       {inputList.map((i, idx) => {
         return (
           <div key={idx} className="flex w-full gap-3">

From c05eaa5b124d9ddfa6e2863f24e53c2d90e9329a Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 24 Jul 2023 18:09:01 -0300
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=94=A7=20fix(index.css):=20remove=20u?=
 =?UTF-8?q?nnecessary=20hyphen=20in=20comment=20to=20improve=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/frontend/src/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index a7e04d3da..7aedc908c 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -243,7 +243,7 @@ The cursor: default; property value restores the browser's default cursor style
     @apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full truncate
   }
   
-/* The same as input-primary but no-truncate*/
+/* The same as input-primary but no-truncate */
   .textarea-primary{
     @apply disabled:cursor-not-allowed disabled:opacity-50 focus:placeholder-transparent focus:ring-ring focus:border-ring bg-background block text-left border-border form-input px-3 placeholder:text-muted-foreground rounded-md shadow-sm sm:text-sm w-full
   }