share collection and import collection ui updates

~ added share collection option in the collection overview tab

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

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  .tabs {
+    .tab {
+      padding: 6px 0px;
+      border: none;
+      border-bottom: solid 2px transparent;
+      margin-right: 1.25rem;
+      color: var(--color-tab-inactive);
+      cursor: pointer;
+
+      &:focus,
+      &:active,
+      &:focus-within,
+      &:focus-visible,
+      &:target {
+        outline: none !important;
+        box-shadow: none !important;
+      }
+
+      &.active {
+        color: ${(props) => props.theme.tabs.active.color} !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
+      }
+    }
+  }
+`;
+
+export default StyledWrapper;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import Modal from 'components/Modal';
+import { IconDownload } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+import Bruno from 'components/Bruno';
+import exportBrunoCollection from 'utils/collections/export';
+import exportPostmanCollection from 'utils/exporters/postman-collection';
+import { cloneDeep } from 'lodash';
+import { transformCollectionToSaveToExportAsFile } from 'utils/collections/index';
+
+const ShareCollection = ({ onClose, collection }) => {
+  const handleExportBrunoCollection = () => {
+    const collectionCopy = cloneDeep(collection);
+    exportBrunoCollection(transformCollectionToSaveToExportAsFile(collectionCopy));
+    onClose();
+  };
+
+  const handleExportPostmanCollection = () => {
+    const collectionCopy = cloneDeep(collection);
+    exportPostmanCollection(collectionCopy);
+    onClose();
+  };
+
+  return (
+    <Modal
+      size="md"
+      title="Share Collection"
+      confirmText="Close"
+      handleConfirm={onClose}
+      handleCancel={onClose}
+      hideCancel
+    >
+      <StyledWrapper className="flex flex-col h-full w-[500px]">
+          <div className="space-y-2"> 
+            <div className="flex border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-500/10 items-center p-3 rounded-lg transition-colors cursor-pointer" onClick={handleExportBrunoCollection}>
+              <div className="mr-3 p-1 rounded-full">
+                <Bruno width={28} />
+              </div>
+              <div className="flex-1">
+                <div className="font-medium">Bruno Collection</div>
+                <div className="text-xs">Export in Bruno format</div>
+              </div>
+            </div>
+            
+            <div className="flex border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-500/10 items-center p-3 rounded-lg transition-colors cursor-pointer" onClick={handleExportPostmanCollection}>
+              <div className="mr-3 p-1 rounded-full">
+                <IconDownload size={28} strokeWidth={1} className="" />
+              </div>
+              <div className="flex-1">
+                <div className="font-medium">Postman Collection</div>
+                <div className="text-xs">Export in Postman format</div>
+              </div>
+            </div>
+          </div>
+      </StyledWrapper>
+    </Modal>
+  );
+};
+
+export default ShareCollection;