feat: Add Divider component

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

@@ -0,0 +1,6 @@
+import { useTheme } from 'providers/Theme/index';
+
+export function Divider() {
+  const { theme } = useTheme();
+  return <hr className={`m-1 opacity-50 border-[${theme.divider.borderColor}]`} />;
+}

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

@@ -8,6 +8,7 @@ import EnvironmentSettings from '../EnvironmentSettings';
 import toast from 'react-hot-toast';
 import { useDispatch } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
+import { Divider } from 'components/Divider/index';
 
 const EnvironmentSelector = ({ collection }) => {
   const dispatch = useDispatch();
@@ -77,7 +78,8 @@ const EnvironmentSelector = ({ collection }) => {
             <IconDatabaseOff size={18} strokeWidth={1.5} />
             <span className="ml-2">No Environment</span>
           </div>
-          <div className="dropdown-item border-top" onClick={handleSettingsIconClick}>
+          <Divider/>
+          <div className="dropdown-item" onClick={handleSettingsIconClick}>
             <div className="pr-2 text-gray-600">
               <IconSettings size={18} strokeWidth={1.5} />
             </div>

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

@@ -15,6 +15,7 @@ import StyledWrapper from './StyledWrapper';
 import Dropdown from 'components/Dropdown';
 import CloneCollectionItem from 'components/Sidebar/Collections/Collection/CollectionItem/CloneCollectionItem/index';
 import NewRequest from 'components/Sidebar/NewRequest/index';
+import { Divider } from 'components/Divider/index';
 
 const RequestTab = ({ tab, collection, tabIndex, collectionRequestTabs, folderUid }) => {
   const dispatch = useDispatch();
@@ -301,9 +302,7 @@ function RequestTabMenu({ onDropdownCreate, collectionRequestTabs, tabIndex, col
         >
           Clone Request
         </button>
-        <button className="dropdown-item w-full" onClick={(e) => handleCloseTab(e, currentTabUid)}>
-          Close
-        </button>
+        <Divider />
         <button disabled={!hasOtherTabs} className="dropdown-item w-full" onClick={handleCloseOtherTabs}>
           Close Others
         </button>
@@ -313,12 +312,16 @@ function RequestTabMenu({ onDropdownCreate, collectionRequestTabs, tabIndex, col
         <button disabled={!hasRightTabs} className="dropdown-item w-full" onClick={handleCloseTabsToTheRight}>
           Close to the Right
         </button>
-        <button className="dropdown-item w-full" onClick={handleCloseSavedTabs}>
-          Close Saved
+        <Divider />
+        <button className="dropdown-item w-full" onClick={(e) => handleCloseTab(e, currentTabUid)}>
+          Close
         </button>
         <button className="dropdown-item w-full" onClick={handleCloseAllTabs}>
           Close All
         </button>
+        <button className="dropdown-item w-full" onClick={handleCloseSavedTabs}>
+          Close Saved
+        </button>
       </Dropdown>
     </Fragment>
   );

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

@@ -11,6 +11,7 @@ import { useDispatch } from 'react-redux';
 import { showHomePage } from 'providers/ReduxStore/slices/app';
 import { openCollection, importCollection } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
+import { Divider } from 'components/Divider/index';
 
 const TitleBar = () => {
   const [importedCollection, setImportedCollection] = useState(null);
@@ -121,6 +122,7 @@ const TitleBar = () => {
             >
               Import Collection
             </div>
+            <Divider />
             <div
               className="dropdown-item"
               onClick={(e) => {

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

@@ -261,6 +261,10 @@ const darkTheme = {
 
   scrollbar: {
     color: 'rgb(52 51 49)'
+  },
+
+  divider: {
+    borderColor: '#a3a3a3'
   }
 };
 

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

@@ -265,6 +265,10 @@ const lightTheme = {
 
   scrollbar: {
     color: 'rgb(152 151 149)'
+  },
+
+  divider: {
+    borderColor: '#0a0a0a'
   }
 };