From fa0b79fa3c686b70ec3ab8f6d440b72bcf37cb79 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 13 Sep 2024 11:53:13 -0300
Subject: [PATCH 1/5] Fix dark mode colors on jsonView

---
 src/frontend/src/App.css                      | 19 ++-----------------
 .../src/modals/dictAreaModal/index.tsx        |  7 ++++---
 src/frontend/src/style/classes.css            | 14 ++++++++++++--
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index 06eacb63b411..419fdfeef517 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -65,13 +65,6 @@ body {
   src: url("assets/text-security-disc.woff") format("woff");
 }
 
-.json-view {
-  height: 370px !important;
-  background-color: #2c2c2c !important;
-  border-radius: 10px !important;
-  padding: 10px !important;
-}
-
 .jv-indent {
   overflow-y: auto !important;
   max-height: 310px !important;
@@ -130,14 +123,6 @@ body {
   ); /* Medium indigo color with 20% opacity */
 }
 
-.json-view-playground .json-view {
-  background-color: #fff !important;
-}
-
-.json-view-flow .json-view {
-  background-color: #bbb !important;
-}
-
 /* This CSS is to not apply the border for the column having 'no-border' class */
 .no-border.ag-cell:focus {
   border: none !important;
@@ -165,10 +150,10 @@ body {
   height: 100%;
 }
 .react-flow__resize-control.handle {
-  width: 0.75rem!important;
+  width: 0.75rem !important;
   height: 0.75rem !important;
   background-color: white !important;
   border-color: var(--border) !important;
   z-index: 1000 !important;
   border-radius: 20% !important;
-}
\ No newline at end of file
+}
diff --git a/src/frontend/src/modals/dictAreaModal/index.tsx b/src/frontend/src/modals/dictAreaModal/index.tsx
index 3fd098ba0508..41a2e2a70263 100644
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/src/frontend/src/modals/dictAreaModal/index.tsx
@@ -65,13 +65,12 @@ export default function DictAreaModal({
     <BaseModal.Content>
       <div className="flex h-full w-full flex-col transition-all">
         <JsonView
-          dark
+          theme="vscode"
           editable={!!onChange}
           enableClipboard
           onChange={handleJsonChange}
           src={cloneDeep(componentValue)}
           customizeCopy={customizeCopy}
-          theme="vscode"
         />
       </div>
     </BaseModal.Content>
@@ -85,7 +84,9 @@ export default function DictAreaModal({
       setOpen={setOpen}
       onSubmit={onChange ? handleSubmit : undefined}
     >
-      <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
+      <BaseModal.Trigger className="h-full" asChild>
+        {children}
+      </BaseModal.Trigger>
       {renderHeader()}
       {renderContent()}
       <BaseModal.Footer submit={onChange ? { label: "Save" } : undefined} />
diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css
index f8c3d9d0a20f..e12bee424ab1 100644
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@@ -151,8 +151,18 @@ textarea[class^="ag-"]:focus {
   height: fit-content !important;
 }
 
-.json-view.dark {
-  background-color: #161c28 !important;
+.json-view {
+  height: 370px !important;
+  border-radius: 10px !important;
+  padding: 10px !important;
+}
+
+.json-view {
+  background-color: #f8fafc !important;
+}
+
+.dark .json-view {
+  background-color: #141924 !important;
 }
 
 .react-flow__node.dragging * {

From 3b5b7755b96ce2a2addfd380b735bc21f184e2e9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 13 Sep 2024 11:53:24 -0300
Subject: [PATCH 2/5] Fix dict component button view

---
 .../src/components/dictComponent/index.tsx    | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx
index e17411833d8e..7f2b082e8d36 100644
--- a/src/frontend/src/components/dictComponent/index.tsx
+++ b/src/frontend/src/components/dictComponent/index.tsx
@@ -2,8 +2,8 @@ import { useEffect } from "react";
 import { DictComponentType } from "../../types/components";
 
 import DictAreaModal from "../../modals/dictAreaModal";
-import { classNames } from "../../utils/utils";
-import { Input } from "../ui/input";
+import { classNames, cn } from "../../utils/utils";
+import { Button } from "../ui/button";
 
 export default function DictComponent({
   value = [],
@@ -37,16 +37,14 @@ export default function DictComponent({
             }}
             disabled={disabled}
           >
-            <Input
-              type="text"
-              className={
-                editNode
-                  ? "input-edit-node input-disable pointer-events-none cursor-pointer"
-                  : "input-disable pointer-events-none cursor-pointer"
-              }
-              placeholder={disabled ? "" : "Click to edit your dictionary..."}
+            <Button
+              variant="primary"
+              size="sm"
+              className={cn("w-full", editNode ? "h-fit px-3 py-0.5" : "")}
               data-testid="dict-input"
-            />
+            >
+              <span>Click to edit your dictionary...</span>
+            </Button>
           </DictAreaModal>
         </div>
       }

From ab8489363dff4f52438e2276fd70b744a167d677 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 13 Sep 2024 11:58:03 -0300
Subject: [PATCH 3/5] Changed style of dict component button

---
 src/frontend/src/components/dictComponent/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx
index 7f2b082e8d36..b54dbbcbe96a 100644
--- a/src/frontend/src/components/dictComponent/index.tsx
+++ b/src/frontend/src/components/dictComponent/index.tsx
@@ -3,6 +3,7 @@ import { DictComponentType } from "../../types/components";
 
 import DictAreaModal from "../../modals/dictAreaModal";
 import { classNames, cn } from "../../utils/utils";
+import ForwardedIconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 
 export default function DictComponent({
@@ -40,10 +41,14 @@ export default function DictComponent({
             <Button
               variant="primary"
               size="sm"
-              className={cn("w-full", editNode ? "h-fit px-3 py-0.5" : "")}
+              className={cn(
+                "w-full font-normal",
+                editNode ? "h-fit px-3 py-0.5" : "",
+              )}
               data-testid="dict-input"
             >
-              <span>Click to edit your dictionary...</span>
+              <ForwardedIconComponent name="BookMarked" className="h-4 w-4" />
+              Edit Dictionary
             </Button>
           </DictAreaModal>
         </div>

From 30189cf6794b240fd4c0ac06c0deec6cfeb7ae31 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 13 Sep 2024 12:07:37 -0300
Subject: [PATCH 4/5] Changed parameter render to remove space on the bottom of
 the inputs that are only handles

---
 .../components/NodeInputField/index.tsx       | 32 +++++++++----------
 .../refreshParameterComponent/index.tsx       | 32 ++++++++++---------
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
index 8175cc62c470..e44ea2147ba8 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeInputField/index.tsx
@@ -94,14 +94,15 @@ export default function NodeInputField({
     <div
       ref={ref}
       className={
-        "relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
+        "relative mt-1 flex min-h-10 w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
         ((name === "code" && type === "code") ||
         (name.includes("code") && proxy)
           ? " hidden"
           : "")
       }
     >
-      <>
+      {displayHandle && Handle}
+      <div className="flex w-full flex-col gap-2">
         <div className="flex w-full items-center truncate text-sm">
           {proxy ? (
             <ShadTooltip content={<span>{proxy.id}</span>}>
@@ -140,23 +141,20 @@ export default function NodeInputField({
           </div>
         </div>
 
-        {displayHandle && Handle}
         {data.node?.template[name] !== undefined && (
-          <div className="mt-2 w-full">
-            <CustomParameterComponent
-              handleOnNewValue={handleOnNewValue}
-              name={name}
-              nodeId={data.id}
-              templateData={data.node?.template[name]!}
-              templateValue={data.node?.template[name].value ?? ""}
-              editNode={false}
-              handleNodeClass={handleNodeClass}
-              nodeClass={data.node!}
-              disabled={disabled}
-            />
-          </div>
+          <CustomParameterComponent
+            handleOnNewValue={handleOnNewValue}
+            name={name}
+            nodeId={data.id}
+            templateData={data.node?.template[name]!}
+            templateValue={data.node?.template[name].value ?? ""}
+            editNode={false}
+            handleNodeClass={handleNodeClass}
+            nodeClass={data.node!}
+            disabled={disabled}
+          />
         )}
-      </>
+      </div>
     </div>
   );
 }
diff --git a/src/frontend/src/components/parameterRenderComponent/component/refreshParameterComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/component/refreshParameterComponent/index.tsx
index 796f9b768ba3..bcb6568b0927 100644
--- a/src/frontend/src/components/parameterRenderComponent/component/refreshParameterComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/component/refreshParameterComponent/index.tsx
@@ -29,20 +29,22 @@ export function RefreshParameterComponent({
       setErrorData,
     );
   return (
-    <div className="flex w-full items-center justify-between gap-2">
-      {children}
-      {templateData.refresh_button && (
-        <div className="shrink-0 flex-col">
-          <RefreshButton
-            isLoading={postTemplateValue.isPending}
-            disabled={disabled}
-            editNode={editNode}
-            button_text={templateData.refresh_button_text}
-            handleUpdateValues={handleRefreshButtonPress}
-            id={"refresh-button-" + name}
-          />
-        </div>
-      )}
-    </div>
+    (children || templateData.refresh_button) && (
+      <div className="flex w-full items-center justify-between gap-2">
+        {children}
+        {templateData.refresh_button && (
+          <div className="shrink-0 flex-col">
+            <RefreshButton
+              isLoading={postTemplateValue.isPending}
+              disabled={disabled}
+              editNode={editNode}
+              button_text={templateData.refresh_button_text}
+              handleUpdateValues={handleRefreshButtonPress}
+              id={"refresh-button-" + name}
+            />
+          </div>
+        )}
+      </div>
+    )
   );
 }

From 4d007a3c9fc869b335b4f0cb116d6382e1471eb5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 13 Sep 2024 12:13:47 -0300
Subject: [PATCH 5/5] Fixed space below nodes

---
 .../GenericNode/components/NodeOutputfield/index.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index 064803a072f5..96a7dabb1233 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -127,7 +127,7 @@ export default function NodeOutputField({
     >
       <>
         <div className="flex w-full items-center justify-end truncate text-sm">
-          <div className="flex-1">
+          <div className="flex flex-1">
             <Button
               disabled={disabledOutput}
               unstyled
@@ -150,7 +150,7 @@ export default function NodeOutputField({
               <IconComponent className="h-5 w-5 text-ice" name={"Snowflake"} />
             </div>
           )}
-          <div className="flex gap-2">
+          <div className="flex items-center gap-2">
             <span className={data.node?.frozen ? "text-ice" : ""}>
               <OutputComponent
                 proxy={outputProxy}
@@ -175,7 +175,7 @@ export default function NodeOutputField({
                   : "Please build the component first"
               }
             >
-              <div>
+              <div className="flex">
                 <OutputModal
                   disabled={!displayOutputPreview || unknownOutput}
                   nodeId={flowPoolId}