diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js index dc37065a6..c77749cb8 100644 --- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js @@ -5,6 +5,7 @@ const StyledWrapper = styled.div` background: ${(props) => props.theme.codemirror.bg}; border: solid 1px ${(props) => props.theme.codemirror.border}; font-family: ${(props) => (props.font ? props.font : 'default')}; + font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')}; line-break: anywhere; flex: 1 1 0; } diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js index 967b1e5ca..0b12e68d6 100644 --- a/packages/bruno-app/src/components/CodeEditor/index.js +++ b/packages/bruno-app/src/components/CodeEditor/index.js @@ -333,6 +333,7 @@ export default class CodeEditor extends React.Component { className="h-full w-full flex flex-col relative" aria-label="Code Editor" font={this.props.font} + fontSize={this.props.fontSize} ref={(node) => { this._node = node; }} diff --git a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js index eb88926bf..18a1aca1d 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js @@ -46,6 +46,7 @@ const Docs = ({ collection }) => { onSave={onSave} mode="application/text" font={get(preferences, 'font.codeFont', 'default')} + fontSize={get(preferences, 'font.codeFontSize')} /> ) : ( diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/index.js b/packages/bruno-app/src/components/CollectionSettings/Script/index.js index 84af056f6..6fe979cbf 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js @@ -52,6 +52,7 @@ const Script = ({ collection }) => { mode="javascript" onSave={handleSave} font={get(preferences, 'font.codeFont', 'default')} + fontSize={get(preferences, 'font.codeFontSize')} />
@@ -64,6 +65,7 @@ const Script = ({ collection }) => { mode="javascript" onSave={handleSave} font={get(preferences, 'font.codeFont', 'default')} + fontSize={get(preferences, 'font.codeFontSize')} />
diff --git a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js index c23294c74..d87a1dea4 100644 --- a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js +++ b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js @@ -36,6 +36,7 @@ const Tests = ({ collection }) => { mode="javascript" onSave={handleSave} font={get(preferences, 'font.codeFont', 'default')} + fontSize={get(preferences, 'font.codeFontSize')} />
diff --git a/packages/bruno-app/src/components/Documentation/index.js b/packages/bruno-app/src/components/Documentation/index.js index 9039ccea5..0af0d7588 100644 --- a/packages/bruno-app/src/components/Documentation/index.js +++ b/packages/bruno-app/src/components/Documentation/index.js @@ -47,6 +47,7 @@ const Documentation = ({ item, collection }) => { collection={collection} theme={displayedTheme} font={get(preferences, 'font.codeFont', 'default')} + fontSize={get(preferences, 'font.codeFontSize')} value={docs || ''} onEdit={onEdit} onSave={onSave} diff --git a/packages/bruno-app/src/components/FolderSettings/Script/index.js b/packages/bruno-app/src/components/FolderSettings/Script/index.js index 6155e1337..628fa5cb5 100644 --- a/packages/bruno-app/src/components/FolderSettings/Script/index.js +++ b/packages/bruno-app/src/components/FolderSettings/Script/index.js @@ -54,6 +54,7 @@ const Script = ({ collection, folder }) => { mode="javascript" onSave={handleSave} font={get(preferences, 'font.codeFont', 'default')} + fontSize={get(preferences, 'font.codeFontSize')} />
@@ -66,6 +67,7 @@ const Script = ({ collection, folder }) => { mode="javascript" onSave={handleSave} font={get(preferences, 'font.codeFont', 'default')} + fontSize={get(preferences, 'font.codeFontSize')} />
diff --git a/packages/bruno-app/src/components/FolderSettings/Tests/index.js b/packages/bruno-app/src/components/FolderSettings/Tests/index.js index b163c6b1e..8854b06cd 100644 --- a/packages/bruno-app/src/components/FolderSettings/Tests/index.js +++ b/packages/bruno-app/src/components/FolderSettings/Tests/index.js @@ -37,6 +37,7 @@ const Tests = ({ collection, folder }) => { mode="javascript" onSave={handleSave} font={get(preferences, 'font.codeFont', 'default')} + fontSize={get(preferences, 'font.codeFontSize')} />
diff --git a/packages/bruno-app/src/components/Preferences/Font/index.js b/packages/bruno-app/src/components/Preferences/Font/index.js index 2f27fea8b..ef6ac9f2f 100644 --- a/packages/bruno-app/src/components/Preferences/Font/index.js +++ b/packages/bruno-app/src/components/Preferences/Font/index.js @@ -9,17 +9,25 @@ const Font = ({ close }) => { const preferences = useSelector((state) => state.app.preferences); const [codeFont, setCodeFont] = useState(get(preferences, 'font.codeFont', 'default')); + const [codeFontSize, setCodeFontSize] = useState(get(preferences, 'font.codeFontSize', '14')); - const handleInputChange = (event) => { + const handleCodeFontChange = (event) => { setCodeFont(event.target.value); }; + const handleCodeFontSizeChange = (event) => { + // Restrict to min/max value + const clampedSize = Math.max(1, Math.min(event.target.value, 32)); + setCodeFontSize(clampedSize); + }; + const handleSave = () => { dispatch( savePreferences({ ...preferences, font: { - codeFont + codeFont, + codeFontSize } }) ).then(() => { @@ -29,17 +37,33 @@ const Font = ({ close }) => { return ( - - +
+
+ + +
+
+ + +
+