From 244fe5c123e33fe07eb632c5c37e87f8877fcddb Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 9 Jun 2023 16:41:34 -0300
Subject: [PATCH 01/17] Adjusted state of toggle buttons and inputComp

---
 .../components/parameterComponent/index.tsx      |  3 +++
 .../components/ShadTooltipComponent/index.tsx    | 16 +++++++++-------
 .../src/components/inputComponent/index.tsx      |  7 +++++++
 src/frontend/src/modals/EditNodeModal/index.tsx  |  6 ++----
 src/frontend/src/types/components/index.ts       |  3 +++
 5 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index d6ca1fe90..55256951b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -40,6 +40,7 @@ export default function ParameterComponent({
   const refHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
+
   useEffect(() => {
     if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
       setPosition(ref.current.offsetTop + ref.current.clientHeight / 2);
@@ -54,6 +55,7 @@ export default function ParameterComponent({
   const [enabled, setEnabled] = useState(
     data.node.template[name]?.value ?? false
   );
+
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
     reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
@@ -125,6 +127,7 @@ export default function ParameterComponent({
             delayDuration={0}
             content={refHtml.current}
             side={left ? "left" : "right"}
+            open={refHtml?.current?.length > 0}
           >
             <Handle
               type={left ? "target" : "source"}
diff --git a/src/frontend/src/components/ShadTooltipComponent/index.tsx b/src/frontend/src/components/ShadTooltipComponent/index.tsx
index a360f3ff0..6dfde8f8f 100644
--- a/src/frontend/src/components/ShadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/ShadTooltipComponent/index.tsx
@@ -10,13 +10,15 @@ const ShadTooltip = (props) => {
     <TooltipProvider>
       <Tooltip delayDuration={props.delayDuration}>
         <TooltipTrigger asChild>{props.children}</TooltipTrigger>
-        <TooltipContent
-          side={props.side}
-          avoidCollisions={false}
-          sticky="always"
-        >
-          {props.content}
-        </TooltipContent>
+        {props.open && (
+          <TooltipContent
+            side={props.side}
+            avoidCollisions={false}
+            sticky="always"
+          >
+            {props.content}
+          </TooltipContent>
+        )}
       </Tooltip>
     </TooltipProvider>
   );
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index a4072e9c1..b7b245c75 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
+import { PopUpContext } from "../../contexts/popUpContext";
 
 export default function InputComponent({
   value,
@@ -14,6 +15,8 @@ export default function InputComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const [pwdVisible, setPwdVisible] = useState(false);
   const { setDisableCopyPaste } = useContext(TabsContext);
+  const { closePopUp } = useContext(PopUpContext);
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -21,6 +24,10 @@ export default function InputComponent({
     }
   }, [disabled, onChange]);
 
+  useEffect(() => {
+    setMyValue(value ?? "");
+  }, [closePopUp]);
+
   return (
     <div
       className={
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index f6f4d9111..eb906b64a 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -60,12 +60,12 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           data.node.template[t].type === "int")
     ).length
   );
-  const [nodeValue, setNodeValue] = useState(true);
+  const [nodeValue, setNodeValue] = useState(null);
   const { closePopUp } = useContext(PopUpContext);
   const { types } = useContext(typesContext);
   const ref = useRef();
   const { save } = useContext(TabsContext);
-  const [enabled, setEnabled] = useState(false);
+  const [enabled, setEnabled] = useState(null);
   if (nodeLength == 0) {
     closePopUp();
   }
@@ -87,8 +87,6 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     setNodeValue(!nodeValue);
   }
 
-  console.log(data.node.template);
-
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 419710cfe..8eb66d32b 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -13,11 +13,14 @@ export type InputComponentType = {
   password: boolean;
   disableCopyPaste?: boolean;
   editNode?: boolean;
+  onChangePass?: (value: boolean | boolean) => void;
+  showPass?: boolean;
 };
 export type ToggleComponentType = {
   enabled: boolean;
   setEnabled: (state: boolean) => void;
   disabled: boolean;
+  name?: string;
 };
 export type DropDownComponentType = {
   value: string;

From ef1b19a6d3a1f3589745c1c5246ea58df54e38f5 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 9 Jun 2023 16:43:10 -0300
Subject: [PATCH 02/17] Removing unnecessary prop

---
 src/frontend/src/types/components/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 8eb66d32b..6a4b9c369 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -20,7 +20,6 @@ export type ToggleComponentType = {
   enabled: boolean;
   setEnabled: (state: boolean) => void;
   disabled: boolean;
-  name?: string;
 };
 export type DropDownComponentType = {
   value: string;

From 74b8cbb22490d23a58524db4ac6d8e89ad0d48e3 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Sun, 11 Jun 2023 10:48:42 -0300
Subject: [PATCH 03/17] dropdown float, placeholders and inputlist bug fix

---
 .../src/components/codeAreaComponent/index.tsx    |  2 +-
 .../src/components/dropdownComponent/index.tsx    | 15 ++++++---------
 .../src/components/inputListComponent/index.tsx   |  7 +++++--
 .../src/components/promptComponent/index.tsx      |  4 ++--
 .../src/components/textAreaComponent/index.tsx    |  2 +-
 src/frontend/src/modals/EditNodeModal/index.tsx   |  2 ++
 src/frontend/src/types/components/index.ts        |  2 ++
 7 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 7ba38918b..b1c907998 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -40,7 +40,7 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "h-7 truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 48c41d118..c7479abfb 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -9,6 +9,7 @@ export default function Dropdown({
   options,
   onSelect,
   editNode = false,
+  numberOfOptions = 0,
 }: DropDownComponentType) {
   let [internalValue, setInternalValue] = useState(
     value === "" || !value ? "Choose an option" : value
@@ -25,16 +26,12 @@ export default function Dropdown({
       >
         {({ open }) => (
           <>
-            <div
-              className={
-                editNode ? "relative mt-0 w-full" : "relative mt-1 w-full"
-              }
-            >
+            <div className={editNode ? "mt-1" : "relative mt-1"}>
               <Listbox.Button
                 className={
                   editNode
-                    ? "pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                    : "relative w-full cursor-default rounded-md border border-gray-300 bg-white dark:bg-gray-900 py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+                    ? "relative pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                    : "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
                 }
               >
                 <span className="block truncate w-full">{internalValue}</span>
@@ -62,8 +59,8 @@ export default function Dropdown({
                 <Listbox.Options
                   className={
                     editNode
-                      ? "arrow-hide"
-                      : "absolute z-50 mt-1 max-h-60 w-full dark:bg-gray-800 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                      ? "arrow-hide absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
+                      : "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
                   }
                 >
                   {options.map((option, id) => (
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 49b0a1a5a..5f5e1f04e 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -9,6 +9,7 @@ export default function InputListComponent({
   value,
   onChange,
   disabled,
+  editNode = false,
 }: InputListComponentType) {
   const [inputList, setInputList] = useState(value ?? [""]);
   useEffect(() => {
@@ -30,8 +31,10 @@ export default function InputListComponent({
             type="text"
             value={i}
             className={
-              "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-              (disabled ? " bg-gray-200" : "")
+              editNode
+                ? "h-7 truncate cursor-pointer text-center placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+                  (disabled ? " bg-gray-200" : "")
             }
             placeholder="Type something..."
             onChange={(e) => {
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index a1729ef99..bbe9c3bf8 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -45,12 +45,12 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "h-7 cursor-pointer truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "-"}
+          {myValue !== "" ? myValue : "Type your prompt here"}
         </span>
         <button
           onClick={() => {
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 0693411bf..ce59768a6 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -39,7 +39,7 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "h-7 truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
               : "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index eb906b64a..fca5f83dc 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -160,6 +160,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                               <div className="mx-auto">
                                 {data.node.template[n].list ? (
                                   <InputListComponent
+                                    editNode={true}
                                     disabled={false}
                                     value={
                                       !data.node.template[n].value ||
@@ -226,6 +227,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                               data.node.template[n].options ? (
                               <div className="mx-auto">
                                 <Dropdown
+                                  numberOfOptions={nodeLength}
                                   editNode={true}
                                   options={data.node.template[n].options}
                                   onSelect={(newValue) =>
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 6a4b9c369..060bd6d05 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -26,6 +26,7 @@ export type DropDownComponentType = {
   options: string[];
   onSelect: (value: string) => void;
   editNode?: boolean;
+  numberOfOptions?: number;
 };
 export type ParameterComponentType = {
   data: NodeDataType;
@@ -42,6 +43,7 @@ export type InputListComponentType = {
   value: string[];
   onChange: (value: string[]) => void;
   disabled: boolean;
+  editNode?: boolean;
 };
 
 export type TextAreaComponentType = {

From 0dc8ca868285dcfc761713da7f7915bcfc0670a0 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 12 Jun 2023 13:57:56 -0300
Subject: [PATCH 04/17] bugfixes: darkmode and not saving file/text

---
 .../GenericNode/components/parameterComponent/index.tsx     | 4 ++++
 src/frontend/src/CustomNodes/GenericNode/index.tsx          | 3 +++
 src/frontend/src/components/inputFileComponent/index.tsx    | 6 +++++-
 src/frontend/src/components/toggleShadComponent/index.tsx   | 1 +
 src/frontend/src/modals/EditNodeModal/index.tsx             | 6 ++++--
 src/frontend/src/modals/genericModal/index.tsx              | 2 +-
 6 files changed, 18 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 55256951b..09c80d309 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -24,6 +24,7 @@ import { nodeNames, nodeIcons } from "../../../../utils";
 import React from "react";
 import { nodeColors } from "../../../../utils";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { PopUpContext } from "../../../../contexts/popUpContext";
 
 export default function ParameterComponent({
   left,
@@ -40,6 +41,7 @@ export default function ParameterComponent({
   const refHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
+  const { closePopUp } = useContext(PopUpContext);
 
   useEffect(() => {
     if (ref.current && ref.current.offsetTop && ref.current.clientHeight) {
@@ -56,6 +58,8 @@ export default function ParameterComponent({
     data.node.template[name]?.value ?? false
   );
 
+  useEffect(() => {}, [closePopUp, data.node.template]);
+
   const { reactFlowInstance } = useContext(typesContext);
   let disabled =
     reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 86eaf299d..9569bda63 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -44,6 +44,7 @@ export default function GenericNode({
   const showError = useRef(true);
   const { types, deleteNode } = useContext(typesContext);
   const { openPopUp } = useContext(PopUpContext);
+  const { closePopUp } = useContext(PopUpContext);
 
   const Icon = nodeIcons[data.type] || nodeIcons[types[data.type]];
   const [validationStatus, setValidationStatus] = useState(null);
@@ -59,6 +60,8 @@ export default function GenericNode({
     }
   }, [save]);
 
+  useEffect(() => {}, [closePopUp]);
+
   const validateNode = useCallback(
     debounce(async () => {
       try {
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index 4dd32b1da..de6e0f683 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -37,6 +37,10 @@ export default function InputFileComponent({
     return false;
   }
 
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   const handleButtonClick = () => {
     const input = document.createElement("input");
     input.type = "file";
@@ -73,7 +77,7 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
               : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx
index 188ddccf9..632ee1bad 100644
--- a/src/frontend/src/components/toggleShadComponent/index.tsx
+++ b/src/frontend/src/components/toggleShadComponent/index.tsx
@@ -19,6 +19,7 @@ export default function ToggleShadComponent({
         style={{
           transform: "scaleX(0.6) scaleY(0.6)",
         }}
+        className="data-[state=unchecked]:bg-slate-500"
         checked={enabled}
         onCheckedChange={(x: boolean) => {
           setEnabled(x);
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index fca5f83dc..ba12f6432 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -77,6 +77,8 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
     }
   }
 
+  useEffect(() => {}, [closePopUp, data.node.template]);
+
   function changeAdvanced(node): void {
     Object.keys(data.node.template).filter((n, i) => {
       if (n === node.name) {
@@ -102,10 +104,10 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           <DialogDescription>
             {EDIT_DIALOG_SUBTITLE}
             <div className="flex pt-3">
-              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2">
+              <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
                 &nbsp;
               </VariableIcon>
-              <span className="text-sm font-semibold text-gray-800">
+              <span className="text-sm font-semibold text-gray-800 dark:text-white">
                 Parameters
               </span>
             </div>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 868a61913..2b1b4c7d6 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -18,7 +18,7 @@ import { Button } from "../../components/ui/button";
 import { Textarea } from "../../components/ui/textarea";
 import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
 
-export default function PromptAreaModal({
+export default function GenericModal({
   value,
   setValue,
   buttonText,

From 78ce80098dfd2ad7f320e0e674d217a634386573 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 12 Jun 2023 18:55:00 -0300
Subject: [PATCH 05/17] adjust dark mode and dropdown

---
 .../components/dropdownComponent/index.tsx    | 22 +++++++++++++------
 .../components/textAreaComponent/index.tsx    |  8 ++++++-
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index c7479abfb..841240917 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -34,7 +34,15 @@ export default function Dropdown({
                     : "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
                 }
               >
-                <span className="block truncate w-full">{internalValue}</span>
+                <span
+                  className={
+                    editNode
+                      ? "block truncate w-full dark:text-white"
+                      : "block truncate w-full dark:text-black"
+                  }
+                >
+                  {internalValue}
+                </span>
                 <span
                   className={
                     editNode
@@ -59,8 +67,8 @@ export default function Dropdown({
                 <Listbox.Options
                   className={
                     editNode
-                      ? "arrow-hide absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
-                      : "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+                      ? "arrow-hide absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm w-[215px]"
+                      : "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm "
                   }
                 >
                   {options.map((option, id) => (
@@ -69,10 +77,10 @@ export default function Dropdown({
                       className={({ active }) =>
                         classNames(
                           active && !editNode
-                            ? "text-white bg-indigo-600 dark:bg-indigo-500"
+                            ? "text-white bg-indigo-600 dark:bg-indigo-500 dark:text-black"
                             : "text-gray-900",
                           active && editNode
-                            ? "text-white bg-gray-400 dark:bg-gray-500"
+                            ? "text-white bg-gray-400 dark:bg-gray-500 dark:text-black"
                             : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
@@ -86,7 +94,7 @@ export default function Dropdown({
                           <span
                             className={classNames(
                               selected ? "font-semibold" : "font-normal",
-                              "block truncate"
+                              "block truncate "
                             )}
                           >
                             {option}
@@ -96,7 +104,7 @@ export default function Dropdown({
                             <span
                               className={classNames(
                                 editNode ? "text-gray-600" : "text-indigo-600",
-                                active ? "text-white" : "",
+                                active ? "text-white dark:text-black" : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index ce59768a6..726431880 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -12,13 +12,19 @@ export default function TextAreaComponent({
   editNode = false,
 }: TextAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
-  const { openPopUp } = useContext(PopUpContext);
+  const { openPopUp, closePopUp } = useContext(PopUpContext);
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
       onChange("");
     }
   }, [disabled, onChange]);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [closePopUp]);
+
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
       <div className="w-full flex items-center gap-3">

From a5d76834421a8006795ac621a42d23d0dbd0ddcb Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 12 Jun 2023 19:04:59 -0300
Subject: [PATCH 06/17] changing width dropdown

---
 .../components/parameterComponent/index.tsx        | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 09c80d309..84d806075 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -217,11 +217,15 @@ export default function ParameterComponent({
         ) : left === true &&
           type === "str" &&
           data.node.template[name].options ? (
-          <Dropdown
-            options={data.node.template[name].options}
-            onSelect={(newValue) => (data.node.template[name].value = newValue)}
-            value={data.node.template[name].value ?? "Choose an option"}
-          ></Dropdown>
+          <div className="w-full">
+            <Dropdown
+              options={data.node.template[name].options}
+              onSelect={(newValue) =>
+                (data.node.template[name].value = newValue)
+              }
+              value={data.node.template[name].value ?? "Choose an option"}
+            ></Dropdown>
+          </div>
         ) : left === true && type === "code" ? (
           <CodeAreaComponent
             disabled={disabled}

From 7dfffd33e76d83bfec4e3936758f2f0a4fb46ab8 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 12 Jun 2023 19:12:24 -0300
Subject: [PATCH 07/17] dark mode dropdown

---
 .../src/components/dropdownComponent/index.tsx     | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 841240917..8a5feb5cb 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -31,18 +31,10 @@ export default function Dropdown({
                 className={
                   editNode
                     ? "relative pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                    : "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm"
+                    : "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md"
                 }
               >
-                <span
-                  className={
-                    editNode
-                      ? "block truncate w-full dark:text-white"
-                      : "block truncate w-full dark:text-black"
-                  }
-                >
-                  {internalValue}
-                </span>
+                <span className="block truncate w-full">{internalValue}</span>
                 <span
                   className={
                     editNode
@@ -80,7 +72,7 @@ export default function Dropdown({
                             ? "text-white bg-indigo-600 dark:bg-indigo-500 dark:text-black"
                             : "text-gray-900",
                           active && editNode
-                            ? "text-white bg-gray-400 dark:bg-gray-500 dark:text-black"
+                            ? "text-white bg-gray-400 dark:bg-gray-500 dark:text-gray-500"
                             : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"

From ab0209d3994d843b4664e8d106113716a5df8910 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 13 Jun 2023 11:22:43 -0300
Subject: [PATCH 08/17] Import shad dialog, CSS in general

---
 .../components/parameterComponent/index.tsx   |  40 +--
 .../components/dropdownComponent/index.tsx    |  16 +-
 .../src/components/floatComponent/index.tsx   |   2 +-
 .../src/components/inputComponent/index.tsx   |   4 +-
 .../src/components/intComponent/index.tsx     |   2 +-
 src/frontend/src/constants.tsx                |   6 +
 src/frontend/src/modals/importModal/index.tsx | 305 ++++++++----------
 .../extraSidebarComponent/index.tsx           |   2 +-
 8 files changed, 180 insertions(+), 197 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 84d806075..6e3a76415 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -205,15 +205,17 @@ export default function ParameterComponent({
             />
           </div>
         ) : left === true && type === "float" ? (
-          <FloatComponent
-            disabled={disabled}
-            disableCopyPaste={true}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t) => {
-              data.node.template[name].value = t;
-              save();
-            }}
-          />
+          <div className="mt-2 w-full">
+            <FloatComponent
+              disabled={disabled}
+              disableCopyPaste={true}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+                save();
+              }}
+            />
+          </div>
         ) : left === true &&
           type === "str" &&
           data.node.template[name].options ? (
@@ -250,15 +252,17 @@ export default function ParameterComponent({
             }}
           ></InputFileComponent>
         ) : left === true && type === "int" ? (
-          <IntComponent
-            disabled={disabled}
-            disableCopyPaste={true}
-            value={data.node.template[name].value ?? ""}
-            onChange={(t) => {
-              data.node.template[name].value = t;
-              save();
-            }}
-          />
+          <div className="mt-2 w-full">
+            <IntComponent
+              disabled={disabled}
+              disableCopyPaste={true}
+              value={data.node.template[name].value ?? ""}
+              onChange={(t) => {
+                data.node.template[name].value = t;
+                save();
+              }}
+            />
+          </div>
         ) : left === true && type === "prompt" ? (
           <PromptAreaComponent
             disabled={disabled}
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 8a5feb5cb..753b3ce24 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -31,7 +31,7 @@ export default function Dropdown({
                 className={
                   editNode
                     ? "relative pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                    : "relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md"
+                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left focus:ring-offset-2 focus:ring-offset-slate-400 dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
                 }
               >
                 <span className="block truncate w-full">{internalValue}</span>
@@ -68,11 +68,8 @@ export default function Dropdown({
                       key={id}
                       className={({ active }) =>
                         classNames(
-                          active && !editNode
-                            ? "text-white bg-indigo-600 dark:bg-indigo-500 dark:text-black"
-                            : "text-gray-900",
-                          active && editNode
-                            ? "text-white bg-gray-400 dark:bg-gray-500 dark:text-gray-500"
+                          active
+                            ? "text-white bg-slate-400 dark:bg-white dark:text-gray-500"
                             : "",
                           editNode
                             ? "relative cursor-default select-none py-0.5 pl-3 pr-12 dark:text-gray-300 dark:bg-gray-800"
@@ -95,13 +92,16 @@ export default function Dropdown({
                           {selected ? (
                             <span
                               className={classNames(
-                                editNode ? "text-gray-600" : "text-indigo-600",
                                 active ? "text-white dark:text-black" : "",
                                 "absolute inset-y-0 right-0 flex items-center pr-4"
                               )}
                             >
                               <CheckIcon
-                                className="h-5 w-5"
+                                className={
+                                  active
+                                    ? "h-5 w-5 dark:text-black text-black"
+                                    : "h-5 w-5 dark:text-white text-black"
+                                }
                                 aria-hidden="true"
                               />
                             </span>
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index a7cf9b2e4..b27317022 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -36,7 +36,7 @@ export default function FloatComponent({
         className={
           editNode
             ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index b7b245c75..4db9cc1bd 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -45,12 +45,12 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm  sm:text-sm",
+          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm",
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
             ? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
-            : "focus:border-indigo-500 focus:ring-indigo-500",
+            : "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index e643eb5e9..38bf317b9 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -57,7 +57,7 @@ export default function IntComponent({
         className={
           editNode
             ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 49b6ea194..93d9090b3 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -37,3 +37,9 @@ export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
  * @constant
  */
 export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
+
+/**
+ * The base text for subtitle of Import Dialog
+ * @constant
+ */
+export const IMPORT_DIALOG_SUBTITLE = "Import your models or pick one example.";
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index d0808c541..f6d82e852 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -1,4 +1,3 @@
-import { Dialog, Transition } from "@headlessui/react";
 import {
   XMarkIcon,
   ArrowDownTrayIcon,
@@ -6,6 +5,7 @@ import {
   ComputerDesktopIcon,
   ArrowUpTrayIcon,
   ArrowLeftIcon,
+  CommandLineIcon,
 } from "@heroicons/react/24/outline";
 import { Fragment, useContext, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
@@ -17,6 +17,17 @@ import { alertContext } from "../../contexts/alertContext";
 import LoadingComponent from "../../components/loadingComponent";
 import { FlowType } from "../../types/flow";
 import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Button } from "../../components/ui/button";
+import { IMPORT_DIALOG_SUBTITLE } from "../../constants";
 
 export default function ImportModal() {
   const [open, setOpen] = useState(true);
@@ -52,181 +63,143 @@ export default function ImportModal() {
   }
 
   return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
+    <Dialog open={true} onOpenChange={setModalOpen}>
+      <DialogTrigger></DialogTrigger>
+      <DialogContent
+        className={classNames(
+          showExamples
+            ? "lg:max-w-[650px] h-[600px]"
+            : "lg:max-w-[650px] h-[450px]"
+        )}
       >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-gray-500 dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[776px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
+        <DialogHeader>
+          <DialogTitle className="flex items-center">
+            {showExamples && (
+              <>
+                <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
+                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
                     onClick={() => {
-                      setModalOpen(false);
+                      setShowExamples(false);
                     }}
                   >
                     <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                    <ArrowLeftIcon
+                      className="h-6 w-6 text-gray-800 ml-1"
+                      aria-hidden="true"
+                    />
                   </button>
                 </div>
-                {showExamples && (
-                  <>
-                    <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
-                      <button
-                        type="button"
-                        className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                        onClick={() => {
-                          setShowExamples(false);
-                        }}
-                      >
-                        <span className="sr-only">Close</span>
-                        <ArrowLeftIcon className="h-6 w-6" aria-hidden="true" />
-                      </button>
-                    </div>
-                  </>
-                )}
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-                      <ArrowUpTrayIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        {showExamples ? "Select an example" : "Import"}
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div
-                    className={classNames(
-                      "h-full w-full bg-gray-200 dark:bg-gray-900 gap-4 overflow-y-auto scrollbar-hide",
-                      showExamples && !loadingExamples
-                        ? "flex flex-row start justify-start items-start p-9 flex-wrap overflow-auto"
-                        : "flex flex-row justify-center items-center p-4"
-                    )}
-                  >
-                    {!showExamples && (
-                      <div className="flex h-full w-full justify-evenly items-center">
-                        <ButtonBox
-                          size="big"
-                          bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-                          description="Prebuilt Examples"
-                          icon={
-                            <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
-                          }
-                          onClick={() => {
-                            setShowExamples(true);
-                            handleExamples();
-                          }}
-                          textColor="text-emerald-500 dark:text-emerald-500/75"
-                          title="Examples"
-                        ></ButtonBox>
-                        <ButtonBox
-                          size="big"
-                          bgColor="bg-blue-500 dark:bg-blue-500/75"
-                          description="Import from Local"
-                          icon={
-                            <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
-                          }
-                          onClick={() => {
-                            uploadFlow();
-                            setModalOpen(false);
-                          }}
-                          textColor="text-blue-500 dark:text-blue-500/75"
-                          title="Local File"
-                        ></ButtonBox>
-                      </div>
-                    )}
-                    {showExamples && loadingExamples && (
-                      <div className="flex align-middle justify-center items-center">
-                        <LoadingComponent remSize={30} />
-                      </div>
-                    )}
-                    {showExamples &&
-                      !loadingExamples &&
-                      examples.map((example, index) => {
-                        return (
-                          <div key={index}>
-                            {" "}
-                            <ButtonBox
-                              size="small"
-                              bgColor="bg-emerald-500 dark:bg-emerald-500/75"
-                              description={
-                                example.description ?? "Prebuilt Examples"
-                              }
-                              icon={
-                                <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
-                              }
-                              onClick={() => {
-                                addFlow(example);
-                                setModalOpen(false);
-                              }}
-                              textColor="text-emerald-500 dark:text-emerald-500/75"
-                              title={example.name}
-                            ></ButtonBox>
-                          </div>
-                        );
-                      })}
-                  </div>
-                  <div className="bg-white dark:bg-gray-800 w-full h-20 flex items-center justify-center">
-                    <a
-                      href="https://github.com/logspace-ai/langflow_examples"
-                      target="_blank"
-                      className="flex items-center justify-center text-gray-600 dark:text-gray-300"
-                      rel="noreferrer"
-                    >
-                      <svg
-                        width="24"
-                        viewBox="0 0 98 96"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          fill-rule="evenodd"
-                          clip-rule="evenodd"
-                          d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                          fill="currentColor"
-                        />
-                      </svg>
-                      <span className="ml-2 ">LangFlow Examples</span>
-                    </a>
-                  </div>
+              </>
+            )}
+
+            <span className={classNames(showExamples ? "pl-8 pr-2" : "pr-2")}>
+              {showExamples ? "Select an example" : "Import"}
+            </span>
+            <ArrowUpTrayIcon
+              className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
+              aria-hidden="true"
+            />
+          </DialogTitle>
+          <DialogDescription>{IMPORT_DIALOG_SUBTITLE}</DialogDescription>
+        </DialogHeader>
+
+        <div
+          className={classNames(
+            "h-full w-full dark:bg-gray-900 overflow-y-auto scrollbar-hide",
+            showExamples && !loadingExamples
+              ? "flex flex-row start justify-center items-start flex-wrap overflow-auto mx-auto"
+              : "flex flex-row justify-center items-center"
+          )}
+        >
+          {!showExamples && (
+            <div className="flex h-full w-full justify-evenly items-center">
+              <ButtonBox
+                size="big"
+                bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                description="Prebuilt Examples"
+                icon={
+                  <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
+                }
+                onClick={() => {
+                  setShowExamples(true);
+                  handleExamples();
+                }}
+                textColor="text-emerald-500 dark:text-emerald-500/75"
+                title="Examples"
+              ></ButtonBox>
+              <ButtonBox
+                size="big"
+                bgColor="bg-blue-500 dark:bg-blue-500/75"
+                description="Import from Local"
+                icon={
+                  <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
+                }
+                onClick={() => {
+                  uploadFlow();
+                  setModalOpen(false);
+                }}
+                textColor="text-blue-500 dark:text-blue-500/75"
+                title="Local File"
+              ></ButtonBox>
+            </div>
+          )}
+          {showExamples && loadingExamples && (
+            <div className="flex align-middle justify-center items-center">
+              <LoadingComponent remSize={30} />
+            </div>
+          )}
+          {showExamples &&
+            !loadingExamples &&
+            examples.map((example, index) => {
+              return (
+                <div key={example.name} className="m-2">
+                  {" "}
+                  <ButtonBox
+                    size="small"
+                    bgColor="bg-emerald-500 dark:bg-emerald-500/75"
+                    description={example.description ?? "Prebuilt Examples"}
+                    icon={
+                      <DocumentDuplicateIcon className="h-6 w-6 flex-shrink-0" />
+                    }
+                    onClick={() => {
+                      addFlow(example);
+                      setModalOpen(false);
+                    }}
+                    textColor="text-emerald-500 dark:text-emerald-500/75"
+                    title={example.name}
+                  ></ButtonBox>
                 </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
+              );
+            })}
         </div>
-      </Dialog>
-    </Transition.Root>
+
+        <DialogFooter>
+          <div className="bg-white dark:bg-gray-800 w-full flex items-center justify-center">
+            <a
+              href="https://github.com/logspace-ai/langflow_examples"
+              target="_blank"
+              className="flex items-center justify-center text-gray-600 dark:text-gray-300"
+              rel="noreferrer"
+            >
+              <svg
+                width="24"
+                viewBox="0 0 98 96"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span className="ml-2 ">LangFlow Examples</span>
+            </a>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index f0fe333d5..17eae19f2 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -56,7 +56,7 @@ export default function ExtraSidebar() {
           name="search"
           id="search"
           placeholder="Search nodes"
-          className="dark:text-white focus:outline-none block w-full rounded-md py-1.5 ps-3 pr-9 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 dark:ring-0 dark:bg-[#2d3747] dark:focus:outline-none"
+          className="border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 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"
           onChange={(e) => {
             handleSearchInput(e.target.value);
             setSearch(e.target.value);

From 9ccd7e4fb3b15f1a13bfa59907b7be04fc690fa1 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 13 Jun 2023 21:03:25 -0300
Subject: [PATCH 09/17] adding background muted and subtitle texts changes

---
 .../components/codeAreaComponent/index.tsx    |  2 +-
 .../src/components/floatComponent/index.tsx   | 19 +++++++++++++++++--
 .../src/components/inputComponent/index.tsx   | 16 ++++++++++++----
 .../components/inputListComponent/index.tsx   |  3 ++-
 .../src/components/intComponent/index.tsx     | 12 ++++++++++--
 .../components/textAreaComponent/index.tsx    |  2 +-
 src/frontend/src/constants.tsx                | 17 ++++++++++-------
 src/frontend/src/modals/ApiModal/index.tsx    |  2 +-
 .../src/modals/EditNodeModal/index.tsx        |  6 +++---
 .../src/modals/codeAreaModal/index.tsx        |  2 +-
 src/frontend/src/modals/exportModal/index.tsx |  2 +-
 .../src/modals/genericModal/index.tsx         |  2 +-
 src/frontend/src/modals/importModal/index.tsx |  8 ++++----
 .../extraSidebarComponent/index.tsx           |  2 +-
 src/frontend/src/utils.ts                     |  2 +-
 15 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index b1c907998..6f4af1635 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -45,7 +45,7 @@ export default function CodeAreaComponent({
                 (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "Text empty"}
+          {myValue !== "" ? myValue : "Type something..."}
         </span>
         <button
           onClick={() => {
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index b27317022..30441443e 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -12,6 +12,10 @@ export default function FloatComponent({
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
 
+  const step = 0.1;
+  const min = 0;
+  const max = 1;
+
   useEffect(() => {
     if (disabled) {
       setMyValue("");
@@ -32,11 +36,22 @@ export default function FloatComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         type="number"
+        step={step}
+        min={min}
+        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (e.target.value < min.toString()) {
+            e.target.value = min.toString();
+          }
+          if (e.target.value > max.toString()) {
+            e.target.value = max.toString();
+          }
+        }}
+        max={max}
         value={myValue}
         className={
           editNode
-            ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 4db9cc1bd..8c3263ead 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -45,11 +45,11 @@ export default function InputComponent({
           if (disableCopyPaste) setDisableCopyPaste(false);
         }}
         className={classNames(
-          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm",
+          "block w-full pr-12 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:placeholder-transparent",
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
+            ? "border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
             : "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           password && editNode ? "pr-8" : "pr-3"
         )}
@@ -78,7 +78,11 @@ export default function InputComponent({
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="w-5 h-5"
+                className={classNames(
+                  editNode
+                    ? "w-5 h-5 absolute bottom-0.5 right-2"
+                    : "w-5 h-5 absolute bottom-2 right-3"
+                )}
               >
                 <path
                   strokeLinecap="round"
@@ -93,7 +97,11 @@ export default function InputComponent({
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-                className="w-5 h-5"
+                className={classNames(
+                  editNode
+                    ? "w-5 h-5 absolute bottom-0.5 right-2"
+                    : "w-5 h-5 absolute bottom-2 right-3"
+                )}
               >
                 <path
                   strokeLinecap="round"
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 5f5e1f04e..0eadcd78d 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -34,7 +34,8 @@ export default function InputListComponent({
               editNode
                 ? "h-7 truncate cursor-pointer text-center placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
                 : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-                  (disabled ? " bg-gray-200" : "")
+                  (disabled ? " bg-gray-200" : "") +
+                  "focus:placeholder-transparent"
             }
             placeholder="Type something..."
             onChange={(e) => {
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 38bf317b9..dd2ad5e70 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -12,6 +12,7 @@ export default function IntComponent({
 }: FloatComponentType) {
   const [myValue, setMyValue] = useState(value ?? "");
   const { setDisableCopyPaste } = useContext(TabsContext);
+  const min = 0;
 
   useEffect(() => {
     if (disabled) {
@@ -53,11 +54,18 @@ export default function IntComponent({
           }
         }}
         type="number"
+        step="1"
+        min={min}
+        onInput={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (e.target.value < min.toString()) {
+            e.target.value = min.toString();
+          }
+        }}
         value={myValue}
         className={
           editNode
-            ? "text-center arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "block w-full form-input dark:bg-gray-900 arrow-hide dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 726431880..0b090d294 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -50,7 +50,7 @@ export default function TextAreaComponent({
                 (disabled ? " bg-gray-200" : "")
           }
         >
-          {myValue !== "" ? myValue : "Text empty"}
+          {myValue !== "" ? myValue : "Type something..."}
         </span>
         <button
           onClick={() => {
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index 93d9090b3..d3cd3464f 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -4,42 +4,45 @@
  * The base text for subtitle of Export Dialog (Toolbar)
  * @constant
  */
-export const EXPORT_DIALOG_SUBTITLE = "Export your models.";
+export const EXPORT_DIALOG_SUBTITLE = "Export flow as JSON file.";
 
 /**
  * The base text for subtitle of Code Dialog (Toolbar)
  * @constant
  */
 export const CODE_DIALOG_SUBTITLE =
-  "Export your flow to use it with this code.";
+  "Generate the code to integrate your flow into an external application.";
 
 /**
  * The base text for subtitle of Edit Node Dialog
  * @constant
  */
 export const EDIT_DIALOG_SUBTITLE =
-  "Make configurations changes to your nodes. Click save when you're done.";
+  "Adjust the configurations of your component. Define parameter visibility for the canvas view. Remember to save once you’re finished.";
 
 /**
  * The base text for subtitle of Code Dialog
  * @constant
  */
-export const CODE_PROMPT_DIALOG_SUBTITLE = "Edit you python code.";
+export const CODE_PROMPT_DIALOG_SUBTITLE =
+  "Edit your Python code. This code snippet accepts module import and a single function definition. Make sure that your function returns a string.";
 
 /**
  * The base text for subtitle of Prompt Dialog
  * @constant
  */
-export const PROMPT_DIALOG_SUBTITLE = "Edit you prompt.";
+export const PROMPT_DIALOG_SUBTITLE =
+  "Create your prompt. Prompts can help guide the behavior of a Language Model.";
 
 /**
  * The base text for subtitle of Text Dialog
  * @constant
  */
-export const TEXT_DIALOG_SUBTITLE = "Edit you text.";
+export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
 
 /**
  * The base text for subtitle of Import Dialog
  * @constant
  */
-export const IMPORT_DIALOG_SUBTITLE = "Import your models or pick one example.";
+export const IMPORT_DIALOG_SUBTITLE =
+  "Upload a JSON file or select from the available community examples.";
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 00cec143c..6198c2b33 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -90,7 +90,7 @@ flow("Hey, have you heard of LangFlow?")`;
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[550px]">
+      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[550px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index ba12f6432..c236571f8 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -92,7 +92,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px]">
+      <DialogContent className="lg:max-w-[700px] bg-muted ">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Node</span>
@@ -114,7 +114,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           </DialogDescription>
         </DialogHeader>
 
-        <div className="flex w-full h-fit max-h-[415px]">
+        <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
               "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
@@ -151,7 +151,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                       )
                       .map((n, i) => (
                         <TableRow key={i} className="h-8">
-                          <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300">
+                          <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300 text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
                               : data.node.template[n].display_name}
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 405187647..4b1d32b1b 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -47,7 +47,7 @@ export default function CodeAreaModal({
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] h-[500px]">
+      <DialogContent className="lg:max-w-[700px] h-[500px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 4532afe33..c1c334560 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -44,7 +44,7 @@ export default function ExportModal() {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[600px] h-[420px]">
+      <DialogContent className="lg:max-w-[600px] h-[420px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 2b1b4c7d6..feeac1460 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -50,7 +50,7 @@ export default function GenericModal({
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px]">
+      <DialogContent className="lg:max-w-[700px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index f6d82e852..36da96f0a 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -68,8 +68,8 @@ export default function ImportModal() {
       <DialogContent
         className={classNames(
           showExamples
-            ? "lg:max-w-[650px] h-[600px]"
-            : "lg:max-w-[650px] h-[450px]"
+            ? "lg:max-w-[650px] h-[600px] bg-muted"
+            : "lg:max-w-[650px] h-[450px] bg-muted"
         )}
       >
         <DialogHeader>
@@ -86,7 +86,7 @@ export default function ImportModal() {
                   >
                     <span className="sr-only">Close</span>
                     <ArrowLeftIcon
-                      className="h-6 w-6 text-gray-800 ml-1"
+                      className="h-6 w-6 text-gray-800 ml-1 dark:text-white"
                       aria-hidden="true"
                     />
                   </button>
@@ -176,7 +176,7 @@ export default function ImportModal() {
         </div>
 
         <DialogFooter>
-          <div className="bg-white dark:bg-gray-800 w-full flex items-center justify-center">
+          <div className="bg-muted w-full flex items-center justify-center mt-2">
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 17eae19f2..218489454 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -50,7 +50,7 @@ export default function ExtraSidebar() {
 
   return (
     <>
-      <div className="relative mt-2 flex items-center mb-2 mx-2">
+      <div className="relative mt-2 flex items-center mb-2 mx-auto">
         <input
           type="text"
           name="search"
diff --git a/src/frontend/src/utils.ts b/src/frontend/src/utils.ts
index 920c1b296..3391a65cd 100644
--- a/src/frontend/src/utils.ts
+++ b/src/frontend/src/utils.ts
@@ -59,7 +59,7 @@ export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
 }
 
-export const limitScrollFieldsModal = 7;
+export const limitScrollFieldsModal = 10;
 
 export enum TypeModal {
   TEXT = 1,

From fdaffc573431ca71b20b4d17e361b428e1f05864 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 13 Jun 2023 21:08:00 -0300
Subject: [PATCH 10/17] changing python code heigth

---
 src/frontend/src/modals/ApiModal/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 6198c2b33..52a0adb55 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -90,7 +90,7 @@ flow("Hey, have you heard of LangFlow?")`;
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[550px] bg-muted">
+      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[570px] bg-muted">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
@@ -141,7 +141,7 @@ flow("Hey, have you heard of LangFlow?")`;
               </div>
             </div>
             <SyntaxHighlighter
-              className="h-[370px] w-full"
+              className="h-[350px] w-full"
               language={tabs[activeTab].mode}
               style={oneDark}
               customStyle={{ margin: 0 }}

From 72e290c8b76089e85c11ac78a1d3498e9a642d6d Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 00:01:55 -0300
Subject: [PATCH 11/17] UI adjusts

---
 .../src/components/ExtraSidebarComponent/index.tsx |  5 +----
 .../src/components/codeAreaComponent/index.tsx     |  2 +-
 .../src/components/floatComponent/index.tsx        |  4 ++--
 .../src/components/inputComponent/index.tsx        |  4 ++--
 .../src/components/inputListComponent/index.tsx    | 14 ++++++++++----
 src/frontend/src/components/intComponent/index.tsx |  2 +-
 .../src/components/loadingComponent/index.tsx      |  2 +-
 .../src/components/promptComponent/index.tsx       |  2 +-
 .../src/components/textAreaComponent/index.tsx     | 10 ++++++++--
 src/frontend/src/constants.tsx                     |  7 +++++++
 src/frontend/src/modals/ApiModal/index.tsx         | 13 ++++++-------
 src/frontend/src/modals/EditNodeModal/index.tsx    | 14 +++++++-------
 src/frontend/src/modals/codeAreaModal/index.tsx    |  4 ++--
 src/frontend/src/modals/exportModal/index.tsx      |  2 +-
 src/frontend/src/modals/genericModal/index.tsx     |  2 +-
 src/frontend/src/modals/importModal/index.tsx      |  6 +++---
 16 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index b06a58d9c..3208cc1f0 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -21,10 +21,7 @@ export default function ExtraSidebar() {
           isStackedOpen ? "w-52" : "w-0 "
         } flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
       >
-        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
-          <div className="flex px-4 justify-between align-middle w-full">
-            <span className="text-gray-900 dark:text-white py-[2px] font-medium "></span>
-          </div>
+        <div className="w-52 dark:bg-gray-800 border dark:border-gray-700  overflow-y-auto scrollbar-hide h-full flex flex-col items-start bg-white">
           <div className="flex flex-grow flex-col w-full">
             {extraNavigation.options ? (
               <div className="p-4">
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 6f4af1635..e1c8d5584 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -40,7 +40,7 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 30441443e..cf80cef7d 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -50,8 +50,8 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 8c3263ead..55ae977a7 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -49,8 +49,8 @@ export default function InputComponent({
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
-            : "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
+            : "ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index 0eadcd78d..ea4c27134 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -22,7 +22,7 @@ export default function InputListComponent({
     <div
       className={
         (disabled ? "pointer-events-none cursor-not-allowed" : "") +
-        "flex flex-col gap-3"
+        "flex flex-col gap-3 py-2"
       }
     >
       {inputList.map((i, idx) => (
@@ -32,8 +32,8 @@ export default function InputListComponent({
             value={i}
             className={
               editNode
-                ? "h-7 truncate cursor-pointer text-center placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
                   (disabled ? " bg-gray-200" : "") +
                   "focus:placeholder-transparent"
             }
@@ -58,7 +58,13 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <PlusIcon className="w-4 h-4 hover:text-blue-600" />
+              <PlusIcon
+                className={
+                  editNode
+                    ? "w-4 h-4 hover:text-black"
+                    : "w-4 h-4 hover:text-blue-600"
+                }
+              />
             </button>
           ) : (
             <button
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index dd2ad5e70..818637db9 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -64,7 +64,7 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
             : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 42ad18c1e..640482950 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -7,7 +7,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
     <div role="status" className="w-min m-auto">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
+        className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-gray-600 fill-blue-600`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index bbe9c3bf8..3ab65cf31 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -45,7 +45,7 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 cursor-pointer truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 0b090d294..f81c00d4b 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -27,7 +27,13 @@ export default function TextAreaComponent({
 
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
-      <div className="w-full flex items-center gap-3">
+      <div
+        className={
+          editNode
+            ? "w-full flex items-center"
+            : "w-full flex items-center gap-3"
+        }
+      >
         <span
           onClick={() => {
             openPopUp(
@@ -45,7 +51,7 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "h-7 truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
               : "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index d3cd3464f..cf0f32087 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -46,3 +46,10 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
  */
 export const IMPORT_DIALOG_SUBTITLE =
   "Upload a JSON file or select from the available community examples.";
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const EXPORT_CODE_DIALOG =
+  "Generate the code to integrate your flow into an external application.";
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 52a0adb55..d19418244 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -24,6 +24,7 @@ import {
   DialogTrigger,
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
+import { EXPORT_CODE_DIALOG } from "../../constants";
 
 export default function ApiModal({ flowName }) {
   const [open, setOpen] = useState(true);
@@ -90,7 +91,7 @@ flow("Hey, have you heard of LangFlow?")`;
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[570px] bg-muted">
+      <DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[580px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Code</span>
@@ -99,9 +100,7 @@ flow("Hey, have you heard of LangFlow?")`;
               aria-hidden="true"
             />
           </DialogTitle>
-          <DialogDescription>
-            Export your flow to use it with this code.
-          </DialogDescription>
+          <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
         </DialogHeader>
 
         <div className="flex flex-col h-full w-full ">
@@ -113,18 +112,18 @@ flow("Hey, have you heard of LangFlow?")`;
                   setActiveTab(index);
                 }}
                 className={
-                  "p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
+                  "p-1.5 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
                   (activeTab === index
                     ? " bg-white dark:bg-gray-800"
                     : "bg-gray-100 dark:bg-gray-900")
                 }
               >
                 {tab.name}
-                <img src={tab.image} className="w-6" />
+                <img src={tab.image} className="w-[23px]" />
               </button>
             ))}
           </div>
-          <div className="overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
+          <div className=" overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg border-muted border-[1px] bg-gray-50 dark:bg-gray-800">
             <div className="items-center mb-2">
               <div className="float-right">
                 <button
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index c236571f8..1977d13f7 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -92,7 +92,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] bg-muted ">
+      <DialogContent className="lg:max-w-[700px] ">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Node</span>
@@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           </DialogTitle>
           <DialogDescription>
             {EDIT_DIALOG_SUBTITLE}
-            <div className="flex pt-3">
+            <div className="flex pt-4">
               <VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
                 &nbsp;
               </VariableIcon>
@@ -117,7 +117,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
         <div className="flex w-full max-h-[350px] h-fit">
           <div
             className={classNames(
-              "w-full rounded-lg bg-white dark:bg-gray-800 shadow",
+              "w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200",
               nodeLength > limitScrollFieldsModal
                 ? "overflow-scroll overflow-x-hidden custom-scroll"
                 : "overflow-hidden"
@@ -125,9 +125,9 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           >
             {nodeLength > 0 && (
               <div className="flex flex-col gap-5 h-fit">
-                <Table className="table-fixed">
-                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
-                    <TableRow>
+                <Table className="table-fixed bg-gray-50 outline-1">
+                  <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
+                    <TableRow className="dark:border-b-muted">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
                       <TableHead className="p-0 h-7 text-center">
                         VALUE
@@ -150,7 +150,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
                             data.node.template[t].type === "int")
                       )
                       .map((n, i) => (
-                        <TableRow key={i} className="h-8">
+                        <TableRow key={i} className="h-10 dark:border-b-muted">
                           <TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300 text-sm">
                             {data.node.template[n].name
                               ? data.node.template[n].name
diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx
index 4b1d32b1b..aa51c50f8 100644
--- a/src/frontend/src/modals/codeAreaModal/index.tsx
+++ b/src/frontend/src/modals/codeAreaModal/index.tsx
@@ -47,7 +47,7 @@ export default function CodeAreaModal({
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] h-[500px] bg-muted">
+      <DialogContent className="lg:max-w-[700px] h-[500px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Edit Code</span>
@@ -73,7 +73,7 @@ export default function CodeAreaModal({
             onChange={(value) => {
               setCode(value);
             }}
-            className="w-full rounded-lg h-[300px] custom-scroll"
+            className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
           />
         </div>
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index c1c334560..67b74719b 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -44,7 +44,7 @@ export default function ExportModal() {
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger asChild></DialogTrigger>
-      <DialogContent className="lg:max-w-[600px] h-[420px] bg-muted">
+      <DialogContent className="lg:max-w-[600px] h-[420px] ">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">Export</span>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index feeac1460..2b1b4c7d6 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -50,7 +50,7 @@ export default function GenericModal({
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
-      <DialogContent className="lg:max-w-[700px] bg-muted">
+      <DialogContent className="lg:max-w-[700px]">
         <DialogHeader>
           <DialogTitle className="flex items-center">
             <span className="pr-2">{myModalTitle}</span>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 36da96f0a..5b941d515 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -68,8 +68,8 @@ export default function ImportModal() {
       <DialogContent
         className={classNames(
           showExamples
-            ? "lg:max-w-[650px] h-[600px] bg-muted"
-            : "lg:max-w-[650px] h-[450px] bg-muted"
+            ? "lg:max-w-[650px] h-[600px]"
+            : "lg:max-w-[650px] h-[450px]"
         )}
       >
         <DialogHeader>
@@ -176,7 +176,7 @@ export default function ImportModal() {
         </div>
 
         <DialogFooter>
-          <div className="bg-muted w-full flex items-center justify-center mt-2">
+          <div className="w-full flex items-center justify-center mt-2">
             <a
               href="https://github.com/logspace-ai/langflow_examples"
               target="_blank"

From ac462872588c3c3aee7a0fa9e40db4d499677136 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 00:06:26 -0300
Subject: [PATCH 12/17] adjust border on table

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

diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index d19418244..51d913bad 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -123,7 +123,7 @@ flow("Hey, have you heard of LangFlow?")`;
               </button>
             ))}
           </div>
-          <div className=" overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg border-muted border-[1px] bg-gray-50 dark:bg-gray-800">
+          <div className=" overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg border-gray-200 border-[1px] bg-gray-50 dark:bg-gray-800">
             <div className="items-center mb-2">
               <div className="float-right">
                 <button

From 278abdfee8c035bbcef542d96d00ae8855d08ef8 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 01:16:15 -0300
Subject: [PATCH 13/17] UI improvements (colors)

---
 src/frontend/src/App.tsx                           |  2 +-
 .../components/parameterComponent/index.tsx        |  2 +-
 src/frontend/src/CustomNodes/GenericNode/index.tsx |  8 ++++----
 .../src/components/ExtraSidebarComponent/index.tsx | 12 ++++++------
 .../src/components/dropdownComponent/index.tsx     |  2 +-
 .../src/components/floatComponent/index.tsx        |  2 +-
 .../src/components/inputComponent/index.tsx        |  2 +-
 src/frontend/src/components/intComponent/index.tsx |  2 +-
 .../src/components/textAreaComponent/index.tsx     |  2 +-
 .../src/components/toggleComponent/index.tsx       |  2 +-
 src/frontend/src/index.css                         |  6 +++---
 src/frontend/src/modals/ApiModal/index.tsx         |  4 ++--
 src/frontend/src/modals/EditNodeModal/index.tsx    |  2 +-
 src/frontend/src/modals/NodeModal/index.tsx        |  2 +-
 .../src/modals/chatModal/chatInput/index.tsx       |  2 +-
 .../src/modals/chatModal/chatMessage/index.tsx     |  2 +-
 .../src/modals/chatModal/fileComponent/index.tsx   |  4 ++--
 src/frontend/src/modals/chatModal/index.tsx        |  2 +-
 src/frontend/src/modals/importModal/index.tsx      |  2 +-
 src/frontend/src/modals/promptModal/index.tsx      |  2 +-
 src/frontend/src/modals/textAreaModal/index.tsx    |  2 +-
 .../components/DisclosureComponent/index.tsx       |  2 +-
 .../components/extraSidebarComponent/index.tsx     |  2 +-
 .../components/nodeToolbarComponent/index.tsx      | 14 +++++++-------
 .../FlowPage/components/tabComponent/index.tsx     |  2 +-
 .../components/tabsManagerComponent/index.tsx      |  2 +-
 26 files changed, 44 insertions(+), 44 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index f883ad2ef..70fcdc2a5 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -170,7 +170,7 @@ export default function App() {
       <a
         target={"_blank"}
         href="https://logspace.ai/"
-        className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-gray-800 px-2 text-center font-sans text-xs tracking-wide text-gray-300 transition-all duration-500 ease-in-out hover:h-12 dark:bg-gray-100 dark:text-gray-800"
+        className="absolute left-7 bottom-2 flex h-6 cursor-pointer flex-col items-center justify-start overflow-hidden rounded-lg bg-gray-800 px-2 text-center font-sans text-xs tracking-wide text-gray-300 transition-all duration-500 ease-in-out hover:h-12 dark:bg-muted dark:text-gray-800"
       >
         {version && <div className="mt-1">⛓️ LangFlow v{version}</div>}
         <div className={version ? "mt-2" : "mt-1"}>Created by Logspace</div>
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 6e3a76415..9ec14470f 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -110,7 +110,7 @@ export default function ParameterComponent({
   return (
     <div
       ref={ref}
-      className="w-full flex flex-wrap justify-between items-center bg-gray-50 dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
+      className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
     >
       <>
         <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 9569bda63..9ec0939be 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -116,11 +116,11 @@ export default function GenericNode({
 
       <div
         className={classNames(
-          selected ? "border border-blue-500" : "border dark:border-gray-700",
+          selected ? "border border-ring" : "border dark:border-gray-700",
           "prompt-node relative flex w-96 flex-col justify-center rounded-lg bg-white dark:bg-gray-900"
         )}
       >
-        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-gray-50 p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
+        <div className="flex w-full items-center justify-between gap-8 rounded-t-lg border-b bg-muted p-4 dark:border-b-gray-700 dark:bg-gray-800 dark:text-white ">
           <div className="flex w-full items-center gap-2 truncate text-lg">
             <Icon
               className="h-10 w-10 rounded p-1"
@@ -130,7 +130,7 @@ export default function GenericNode({
             />
             <div className="ml-2 truncate">
               <ShadTooltip delayDuration={1500} content={data.type}>
-                <div className="ml-2 truncate">{data.type}</div>
+                <div className="ml-2 truncate text-gray-800">{data.type}</div>
               </ShadTooltip>
             </div>
           </div>
@@ -191,7 +191,7 @@ export default function GenericNode({
           </div>
         </div>
 
-        <div className="h-full w-full py-5">
+        <div className="h-full w-full py-5 text-gray-800">
           <div className="w-full px-5 pb-3 text-sm text-gray-500 dark:text-gray-300">
             {data.node.description}
           </div>
diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index 3208cc1f0..a3080adff 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -33,8 +33,8 @@ export default function ExtraSidebar() {
                           to={item.href}
                           className={classNames(
                             item.href.split("/")[2] === current[4]
-                              ? "bg-gray-100 text-gray-900"
-                              : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                              ? "bg-muted text-gray-900"
+                              : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
                             "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
                           )}
                         >
@@ -60,8 +60,8 @@ export default function ExtraSidebar() {
                             <Disclosure.Button
                               className={classNames(
                                 item.href.split("/")[2] === current[4]
-                                  ? "bg-gray-100 text-gray-900"
-                                  : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                                  ? "bg-muted text-gray-900"
+                                  : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
                                 "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
                               )}
                             >
@@ -93,8 +93,8 @@ export default function ExtraSidebar() {
                                   to={subItem.href}
                                   className={classNames(
                                     subItem.href.split("/")[3] === current[5]
-                                      ? "bg-gray-100 text-gray-900"
-                                      : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
+                                      ? "bg-muted text-gray-900"
+                                      : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
                                     "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"
                                   )}
                                 >
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 753b3ce24..90644e781 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -31,7 +31,7 @@ export default function Dropdown({
                 className={
                   editNode
                     ? "relative pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left focus:ring-offset-2 focus:ring-offset-slate-400 dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left focus:ring-offset-1 focus:ring-offset-slate-400 dark:focus:ring-offset-1 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-1 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
                 }
               >
                 <span className="block truncate w-full">{internalValue}</span>
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index cf80cef7d..aad76fb91 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -51,7 +51,7 @@ export default function FloatComponent({
         className={
           editNode
             ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 55ae977a7..6ff01d4c5 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -50,7 +50,7 @@ export default function InputComponent({
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
             ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
-            : "ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            : "ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 818637db9..8df735eea 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -65,7 +65,7 @@ export default function IntComponent({
         className={
           editNode
             ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index f81c00d4b..da3d4a623 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -52,7 +52,7 @@ export default function TextAreaComponent({
           className={
             editNode
               ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-              : "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
         >
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index f7140bdee..8ebb905e2 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -22,7 +22,7 @@ export default function ToggleComponent({
         }}
         className={classNames(
           enabled ? "bg-indigo-600" : "bg-gray-200",
-          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-1"
         )}
       >
         <span className="sr-only">Use setting</span>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 12cfde1a7..626857ebe 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -73,7 +73,7 @@
 :root {
   --background: 0 0% 100%;
   --foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
+  --muted: 210 40% 98%;
   --muted-foreground: 215.4 16.3% 46.9%;
   --popover: 0 0% 100%;
   --popover-foreground: 222.2 47.4% 11.2%;
@@ -81,7 +81,7 @@
   --card-foreground: 222.2 47.4% 11.2%;
   --border: 214.3 31.8% 91.4%;
   --input: 214.3 31.8% 91.4%;
-  --primary: 222.2 47.4% 11.2%;
+  --primary: 222.2 47.4% 18%;
   --primary-foreground: 210 40% 98%;
   --secondary: 210 40% 96.1%;
   --secondary-foreground: 222.2 47.4% 11.2%;
@@ -145,4 +145,4 @@ code {
 The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
 .react-flow__pane {
   cursor: default;
-}
+}
\ No newline at end of file
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 51d913bad..8d344a764 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -115,7 +115,7 @@ flow("Hey, have you heard of LangFlow?")`;
                   "p-1.5 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
                   (activeTab === index
                     ? " bg-white dark:bg-gray-800"
-                    : "bg-gray-100 dark:bg-gray-900")
+                    : "bg-muted dark:bg-gray-900")
                 }
               >
                 {tab.name}
@@ -123,7 +123,7 @@ flow("Hey, have you heard of LangFlow?")`;
               </button>
             ))}
           </div>
-          <div className=" overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg border-gray-200 border-[1px] bg-gray-50 dark:bg-gray-800">
+          <div className=" overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg border-gray-200 border-[1px] bg-muted dark:bg-gray-800">
             <div className="items-center mb-2">
               <div className="float-right">
                 <button
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 1977d13f7..d0f4c368d 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -125,7 +125,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
           >
             {nodeLength > 0 && (
               <div className="flex flex-col gap-5 h-fit">
-                <Table className="table-fixed bg-gray-50 outline-1">
+                <Table className="table-fixed bg-muted outline-1">
                   <TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
                     <TableRow className="dark:border-b-muted">
                       <TableHead className="h-7 text-center">PARAM</TableHead>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index b44dd5bf3..f7a908296 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -146,7 +146,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 5a979499a..83f8f70cb 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -46,7 +46,7 @@ export default function ChatInput({
           lockChat
             ? " bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300"
             : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm"
+          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm focus:ring-2 focus:ring-offset-1 focus:ring-ring"
         )}
         placeholder={"Send a message..."}
       />
diff --git a/src/frontend/src/modals/chatModal/chatMessage/index.tsx b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
index 003c21694..85c745771 100644
--- a/src/frontend/src/modals/chatModal/chatMessage/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatMessage/index.tsx
@@ -80,7 +80,7 @@ export default function ChatMessage({
               <div
                 onClick={() => setHidden((prev) => !prev)}
                 className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
-								bg-gray-100 dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
+								bg-muted dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
                 dangerouslySetInnerHTML={{
                   __html: convert.toHtml(chat.thought),
                 }}
diff --git a/src/frontend/src/modals/chatModal/fileComponent/index.tsx b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
index 3d4feb1d5..2b5d97ae9 100644
--- a/src/frontend/src/modals/chatModal/fileComponent/index.tsx
+++ b/src/frontend/src/modals/chatModal/fileComponent/index.tsx
@@ -37,7 +37,7 @@ export default function FileCard({ fileName, content, fileType }) {
         />
         {isHovered && (
           <div
-            className={`absolute top-0 right-0 bg-gray-100 text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
+            className={`absolute top-0 right-0 bg-muted text-gray-700 rounded-bl-lg px-1 text-sm font-bold dark:bg-gray-700 dark:text-gray-300`}
           >
             <button
               className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
@@ -54,7 +54,7 @@ export default function FileCard({ fileName, content, fileType }) {
   return (
     <button
       onClick={handleDownload}
-      className="bg-gray-100 shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
+      className="bg-muted shadow rounded w-1/2 text-gray-700 hover:drop-shadow-lg px-2 py-2 flex justify-between items-center border border-gray-300"
     >
       <div className="flex gap-2 text-current items-center w-full mr-2">
         {" "}
diff --git a/src/frontend/src/modals/chatModal/index.tsx b/src/frontend/src/modals/chatModal/index.tsx
index c8a227ae8..32f6561ed 100644
--- a/src/frontend/src/modals/chatModal/index.tsx
+++ b/src/frontend/src/modals/chatModal/index.tsx
@@ -425,7 +425,7 @@ export default function ChatModal({
                         </span>
                       </span>
                       <br />
-                      <div className="bg-gray-100 dark:bg-gray-900 rounded-md w-2/4 px-6 py-8 border border-gray-200 dark:border-gray-700">
+                      <div className="bg-muted dark:bg-gray-900 rounded-md w-2/4 px-6 py-8 border border-gray-200 dark:border-gray-700">
                         <span className="text-base text-gray-500">
                           Start a conversation and click the agent’s thoughts{" "}
                           <span>
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 5b941d515..0ad8e5108 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -79,7 +79,7 @@ export default function ImportModal() {
                 <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
+                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-1"
                     onClick={() => {
                       setShowExamples(false);
                     }}
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 508042a1c..596a36237 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -105,7 +105,7 @@ export default function PromptAreaModal({
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         checkPrompt(myValue)
                           .then((apiReturn) => {
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index 0a13413ff..a1e38779d 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -104,7 +104,7 @@ export default function TextAreaModal({
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
index 6878ad3c4..7b80e1cff 100644
--- a/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
@@ -12,7 +12,7 @@ export default function DisclosureComponent({
       {({ open }) => (
         <>
           <div>
-            <Disclosure.Button className="select-none bg-gray-50 dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
+            <Disclosure.Button className="select-none bg-muted dark:bg-gray-700/60 dark:border-y-gray-600 w-full flex justify-between items-center -mt-px px-3 py-2 border-y border-y-gray-200">
               <div className="flex gap-4">
                 <Icon className="w-6 text-gray-800 dark:text-white/80" />
                 <span className="flex items-center text-sm text-gray-800 dark:text-white/80 font-medium">
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 218489454..76f40d6b0 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -56,7 +56,7 @@ export default function ExtraSidebar() {
           name="search"
           id="search"
           placeholder="Search nodes"
-          className="border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 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"
+          className="border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 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-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
           onChange={(e) => {
             handleSearchInput(e.target.value);
             setSearch(e.target.value);
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 068bdf27f..95e539d18 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -43,7 +43,7 @@ const NodeToolbarComponent = (props) => {
         <span className="isolate inline-flex rounded-md shadow-sm">
           <ShadTooltip delayDuration={1000} content="Delete" side="top">
             <button
-              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+              className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative inline-flex items-center rounded-l-md bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
               onClick={() => {
                 props.deleteNode(props.data.id);
               }}
@@ -56,8 +56,8 @@ const NodeToolbarComponent = (props) => {
             <button
               className={classNames(
                 nodeLength > 0
-                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
-                  : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
+                  ? "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10"
+                  : "hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
               )}
               onClick={(event) => {
                 event.preventDefault();
@@ -83,7 +83,7 @@ const NodeToolbarComponent = (props) => {
           {nodeLength > 0 && (
             <ShadTooltip delayDuration={1000} content="Edit" side="top">
               <button
-                className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md"
+                className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2  ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md"
                 onClick={(event) => {
                   event.preventDefault();
                   props.openPopUp(<EditNodeModal data={props.data} />);
@@ -96,7 +96,7 @@ const NodeToolbarComponent = (props) => {
 
           {/* 
           <Menu as="div" className="relative inline-block text-left z-100">
-            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10 rounded-r-md">
+            <button className="hover:dark:hover:bg-[#242f47] text-gray-700 transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300 shadow-md relative -ml-px inline-flex items-center bg-white px-2 py-2 ring-1 ring-inset ring-gray-300 hover:bg-muted focus:z-10 rounded-r-md">
               <div>
                 <Menu.Button className="flex items-center">
                   <EllipsisVerticalIcon
@@ -128,7 +128,7 @@ const NodeToolbarComponent = (props) => {
                           }}
                           className={classNames(
                             active
-                              ? "bg-gray-100 text-gray-900"
+                              ? "bg-muted text-gray-900"
                               : "text-gray-700",
                             "w-full group flex items-center px-4 py-2 text-sm"
                           )}
@@ -168,7 +168,7 @@ const NodeToolbarComponent = (props) => {
                           }}
                           className={classNames(
                             active
-                              ? "bg-gray-100 text-gray-900"
+                              ? "bg-muted text-gray-900"
                               : "text-gray-700",
                             "w-full group flex items-center px-4 py-2 text-sm"
                           )}
diff --git a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
index 782596782..9ca340938 100644
--- a/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
@@ -74,7 +74,7 @@ export default function TabComponent({
               }}
             >
               {flows.length > 1 && (
-                <XMarkIcon className="h-4 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full" />
+                <XMarkIcon className="h-4 hover:bg-muted dark:hover:bg-gray-600 rounded-full" />
               )}
             </button>
           </div>
diff --git a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
index 816247911..1097737f0 100644
--- a/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
@@ -38,7 +38,7 @@ export default function TabsManagerComponent() {
 
   return (
     <div className="h-full w-full flex flex-col">
-      <div className="w-full flex pr-2 flex-row text-center items-center bg-gray-100 dark:bg-gray-800 px-2">
+      <div className="w-full flex pr-2 flex-row text-center items-center bg-muted dark:bg-gray-800 px-2">
         {flows.map((flow, index) => {
           return (
             <TabComponent

From 72c60ded54b29027f2575fce08bbdd2365ca000d Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 01:33:35 -0300
Subject: [PATCH 14/17] input components format

---
 src/frontend/src/components/ExtraSidebarComponent/index.tsx | 2 +-
 src/frontend/src/components/codeAreaComponent/index.tsx     | 2 +-
 src/frontend/src/components/dropdownComponent/index.tsx     | 4 ++--
 src/frontend/src/components/floatComponent/index.tsx        | 4 ++--
 src/frontend/src/components/inputComponent/index.tsx        | 4 ++--
 src/frontend/src/components/inputFileComponent/index.tsx    | 2 +-
 src/frontend/src/components/inputListComponent/index.tsx    | 2 +-
 src/frontend/src/components/intComponent/index.tsx          | 4 ++--
 src/frontend/src/components/promptComponent/index.tsx       | 2 +-
 src/frontend/src/components/textAreaComponent/index.tsx     | 2 +-
 src/frontend/src/components/toggleComponent/index.tsx       | 2 +-
 src/frontend/src/modals/NodeModal/index.tsx                 | 2 +-
 src/frontend/src/modals/chatModal/chatInput/index.tsx       | 2 +-
 src/frontend/src/modals/exportModal/index.tsx               | 4 ++--
 src/frontend/src/modals/genericModal/index.tsx              | 2 +-
 src/frontend/src/modals/importModal/index.tsx               | 2 +-
 src/frontend/src/modals/promptModal/index.tsx               | 2 +-
 src/frontend/src/modals/textAreaModal/index.tsx             | 2 +-
 18 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/components/ExtraSidebarComponent/index.tsx b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
index a3080adff..e03db68c8 100644
--- a/src/frontend/src/components/ExtraSidebarComponent/index.tsx
+++ b/src/frontend/src/components/ExtraSidebarComponent/index.tsx
@@ -62,7 +62,7 @@ export default function ExtraSidebar() {
                                 item.href.split("/")[2] === current[4]
                                   ? "bg-muted text-gray-900"
                                   : "bg-white text-gray-600 hover:bg-muted hover:text-gray-900",
-                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                                "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-1 focus:ring-indigo-500"
                               )}
                             >
                               <item.icon
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index e1c8d5584..f4d0a4c6b 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -40,7 +40,7 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 90644e781..3646512b0 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -30,8 +30,8 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-9 arrow-hide placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left focus:ring-offset-1 focus:ring-offset-slate-400 dark:focus:ring-offset-1 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-1 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                    ? "relative pr-9 arrow-hide placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none border-gray-300 border-1"
+                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none"
                 }
               >
                 <span className="block truncate w-full">{internalValue}</span>
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index aad76fb91..7aa74bff2 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -50,8 +50,8 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 6ff01d4c5..5a1adc448 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -49,8 +49,8 @@ export default function InputComponent({
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
-            : "ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center focus:ring-1 focus:ring-offset-1 focus:ring-ring"
+            : "ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index de6e0f683..fd3e7758d 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -77,7 +77,7 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
               : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index ea4c27134..da2413180 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -32,7 +32,7 @@ export default function InputListComponent({
             value={i}
             className={
               editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
                 : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
                   (disabled ? " bg-gray-200" : "") +
                   "focus:placeholder-transparent"
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 8df735eea..4ef9cef98 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -64,8 +64,8 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 sm:text-sm" +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 3ab65cf31..6ad9afb2f 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -45,7 +45,7 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
               : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index da3d4a623..9b6494d4b 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -51,7 +51,7 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
               : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 8ebb905e2..14f79faa2 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -22,7 +22,7 @@ export default function ToggleComponent({
         }}
         className={classNames(
           enabled ? "bg-indigo-600" : "bg-gray-200",
-          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-1"
+          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-1"
         )}
       >
         <span className="sr-only">Use setting</span>
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index f7a908296..6ceba62bf 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -146,7 +146,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 83f8f70cb..1fac9df99 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -46,7 +46,7 @@ export default function ChatInput({
           lockChat
             ? " bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300"
             : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm focus:ring-2 focus:ring-offset-1 focus:ring-ring"
+          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
         )}
         placeholder={"Send a message..."}
       />
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 67b74719b..929dfcfaa 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -60,7 +60,7 @@ export default function ExportModal() {
           <span className="font-medium">Name</span>
 
           <Input
-            className="mt-2"
+            className="mt-2 focus-visible:ring-1"
             onChange={(event) => {
               if (event.target.value != "") {
                 let newFlow = flows[tabIndex];
@@ -90,7 +90,7 @@ export default function ExportModal() {
             }}
             value={flows[tabIndex].description ?? null}
             placeholder="Flow description"
-            className="max-h-[100px] mt-2"
+            className="max-h-[100px] mt-2 focus-visible:ring-1"
             rows={3}
           />
         </Label>
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 2b1b4c7d6..d241e7c04 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -78,7 +78,7 @@ export default function GenericModal({
         <div className="flex h-full w-full mt-2">
           <Textarea
             ref={ref}
-            className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
+            className="form-input h-[300px] w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus-visible:ring-1"
             value={myValue}
             onChange={(e) => {
               setMyValue(e.target.value);
diff --git a/src/frontend/src/modals/importModal/index.tsx b/src/frontend/src/modals/importModal/index.tsx
index 0ad8e5108..bcc1dd3fa 100644
--- a/src/frontend/src/modals/importModal/index.tsx
+++ b/src/frontend/src/modals/importModal/index.tsx
@@ -79,7 +79,7 @@ export default function ImportModal() {
                 <div className="z-50 absolute top-2 left-0 hidden pt-4 pl-4 sm:block">
                   <button
                     type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-1"
+                    className="rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:ring-offset-1"
                     onClick={() => {
                       setShowExamples(false);
                     }}
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 596a36237..07b4dfaea 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -105,7 +105,7 @@ export default function PromptAreaModal({
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         checkPrompt(myValue)
                           .then((apiReturn) => {
diff --git a/src/frontend/src/modals/textAreaModal/index.tsx b/src/frontend/src/modals/textAreaModal/index.tsx
index a1e38779d..a72f74643 100644
--- a/src/frontend/src/modals/textAreaModal/index.tsx
+++ b/src/frontend/src/modals/textAreaModal/index.tsx
@@ -104,7 +104,7 @@ export default function TextAreaModal({
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         setModalOpen(false);
                       }}

From 6f366ad0ead2a38e9f2106c57f692187d299f42c Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 14 Jun 2023 09:25:28 -0300
Subject: [PATCH 15/17] constant style input, open prompt icon hover color

---
 .../components/singleAlertComponent/index.tsx      |  2 +-
 src/frontend/src/alerts/notice/index.tsx           |  2 +-
 .../src/components/codeAreaComponent/index.tsx     |  9 ++++++---
 .../src/components/dropdownComponent/index.tsx     |  7 +++++--
 .../src/components/floatComponent/index.tsx        |  7 +++++--
 .../src/components/inputComponent/index.tsx        |  6 ++++--
 .../src/components/inputFileComponent/index.tsx    |  9 ++++++---
 .../src/components/inputListComponent/index.tsx    | 13 ++++---------
 src/frontend/src/components/intComponent/index.tsx |  7 +++++--
 .../src/components/promptComponent/index.tsx       |  8 +++++---
 .../src/components/textAreaComponent/index.tsx     |  9 +++++----
 .../src/components/toggleComponent/index.tsx       |  4 ++--
 src/frontend/src/constants.tsx                     | 14 +++++++-------
 .../src/modals/chatModal/chatInput/index.tsx       |  5 +++--
 src/frontend/src/modals/promptModal/index.tsx      |  2 +-
 .../components/extraSidebarComponent/index.tsx     |  6 +++++-
 16 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
index ace9b5a0b..ad505e23e 100644
--- a/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
+++ b/src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
@@ -94,7 +94,7 @@ export default function SingleAlert({
               {dropItem.link ? (
                 <Link
                   to={dropItem.link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-blue-600"
+                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 dark:hover:text-blue-100 hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/alerts/notice/index.tsx b/src/frontend/src/alerts/notice/index.tsx
index 1b2fb1514..81dce8ca0 100644
--- a/src/frontend/src/alerts/notice/index.tsx
+++ b/src/frontend/src/alerts/notice/index.tsx
@@ -51,7 +51,7 @@ export default function NoticeAlert({
               {link !== "" ? (
                 <Link
                   to={link}
-                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-blue-600"
+                  className="whitespace-nowrap font-medium text-blue-700 dark:text-blue-50 hover:dark:text-blue-10 hover:text-ring"
                 >
                   Details
                 </Link>
diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index f4d0a4c6b..137e0917e 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -4,6 +4,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
+import { INPUT_STYLE } from "../../constants";
 
 export default function CodeAreaComponent({
   value,
@@ -40,8 +41,10 @@ export default function CodeAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                INPUT_STYLE
+              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
+                INPUT_STYLE +
                 (disabled ? " bg-gray-200" : "")
           }
         >
@@ -61,7 +64,7 @@ export default function CodeAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 3646512b0..6e4325a1b 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -3,6 +3,7 @@ import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
 import { Fragment, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { classNames } from "../../utils";
+import { INPUT_STYLE } from "../../constants";
 
 export default function Dropdown({
   value,
@@ -30,8 +31,10 @@ export default function Dropdown({
               <Listbox.Button
                 className={
                   editNode
-                    ? "relative pr-9 arrow-hide placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none border-gray-300 border-1"
-                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none"
+                    ? "relative pr-9 arrow-hide placeholder:text-center block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md shadow-sm sm:text-sm border-gray-300 border-1" +
+                      INPUT_STYLE
+                    : "ring-1 ring-slate-300 dark:ring-slate-600 w-full py-2 pl-3 pr-10 text-left dark:focus:ring-offset-2 dark:focus:ring-offset-gray-900 dark:focus:ring-1 dark:focus:ring-gray-600 dark:focus-visible:ring-gray-900 dark:focus-visible:ring-offset-2 focus-visible:outline-none dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                      INPUT_STYLE
                 }
               >
                 <span className="block truncate w-full">{internalValue}</span>
diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx
index 7aa74bff2..8fef867ab 100644
--- a/src/frontend/src/components/floatComponent/index.tsx
+++ b/src/frontend/src/components/floatComponent/index.tsx
@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
+import { INPUT_STYLE } from "../../constants";
 
 export default function FloatComponent({
   value,
@@ -50,8 +51,10 @@ export default function FloatComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              INPUT_STYLE
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 sm:text-sm" +
+              INPUT_STYLE +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 5a1adc448..98e643871 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -3,6 +3,7 @@ import { InputComponentType } from "../../types/components";
 import { classNames } from "../../utils";
 import { TabsContext } from "../../contexts/tabsContext";
 import { PopUpContext } from "../../contexts/popUpContext";
+import { INPUT_STYLE } from "../../constants";
 
 export default function InputComponent({
   value,
@@ -49,8 +50,9 @@ export default function InputComponent({
           disabled ? " bg-gray-200 dark:bg-gray-700" : "",
           password && !pwdVisible && myValue !== "" ? "password" : "",
           editNode
-            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center focus:ring-1 focus:ring-offset-1 focus:ring-ring"
-            : "ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+            ? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm text-center" +
+                INPUT_STYLE
+            : "ring-offset-gray-200" + INPUT_STYLE,
           password && editNode ? "pr-8" : "pr-3"
         )}
         placeholder={password && editNode ? "Key" : "Type something..."}
diff --git a/src/frontend/src/components/inputFileComponent/index.tsx b/src/frontend/src/components/inputFileComponent/index.tsx
index fd3e7758d..01613d28e 100644
--- a/src/frontend/src/components/inputFileComponent/index.tsx
+++ b/src/frontend/src/components/inputFileComponent/index.tsx
@@ -2,6 +2,7 @@ import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { alertContext } from "../../contexts/alertContext";
 import { FileComponentType } from "../../types/components";
+import { INPUT_STYLE } from "../../constants";
 
 export default function InputFileComponent({
   value,
@@ -77,8 +78,10 @@ export default function InputFileComponent({
           onClick={handleButtonClick}
           className={
             editNode
-              ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
-              : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              ? "truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                INPUT_STYLE
+              : "truncate block w-full text-gray-500 dark:text-gray-300 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
+                INPUT_STYLE +
                 (disabled ? " bg-gray-200" : "")
           }
         >
@@ -86,7 +89,7 @@ export default function InputFileComponent({
         </span>
         <button onClick={handleButtonClick}>
           {!editNode && (
-            <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-blue-600" />
+            <DocumentMagnifyingGlassIcon className="w-8 h-8  hover:text-ring" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx
index da2413180..4bb82147f 100644
--- a/src/frontend/src/components/inputListComponent/index.tsx
+++ b/src/frontend/src/components/inputListComponent/index.tsx
@@ -4,7 +4,7 @@ import { InputListComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 
 import _ from "lodash";
-
+import { INPUT_STYLE } from "../../constants";
 export default function InputListComponent({
   value,
   onChange,
@@ -32,7 +32,8 @@ export default function InputListComponent({
             value={i}
             className={
               editNode
-                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
+                ? "border-[1px]  truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                  INPUT_STYLE
                 : "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
                   (disabled ? " bg-gray-200" : "") +
                   "focus:placeholder-transparent"
@@ -58,13 +59,7 @@ export default function InputListComponent({
                 onChange(inputList);
               }}
             >
-              <PlusIcon
-                className={
-                  editNode
-                    ? "w-4 h-4 hover:text-black"
-                    : "w-4 h-4 hover:text-blue-600"
-                }
-              />
+              <PlusIcon className={"w-4 h-4 hover:text-ring"} />
             </button>
           ) : (
             <button
diff --git a/src/frontend/src/components/intComponent/index.tsx b/src/frontend/src/components/intComponent/index.tsx
index 4ef9cef98..541e5de5d 100644
--- a/src/frontend/src/components/intComponent/index.tsx
+++ b/src/frontend/src/components/intComponent/index.tsx
@@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 import { TabsContext } from "../../contexts/tabsContext";
 import { classNames } from "../../utils";
+import { INPUT_STYLE } from "../../constants";
 
 export default function IntComponent({
   value,
@@ -64,8 +65,10 @@ export default function IntComponent({
         value={myValue}
         className={
           editNode
-            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
-            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 sm:text-sm" +
+            ? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+              INPUT_STYLE
+            : "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background sm:text-sm" +
+              INPUT_STYLE +
               (disabled ? " bg-gray-200 dark:bg-gray-700" : "")
         }
         placeholder={editNode ? "Integer number" : "Type a integer number"}
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 6ad9afb2f..df8070a2a 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -6,6 +6,7 @@ import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
+import { INPUT_STYLE } from "../../constants";
 
 export default function PromptAreaComponent({
   value,
@@ -45,8 +46,9 @@ export default function PromptAreaComponent({
           }}
           className={
             editNode
-              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
-              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              ? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                INPUT_STYLE
+              : "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
         >
@@ -69,7 +71,7 @@ export default function PromptAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 9b6494d4b..4c0412994 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -4,7 +4,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import { TextAreaComponentType } from "../../types/components";
 import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
-
+import { INPUT_STYLE } from "../../constants";
 export default function TextAreaComponent({
   value,
   onChange,
@@ -51,8 +51,9 @@ export default function TextAreaComponent({
           }}
           className={
             editNode
-              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
-              : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+              ? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm" +
+                INPUT_STYLE
+              : "truncate block w-full text-gray-500 dark:text-muted px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm sm:text-sm" +
                 (disabled ? " bg-gray-200" : "")
           }
         >
@@ -75,7 +76,7 @@ export default function TextAreaComponent({
           }}
         >
           {!editNode && (
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" />
           )}
         </button>
       </div>
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 14f79faa2..9481f6760 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -21,8 +21,8 @@ export default function ToggleComponent({
           setEnabled(x);
         }}
         className={classNames(
-          enabled ? "bg-indigo-600" : "bg-gray-200",
-          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-1"
+          enabled ? "bg-primary" : "bg-gray-200",
+          "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1"
         )}
       >
         <span className="sr-only">Use setting</span>
diff --git a/src/frontend/src/constants.tsx b/src/frontend/src/constants.tsx
index cf0f32087..a4d43ae0c 100644
--- a/src/frontend/src/constants.tsx
+++ b/src/frontend/src/constants.tsx
@@ -6,13 +6,6 @@
  */
 export const EXPORT_DIALOG_SUBTITLE = "Export flow as JSON file.";
 
-/**
- * The base text for subtitle of Code Dialog (Toolbar)
- * @constant
- */
-export const CODE_DIALOG_SUBTITLE =
-  "Generate the code to integrate your flow into an external application.";
-
 /**
  * The base text for subtitle of Edit Node Dialog
  * @constant
@@ -53,3 +46,10 @@ export const IMPORT_DIALOG_SUBTITLE =
  */
 export const EXPORT_CODE_DIALOG =
   "Generate the code to integrate your flow into an external application.";
+
+/**
+ * The base text for subtitle of code dialog
+ * @constant
+ */
+export const INPUT_STYLE =
+  " focus:ring-1 focus:ring-offset-1 focus:ring-ring focus:outline-none ";
diff --git a/src/frontend/src/modals/chatModal/chatInput/index.tsx b/src/frontend/src/modals/chatModal/chatInput/index.tsx
index 1fac9df99..932a23a45 100644
--- a/src/frontend/src/modals/chatModal/chatInput/index.tsx
+++ b/src/frontend/src/modals/chatModal/chatInput/index.tsx
@@ -2,7 +2,7 @@ import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
 import { classNames } from "../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import { TabsContext } from "../../../contexts/tabsContext";
-
+import { INPUT_STYLE } from "../../../constants";
 export default function ChatInput({
   lockChat,
   chatValue,
@@ -46,7 +46,8 @@ export default function ChatInput({
           lockChat
             ? " bg-gray-300 text-black dark:bg-gray-700 dark:text-gray-300"
             : "  bg-white-200 text-black dark:bg-gray-900 dark:text-gray-300",
-          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm focus:ring-1 focus:ring-offset-1 focus:ring-ring"
+          "form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm" +
+            INPUT_STYLE
         )}
         placeholder={"Send a message..."}
       />
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
index 07b4dfaea..e2dbef1c8 100644
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ b/src/frontend/src/modals/promptModal/index.tsx
@@ -105,7 +105,7 @@ export default function PromptAreaModal({
                   <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
                     <button
                       type="button"
-                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
+                      className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
                       onClick={() => {
                         checkPrompt(myValue)
                           .then((apiReturn) => {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 76f40d6b0..257149990 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -11,6 +11,7 @@ import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import { INPUT_STYLE } from "../../../../constants";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
@@ -56,7 +57,10 @@ export default function ExtraSidebar() {
           name="search"
           id="search"
           placeholder="Search nodes"
-          className="border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 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-1 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50"
+          className={
+            INPUT_STYLE +
+            "border-1 dark:border-slate-600 dark:border-0.5 dark:ring-0 focus-visible:dark:ring-0 focus-visible:dark:ring-offset-1 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 disabled:cursor-not-allowed disabled:opacity-50"
+          }
           onChange={(e) => {
             handleSearchInput(e.target.value);
             setSearch(e.target.value);

From 1aa24e542065d55a5296fe650dd0e05a23ac18fa Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 14 Jun 2023 12:29:12 -0300
Subject: [PATCH 16/17] Changed Card component to be more generic

---
 .../components/cardComponent/index.tsx        | 33 ++++-----
 .../components/cardComponent/index.tsx        | 70 -------------------
 .../src/pages/CommunityPage/index.tsx         | 19 ++++-
 src/frontend/src/pages/MainPage/index.tsx     | 31 ++++++--
 4 files changed, 55 insertions(+), 98 deletions(-)
 rename src/frontend/src/{pages/MainPage => }/components/cardComponent/index.tsx (69%)
 delete mode 100644 src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx

diff --git a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
similarity index 69%
rename from src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
rename to src/frontend/src/components/cardComponent/index.tsx
index 88dad5ff1..5688eefaa 100644
--- a/src/frontend/src/pages/MainPage/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -1,13 +1,13 @@
 import { Trash2, ExternalLink } from "lucide-react";
 import { useContext } from "react";
 import { Link } from "react-router-dom";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { FlowType } from "../../../../types/flow";
-import { gradients } from "../../../../utils";
-import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../../../../components/ui/card";
-import { Button } from "../../../../components/ui/button";
+import { TabsContext } from "../../contexts/tabsContext";
+import { FlowType } from "../../types/flow";
+import { gradients } from "../../utils";
+import { CardTitle, CardDescription, CardFooter, Card, CardHeader } from "../ui/card";
 
-export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
+
+export const CardComponent = ({ flow, id, onDelete, button }: { flow: FlowType; id: string, onDelete?: () => void, button?: JSX.Element }) => {
   const { removeFlow } = useContext(TabsContext);
 
   return (
@@ -26,13 +26,13 @@ export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
               {flow.name}
             </span>
           </div>
+          {onDelete &&
           <button
-            onClick={() => {
-              removeFlow(flow.id);
-            }}
+            onClick={onDelete}
           >
             <Trash2 className="w-5 text-primary opacity-0 group-hover:opacity-100 transition-all" />
           </button>
+          }
         </CardTitle>
         <CardDescription className="pt-2 pb-2">
           <div className="truncate-doubleline">
@@ -53,17 +53,10 @@ export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
               <span className="text-base">&nbsp;</span>OpenAI+
             </Badge> */}
           </div>
-          <Link to={"/flow/" + id}>
-            <Button
-              variant="outline"
-              size="sm"
-              className="whitespace-nowrap "
-              
-            >
-              <ExternalLink className="w-4 mr-2" />
-              Edit Flow
-            </Button>
-          </Link>
+          {button &&
+            button
+          }
+          
         </div>
       </CardFooter>
     </Card>
diff --git a/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx b/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx
deleted file mode 100644
index 9985ea956..000000000
--- a/src/frontend/src/pages/CommunityPage/components/cardComponent/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { GitFork } from "lucide-react";
-import { useContext } from "react";
-import { useNavigate } from "react-router-dom";
-import { TabsContext } from "../../../../contexts/tabsContext";
-import { FlowType } from "../../../../types/flow";
-import { gradients } from "../../../../utils";
-import {
-  CardTitle,
-  CardDescription,
-  CardFooter,
-  Card,
-  CardHeader,
-} from "../../../../components/ui/card";
-import { Button } from "../../../../components/ui/button";
-
-export const CardComponent = ({ flow, id }: { flow: FlowType; id: string }) => {
-  const { addFlow } = useContext(TabsContext);
-  const navigate = useNavigate();
-
-  return (
-    <Card className="group">
-      <CardHeader>
-        <CardTitle className="flex justify-between items-start">
-          <div className="flex gap-4 items-center">
-            <span
-              className={
-                "rounded-full w-8 h-8 flex items-center justify-center text-2xl " +
-                gradients[parseInt(flow.id.slice(0, 6), 16) % gradients.length]
-              }
-            ></span>
-            <span className="flex-1 truncate-doubleline">{flow.name}</span>
-          </div>
-        </CardTitle>
-        <CardDescription className="pt-2 pb-2">
-          <div className="truncate-doubleline">
-            {flow.description}
-            {/* {flow.description} */}
-          </div>
-        </CardDescription>
-      </CardHeader>
-
-      <CardFooter>
-        <div className="flex gap-2 w-full justify-between items-end">
-          <div className="flex flex-wrap gap-2">
-            {/* <Badge variant="secondary">Agent</Badge>
-            <Badge variant="secondary">
-              <div className="w-3">
-                <OpenAiIcon />
-              </div>
-              <span className="text-base">&nbsp;</span>OpenAI+
-            </Badge> */}
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            className="whitespace-nowrap "
-            onClick={() => {
-              addFlow(flow, true).then((id) => {
-                navigate("/flow/" + id);
-              });
-            }}
-          >
-            <GitFork className="w-4 mr-2" />
-            Fork Example
-          </Button>
-        </div>
-      </CardFooter>
-    </Card>
-  );
-};
diff --git a/src/frontend/src/pages/CommunityPage/index.tsx b/src/frontend/src/pages/CommunityPage/index.tsx
index 92e5e253c..6b8322531 100644
--- a/src/frontend/src/pages/CommunityPage/index.tsx
+++ b/src/frontend/src/pages/CommunityPage/index.tsx
@@ -18,6 +18,7 @@ import {
   Plus,
   Home,
   Users2,
+  GitFork,
 } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
 import AlertDropdown from "../../alerts/alertDropDown";
@@ -37,7 +38,8 @@ import {
 } from "../../controllers/API";
 import { MenuBar } from "../../components/headerComponent/components/menuBar";
 import { FlowType } from "../../types/flow";
-import { CardComponent } from "./components/cardComponent";
+import { CardComponent } from "../../components/cardComponent";
+import { useNavigate } from "react-router-dom";
 export default function CommunityPage() {
   const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
     useContext(TabsContext);
@@ -61,6 +63,7 @@ export default function CommunityPage() {
         })
       );
   }
+  const navigate = useNavigate();
 
   useEffect(() => {
     handleExamples();
@@ -87,7 +90,19 @@ export default function CommunityPage() {
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {!loadingExamples &&
           examples.map((flow, idx) => (
-            <CardComponent key={idx} flow={flow} id={flow.id} />
+            <CardComponent key={idx} flow={flow} id={flow.id} button={<Button
+              variant="outline"
+              size="sm"
+              className="whitespace-nowrap "
+              onClick={() => {
+                addFlow(flow, true).then((id) => {
+                  navigate("/flow/" + id);
+                });
+              }}
+            >
+              <GitFork className="w-4 mr-2" />
+              Fork Example
+            </Button>}/>
           ))}
       </div>
     </div>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 98d8c1a0d..ea064dadf 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -1,11 +1,11 @@
 import { useContext, useEffect } from "react";
-import { Download, Upload, Plus, Home } from "lucide-react";
+import { Download, Upload, Plus, Home, ExternalLink } from "lucide-react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { Button } from "../../components/ui/button";
-import { CardComponent } from "./components/cardComponent";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { CardComponent } from "../../components/cardComponent";
 export default function HomePage() {
-  const { flows, setTabId, downloadFlows, uploadFlows, addFlow } =
+  const { flows, setTabId, downloadFlows, uploadFlows, addFlow, removeFlow } =
     useContext(TabsContext);
   useEffect(() => {
     setTabId("");
@@ -50,13 +50,32 @@ export default function HomePage() {
           </Button>
         </div>
       </div>
-      <span className="flex pb-8 px-6 text-muted-foreground w-[60%]">
+      <span className="flex pb-14 px-6 text-muted-foreground w-[60%]">
         Manage your personal projects. Download or upload your complete project
         collection.
       </span>
       <div className="w-full p-4 grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         {flows.map((flow, idx) => (
-          <CardComponent key={idx} flow={flow} id={flow.id} />
+          <CardComponent
+            key={idx}
+            flow={flow}
+            id={flow.id}
+            button={
+              <Link to={"/flow/" + flow.id}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="whitespace-nowrap "
+                >
+                  <ExternalLink className="w-4 mr-2" />
+                  Edit Flow
+                </Button>
+              </Link>
+            }
+            onDelete={() => {
+              removeFlow(flow.id);
+            }}
+          />
         ))}
       </div>
     </div>

From 99fa125b91225125c6a609c205de0803e43fba4a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 14 Jun 2023 13:01:41 -0300
Subject: [PATCH 17/17] FIxed spacing and export modal not working

---
 src/frontend/src/components/nameInputComponent/index.tsx | 4 ++--
 src/frontend/src/modals/exportModal/index.tsx            | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/components/nameInputComponent/index.tsx b/src/frontend/src/components/nameInputComponent/index.tsx
index 126a99645..75aa451af 100644
--- a/src/frontend/src/components/nameInputComponent/index.tsx
+++ b/src/frontend/src/components/nameInputComponent/index.tsx
@@ -51,7 +51,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
   };
 
   return (
-    <div>
+    <>
       <Label>
         <div className="flex justify-between">
           <span className="font-medium">Name</span>{" "}
@@ -84,7 +84,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           rows={3}
         />
       </Label>
-    </div>
+    </>
   );
 };
 
diff --git a/src/frontend/src/modals/exportModal/index.tsx b/src/frontend/src/modals/exportModal/index.tsx
index 2b6823ff8..a5771dd92 100644
--- a/src/frontend/src/modals/exportModal/index.tsx
+++ b/src/frontend/src/modals/exportModal/index.tsx
@@ -18,6 +18,8 @@ import { Checkbox } from "../../components/ui/checkbox";
 import { EXPORT_DIALOG_SUBTITLE } from "../../constants";
 import EditFlowSettings from "../../components/nameInputComponent";
 import { Label } from "../../components/ui/label";
+import { Input } from "../../components/ui/input";
+import { Textarea } from "../../components/ui/textarea";
 
 export default function ExportModal() {
   const [open, setOpen] = useState(true);
@@ -61,7 +63,7 @@ export default function ExportModal() {
             className="mt-2 focus-visible:ring-1"
             onChange={(event) => {
               if (event.target.value != "") {
-                let newFlow = flows[tabIndex];
+                let newFlow = flows.find((f) => f.id === tabId);
                 newFlow.name = event.target.value;
                 setName(event.target.value);
                 updateFlow(newFlow);