fix: JSONViewer component style update to fits on dark and light mode (…

…#3792)

* ✨ (frontend): Add react-json-view-lite package to frontend dependencies
📝 (frontend): Update JsonView component in dictAreaModal to use dark theme and adjust class name
📝 (frontend): Update background color for dark theme in JsonView component styling

* 🔧 (generalBugs-shard-13.spec.ts): remove unnecessary line causing linting issue

* updating lock

src/frontend/package.json

@@ -62,6 +62,7 @@
     "react-hook-form": "^7.52.0",
     "react-hotkeys-hook": "^4.5.0",
     "react-icons": "^5.2.1",
+    "react-json-view-lite": "^1.5.0",
     "react-laag": "^2.0.5",
     "react-markdown": "^8.0.7",
     "react-pdf": "^9.0.0",

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -65,14 +65,13 @@ export default function DictAreaModal({
     <BaseModal.Content>
       <div className="flex h-full w-full flex-col transition-all">
         <JsonView
-          theme="vscode"
-          dark={isDark}
-          className={!isDark ? "json-view-white" : "json-view-dark"}
+          dark
           editable={!!onChange}
           enableClipboard
           onChange={handleJsonChange}
           src={cloneDeep(componentValue)}
           customizeCopy={customizeCopy}
+          theme="vscode"
         />
       </div>
     </BaseModal.Content>

src/frontend/src/style/classes.css

@@ -151,18 +151,14 @@ textarea[class^="ag-"]:focus {
   height: fit-content !important;
 }
 
-.json-view-white {
-  background-color: #f8fafc !important;
-}
-
-.json-view-dark {
-  background-color: #141924 !important;
+.json-view.dark {
+  background-color: #161c28 !important;
 }
 
 .react-flow__node.dragging * {
   cursor: grabbing !important;
 }
 
-.react-flow__node-noteNode:not(.selected){
+.react-flow__node-noteNode:not(.selected) {
   z-index: -1 !important;
-}
+}

src/frontend/tests/extended/regression/generalBugs-shard-13.spec.ts

@@ -63,7 +63,6 @@ test("should be able to share a component on the store by clicking on the share
   await page.getByText("New Project", { exact: true }).click();
 
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
-
   await page.waitForSelector("text=share", { timeout: 10000 });
   await page.waitForSelector("text=playground", { timeout: 10000 });
   await page.waitForSelector("text=api", { timeout: 10000 });