feat: dark mode (tabs and request tabs)

packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js

@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }

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

@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }

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

@@ -35,8 +35,8 @@ const StyledWrapper = styled.div`
 
   .react-tabs__tab--selected {
     border: none;
-    color: #322e2c !important;
+    color: ${(props) => props.theme.tabs.active.color} !important;
-    border-bottom: solid 2px var(--color-tab-active-border) !important;
+    border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
     border-color: var(--color-tab-active-border) !important;
     background: inherit;
     outline: none !important;
@@ -50,7 +50,7 @@ const StyledWrapper = styled.div`
       border: none;
       outline: none !important;
       box-shadow: none !important;
-      border-bottom: solid 2px var(--color-tab-active-border) !important;
+      border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       border-color: var(--color-tab-active-border) !important;
       background: inherit;
       outline: none !important;

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

@@ -20,8 +20,8 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
-        color: #322e2c !important;
+        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px var(--color-tab-active-border) !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
     }
   }

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

@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }

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

@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }

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

@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }

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

@@ -18,11 +18,11 @@ const StyledWrapper = styled.div`
       display: flex;
       height: 100%;
       width: 1px;
-      border-left: solid 1px var(--color-request-dragbar-background);
+      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
     }
 
     &:hover div.drag-request-border {
-      border-left: solid 1px var(--color-request-dragbar-background-active);
+      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
     }
   }
 `;

packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js

@@ -19,7 +19,7 @@ const StyledWrapper = styled.div`
 
     .close-icon {
       display: none;
-      color: #9f9f9f;
+      color: ${(props) => props.theme.requestTabs.icon.color};
       width: 8px;
       padding-bottom: 6px;
       padding-top: 6px;
@@ -27,8 +27,8 @@ const StyledWrapper = styled.div`
 
     &:hover,
     &:hover .close-icon {
-      background-color: #eaeaea;
+      color: ${(props) => props.theme.requestTabs.icon.hoverColor};
-      color: rgb(76 76 76);
+      background-color: ${(props) => props.theme.requestTabs.icon.hoverBg};
     }
 
     .has-changes-icon {

packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

@@ -85,7 +85,7 @@ const RequestTab = ({ tab, collection }) => {
         <span className="tab-method uppercase" style={{ color: getMethodColor(method), fontSize: 12 }}>
           {method}
         </span>
-        <span className="text-gray-700 ml-1 tab-name" title={item.name}>
+        <span className="ml-1 tab-name" title={item.name}>
           {item.name}
         </span>
       </div>

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid var(--color-request-dragbar-background);
+  border-bottom: 1px solid ${(props) => props.theme.requestTabs.borromBorder};
 
   ul {
     padding: 0;
@@ -28,7 +28,8 @@ const Wrapper = styled.div`
       height: 38px;
 
       margin-right: 6px;
-      background: #f7f7f7;
+      color: ${(props) => props.theme.requestTabs.color};
+      background: ${(props) => props.theme.requestTabs.bg};
       border-radius: 0;
 
       .tab-container {
@@ -36,7 +37,7 @@ const Wrapper = styled.div`
       }
 
       &.active {
-        background: #e7e7e7;
+        background: ${(props) => props.theme.requestTabs.active.bg};
         font-weight: 500;
       }
 
@@ -60,9 +61,9 @@ const Wrapper = styled.div`
         padding: 3px 0px;
         display: inline-flex;
         justify-content: center;
-        color: rgb(117 117 117);
+        color: ${(props) => props.theme.requestTabs.shortTab.color};
+        background-color: ${(props) => props.theme.requestTabs.shortTab.bg};
         position: relative;
-        background-color: white;
         top: -1px;
 
         > div {
@@ -85,8 +86,8 @@ const Wrapper = styled.div`
 
         &:hover {
           > div {
-            background-color: #eaeaea;
+            background-color: ${(props) => props.theme.requestTabs.shortTab.hoverBg};
-            color: rgb(76 76 76);
+            color: ${(props) => props.theme.requestTabs.shortTab.hoverColor};
             border-radius: 3px;
           }
         }

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

@@ -20,8 +20,8 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
-        color: #322e2c !important;
+        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px var(--color-tab-active-border) !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
     }
   }

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-color:  ${(props) => props.theme.sidebar.workspace.bg};
+    background-color: ${(props) => props.theme.sidebar.workspace.bg};
     border-radius: 5px;
 
     .caret {

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

@@ -57,6 +57,10 @@ const darkTheme = {
     url: {
       bg: '#3D3D3D',
       icon: 'rgb(204, 204, 204)'
+    },
+    dragbar: {
+      border: '#444',
+      activeBorder: '#8a8a8a'
     }
   },
 
@@ -99,25 +103,29 @@ const darkTheme = {
   },
 
   tabs: {
-    color: '',
-    bg: '',
-    borromBorder: '',
     active: {
-      color: '',
+      color: '#ccc',
-      bg: '',
+      border: '#569cd6'
-      borromBorder: ''
     }
   },
 
-
   requestTabs: {
-    color: '',
+    color: '#ccc',
-    bg: '',
+    bg: '#2A2D2F',
-    borromBorder: '',
+    borromBorder: '#444',
+    icon: {
+      color: '#9f9f9f',
+      hoverColor: 'rgb(204, 204, 204)',
+      hoverBg: '#1e1e1e'
+    },
     active: {
-      color: '',
+      bg: '#3D3D3D'
-      bg: '',
+    },
-      borromBorder: ''
+    shortTab: {
+      color: '#ccc',
+      bg: 'transparent',
+      hoverColor: '#ccc',
+      hoverBg: '#3D3D3D'
     }
   },
 
@@ -126,7 +134,10 @@ const darkTheme = {
   },
 
   table: {
-    border: '',
+    border: '#333',
+    thead : {
+      color: 'rgb(204, 204, 204)'
+    }
   },
 
   'primary-text': '#ffffff',

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

@@ -57,6 +57,10 @@ const lightTheme = {
     url: {
       bg: '#f3f3f3',
       icon: '#515151'
+    },
+    dragbar: {
+      border: '#efefef',
+      activeBorder: 'rgb(200, 200, 200)'
     }
   },
 
@@ -99,24 +103,29 @@ const lightTheme = {
   },
 
   tabs: {
-    color: '',
-    bg: '',
-    borromBorder: '',
     active: {
-      color: '',
+      color: '${(props) => props.theme.tabs.active.color}',
-      bg: '',
+      border: '#546de5'
-      borromBorder: ''
     }
   },
 
   requestTabs: {
-    color: '',
+    color: 'rgb(52, 52, 52)',
-    bg: '',
+    bg: '#f7f7f7',
-    borromBorder: '',
+    borromBorder: '#efefef',
+    icon: {
+      color: '#9f9f9f',
+      hoverColor: 'rgb(76 76 76)',
+      hoverBg: 'rgb(234, 234, 234)'
+    },
     active: {
-      color: '',
+      bg: '#e7e7e7'
-      bg: '',
+    },
-      borromBorder: ''
+    shortTab: {
+      color: 'rgb(117 117 117)',
+      bg: 'white',
+      hoverColor: 'rgb(76 76 76)',
+      hoverBg: '#eaeaea'
     }
   },
 
@@ -125,7 +134,10 @@ const lightTheme = {
   },
 
   table: {
-    border: '',
+    border: '#efefef',
+    thead : {
+      color: '#616161'
+    }
   },
   
   'primary-text': 'rgb(52 52 52)',