Better node header btn styles

chain-forge/src/NodeLabelComponent.js

@@ -57,9 +57,9 @@ export default function NodeLabel({ title, nodeId, icon, onEdit, onSave, editabl
             />
             {statusIndicator}
             <AlertModal ref={alertModal} />
-            <div style={{float: 'right', marginRight: '5px', marginLeft: '10px'}}>
+            <div className="node-header-btns-container">
                 {runButton}
-                <button className="AmitSahoo45-button-4 nodrag" onClick={handleCloseButtonClick}>&#x2715;</button>
+                <button className="close-button nodrag" onClick={handleCloseButtonClick}>&#x2715;</button>
                 <br/>
             </div>
             {/* <button className="AmitSahoo45-button-3 nodrag" onClick={handleRunClick}><div className="play-button"></div></button> */}

chain-forge/src/TextFieldsNode.js

@@ -88,11 +88,12 @@ 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) : [];
-    setFields(f.map((i) => {
+    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} /><button id={delButtonId + i} onClick={handleDelete}>x</button>
+          <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" onClick={handleDelete}>X</button>) : <></>}
         </div>
     )}));
   }, [data.fields, handleInputChange, handleDelete]);

chain-forge/src/text-fields-node.css

@@ -95,6 +95,15 @@
     align-items: center;
     margin-bottom: 5px;
   }
+
+  .remove-text-field-btn {
+    margin-left: 3px;
+    border-style: none;
+    background-color: inherit;
+    color: #bbb;
+    font-weight: bold;
+    cursor: pointer;
+  }
   
   .input-field input {
     margin-left: 5px;
@@ -107,6 +116,7 @@
     border-right: 0px;
     border-style: dashed;
     margin-bottom: 12px;
+    padding-bottom: 4px;
   }
 
   .prompt-node {
@@ -259,9 +269,10 @@
     position: relative;
     padding: 2px 10px;
     margin-top: -5px;
-    border-radius: 7px;
+    margin-right: 3px;
+    border-radius: 5px;
     border: 1px solid #999;
-    font-size: 14px;
+    font-size: 12px;
     /* text-transform: uppercase; */
     /* font-weight: 600; */
     /* letter-spacing: 2px; */
@@ -307,14 +318,21 @@
     transform: skewX(-20deg);
 }
 
-/** CSS Button style from https://css-buttons-hover.netlify.app/ */
-.AmitSahoo45-button-4 {
+
+.node-header-btns-container {
+  float: right;
+  margin-right: 0px;
+  margin-left: 10px;
+  margin-top: -3px;
+}
+
+.close-button {
   position: relative;
-  padding: 2px 10px;
-  margin-top: -5px;
-  border-radius: 7px;
+  padding: 2px 6px;
+  margin-top: -7px;
+  border-radius: 5px;
   border: 1px solid #999;
-  font-size: 14px;
+  font-size: 12px;
   /* text-transform: uppercase; */
   /* font-weight: 600; */
   /* letter-spacing: 2px; */
@@ -329,20 +347,21 @@
   cursor: pointer;
 }
 
-.AmitSahoo45-button-4:hover {
+.close-button:hover {
   background: rgb(200 , 26, 69);
+  color: white;
   box-shadow: 0 0 30px 5px rgb(234, 63, 106, 0.815);
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
 }
 
-.AmitSahoo45-button-4:hover::before {
+.close-button:hover::before {
   -moz-animation: sh02 0.5s 0s linear;
   animation: sh02 0.5s 0s linear;
 }
 
-.AmitSahoo45-button-4::before {
+.close-button::before {
   content: '';
   display: block;
   width: 0px;
@@ -351,6 +370,7 @@
   top: 7%;
   left: 0%;
   opacity: 0;
+  color: black;
   background: #fff;
   box-shadow: 0 0 50px 30px #fff;
   -webkit-transform: skewX(-20deg);