From efbb5ff763a67875a359a41970de3812329ecb23 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Wed, 12 Apr 2023 19:57:52 -0300
Subject: [PATCH] first styling in nodeModal

---
 .../src/CustomNodes/GenericNode/index.tsx     |   4 +-
 .../NodeModal/components/ModalField/index.tsx | 100 +++++++++++-------
 2 files changed, 66 insertions(+), 38 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index a35f14452..5ed25268e 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -122,7 +122,7 @@ export default function GenericNode({
 						))}
 					<div
 						className={classNames(
-							Object.keys(data.node.template).length < 4 ? "hidden" : "",
+							Object.keys(data.node.template).length < 1 ? "hidden" : "",
 							"w-full flex justify-center"
 						)}
 					>
@@ -135,7 +135,7 @@ export default function GenericNode({
 							className="hover:text-blue-500"
 						>
 							{" "}
-							see all{" "}
+							show advanced{" "}
 						</button>
 					</div>
 					<div className="px-5 py-2 mt-2 dark:text-white text-center">
diff --git a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
index a6a16efbd..d0d7901e1 100644
--- a/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
+++ b/src/frontend/src/modals/NodeModal/components/ModalField/index.tsx
@@ -8,6 +8,8 @@ import ToggleComponent from "../../../../components/toggleComponent";
 import FloatComponent from "../../../../components/floatComponent";
 import IntComponent from "../../../../components/intComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
+import PromptAreaComponent from "../../../../components/promptComponent";
+import CodeAreaComponent from "../../../../components/codeAreaComponent";
 
 export default function ModalField({ data, title, required, id, name, type }) {
 	const { save } = useContext(TabsContext);
@@ -16,9 +18,10 @@ export default function ModalField({ data, title, required, id, name, type }) {
 	);
 
 	return (
-		<div>
+		<div className="flex my-3 flex-row w-full whitespace-nowrap items-center">
+			<span className="mx-2">{title}</span>
 			{type === "str" && !data.node.template[name].options ? (
-				<div>
+				<div className="w-full">
 					{data.node.template[name].list ? (
 						<InputListComponent
 							disabled={false}
@@ -34,15 +37,14 @@ export default function ModalField({ data, title, required, id, name, type }) {
 							}}
 						/>
 					) : data.node.template[name].multiline ? (
-						// <TextAreaComponent
-						// 	disabled={false}
-						// 	value={data.node.template[name].value ?? ""}
-						// 	onChange={(t: string) => {
-						// 		data.node.template[name].value = t;
-						// 		save();
-						// 	}}
-						// />
-                        <div>text area component</div>
+						<TextAreaComponent
+							disabled={false}
+							value={data.node.template[name].value ?? ""}
+							onChange={(t: string) => {
+								data.node.template[name].value = t;
+								save();
+							}}
+						/>
 					) : (
 						<InputComponent
 							disabled={false}
@@ -56,7 +58,7 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					)}
 				</div>
 			) : type === "bool" ? (
-				<div>
+				<div className="ml-auto">
 					{" "}
 					<ToggleComponent
 						disabled={false}
@@ -69,30 +71,37 @@ export default function ModalField({ data, title, required, id, name, type }) {
 					/>
 				</div>
 			) : type === "float" ? (
-				<FloatComponent
-					disabled={false}
-					value={data.node.template[name].value ?? ""}
-					onChange={(t) => {
-						data.node.template[name].value = t;
-						save();
-					}}
-				/>
+				<div className="w-full">
+					<FloatComponent
+						disabled={false}
+						value={data.node.template[name].value ?? ""}
+						onChange={(t) => {
+							data.node.template[name].value = t;
+							save();
+						}}
+					/>
+				</div>
 			) : 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>
 			) : type === "int" ? (
-				<IntComponent
-					disabled={false}
-					value={data.node.template[name].value ?? ""}
-					onChange={(t) => {
-						data.node.template[name].value = t;
-						save();
-					}}
-				/>
+				<div className="w-full">
+					<IntComponent
+						disabled={false}
+						value={data.node.template[name].value ?? ""}
+						onChange={(t) => {
+							data.node.template[name].value = t;
+							save();
+						}}
+					/>
+				</div>
 			) : type === "file" ? (
+				<div className="w-full">
 				<InputFileComponent
 					disabled={false}
 					value={data.node.template[name].value ?? ""}
@@ -106,12 +115,31 @@ export default function ModalField({ data, title, required, id, name, type }) {
 						save();
 					}}
 				></InputFileComponent>
+				</div>
 			) : type === "prompt" ? (
-				<div>code</div>
+				<div className="w-full">
+				<PromptAreaComponent
+					disabled={false}
+					value={data.node.template[name].value ?? ""}
+					onChange={(t: string) => {
+						data.node.template[name].value = t;
+						save();
+					}}
+				/>
+				</div>
 			) : type === "code" ? (
-				<div>code</div>
+				<div className="w-full">
+				<CodeAreaComponent
+					disabled={false}
+					value={data.node.template[name].value ?? ""}
+					onChange={(t: string) => {
+						data.node.template[name].value = t;
+						save();
+					}}
+				/>
+				</div>
 			) : (
-				<div>{name}</div>
+				<div>{type}</div>
 			)}
 		</div>
 	);