From 5a78dfa210ca17936cfddab7679ddb2875a32dc3 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Tue, 31 Jan 2023 21:38:11 +0530 Subject: [PATCH] fix: fixed dark mode theme issue in single line editor --- .../src/components/RequestPane/FormUrlEncodedParams/index.js | 3 +++ .../src/components/RequestPane/MultipartFormParams/index.js | 3 +++ .../bruno-app/src/components/RequestPane/QueryParams/index.js | 3 +++ .../bruno-app/src/components/RequestPane/QueryUrl/index.js | 3 ++- .../src/components/RequestPane/RequestHeaders/index.js | 3 +++ packages/bruno-app/src/components/SingleLineEditor/index.js | 4 ++++ 6 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js index a3eb2168..c848c3ae 100644 --- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js +++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js @@ -3,6 +3,7 @@ import get from 'lodash/get'; import cloneDeep from 'lodash/cloneDeep'; import { IconTrash } from '@tabler/icons'; import { useDispatch } from 'react-redux'; +import { useTheme } from 'providers/Theme'; import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections'; import SingleLineEditor from 'components/SingleLineEditor'; import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; @@ -10,6 +11,7 @@ import StyledWrapper from './StyledWrapper'; const FormUrlEncodedParams = ({ item, collection }) => { const dispatch = useDispatch(); + const { storedTheme } = useTheme(); const params = item.draft ? get(item, 'draft.request.body.formUrlEncoded') : get(item, 'request.body.formUrlEncoded'); const addParam = () => { @@ -88,6 +90,7 @@ const FormUrlEncodedParams = ({ item, collection }) => { handleParamChange({ target: { diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js index 8cd40812..ae237bb1 100644 --- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js +++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/index.js @@ -3,6 +3,7 @@ import get from 'lodash/get'; import cloneDeep from 'lodash/cloneDeep'; import { IconTrash } from '@tabler/icons'; import { useDispatch } from 'react-redux'; +import { useTheme } from 'providers/Theme'; import { addMultipartFormParam, updateMultipartFormParam, deleteMultipartFormParam } from 'providers/ReduxStore/slices/collections'; import SingleLineEditor from 'components/SingleLineEditor'; import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; @@ -10,6 +11,7 @@ import StyledWrapper from './StyledWrapper'; const MultipartFormParams = ({ item, collection }) => { const dispatch = useDispatch(); + const { storedTheme } = useTheme(); const params = item.draft ? get(item, 'draft.request.body.multipartForm') : get(item, 'request.body.multipartForm'); const addParam = () => { @@ -88,6 +90,7 @@ const MultipartFormParams = ({ item, collection }) => { handleParamChange({ target: { diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js index 9b3fac0c..63f94001 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryParams/index.js +++ b/packages/bruno-app/src/components/RequestPane/QueryParams/index.js @@ -3,6 +3,7 @@ import get from 'lodash/get'; import cloneDeep from 'lodash/cloneDeep'; import { IconTrash } from '@tabler/icons'; import { useDispatch } from 'react-redux'; +import { useTheme } from 'providers/Theme'; import { addQueryParam, updateQueryParam, deleteQueryParam } from 'providers/ReduxStore/slices/collections'; import SingleLineEditor from 'components/SingleLineEditor'; import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; @@ -11,6 +12,7 @@ import StyledWrapper from './StyledWrapper'; const QueryParams = ({ item, collection }) => { const dispatch = useDispatch(); + const { storedTheme } = useTheme(); const params = item.draft ? get(item, 'draft.request.params') : get(item, 'request.params'); const handleAddParam = () => { @@ -91,6 +93,7 @@ const QueryParams = ({ item, collection }) => { handleParamChange({ target: { diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js index ce8c8c33..dfdc8196 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js +++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js @@ -10,7 +10,7 @@ import SingleLineEditor from 'components/SingleLineEditor'; import StyledWrapper from './StyledWrapper'; const QueryUrl = ({ item, collection, handleRun }) => { - const { theme } = useTheme(); + const { theme, storedTheme } = useTheme(); const dispatch = useDispatch(); const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method'); const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url'); @@ -45,6 +45,7 @@ const QueryUrl = ({ item, collection, handleRun }) => { onUrlChange(newValue)} onRun={handleRun} collection={collection} diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js index 2bb13f34..253243db 100644 --- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js +++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/index.js @@ -3,6 +3,7 @@ import get from 'lodash/get'; import cloneDeep from 'lodash/cloneDeep'; import { IconTrash } from '@tabler/icons'; import { useDispatch } from 'react-redux'; +import { useTheme } from 'providers/Theme'; import { addRequestHeader, updateRequestHeader, deleteRequestHeader } from 'providers/ReduxStore/slices/collections'; import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; import SingleLineEditor from 'components/SingleLineEditor'; @@ -10,6 +11,7 @@ import StyledWrapper from './StyledWrapper'; const RequestHeaders = ({ item, collection }) => { const dispatch = useDispatch(); + const { storedTheme } = useTheme(); const headers = item.draft ? get(item, 'draft.request.headers') : get(item, 'request.headers'); const addHeader = () => { @@ -88,6 +90,7 @@ const RequestHeaders = ({ item, collection }) => { handleHeaderValueChange({ target: { diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js index 4328235d..700751b8 100644 --- a/packages/bruno-app/src/components/SingleLineEditor/index.js +++ b/packages/bruno-app/src/components/SingleLineEditor/index.js @@ -22,6 +22,7 @@ class SingleLineEditor extends Component { this.editor = CodeMirror(this.editorRef.current, { lineWrapping: false, lineNumbers: false, + theme: this.props.theme === 'dark' ? 'monokai' : 'default', mode: "brunovariables", brunoVarInfo: { variables: getEnvironmentVariables(this.props.collection), @@ -80,6 +81,9 @@ class SingleLineEditor extends Component { this.editor.options.brunoVarInfo.variables = variables; this.addOverlay(); } + if (this.props.theme !== prevProps.theme && this.editor) { + this.editor.setOption('theme', this.props.theme === 'dark' ? 'monokai' : 'default'); + } } componentWillUnmount() {