🐛 fix(codeAreaComponent): adjust classNames to fix styling issues and improve readability

🐛 fix(promptComponent): adjust classNames to fix styling issues and improve readability
🐛 fix(textAreaComponent): adjust classNames to fix styling issues and improve readability

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -30,9 +30,11 @@ export default function CodeAreaComponent({
   }, [value]);
 
   return (
+    <div className={disabled ? "cursor-not-allowed" : ""}>
       <div
         className={
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : "w-full"
+          (editNode ? "w-full items-center" : "flex w-full items-center") +
+          (disabled ? " pointer-events-none" : "")
         }
       >
         <div className="flex w-full items-center">
@@ -77,11 +79,15 @@ export default function CodeAreaComponent({
             {!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>
         </div>
       </div>
+    </div>
   );
 }

src/frontend/src/components/promptComponent/index.tsx

@@ -47,11 +47,8 @@ export default function PromptAreaComponent({
   }, [reactFlowInstance, field_name]);
 
   return (
-    <div
+    <div className={disabled ? "cursor-not-allowed" : ""}>
-      className={
+      <div className={disabled ? "pointer-events-none w-full " : " w-full"}>
-        disabled ? "pointer-events-none w-full cursor-not-allowed" : " w-full"
-      }
-    >
         <div className="flex w-full items-center">
           <span
             onClick={() => {
@@ -102,11 +99,15 @@ export default function PromptAreaComponent({
             {!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>
         </div>
       </div>
+    </div>
   );
 }

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>