From 9f24f7830cfb149ff7a0f56819604121d464b3b7 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 5 Jul 2023 19:30:48 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(codeAreaComponent):=20adjust?=
 =?UTF-8?q?=20classNames=20to=20fix=20styling=20issues=20and=20improve=20r?=
 =?UTF-8?q?eadability=20=F0=9F=90=9B=20fix(promptComponent):=20adjust=20cl?=
 =?UTF-8?q?assNames=20to=20fix=20styling=20issues=20and=20improve=20readab?=
 =?UTF-8?q?ility=20=F0=9F=90=9B=20fix(textAreaComponent):=20adjust=20class?=
 =?UTF-8?q?Names=20to=20fix=20styling=20issues=20and=20improve=20readabili?=
 =?UTF-8?q?ty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/codeAreaComponent/index.tsx    | 106 ++++++++--------
 .../src/components/promptComponent/index.tsx  | 117 +++++++++---------
 .../components/textAreaComponent/index.tsx    |  11 +-
 3 files changed, 123 insertions(+), 111 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 00578a25a..e0a46f88c 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/src/frontend/src/components/codeAreaComponent/index.tsx
@@ -30,57 +30,63 @@ export default function CodeAreaComponent({
   }, [value]);
 
   return (
-    <div
-      className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
-      }
-    >
-      <div className="flex w-full items-center">
-        <span
-          onClick={() => {
-            openPopUp(
-              <CodeAreaModal
-                value={myValue}
-                nodeClass={nodeClass}
-                setNodeClass={setNodeClass}
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
+    <div className={disabled ? "cursor-not-allowed" : ""}>
+      <div
+        className={
+          (editNode ? "w-full items-center" : "flex w-full items-center") +
+          (disabled ? " pointer-events-none" : "")
+        }
+      >
+        <div className="flex w-full items-center">
+          <span
+            onClick={() => {
+              openPopUp(
+                <CodeAreaModal
+                  value={myValue}
+                  nodeClass={nodeClass}
+                  setNodeClass={setNodeClass}
+                  setValue={(t: string) => {
+                    setMyValue(t);
+                    onChange(t);
+                  }}
+                />
+              );
+            }}
+            className={
+              editNode
+                ? "input-edit-node input-dialog "
+                : "input-dialog input-primary " +
+                  (disabled ? "input-disable" : "")
+            }
+          >
+            {myValue !== "" ? myValue : "Type something..."}
+          </span>
+          <button
+            onClick={() => {
+              openPopUp(
+                <CodeAreaModal
+                  setNodeClass={setNodeClass}
+                  value={myValue}
+                  nodeClass={nodeClass}
+                  setValue={(t: string) => {
+                    setMyValue(t);
+                    onChange(t);
+                  }}
+                />
+              );
+            }}
+          >
+            {!editNode && (
+              <ExternalLink
+                strokeWidth={1.5}
+                className={
+                  "ml-3 h-6 w-6" +
+                  (disabled ? " text-ring" : " hover:text-accent-foreground")
+                }
               />
-            );
-          }}
-          className={
-            editNode
-              ? "input-edit-node input-dialog "
-              : "input-dialog input-primary " +
-                (disabled ? "input-disable" : "")
-          }
-        >
-          {myValue !== "" ? myValue : "Type something..."}
-        </span>
-        <button
-          onClick={() => {
-            openPopUp(
-              <CodeAreaModal
-                setNodeClass={setNodeClass}
-                value={myValue}
-                nodeClass={nodeClass}
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-              />
-            );
-          }}
-        >
-          {!editNode && (
-            <ExternalLink
-              strokeWidth={1.5}
-              className="ml-3 h-6 w-6  hover:text-accent-foreground"
-            />
-          )}
-        </button>
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 18bf9cc01..8bac5fe7e 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -47,65 +47,66 @@ export default function PromptAreaComponent({
   }, [reactFlowInstance, field_name]);
 
   return (
-    <div
-      className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
-      }
-    >
-      <div className="flex w-full items-center">
-        <span
-          onClick={() => {
-            openPopUp(
-              <GenericModal
-                type={TypeModal.PROMPT}
-                value={myValue}
-                buttonText="Check & Save"
-                modalTitle="Edit Prompt"
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-                nodeClass={nodeClass}
-                setNodeClass={setNodeClass}
+    <div className={disabled ? "cursor-not-allowed" : ""}>
+      <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
+        <div className="flex w-full items-center">
+          <span
+            onClick={() => {
+              openPopUp(
+                <GenericModal
+                  type={TypeModal.PROMPT}
+                  value={myValue}
+                  buttonText="Check & Save"
+                  modalTitle="Edit Prompt"
+                  setValue={(t: string) => {
+                    setMyValue(t);
+                    onChange(t);
+                  }}
+                  nodeClass={nodeClass}
+                  setNodeClass={setNodeClass}
+                />
+              );
+            }}
+            className={
+              editNode
+                ? " input-edit-node " + " input-dialog "
+                : (disabled ? " input-disable " : "") +
+                  " input-primary " +
+                  " input-dialog "
+            }
+          >
+            {myValue !== "" ? myValue : "Type your prompt here"}
+          </span>
+          <button
+            onClick={() => {
+              openPopUp(
+                <GenericModal
+                  field_name={field_name}
+                  type={TypeModal.PROMPT}
+                  value={myValue}
+                  buttonText="Check & Save"
+                  modalTitle="Edit Prompt"
+                  setValue={(t: string) => {
+                    setMyValue(t);
+                    onChange(t);
+                  }}
+                  nodeClass={nodeClass}
+                  setNodeClass={setNodeClass}
+                />
+              );
+            }}
+          >
+            {!editNode && (
+              <ExternalLink
+                strokeWidth={1.5}
+                className={
+                  "ml-3 h-6 w-6" +
+                  (disabled ? " text-ring" : " hover:text-accent-foreground")
+                }
               />
-            );
-          }}
-          className={
-            editNode
-              ? " input-edit-node " + " input-dialog "
-              : (disabled ? " input-disable " : "") +
-                " input-primary " +
-                " input-dialog "
-          }
-        >
-          {myValue !== "" ? myValue : "Type your prompt here"}
-        </span>
-        <button
-          onClick={() => {
-            openPopUp(
-              <GenericModal
-                field_name={field_name}
-                type={TypeModal.PROMPT}
-                value={myValue}
-                buttonText="Check & Save"
-                modalTitle="Edit Prompt"
-                setValue={(t: string) => {
-                  setMyValue(t);
-                  onChange(t);
-                }}
-                nodeClass={nodeClass}
-                setNodeClass={setNodeClass}
-              />
-            );
-          }}
-        >
-          {!editNode && (
-            <ExternalLink
-              strokeWidth={1.5}
-              className="ml-3 h-6 w-6 hover:text-accent-foreground"
-            />
-          )}
-        </button>
+            )}
+          </button>
+        </div>
       </div>
     </div>
   );
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index b175da5de..c62af4b30 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -27,10 +27,11 @@ export default function TextAreaComponent({
   }, [closePopUp]);
 
   return (
-    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+    <div className={disabled ? "cursor-not-allowed" : ""}>
       <div
         className={
-          editNode ? "w-full items-center" : "flex w-full items-center"
+          (editNode ? "w-full items-center" : "flex w-full items-center") +
+          (disabled ? " pointer-events-none" : "")
         }
       >
         <span
@@ -57,6 +58,7 @@ export default function TextAreaComponent({
         >
           {myValue !== "" ? myValue : "Type something..."}
         </span>
+
         <button
           onClick={() => {
             openPopUp(
@@ -76,7 +78,10 @@ export default function TextAreaComponent({
           {!editNode && (
             <ExternalLink
               strokeWidth={1.5}
-              className="ml-3 h-6 w-6 hover:text-accent-foreground"
+              className={
+                "ml-3 h-6 w-6" +
+                (disabled ? " text-ring" : " hover:text-accent-foreground")
+              }
             />
           )}
         </button>