fix: json dark mode colors and dict component button view (#3802)

* Fix dark mode colors on jsonView

* Fix dict component button view

* Changed style of dict component button

* Changed parameter render to remove space on the bottom of the inputs that are only handles

* Fixed space below nodes

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;
-}
+}

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>
   );
 }

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}

src/frontend/src/components/dictComponent/index.tsx

@@ -2,8 +2,9 @@ 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 ForwardedIconComponent from "../genericIconComponent";
+import { Button } from "../ui/button";
 
 export default function DictComponent({
   value = [],
@@ -37,16 +38,18 @@ 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 font-normal",
+                editNode ? "h-fit px-3 py-0.5" : "",
+              )}
               data-testid="dict-input"
-            />
+            >
+              <ForwardedIconComponent name="BookMarked" className="h-4 w-4" />
+              Edit Dictionary
+            </Button>
           </DictAreaModal>
         </div>
       }

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>
+    )
   );
 }

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} />

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 * {