feat: github star button blends with dark mode

usebruno · Feb 1, 2023 · 0efd782 · 0efd782
1 parent a0903a5
commit 0efd782
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 = () => {
               <div className="flex items-center ml-1 text-xs ">
                 {!leftMenuBarOpen && <IconChevronsRight size={24} strokeWidth={1.5} className="mr-2  hover:text-gray-700" onClick={() => dispatch(toggleLeftMenuBar())} />}
                 {/* <IconLayoutGrid size={20} strokeWidth={1.5} className="mr-2"/> */}
-                {/* Need to ut github stars link here */}
               </div>
               <div className="pl-1">
-                <iframe
-                  src="https://ghbtns.com/github-btn.html?user=usebruno&repo=bruno&type=star&count=true"
-                  frameBorder="0"
-                  scrolling="0"
-                  width="100"
-                  height="20"
-                  title="GitHub"
-                ></iframe>
+                {storedTheme === 'dark' ? (
+                  <GitHubButton
+                    href="https://github.com/usebruno/bruno"
+                    data-color-scheme="no-preference: dark; light: dark; dark: light;"
+                    data-show-count="true"
+                    aria-label="Star usebruno/bruno on GitHub"
+                  >
+                    Star
+                  </GitHubButton>
+                ) : (
+                  <GitHubButton
+                    href="https://github.com/usebruno/bruno"
+                    data-color-scheme="no-preference: light; light: light; dark: light;"
+                    data-show-count="true"
+                    aria-label="Star usebruno/bruno on GitHub"
+                  >
+                    Star
+                  </GitHubButton>
+                )}
               </div>
               <div className="flex flex-grow items-center justify-end text-xs mr-2">v0.8.0</div>
             </div>

diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
@@ -32,7 +32,7 @@ const darkTheme = {
     color: '#ccc',
     muted: '#9d9d9d',
     bg: '#252526',
-    dragbar: '#8a8a8a',
+    dragbar: '#666666',
 
     badge: {
       bg: '#3D3D3D'

diff --git a/packages/bruno-electron/src/index.js b/packages/bruno-electron/src/index.js
@@ -50,6 +50,11 @@ app.on('ready', async () => {
   mainWindow.loadURL(url);
   watcher = new Watcher();
 
+  mainWindow.webContents.on('new-window', function(e, url) {
+    e.preventDefault();
+    require('electron').shell.openExternal(url);
+  });
+
   // register all ipc handlers
   registerNetworkIpc(mainWindow, watcher, lastOpenedCollections);
   registerCollectionsIpc(mainWindow, watcher, lastOpenedCollections);