From b2af498db7f1fb3a69d1bf05da31fb0bf1c0ec0a Mon Sep 17 00:00:00 2001
From: Ian Arawjo <fatso784@gmail.com>
Date: Wed, 3 May 2023 19:19:05 -0400
Subject: [PATCH] Script node styling

---
 chain-forge/src/ScriptNode.js        | 6 ++++--
 chain-forge/src/TextFieldsNode.js    | 3 ++-
 chain-forge/src/text-fields-node.css | 3 +++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/chain-forge/src/ScriptNode.js b/chain-forge/src/ScriptNode.js
index ddd9ae2..98504de 100644
--- a/chain-forge/src/ScriptNode.js
+++ b/chain-forge/src/ScriptNode.js
@@ -49,7 +49,9 @@ const ScriptNode = ({ data, id }) => {
             const val = data.scriptFiles ? data.scriptFiles[i] : '';
             return (
                 <div className="input-field" key={i}>
-                    <input className='script-node-input' type='text' id={i} onChange={handleInputChange} value={val}/><button id={delButtonId + i} onClick={handleDelete}>x</button><br/>
+                    <input className="script-node-input" type="text" id={i} onChange={handleInputChange} value={val}/>
+                    <button className="remove-text-field-btn nodrag" id={delButtonId + i} onClick={handleDelete}>X</button>
+                    <br/>
                 </div>
             )
         }));
@@ -65,7 +67,7 @@ const ScriptNode = ({ data, id }) => {
 
     return (
         <div className="script-node cfnode">
-            <NodeLabel title={data.title || 'Global Scripts'} nodeId={id} editable={false} icon={<IconSettingsAutomation size="16px" />}/>
+            <NodeLabel title={data.title || 'Global Python Scripts'} nodeId={id} editable={false} icon={<IconSettingsAutomation size="16px" />}/>
             <label htmlFor="num-generations" style={{fontSize: '10pt'}}>Enter folder paths for external modules you wish to import.</label> <br/><br/>
             <div>
                 {scriptFiles}
diff --git a/chain-forge/src/TextFieldsNode.js b/chain-forge/src/TextFieldsNode.js
index 5ca1878..d0ca886 100644
--- a/chain-forge/src/TextFieldsNode.js
+++ b/chain-forge/src/TextFieldsNode.js
@@ -89,12 +89,13 @@ const TextFieldsNode = ({ data, id }) => {
   // Whenever 'data' changes, update the input fields to reflect the current state.
   useEffect(() => {
     const f = data.fields ? Object.keys(data.fields) : [];
+    const num_fields = f.length;
     setFields(f.map((i, idx) => {
       const val = data.fields ? data.fields[i] : '';
       return (
         <div className="input-field" key={i}>
           <textarea id={i} name={i} className="text-field-fixed nodrag" rows="2" cols="40" value={val} onChange={handleInputChange} />
-          {idx > 0 ? (<button id={delButtonId + i} className="remove-text-field-btn nodrag" onClick={handleDelete}>X</button>) : <></>}
+          {num_fields > 1 ? (<button id={delButtonId + i} className="remove-text-field-btn nodrag" onClick={handleDelete}>X</button>) : <></>}
         </div>
     )}));
   }, [data.fields, handleInputChange, handleDelete]);
diff --git a/chain-forge/src/text-fields-node.css b/chain-forge/src/text-fields-node.css
index a6693e1..18c4962 100644
--- a/chain-forge/src/text-fields-node.css
+++ b/chain-forge/src/text-fields-node.css
@@ -324,6 +324,9 @@
     transform: skewX(-20deg);
 }
 
+.script-node-input {
+  width: 100%;
+}
 
 .node-header-btns-container {
   float: right;