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;

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,9 +141,7 @@ export default function NodeInputField({
           </div>
         </div>
 
-        {displayHandle && Handle}
         {data.node?.template[name] !== undefined && (
-          <div className="mt-2 w-full">
           <CustomParameterComponent
             handleOnNewValue={handleOnNewValue}
             name={name}
@@ -154,9 +153,8 @@ export default function NodeInputField({
             nodeClass={data.node!}
             disabled={disabled}
           />
-          </div>
         )}
-      </>
+      </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 { classNames, cn } from "../../utils/utils";
-import { Input } from "../ui/input";
+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
+            <Button
-              type="text"
+              variant="primary"
-              className={
+              size="sm"
-                editNode
+              className={cn(
-                  ? "input-edit-node input-disable pointer-events-none cursor-pointer"
+                "w-full font-normal",
-                  : "input-disable pointer-events-none cursor-pointer"
+                editNode ? "h-fit px-3 py-0.5" : "",
-              }
+              )}
-              placeholder={disabled ? "" : "Click to edit your dictionary..."}
               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,6 +29,7 @@ export function RefreshParameterComponent({
       setErrorData,
     );
   return (
+    (children || templateData.refresh_button) && (
       <div className="flex w-full items-center justify-between gap-2">
         {children}
         {templateData.refresh_button && (
@@ -44,5 +45,6 @@ export function RefreshParameterComponent({
           </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 {
+.json-view {
-  background-color: #161c28 !important;
+  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 * {