feat: darkmode (sidebar, menubar and welcome page #23)

packages/bruno-app/jsconfig.json

@@ -6,6 +6,8 @@
     "paths": {
       "assets/*": ["src/assets/*"],
       "components/*": ["src/components/*"],
+      "hooks/*": ["src/hooks/*"],
+      "themes/*": ["src/themes/*"],
       "api/*": ["src/api/*"],
       "pageComponents/*": ["src/pageComponents/*"],
       "providers/*": ["src/providers/*"],

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

@@ -9,11 +9,11 @@ const Wrapper = styled.div`
 
   .tippy-box {
     min-width: 135px;
-    background-color: white;
     font-size: 0.8125rem;
-    color: rgb(48 48 48);
+    color: ${(props) => props.theme.dropdown.color};
-    background: #fff;
+    background-color: ${(props) => props.theme.dropdown.bg};
-    box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;
+    box-shadow: ${(props) => props.theme.dropdown.shadow};
+    border-radius: 3px;
 
     .tippy-content {
       padding-left: 0;
@@ -34,7 +34,7 @@ const Wrapper = styled.div`
         cursor: pointer;
 
         &:hover {
-          background-color: #e9e9e9;
+          background-color: ${(props) => props.theme.dropdown.hoverBg};
         }
       }
     }

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/RequestMethod/StyledWrapper.js

@@ -13,25 +13,25 @@ const Wrapper = styled.div`
   }
 
   .method-get {
-    color: var(--color-method-get);
+    color: ${(props) => props.theme.request.methods.get};
   }
   .method-post {
-    color: var(--color-method-post);
+    color: ${(props) => props.theme.request.methods.post};
   }
   .method-put {
-    color: var(--color-method-put);
+    color: ${(props) => props.theme.request.methods.put};
   }
   .method-delete {
-    color: var(--color-method-delete);
+    color: ${(props) => props.theme.request.methods.delete};
   }
   .method-patch {
-    color: var(--color-method-patch);
+    color: ${(props) => props.theme.request.methods.put};
   }
   .method-options {
-    color: var(--color-method-options);
+    color: ${(props) => props.theme.request.methods.put};
   }
   .method-head {
-    color: var(--color-method-head);
+    color: ${(props) => props.theme.request.methods.put};
   }
 `;
 

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js

@@ -15,7 +15,7 @@ const Wrapper = styled.div`
   }
 
   .indent-block {
-    border-right: solid 1px #e1e1e1;
+    border-right: ${(props) => props.theme.sidebar.collection.item.indentBorder};
   }
 
   .collection-item-name {
@@ -34,7 +34,7 @@ const Wrapper = styled.div`
     }
 
     &:hover {
-      background: #e7e7e7;
+      background: ${(props) => props.theme.sidebar.collection.item.hoverBg};
       .menu-icon {
         .dropdown {
           div[aria-expanded='false'] {
@@ -45,14 +45,14 @@ const Wrapper = styled.div`
     }
 
     &.item-focused-in-tab {
-      background: var(--color-sidebar-collection-item-active-background);
+      background: ${(props) => props.theme.sidebar.collection.item.bg};
 
       &:hover {
-        background: var(--color-sidebar-collection-item-active-background) !important;
+        background: ${(props) => props.theme.sidebar.collection.item.bg} !important;
       }
 
       .indent-block {
-        border-right: solid 1px var(--color-sidebar-collection-item-active-indent-border);
+        border-right: ${(props) => props.theme.sidebar.collection.item.active.indentBorder} !important;
       }
     }
 

packages/bruno-app/src/components/Sidebar/LocalCollections/StyledWrapper.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   .current-workspace {
     margin-inline: 0.5rem;
-    background: #e1e1e1;
+    background-color: ${(props) => props.theme.sidebar.workspace.bg};
     border-radius: 5px;
 
     .caret {

packages/bruno-app/src/components/Sidebar/MenuBar/StyledWrapper.js

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  background-color: rgb(44, 44, 44);
+  background-color:  ${(props) => props.theme.menubar.bg};
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.4);
   min-height: 100vh;
 
   .menu-item {

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

@@ -1,8 +1,10 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
+  color: ${(props) => props.theme.sidebar.color};
+
   aside {
-    background-color: ${(props) => props.theme.theme['sidebar-background']};
+    background-color: ${(props) => props.theme['sidebar-background']};
 
     .collection-title {
       line-height: 1.5;
@@ -25,6 +27,18 @@ const Wrapper = styled.div`
         top: -0.625rem;
       }
     }
+
+    .collection-filter {
+      input {
+        border: ${(props) => props.theme.sidebar.search.border};
+        border-radius: 2px;
+        background-color:  ${(props) => props.theme.sidebar.search.bg};
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
   }
 
   div.drag-sidebar {
@@ -45,12 +59,4 @@ const Wrapper = styled.div`
   }
 `;
 
-export const BottomWrapper = styled.div`
-  background-color: ${(props) => props.theme.theme['sidebar-bottom-bg']};
-`;
-
-export const VersionNumber = styled.div`
-  color: ${(props) => props.theme.theme['primary-text']};
-`;
-
 export default Wrapper;

packages/bruno-app/src/components/Sidebar/TitleBar/StyledWrapper.js

@@ -25,8 +25,4 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export const SiteTitle = styled.div`
-  color: ${(props) => props.theme.theme['primary-text']};
-`;
-
 export default StyledWrapper;

packages/bruno-app/src/components/Sidebar/TitleBar/index.js

@@ -10,11 +10,11 @@ import { IconFolders } from '@tabler/icons';
 import { isElectron } from 'utils/common/platform';
 import { useState, forwardRef, useRef } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import StyledWrapper, { SiteTitle } from './StyledWrapper';
 import { showHomePage } from 'providers/ReduxStore/slices/app';
 import { collectionImported } from 'providers/ReduxStore/slices/collections';
 import { openLocalCollection } from 'providers/ReduxStore/slices/collections/actions';
 import { addCollectionToWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
+import StyledWrapper from './StyledWrapper';
 
 const TitleBar = () => {
   const [createCollectionModalOpen, setCreateCollectionModalOpen] = useState(false);
@@ -69,13 +69,13 @@ const TitleBar = () => {
         <div className="flex items-center cursor-pointer" onClick={handleTitleClick}>
           <Bruno width={30} />
         </div>
-        <SiteTitle
+        <div
           onClick={handleTitleClick}
-          className=" flex items-center font-medium select-none cursor-pointer"
+          className="flex items-center font-medium select-none cursor-pointer"
           style={{ fontSize: 14, paddingLeft: 6, position: 'relative', top: -1 }}
         >
           bruno
-        </SiteTitle>
+        </div>
         <div className="collection-dropdown flex flex-grow items-center justify-end">
           <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
             <div

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

@@ -108,7 +108,7 @@ const Sidebar = () => {
               <LocalCollections searchText={searchText} />
             </div>
 
-            <BottomWrapper className="flex px-1 py-2 items-center cursor-pointer text-gray-500 select-none">
+            <div className="footer flex px-1 py-2 items-center cursor-pointer select-none">
               <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"/> */}
@@ -124,8 +124,8 @@ const Sidebar = () => {
                   title="GitHub"
                 ></iframe>
               </div>
-              <VersionNumber className="flex flex-grow items-center justify-end text-xs mr-2">v1.25.2</VersionNumber>
+              <div className="flex flex-grow items-center justify-end text-xs mr-2">v0.2.0</div>
-            </BottomWrapper>
+            </div>
           </div>
         </div>
       </aside>

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import Modal from 'components/Modal/index';
 import StyledWrapper from './StyledWrapper';
-import { useTheme } from 'styled-components';
+import { useTheme } from 'providers/Theme';
 
 const ThemeSupport = ({ onClose }) => {
-  const { storedTheme, themeKeys, setStoredTheme } = useTheme();
+  const { storedTheme, themeOptions, setStoredTheme } = useTheme();
+
+  console.log(themeOptions);
 
   const handleThemeChange = (e) => {
     setStoredTheme(e.target.value);
@@ -15,7 +17,7 @@ const ThemeSupport = ({ onClose }) => {
       <Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
         <div className="collection-options">
           <select name="theme_switcher" onChange={handleThemeChange} defaultValue={storedTheme}>
-            {themeKeys.map((tk, index) => {
+            {themeOptions.map((tk, index) => {
               return (
                 <option value={tk} key={index}>
                   {tk}

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

@@ -1,13 +1,15 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  color: ${(props) => props.theme.theme['primary-text']};
+  .heading {
-
+    color:  ${(props) => props.theme.welcome.heading};
-  .create-request {
-    color: #737373;
     font-size: 0.75rem;
   }
 
+  .muted {
+    color:  ${(props) => props.theme.welcome.muted};
+  }
+
   .collection-options {
     svg {
       position: relative;
@@ -23,8 +25,4 @@ const StyledWrapper = styled.div`
   }
 `;
 
-export const SiteTitle = styled.div`
-  color: ${(props) => props.theme.theme['primary-text']};
-`;
-
 export default StyledWrapper;

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

@@ -5,14 +5,13 @@ import { useSelector, useDispatch } from 'react-redux';
 import { collectionImported } from 'providers/ReduxStore/slices/collections';
 import { openLocalCollection } from 'providers/ReduxStore/slices/collections/actions';
 import { addCollectionToWorkspace } from 'providers/ReduxStore/slices/workspaces/actions';
-import { IconPlus, IconUpload, IconFiles, IconFolders, IconPlayerPlay, IconBrandChrome, IconSpeakerphone, IconDeviceDesktop } from '@tabler/icons';
+import { IconBrandGithub, IconPlus, IconUpload, IconFiles, IconFolders, IconPlayerPlay, IconBrandChrome, IconSpeakerphone, IconDeviceDesktop } from '@tabler/icons';
 
 import Bruno from 'components/Bruno';
-import GithubSvg from 'assets/github.svg';
-import StyledWrapper, { SiteTitle } from './StyledWrapper';
 import CreateCollection from 'components/Sidebar/CreateCollection';
 import SelectCollection from 'components/Sidebar/Collections/SelectCollection';
 import importCollection, { importSampleCollection } from 'utils/collections/import';
+import StyledWrapper from './StyledWrapper';
 
 const Welcome = () => {
   const dispatch = useDispatch();
@@ -67,10 +66,10 @@ const Welcome = () => {
       <div className="">
         <Bruno width={50} />
       </div>
-      <SiteTitle className="text-xl font-semibold select-none">bruno</SiteTitle>
+      <div className="text-xl font-semibold select-none">bruno</div>
       <div className="mt-4">Opensource API Client.</div>
 
-      <div className="uppercase font-semibold create-request mt-10">Collections</div>
+      <div className="uppercase font-semibold heading mt-10">Collections</div>
       <div className="mt-4 flex items-center collection-options select-none">
         <div className="flex items-center">
           <IconPlus size={18} strokeWidth={2} />
@@ -94,7 +93,7 @@ const Welcome = () => {
         </div>
       </div>
 
-      <div className="uppercase font-semibold create-request mt-10 pt-6">Local Collections</div>
+      <div className="uppercase font-semibold heading mt-10 pt-6">Local Collections</div>
       {isPlatformElectron ? (
         <div className="mt-4 flex items-center collection-options select-none">
           <div className="flex items-center">
@@ -111,10 +110,10 @@ const Welcome = () => {
           </div>
         </div>
       ) : (
-        <div className="mt-4 flex items-center collection-options select-none text-gray-600 text-xs">Local collections are only available on the desktop app.</div>
+        <div className="muted mt-4 flex items-center collection-options select-none text-gray-600 text-xs">Local collections are only available on the desktop app.</div>
       )}
 
-      <div className="uppercase font-semibold create-request mt-10 pt-6">Links</div>
+      <div className="uppercase font-semibold heading mt-10 pt-6">Links</div>
       <div className="mt-4 flex flex-col collection-options select-none">
         <div>
           <a href="https://www.usebruno.com/downloads" target="_blank" className="flex items-center">
@@ -139,7 +138,7 @@ const Welcome = () => {
         </div> */}
         <div className="mt-2">
           <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
-            <img src={GithubSvg.src} style={{ width: '18px' }} />
+            <IconBrandGithub size={18} strokeWidth={2} />
             <span className="label ml-2">Github</span>
           </a>
         </div>

packages/bruno-app/src/components/Workspaces/WorkspaceSelector/StyledWrapper.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   .current-workspace {
     margin-inline: 0.5rem;
-    background: #e1e1e1;
+    background-color:  ${(props) => props.theme.sidebar.workspace.bg};
     border-radius: 5px;
 
     .caret {

packages/bruno-app/src/pageComponents/Index/StyledWrapper.js

@@ -6,8 +6,6 @@ const Wrapper = styled.div`
   height: 100%;
   min-height: 100vh;
 
-  background-color: ${(props) => props.theme.theme['primary-theme']};
-
   &.is-dragging {
     cursor: col-resize !important;
   }
@@ -34,17 +32,6 @@ const Wrapper = styled.div`
       }
     }
   }
-
-  .collection-filter {
-    input {
-      border: 1px solid rgb(211 211 211);
-      border-radius: 2px;
-
-      &:focus {
-        outline: none;
-      }
-    }
-  }
 `;
 
 export default Wrapper;

packages/bruno-app/src/pages/_app.js

@@ -33,14 +33,14 @@ function MyApp({ Component, pageProps }) {
     <SafeHydrate>
       <NoSsr>
         <Provider store={ReduxStore}>
-          <AppProvider>
+          <ThemeProvider>
-            <ThemeProvider>
+            <AppProvider>
               <HotkeysProvider>
                 <Toaster toastOptions={{ duration: 2000 }} />
                 <Component {...pageProps} />
               </HotkeysProvider>
-            </ThemeProvider>
+            </AppProvider>
-          </AppProvider>
+          </ThemeProvider>
         </Provider>
       </NoSsr>
     </SafeHydrate>

packages/bruno-app/src/providers/App/StyledWrapper.js

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

packages/bruno-app/src/providers/App/index.js

@@ -3,6 +3,7 @@ import useIdb from './useIdb';
 import useLocalCollectionTreeSync from './useLocalCollectionTreeSync';
 import { useDispatch } from 'react-redux';
 import { refreshScreenWidth } from 'providers/ReduxStore/slices/app';
+import StyledWrapper from './StyledWrapper';
 
 export const AppContext = React.createContext();
 
@@ -28,7 +29,9 @@ export const AppProvider = (props) => {
 
   return (
     <AppContext.Provider {...props} value="appProvider">
-      {props.children}
+      <StyledWrapper>
+        {props.children}
+      </StyledWrapper>
     </AppContext.Provider>
   );
 };

packages/bruno-app/src/providers/Theme/index.js

@@ -1,4 +1,4 @@
-import ThemeManager from '../../../public/theme/index';
+import themes from 'themes/index';
 import useLocalStorage from 'src/hooks/useLocalStorage/index';
 
 import { createContext, useContext } from 'react';
@@ -6,20 +6,20 @@ import { ThemeProvider as SCThemeProvider } from 'styled-components';
 
 export const ThemeContext = createContext();
 export const ThemeProvider = (props) => {
-  const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'Light');
+  const [storedTheme, setStoredTheme] = useLocalStorage('bruno.theme', 'light');
 
-  const theme = ThemeManager[storedTheme];
+  const theme = themes[storedTheme];
-  const themeKeys = Object.keys(ThemeManager);
+  const themeOptions = Object.keys(themes);
   const value = {
     theme,
-    themeKeys,
+    themeOptions,
     storedTheme,
     setStoredTheme
   };
 
   return (
     <ThemeContext.Provider value={value}>
-      <SCThemeProvider theme={value} {...props} />
+      <SCThemeProvider theme={theme} {...props} />
     </ThemeContext.Provider>
   );
 };

packages/bruno-app/src/styles/globals.css

@@ -3,7 +3,6 @@
   --color-brand: #546de5;
   --color-text: rgb(52 52 52);
   --color-sidebar-collection-item-active-indent-border: #d0d0d0;
-  --color-sidebar-collection-item-active-background: #e1e1e1;
   --color-sidebar-background: #f3f3f3;
   --color-request-dragbar-background: #efefef;
   --color-request-dragbar-background-active: rgb(200, 200, 200);

packages/bruno-app/src/themes/dark.js

@@ -0,0 +1,79 @@
+const darkTheme = {
+  brand: '#546de5',
+  text: '#d4d4d4',
+  bg: '#1e1e1e',
+
+  menubar: {
+    bg: '#333333',
+  },
+
+  sidebar: {
+    color: '#ccc',
+
+    workspace: {
+      bg: '#3D3D3D'
+    },
+
+    search: {
+      border: '1px solid transparent',
+      bg: '#3D3D3D'
+    },
+
+    collection: {
+      item: {
+        bg: '#37373D',
+        hoverBg: '#2A2D2F',
+        indentBorder: 'solid 1px #585858',
+        active: {
+          indentBorder: 'solid 1px #4c4c4c'
+        }
+      }
+    }
+  },
+
+  welcome: {
+    heading: '#569cd6',
+    muted: '#9d9d9d'
+  },
+
+  dropdown: {
+    color: "rgb(204, 204, 204)",
+    bg: 'rgb(48, 48, 49)',
+    hoverBg: '#0F395E',
+    shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+  },
+
+  request: {
+    methods: {
+      get: '#8cd656',
+      post: '#cd56d6',
+      put: '#d69956',
+      delete: '#f06f57'
+    }
+  },
+
+  'primary-text': '#ffffff',
+  'secondary-text': '#929292',
+  'sidebar-collection-item-active-background': '#e1e1e1',
+  'sidebar-background': '#252526',
+  'sidebar-bottom-bg': '#68217a',
+  'request-dragbar-background': '#efefef',
+  'request-dragbar-background-active': 'rgb(200, 200, 200)',
+  'tab-inactive': 'rgb(155 155 155)',
+  'tab-active-border': '#546de5',
+  'layout-border': '#dedede',
+  'codemirror-border': '#efefef',
+  'codemirror-background': 'rgb(243, 243, 243)',
+  'text-link': '#1663bb',
+  'text-danger': 'rgb(185, 28, 28)',
+  'background-danger': '#dc3545',
+  'method-get': 'rgb(5, 150, 105)',
+  'method-post': '#8e44ad',
+  'method-delete': 'rgb(185, 28, 28)',
+  'method-patch': 'rgb(52 52 52)',
+  'method-options': 'rgb(52 52 52)',
+  'method-head': 'rgb(52 52 52)',
+  'table-stripe': '#f3f3f3'
+};
+
+export default darkTheme;

packages/bruno-app/src/themes/index.js

@@ -0,0 +1,7 @@
+import light from './light';
+import dark from './dark';
+
+export default {
+  light,
+  dark
+};

packages/bruno-app/src/themes/light.js

@@ -0,0 +1,80 @@
+const lightTheme = {
+  brand: '#546de5',
+  text: 'rgb(52, 52, 52)',
+  bg: '#fff',
+
+  menubar: {
+    bg: 'rgb(44, 44, 44)',
+  },
+
+  sidebar: {
+    color: 'rgb(52, 52, 52)',
+
+    workspace: {
+      bg: '#e1e1e1'
+    },
+
+    search: {
+      border: '1px solid rgb(211 211 211)',
+      bg: '#fff'
+    },
+
+    collection: {
+      item: {
+        bg: '#e1e1e1',
+        hoverBg: '#e7e7e7',
+        indentBorder: 'solid 1px #e1e1e1',
+        active: {
+          indentBorder: 'solid 1px #d0d0d0'
+        }
+      }
+    }
+  },
+
+  welcome: {
+    heading: '#737373',
+    muted: '#4b5563'
+  },
+
+  dropdown: {
+    color: "rgb(48 48 48)",
+    bg: 'rgb(48, 48, 49)',
+    hoverBg: '#e9e9e9',
+    shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
+  },
+
+  request: {
+    methods: {
+      get: 'rgb(5, 150, 105)',
+      post: '#8e44ad',
+      put: '#ca7811',
+      delete: 'rgb(185, 28, 28)'
+    }
+  },
+
+  
+  'primary-text': 'rgb(52 52 52)',
+  'secondary-text': '#929292',
+  'sidebar-collection-item-active-background': '#e1e1e1',
+  'sidebar-background': '#f3f3f3',
+  'sidebar-bottom-bg': '#f3f3f3',
+  'request-dragbar-background': '#efefef',
+  'request-dragbar-background-active': 'rgb(200, 200, 200)',
+  'tab-inactive': 'rgb(155 155 155)',
+  'tab-active-border': '#546de5',
+  'layout-border': '#dedede',
+  'codemirror-border': '#efefef',
+  'codemirror-background': 'rgb(243, 243, 243)',
+  'text-link': '#1663bb',
+  'text-danger': 'rgb(185, 28, 28)',
+  'background-danger': '#dc3545',
+  'method-get': 'rgb(5, 150, 105)',
+  'method-post': '#8e44ad',
+  'method-delete': 'rgb(185, 28, 28)',
+  'method-patch': 'rgb(52 52 52)',
+  'method-options': 'rgb(52 52 52)',
+  'method-head': 'rgb(52 52 52)',
+  'table-stripe': '#f3f3f3'
+};
+
+export default lightTheme;