feat: dark mode (environment selector, query url)

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

@@ -33,6 +33,10 @@ const Wrapper = styled.div`
         padding: 0.35rem 0.6rem;
         cursor: pointer;
 
+        .icon {
+          color: ${(props) => props.theme.dropdown.iconColor};
+        }
+
         &:hover {
           background-color: ${(props) => props.theme.dropdown.hoverBg};
         }

packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   .current-enviroment {
-    background: #efefef;
+    background-color:  ${(props) => props.theme.sidebar.workspace.bg};
     border-radius: 15px;
 
     .caret {

packages/bruno-app/src/components/Icons/Send/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const SendIcon = ({color, width}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 48 48"
+    >
+      <path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z"/>
+      <path d="M0 0h48v48h-48z" fill="none"/>
+    </svg>
+  );
+}
+
+export default SendIcon;

packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js

@@ -32,6 +32,7 @@ const Wrapper = styled.div`
     width: 100%;
     border: solid 1px transparent;
     outline: none !important;
+    background-color: inherit;
 
     &:focus {
       outline: none !important;

packages/bruno-app/src/components/RequestPane/QueryUrl/StyledWrapper.js

@@ -4,18 +4,18 @@ const Wrapper = styled.div`
   height: 2.3rem;
 
   div.method-selector-container {
-    background-color: var(--color-sidebar-background);
+    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
   }
 
   div.input-container {
-    background-color: var(--color-sidebar-background);
+    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 
     input {
-      background-color: var(--color-sidebar-background);
+      background-color: ${(props) => props.theme.requestTabPanel.url.bg};
       outline: none;
       box-shadow: none;
 

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

@@ -3,10 +3,12 @@ import get from 'lodash/get';
 import { useDispatch } from 'react-redux';
 import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
 import HttpMethodSelector from './HttpMethodSelector';
+import { useTheme } from 'providers/Theme';
+import SendIcon from 'components/Icons/Send';
 import StyledWrapper from './StyledWrapper';
-import SendSvg from 'assets/send.svg';
 
 const QueryUrl = ({ item, collection, handleRun }) => {
+  const { theme } = useTheme();
   const dispatch = useDispatch();
   const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
   let url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
@@ -48,7 +50,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           onChange={(event) => onUrlChange(event.target.value)}
         />
         <div className="flex items-center h-full mr-2 cursor-pointer" onClick={handleRun}>
-          <img src={SendSvg.src} style={{ width: '22px' }} />
+          <SendIcon color={theme.requestTabPanel.url.icon} width={22}/>
         </div>
       </div>
     </StyledWrapper>

packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js

@@ -31,6 +31,7 @@ const Wrapper = styled.div`
     width: 100%;
     border: solid 1px transparent;
     outline: none !important;
+    background-color: inherit;
 
     &:focus {
       outline: none !important;

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

@@ -49,14 +49,14 @@ const WorkspaceSelector = () => {
       <div className="items-center cursor-pointer relative">
         <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
           <div className="dropdown-item" onClick={() => setOpenSwitchWorkspaceModal(true)}>
-            <div className="pr-2 text-gray-600">
+            <div className="pr-2 icon">
               <IconSwitch3 size={18} strokeWidth={1.5} />
             </div>
             <span>Switch Workspace</span>
           </div>
 
           <div className="dropdown-item" onClick={() => setOpenWorkspacesModal(true)}>
-            <div className="pr-2 text-gray-600">
+            <div className="pr-2 icon">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>
             <span>Configure Workspaces</span>

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

@@ -38,6 +38,7 @@ const darkTheme = {
 
   dropdown: {
     color: "rgb(204, 204, 204)",
+    iconColor: "rgb(204, 204, 204)",
     bg: 'rgb(48, 48, 49)',
     hoverBg: '#0F395E',
     shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
@@ -52,6 +53,19 @@ const darkTheme = {
     }
   },
 
+  requestTabPanel: {
+    url: {
+      bg: '#3D3D3D',
+      icon: 'rgb(204, 204, 204)'
+    }
+  },
+
+  collection: {
+    environment: {
+      bg: '#3D3D3D'
+    }
+  },
+
   'primary-text': '#ffffff',
   'secondary-text': '#929292',
   'sidebar-collection-item-active-background': '#e1e1e1',

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

@@ -38,6 +38,7 @@ const lightTheme = {
 
   dropdown: {
     color: "rgb(48 48 48)",
+    iconColor: "rgb(75, 85, 99)",
     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',
@@ -52,6 +53,18 @@ const lightTheme = {
     }
   },
 
+  requestTabPanel: {
+    url: {
+      bg: '#f3f3f3',
+      icon: '#515151'
+    }
+  },
+
+  collection: {
+    environment: {
+      bg: '#efefef'
+    }
+  },
   
   'primary-text': 'rgb(52 52 52)',
   'secondary-text': '#929292',