diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json index 5080f9d466..b9c86fbb2b 100644 --- a/packages/bruno-app/package.json +++ b/packages/bruno-app/package.json @@ -45,6 +45,7 @@ "react-dnd": "^16.0.1", "react-dnd-html5-backend": "^16.0.1", "react-dom": "18.2.0", + "react-github-btn": "^1.4.0", "react-hot-toast": "^2.4.0", "react-redux": "^7.2.6", "react-tooltip": "^5.5.2", diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js index dd43d7e4c4..8768f77a6e 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js @@ -14,6 +14,16 @@ const StyledWrapper = styled.div` // Todo: dark mode temporary fix // Clean this + .CodeMirror.cm-s-monokai { + .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div { + background: #444444; + } + } + + .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { + color: #9cdcfe !important; + } + .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #9cdcfe !important; } diff --git a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js index d29df14e30..068da7716e 100644 --- a/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js +++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/index.js @@ -51,6 +51,7 @@ export default class QueryEditor extends React.Component { autoCloseBrackets: true, matchBrackets: true, showCursorWhenSelecting: true, + scrollbarStyle: "overlay", readOnly: this.props.readOnly ? 'nocursor' : false, foldGutter: { minFoldSize: 4 diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js index 85c2cc8960..083aeebdda 100644 --- a/packages/bruno-app/src/components/Sidebar/index.js +++ b/packages/bruno-app/src/components/Sidebar/index.js @@ -2,11 +2,13 @@ import MenuBar from './MenuBar'; import TitleBar from './TitleBar'; import Collections from './Collections'; import StyledWrapper, { BottomWrapper, VersionNumber } from './StyledWrapper'; +import GitHubButton from 'react-github-btn' import { useState, useEffect } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { IconChevronsRight } from '@tabler/icons'; import { updateLeftSidebarWidth, updateIsDragging, toggleLeftMenuBar } from 'providers/ReduxStore/slices/app'; +import { useTheme } from 'providers/Theme'; const MIN_LEFT_SIDEBAR_WIDTH = 222; const MAX_LEFT_SIDEBAR_WIDTH = 600; @@ -17,6 +19,10 @@ const Sidebar = () => { const [asideWidth, setAsideWidth] = useState(leftSidebarWidth); + const { + storedTheme + } = useTheme(); + const dispatch = useDispatch(); const [dragging, setDragging] = useState(false); @@ -89,17 +95,27 @@ const Sidebar = () => {