feat: dark-mode (response status and support modal)

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
-  color: var(--color-text);
+  color: ${(props) => props.theme.text};
   .collection-options {
     svg {
       position: relative;

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import Modal from 'components/Modal/index';
-import { IconSpeakerphone, IconBrandTwitter } from '@tabler/icons';
+import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
-import GithubSvg from 'assets/github.svg';
 
 const BrunoSupport = ({ onClose }) => {
   return (
@@ -10,19 +9,19 @@ const BrunoSupport = ({ onClose }) => {
       <Modal size="sm" title={'Support'} handleCancel={onClose} hideFooter={true}>
         <div className="collection-options">
           <div className="mt-2">
-            <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-center">
+            <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-end">
               <IconSpeakerphone size={18} strokeWidth={2} />
               <span className="label ml-2">Report Issues</span>
             </a>
           </div>
           <div className="mt-2">
-            <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-center">
+            <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
-              <img src={GithubSvg.src} style={{ width: '18px' }} />
+              <IconBrandGithub size={18} strokeWidth={2} />
               <span className="label ml-2">Github</span>
             </a>
           </div>
           <div className="mt-2">
-            <a href="https://twitter.com/use_bruno" target="_blank" className="flex items-center">
+            <a href="https://twitter.com/use_bruno" target="_blank" className="flex items-end">
               <IconBrandTwitter size={18} strokeWidth={2} />
               <span className="label ml-2">Twitter</span>
             </a>

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

@@ -40,6 +40,10 @@ const Wrapper = styled.div`
         &:hover {
           background-color: ${(props) => props.theme.dropdown.hoverBg};
         }
+
+        &.border-top {
+          border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
+        }
       }
     }
   }

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

@@ -65,7 +65,7 @@ const EnvironmentSelector = ({ collection }) => {
           >
             <span>No Environment</span>
           </div>
-          <div className="dropdown-item" style={{ borderTop: 'solid 1px #e7e7e7' }} onClick={() => setOpenSettingsModal(true)}>
+          <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>

packages/bruno-app/src/components/ResponsePane/Overlay/index.js

@@ -23,7 +23,7 @@ const ResponseLoadingOverlay = ({ item, collection }) => {
         <IconRefresh size={24} className="animate-spin" />
         <button
           onClick={handleCancelRequest}
-          className="mt-4 uppercase bg-gray-200 active:bg-blueGray-600 text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+          className="mt-4 uppercase btn-md rounded btn-secondary ease-linear transition-all duration-150"
           type="button"
         >
           Cancel Request

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

@@ -3,6 +3,10 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
   padding-top: 20%;
   width: 100%;
+
+  .send-icon {
+    color: ${(props) => props.theme.requestTabPanel.responseSendIcon};
+  }
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/ResponsePane/Placeholder/index.js

@@ -5,7 +5,7 @@ import StyledWrapper from './StyledWrapper';
 const Placeholder = () => {
   return (
     <StyledWrapper>
-      <div className="text-gray-300 flex justify-center" style={{ fontSize: 200 }}>
+      <div className="send-icon flex justify-center" style={{ fontSize: 200 }}>
         <IconSend size={150} strokeWidth={1} />
       </div>
       <div className="flex mt-4">

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   font-size: 0.75rem;
   font-weight: 600;
-  color: rgb(117 117 117);
+  color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
 export default Wrapper;

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

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   font-size: 0.75rem;
   font-weight: 600;
-  color: rgb(117 117 117);
+  color: ${(props) => props.theme.requestTabPanel.responseStatus};
 `;
 
 export default Wrapper;

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

@@ -3,6 +3,14 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   font-size: 0.75rem;
   font-weight: 600;
+  
+  &.text-ok {
+    color: ${(props) => props.theme.requestTabPanel.responseOk};
+  }
+  
+  &.text-error {
+    color: ${(props) => props.theme.requestTabPanel.responseError};
+  }
 `;
 
 export default Wrapper;

packages/bruno-app/src/components/ResponsePane/StatusCode/index.js

@@ -3,19 +3,20 @@ import classnames from 'classnames';
 import statusCodePhraseMap from './get-status-code-phrase';
 import StyledWrapper from './StyledWrapper';
 
+// Todo: text-error class is not getting pulled in for 500 errors
 const StatusCode = ({ status }) => {
-  const getTabClassname = () => {
+  const getTabClassname = (status) => {
     return classnames('', {
-      'text-blue-700': status >= 100 && status < 200,
+      'text-ok': status >= 100 && status < 200,
-      'text-green-700': status >= 200 && status < 300,
+      'text-ok': status >= 200 && status < 300,
-      'text-purple-700': status >= 300 && status < 400,
+      'text-error': status >= 300 && status < 400,
-      'text-yellow-700': status >= 400 && status < 500,
+      'text-error': status >= 400 && status < 500,
-      'text-red-700': status >= 500 && status < 600
+      'text-error': status >= 500 && status < 600
     });
   };
 
   return (
-    <StyledWrapper className={getTabClassname()}>
+    <StyledWrapper className={getTabClassname(status)}>
       {status} {statusCodePhraseMap[status]}
     </StyledWrapper>
   );

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

@@ -7,7 +7,7 @@ const StyledWrapper = styled.div`
 
   .local-collections-unavailable {
     padding: 0.35rem 0.6rem;
-    border-top: solid 1px #ddd;
+    border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
     font-size: 11px;
   }
   .collection-dropdown {

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

@@ -43,6 +43,7 @@ const darkTheme = {
     bg: 'rgb(48, 48, 49)',
     hoverBg: '#0F395E',
     shadow: 'rgb(0 0 0 / 36%) 0px 2px 8px',
+    seperator: '#444'
   },
 
   request: {
@@ -65,7 +66,11 @@ const darkTheme = {
     },
     bodyModeSelect: {
       color: 'transparent'
-    }
+    },
+    responseSendIcon: '#555',
+    responseStatus: '#ccc',
+    responseOk: '#8cd656',
+    responseError: '#f06f57'
   },
 
   collection: {

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

@@ -43,6 +43,7 @@ const lightTheme = {
     bg: '#fff',
     hoverBg: '#e9e9e9',
     shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
+    seperator: '#e7e7e7'
   },
 
   request: {
@@ -65,7 +66,11 @@ const lightTheme = {
     },
     bodyModeSelect: {
       color: '#efefef'
-    }
+    },
+    responseSendIcon: 'rgb(209, 213, 219)',
+    responseStatus: 'rgb(117 117 117)',
+    responseOk: '#047857',
+    responseError: 'rgb(185, 28, 28)'
   },
 
   collection: {