Added a setting that allows you to change the font of the code

packages/bruno-app/src/components/CodeEditor/StyledWrapper.js

@@ -4,6 +4,7 @@ const StyledWrapper = styled.div`
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
+    font-family: ${(props) => props.font ? props.font : "default"};
   }
 
   .CodeMirror-overlayscroll-horizontal div,

packages/bruno-app/src/components/CodeEditor/index.js

@@ -121,6 +121,7 @@ export default class CodeEditor extends React.Component {
       <StyledWrapper
         className="h-full w-full"
         aria-label="Code Editor"
+        font={this.props.font}
         ref={(node) => {
           this._node = node;
         }}

packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  color: ${(props) => props.theme.text};
+`;
+
+export default StyledWrapper;

packages/bruno-app/src/components/Preferences/Font/index.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { usePreferences } from 'providers/Preferences';
+import StyledWrapper from './StyledWrapper';
+
+const Font = () => {
+  const { preferences, setPreferences } = usePreferences();
+
+  const [codeFont, setCodeFont] = useState(preferences.codeFont);
+
+  const handleInputChange = (event) => {
+    const updatedPreferences = {
+      ...preferences,
+      codeFont: event.target.value
+    };
+
+    setPreferences(updatedPreferences)
+      .then(() => {
+        setCodeFont(event.target.value);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  return (   
+    <StyledWrapper>
+      <h2>Font in code area</h2>
+      <input type="text" id="first_name" onChange={handleInputChange} placeholder="Local font" defaultValue={codeFont} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-1.5" />
+    </StyledWrapper>
+  );
+};
+
+export default Font;

packages/bruno-app/src/components/Preferences/index.js

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import React, { useState } from 'react';
 import Support from './Support';
 import General from './General';
+import Font from './Font';
 import Theme from './Theme';
 import StyledWrapper from './StyledWrapper';
 
@@ -28,6 +29,10 @@ const Preferences = ({ onClose }) => {
       case 'support': {
         return <Support />;
       }
+
+      case 'font': {
+        return <Font />;
+      }
     }
   };
 
@@ -41,6 +46,9 @@ const Preferences = ({ onClose }) => {
           <div className={getTabClassname('theme')} role="tab" onClick={() => setTab('theme')}>
             Theme
           </div>
+          <div className={getTabClassname('font')} role="tab" onClick={() => setTab('font')}>
+            Font
+          </div>
           <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
             Support
           </div>

packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js

@@ -4,12 +4,14 @@ import CodeEditor from 'components/CodeEditor';
 import { updateRequestGraphqlVariables } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
+import { usePreferences } from 'providers/Preferences';
 import StyledWrapper from './StyledWrapper';
 
 const GraphQLVariables = ({ variables, item, collection }) => {
   const dispatch = useDispatch();
 
   const { storedTheme } = useTheme();
+  const { preferences } = usePreferences();
 
   const onEdit = (value) => {
     dispatch(
@@ -30,6 +32,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
         collection={collection}
         value={variables || ''}
         theme={storedTheme}
+        font={preferences.codeFont}
         onEdit={onEdit}
         mode="javascript"
         onRun={onRun}

packages/bruno-app/src/components/RequestPane/RequestBody/index.js

@@ -5,6 +5,7 @@ import FormUrlEncodedParams from 'components/RequestPane/FormUrlEncodedParams';
 import MultipartFormParams from 'components/RequestPane/MultipartFormParams';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
+import { usePreferences } from 'providers/Preferences';
 import { updateRequestBody } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
@@ -14,6 +15,7 @@ const RequestBody = ({ item, collection }) => {
   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 { preferences } = usePreferences();
 
   const onEdit = (value) => {
     dispatch(
@@ -46,6 +48,7 @@ const RequestBody = ({ item, collection }) => {
         <CodeEditor
           collection={collection}
           theme={storedTheme}
+          font={preferences.codeFont}
           value={bodyContent[bodyMode] || ''}
           onEdit={onEdit}
           onRun={onRun}

packages/bruno-app/src/components/RequestPane/Script/index.js

@@ -5,6 +5,7 @@ import CodeEditor from 'components/CodeEditor';
 import { updateRequestScript, updateResponseScript } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
+import { usePreferences } from 'providers/Preferences';
 import StyledWrapper from './StyledWrapper';
 
 const Script = ({ item, collection }) => {
@@ -13,6 +14,7 @@ const Script = ({ item, collection }) => {
   const responseScript = item.draft ? get(item, 'draft.request.script.res') : get(item, 'request.script.res');
 
   const { storedTheme } = useTheme();
+  const { preferences } = usePreferences();
 
   const onRequestScriptEdit = (value) => {
     dispatch(
@@ -45,6 +47,7 @@ const Script = ({ item, collection }) => {
           collection={collection}
           value={requestScript || ''}
           theme={storedTheme}
+          font={preferences.codeFont}
           onEdit={onRequestScriptEdit}
           mode="javascript"
           onRun={onRun}
@@ -57,6 +60,7 @@ const Script = ({ item, collection }) => {
           collection={collection}
           value={responseScript || ''}
           theme={storedTheme}
+          font={preferences.codeFont}
           onEdit={onResponseScriptEdit}
           mode="javascript"
           onRun={onRun}

packages/bruno-app/src/components/RequestPane/Tests/index.js

@@ -5,6 +5,7 @@ import CodeEditor from 'components/CodeEditor';
 import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
+import { usePreferences } from 'providers/Preferences';
 import StyledWrapper from './StyledWrapper';
 
 const Tests = ({ item, collection }) => {
@@ -12,6 +13,7 @@ const Tests = ({ item, collection }) => {
   const tests = item.draft ? get(item, 'draft.request.tests') : get(item, 'request.tests');
 
   const { storedTheme } = useTheme();
+  const { preferences } = usePreferences();
 
   const onEdit = (value) => {
     dispatch(
@@ -32,6 +34,7 @@ const Tests = ({ item, collection }) => {
         collection={collection}
         value={tests || ''}
         theme={storedTheme}
+        font={preferences.codeFont}
         onEdit={onEdit}
         mode="javascript"
         onRun={onRun}

packages/bruno-app/src/components/ResponsePane/QueryResult/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import CodeEditor from 'components/CodeEditor';
 import { useTheme } from 'providers/Theme';
+import { usePreferences } from 'providers/Preferences';
 import { useDispatch } from 'react-redux';
 import { sendRequest } from 'providers/ReduxStore/slices/collections/actions';
 import classnames from 'classnames';
@@ -13,6 +14,7 @@ import { useMemo } from 'react';
 
 const QueryResult = ({ item, collection, data, width, disableRunEventListener, headers }) => {
   const { storedTheme } = useTheme();
+  const { preferences } = usePreferences();
   const [tab, setTab] = useState('preview');
   const dispatch = useDispatch();
   const contentType = getContentType(headers);
@@ -99,7 +101,7 @@ const QueryResult = ({ item, collection, data, width, disableRunEventListener, h
       );
     }
 
-    return <CodeEditor collection={collection} theme={storedTheme} onRun={onRun} value={value} mode={mode} readOnly />;
+    return <CodeEditor collection={collection} font={preferences.codeFont} theme={storedTheme} onRun={onRun} value={value} mode={mode} readOnly />;
   }, [tab, collection, storedTheme, onRun, value, mode]);
 
   return (

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js

@@ -1,10 +1,12 @@
 import CodeEditor from 'components/CodeEditor/index';
 import { HTTPSnippet } from 'httpsnippet';
 import { useTheme } from 'providers/Theme/index';
+import { usePreferences } from 'providers/Preferences/index';
 import { buildHarRequest } from 'utils/codegenerator/har';
 
 const CodeView = ({ language, item }) => {
   const { storedTheme } = useTheme();
+  const { preferences } = usePreferences();
   const { target, client, language: lang } = language;
   let snippet = '';
 
@@ -15,7 +17,7 @@ const CodeView = ({ language, item }) => {
     snippet = 'Error generating code snippet';
   }
 
-  return <CodeEditor readOnly value={snippet} theme={storedTheme} mode={lang} />;
+  return <CodeEditor readOnly value={snippet} font={preferences.codeFont} theme={storedTheme} mode={lang} />;
 };
 
 export default CodeView;