From e2d754702ac8828a95ba7097f879d71cf4a91d3d Mon Sep 17 00:00:00 2001
From: lohit <lohit@usebruno.com>
Date: Mon, 19 Feb 2024 17:30:49 +0530
Subject: [PATCH] feat(#BRU-10) - codeeditor syntax colors for system theme
 (#1595)

---
 .../src/components/CollectionSettings/Docs/index.js         | 4 ++--
 .../src/components/CollectionSettings/Script/index.js       | 6 +++---
 .../src/components/CollectionSettings/Tests/index.js        | 4 ++--
 packages/bruno-app/src/components/Documentation/index.js    | 4 ++--
 .../src/components/RequestPane/GraphQLVariables/index.js    | 4 ++--
 .../src/components/RequestPane/RequestBody/index.js         | 4 ++--
 .../bruno-app/src/components/RequestPane/Script/index.js    | 6 +++---
 .../bruno-app/src/components/RequestPane/Tests/index.js     | 4 ++--
 .../ResponsePane/QueryResult/QueryResultPreview/index.js    | 4 ++--
 .../src/components/ResponsePane/QueryResult/index.js        | 4 ++--
 .../CollectionItem/GenerateCodeItem/CodeView/index.js       | 4 ++--
 11 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
index 88c272b13..d449d12d3 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
@@ -11,7 +11,7 @@ import StyledWrapper from './StyledWrapper';
 
 const Docs = ({ collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
   const docs = get(collection, 'root.docs', '');
   const preferences = useSelector((state) => state.app.preferences);
@@ -40,7 +40,7 @@ const Docs = ({ collection }) => {
       {isEditing ? (
         <CodeEditor
           collection={collection}
-          theme={storedTheme}
+          theme={displayedTheme}
           value={docs || ''}
           onEdit={onEdit}
           onSave={onSave}
diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/index.js b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
index 0314c65e5..2bc0dae60 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@@ -12,7 +12,7 @@ const Script = ({ collection }) => {
   const requestScript = get(collection, 'root.request.script.req', '');
   const responseScript = get(collection, 'root.request.script.res', '');
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onRequestScriptEdit = (value) => {
@@ -44,7 +44,7 @@ const Script = ({ collection }) => {
         <CodeEditor
           collection={collection}
           value={requestScript || ''}
-          theme={storedTheme}
+          theme={displayedTheme}
           onEdit={onRequestScriptEdit}
           mode="javascript"
           onSave={handleSave}
@@ -56,7 +56,7 @@ const Script = ({ collection }) => {
         <CodeEditor
           collection={collection}
           value={responseScript || ''}
-          theme={storedTheme}
+          theme={displayedTheme}
           onEdit={onResponseScriptEdit}
           mode="javascript"
           onSave={handleSave}
diff --git a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
index 3566ec0dd..34edf4810 100644
--- a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
@@ -11,7 +11,7 @@ const Tests = ({ collection }) => {
   const dispatch = useDispatch();
   const tests = get(collection, 'root.request.tests', '');
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
@@ -30,7 +30,7 @@ const Tests = ({ collection }) => {
       <CodeEditor
         collection={collection}
         value={tests || ''}
-        theme={storedTheme}
+        theme={displayedTheme}
         onEdit={onEdit}
         mode="javascript"
         onSave={handleSave}
diff --git a/packages/bruno-app/src/components/Documentation/index.js b/packages/bruno-app/src/components/Documentation/index.js
index 809465034..d4b790965 100644
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@@ -11,7 +11,7 @@ import StyledWrapper from './StyledWrapper';
 
 const Documentation = ({ item, collection }) => {
   const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const [isEditing, setIsEditing] = useState(false);
   const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
   const preferences = useSelector((state) => state.app.preferences);
@@ -45,7 +45,7 @@ const Documentation = ({ item, collection }) => {
       {isEditing ? (
         <CodeEditor
           collection={collection}
-          theme={storedTheme}
+          theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           value={docs || ''}
           onEdit={onEdit}
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
index 0d913d97f..a7978ebd7 100644
--- a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
@@ -10,7 +10,7 @@ import StyledWrapper from './StyledWrapper';
 const GraphQLVariables = ({ variables, item, collection }) => {
   const dispatch = useDispatch();
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
@@ -31,7 +31,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
       <CodeEditor
         collection={collection}
         value={variables || ''}
-        theme={storedTheme}
+        theme={displayedTheme}
         font={get(preferences, 'font.codeFont', 'default')}
         onEdit={onEdit}
         mode="javascript"
diff --git a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
index 9daaf37f1..b776351d7 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/index.js
@@ -13,7 +13,7 @@ const RequestBody = ({ item, collection }) => {
   const dispatch = useDispatch();
   const body = item.draft ? get(item, 'draft.request.body') : get(item, 'request.body');
   const bodyMode = item.draft ? get(item, 'draft.request.body.mode') : get(item, 'request.body.mode');
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
@@ -48,7 +48,7 @@ const RequestBody = ({ item, collection }) => {
       <StyledWrapper className="w-full">
         <CodeEditor
           collection={collection}
-          theme={storedTheme}
+          theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           value={bodyContent[bodyMode] || ''}
           onEdit={onEdit}
diff --git a/packages/bruno-app/src/components/RequestPane/Script/index.js b/packages/bruno-app/src/components/RequestPane/Script/index.js
index 89048fc53..935b52ede 100644
--- a/packages/bruno-app/src/components/RequestPane/Script/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/index.js
@@ -12,7 +12,7 @@ const Script = ({ item, collection }) => {
   const requestScript = item.draft ? get(item, 'draft.request.script.req') : get(item, 'request.script.req');
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onRequestScriptEdit = (value) => {
@@ -45,7 +45,7 @@ const Script = ({ item, collection }) => {
         <CodeEditor
           collection={collection}
           value={requestScript || ''}
-          theme={storedTheme}
+          theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           onEdit={onRequestScriptEdit}
           mode="javascript"
@@ -58,7 +58,7 @@ const Script = ({ item, collection }) => {
         <CodeEditor
           collection={collection}
           value={responseScript || ''}
-          theme={storedTheme}
+          theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
           onEdit={onResponseScriptEdit}
           mode="javascript"
diff --git a/packages/bruno-app/src/components/RequestPane/Tests/index.js b/packages/bruno-app/src/components/RequestPane/Tests/index.js
index 66645509a..f80087a7f 100644
--- a/packages/bruno-app/src/components/RequestPane/Tests/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Tests/index.js
@@ -11,7 +11,7 @@ const Tests = ({ item, collection }) => {
   const dispatch = useDispatch();
   const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
 
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
 
   const onEdit = (value) => {
@@ -32,7 +32,7 @@ const Tests = ({ item, collection }) => {
       <CodeEditor
         collection={collection}
         value={tests || ''}
-        theme={storedTheme}
+        theme={displayedTheme}
         font={get(preferences, 'font.codeFont', 'default')}
         onEdit={onEdit}
         mode="javascript"
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
index af11ebc23..dc67a5d10 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js
@@ -19,7 +19,7 @@ const QueryResultPreview = ({
   collection,
   mode,
   disableRunEventListener,
-  storedTheme
+  displayedTheme
 }) => {
   const preferences = useSelector((state) => state.app.preferences);
   const dispatch = useDispatch();
@@ -71,7 +71,7 @@ const QueryResultPreview = ({
         <CodeEditor
           collection={collection}
           font={get(preferences, 'font.codeFont', 'default')}
-          theme={storedTheme}
+          theme={displayedTheme}
           onRun={onRun}
           value={formattedData}
           mode={mode}
diff --git a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
index cbc7031f5..3afe06ce7 100644
--- a/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/QueryResult/index.js
@@ -51,7 +51,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
   const mode = getCodeMirrorModeBasedOnContentType(contentType, data);
   const [filter, setFilter] = useState(null);
   const formattedData = formatResponse(data, mode, filter);
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
 
   const debouncedResultFilterOnChange = debounce((e) => {
     setFilter(e.target.value);
@@ -132,7 +132,7 @@ const QueryResult = ({ item, collection, data, dataBuffer, width, disableRunEven
             collection={collection}
             allowedPreviewModes={allowedPreviewModes}
             disableRunEventListener={disableRunEventListener}
-            storedTheme={storedTheme}
+            displayedTheme={displayedTheme}
           />
           {queryFilterEnabled && <QueryResultFilter onChange={debouncedResultFilterOnChange} mode={mode} />}
         </>
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
index d76aadc39..f0fa506b2 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
@@ -11,7 +11,7 @@ import { IconCopy } from '@tabler/icons';
 import { findCollectionByItemUid } from '../../../../../../../utils/collections/index';
 
 const CodeView = ({ language, item }) => {
-  const { storedTheme } = useTheme();
+  const { displayedTheme } = useTheme();
   const preferences = useSelector((state) => state.app.preferences);
   const { target, client, language: lang } = language;
   const requestHeaders = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers');
@@ -45,7 +45,7 @@ const CodeView = ({ language, item }) => {
           readOnly
           value={snippet}
           font={get(preferences, 'font.codeFont', 'default')}
-          theme={storedTheme}
+          theme={displayedTheme}
           mode={lang}
         />
       </StyledWrapper>