ui: updating lucid icons

platform/firecamp-platform/src/components/activity-bar/explorer/menus/CollectionMenu.tsx

@@ -1,9 +1,4 @@
-import { VscNewFile } from '@react-icons/all-files/vsc/VscNewFile';
+import { FilePlus2, FolderPlus, MoreHorizontal, Pencil, Settings, Trash2 } from 'lucide-react';
-import { VscNewFolder } from '@react-icons/all-files/vsc/VscNewFolder';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
-import { VscSettingsGear } from '@react-icons/all-files/vsc/VscSettingsGear';
-import { VscEllipsis } from '@react-icons/all-files/vsc/VscEllipsis';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { DropdownMenu } from '@firecamp/ui';
 import { Regex } from '../../../../constants';
 import platformContext from '../../../../services/platform-context';
@@ -33,7 +28,7 @@ const CollectionMenu = ({
 
   const renameMenu = {
     prefix: () => (
-      <VscEdit size={14} />
+      <Pencil size={14} />
     ),
     name: 'Rename',
     onClick: (e) => {
@@ -43,7 +38,7 @@ const CollectionMenu = ({
 
   const addFolderMenu = {
     prefix: () => (
-      <VscNewFolder size={14} />
+      <FolderPlus size={14} />
     ),
     name: 'Add Folder',
     onClick: () => {
@@ -95,7 +90,7 @@ const CollectionMenu = ({
 
   const addRequestMenu = {
     prefix: () => (
-      <VscNewFile size={14} />
+      <FilePlus2 size={14} />
     ),
     name: 'Add Request',
     onClick: () => { },
@@ -105,7 +100,7 @@ const CollectionMenu = ({
 
   const viewDetailMenu = {
     prefix: () => (
-      <VscSettingsGear size={14} />
+      <Settings size={14} />
     ),
     name: 'View Details',
     onClick: () => {
@@ -119,7 +114,7 @@ const CollectionMenu = ({
 
   const deleteMenu = {
     prefix: () => (
-      <VscTrash size={14} />
+      <Trash2 size={14} />
     ),
     name: 'Delete',
     onClick: () => {
@@ -154,7 +149,7 @@ const CollectionMenu = ({
   return (
     <div>
       <DropdownMenu
-        handler={() => <VscEllipsis className='cursor-pointer' />}
+        handler={() => <MoreHorizontal className='cursor-pointer' />}
         options={menuType == EMenuType.Request ? requestMenu : commonMenu}
         width={144}
         onSelect={(value) => value.onClick()}

platform/firecamp-platform/src/components/activity-bar/explorer/treeItemRenderer.tsx

@@ -1,10 +1,7 @@
 import cx from 'classnames';
-// import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
+import { FolderOpen, FolderClosed } from 'lucide-react';
-// import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 import { VscTriangleRight } from '@react-icons/all-files/vsc/VscTriangleRight';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
 import { AiTwotoneFolder } from '@react-icons/all-files/ai/AiTwotoneFolder';
 import { AiTwotoneFolderOpen } from '@react-icons/all-files/ai/AiTwotoneFolderOpen';
 import CollectionMenu from './menus/CollectionMenu';
@@ -24,9 +21,7 @@ export default {
         case ERequestTypes.Rest:
           const text = method.toUpperCase();
           return (
-            <div className={cx(text, 'collection_leaf-node-type')}>
+            <div className={cx(text, 'collection_leaf-node-type')}>{text}</div>
-              {text}
-            </div>
           );
         case ERequestTypes.GraphQL:
           return <FcIconGraphQL className="text-graphql" size={24} />;
@@ -40,7 +35,6 @@ export default {
     } else if (item.data?.__ref?.isCollection) {
       return context.isExpanded ? (
         <>
-          {/* <VscChevronDown className="mr-1" size={20}/> */}
           <VscTriangleDown
             className="mr-1 flex-none"
             size={12}
@@ -54,7 +48,6 @@ export default {
         </>
       ) : (
         <>
-          {/* <VscChevronRight className="mr-1" size={20}/> */}
           <VscTriangleRight
             className="mr-1 flex-none"
             size={12}
@@ -70,27 +63,21 @@ export default {
     } else if (item.data?.__ref?.isFolder) {
       return context.isExpanded ? (
         <>
-          {/* <VscChevronDown className="mr-1" size={20} opacity={'0.8'}/> */}
           <VscTriangleDown
             className="mr-1 flex-none"
             size={12}
             opacity={'0.6'}
           />
-          <VscFolderOpened
+          <FolderOpen className="mr-1 flex-none" size={16} opacity={'0.8'} />
-            className="mr-1 flex-none"
-            size={16}
-            opacity={'0.8'}
-          />
         </>
       ) : (
         <>
-          {/* <VscChevronRight className="mr-1" size={20} opacity={'0.8'}/> */}
           <VscTriangleRight
             className="mr-1 flex-none"
             size={12}
             opacity={'0.6'}
           />
-          <VscFolder
+          <FolderClosed
             className="mr-1 opacity-80 flex-none"
             size={16}
             opacity={'0.8'}

platform/firecamp-platform/src/components/common/environment/selector/EnvironmentSelector.tsx

@@ -1,6 +1,6 @@
 import shallow from 'zustand/shallow';
 import { Column } from '@firecamp/ui';
-import { VscEye } from '@react-icons/all-files/vsc/VscEye';
+import { Eye } from 'lucide-react';
 import EnvironmentDD from './EnvironmentDD';
 import { IEnvironmentStore, useEnvStore } from '../../../../store/environment';
 import { IUserStore, useUserStore } from '../../../../store/user';
@@ -38,7 +38,7 @@ const EnvironmentSelector = () => {
           className="cursor-pointer ml-1 text-base !text-info"
           onClick={() => toggleEnvSidebar()}
         >
-          <VscEye size={14} />
+          <Eye size={14} />
         </span>
       </div>
     </Column>

platform/firecamp-platform/src/components/common/environment/sidebar/EnvironmentSidebar.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { Tree, UncontrolledTreeEnvironment } from '@firecamp/ui/src/tree';
 import { Notes, Button } from '@firecamp/ui';
 import { EEnvironmentScope } from '@firecamp/types';
@@ -71,7 +71,7 @@ const EnvironmentCollection = () => {
         return (
           <ToolBar>
             <div>
-              <VscAdd
+              <Plus
                 className="cursor-pointer"
                 size={16}
                 onClick={() => createEnvironmentPrompt()}

platform/firecamp-platform/src/components/common/environment/sidebar/tree/itemRenderer.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 // import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 // import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 // import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
@@ -9,7 +10,6 @@ import { AiTwotoneFolder } from '@react-icons/all-files/ai/AiTwotoneFolder';
 import { AiTwotoneFolderOpen } from '@react-icons/all-files/ai/AiTwotoneFolderOpen';
 import { VscJson } from '@react-icons/all-files/vsc/VscJson';
 import { Button } from '@firecamp/ui';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 
 export default {
   renderItemArrow: ({ item, context }) => {
@@ -220,7 +220,7 @@ export default {
             )}
 
             {/* {item.data.__ref.isEnvironment ? (
-              <VscTrash
+              <Trash2
                 className="ml-1 cursor-pointer"
                 size={14}
                 onClick={() => {

platform/firecamp-platform/src/components/common/environment/sidebar/tree_/itemRenderer.tsx

@@ -1,4 +1,5 @@
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 // import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 // import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 // import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
@@ -9,7 +10,6 @@ import cx from 'classnames';
 // import { AiTwotoneFolderOpen } from '@react-icons/all-files/ai/AiTwotoneFolderOpen';
 import { VscJson } from '@react-icons/all-files/vsc/VscJson';
 import { Button } from '@firecamp/ui';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 
 export default {
   renderItemArrow: ({ item, context }) => {
@@ -179,7 +179,7 @@ export default {
             />
 
             {item.data.__ref.isEnvironment ? (
-              <VscTrash
+              <Trash2
                 className="ml-1 cursor-pointer"
                 size={14}
                 onClick={() => {

platform/firecamp-platform/src/components/common/environment/tabs/Environment.tsx

@@ -2,7 +2,8 @@ import { memo, useEffect, useRef, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import _cloneDeep from 'lodash/cloneDeep';
 import _cleanDeep from 'clean-deep';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
+import { Pencil } from 'lucide-react'; 
+
 import { VscJson } from '@react-icons/all-files/vsc/VscJson';
 import {
   RootContainer,
@@ -175,7 +176,7 @@ const EnvironmentTab = ({ tab, platformContext: context }) => {
               <div className="fc-urlbar-path flex text-base">
                 {runtimeEnv.name}
               </div>
-              <VscEdit size={12} onClick={rename} className="pointer" />
+              <Pencil size={12} onClick={rename} className="pointer" />
             </TabHeader.Left>
             <TabHeader.Right>
               {/* <Button text="Save" primary xs /> */}

platform/firecamp-platform/src/components/common/save/collection/treeItemRenderer.tsx

@@ -1,8 +1,7 @@
 import cx from 'classnames';
 import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
+import { FolderOpen, FolderClosed } from 'lucide-react';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
 
 export default {
   renderItemArrow: ({ item, context }) => {
@@ -17,11 +16,11 @@ export default {
       return context.isExpanded ? (
         <>
           <VscChevronDown size={20} />
-          <VscFolderOpened size={20} />
+          <FolderOpen size={20} />
         </>
       ) : (
         <>
-          <VscChevronRight size={20} /> <VscFolder size={20} />
+          <VscChevronRight size={20} /> <FolderClosed size={20} />
         </>
       );
     } else {

platform/firecamp-platform/src/components/modals/workspace/invite-members/InviteUsersForm.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { VscClose } from '@react-icons/all-files/vsc/VscClose';
 import { FormField, Input } from '@firecamp/ui';
 import { _array } from '@firecamp/utils';
@@ -69,7 +69,7 @@ const InviteUsersForm = ({ usersList, onChange, error }) => {
             onClick={() => _handleAction(index === 0, index)}
           >
             {index === 0 ? (
-              <VscAdd size={20} />
+              <Plus size={20} />
             ) : (
               <VscClose size={20} className="text-error" />
             )}

platform/firecamp-platform/src/components/modals/workspace/tabs/MembersTab.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useRef, useState } from 'react';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 import {
   Button,
   Container,
@@ -137,7 +137,7 @@ const MembersTab = ({ members = [], isFetchingMembers = false }) => {
       case 'action':
         return (
           <div className="px-2">
-            <VscTrash
+            <Trash2
               size={14}
               className="text-error cursor-pointer"
               onClick={() => onRemoveMember(row)}

platform/firecamp-platform/src/components/modals/workspace/tabs/PendingInviteMembersTab.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect, useRef, useState } from 'react';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 import {
   Button,
   Container,
@@ -138,7 +138,7 @@ const PendingInviteMembersTab = ({ members = [], isFetchingMembers = false }) =>
       // case 'action':
       //   return (
       //     <div className="px-2">
-      //       <VscTrash
+      //       <Trash2
       //         size={14}
       //         className="text-error cursor-pointer"
       //         onClick={() => onRemoveMember(row)}

platform/firecamp-platform/src/components/prompt/tree/itemRenderer.tsx

@@ -1,10 +1,7 @@
 import cx from 'classnames';
 import { VscTriangleRight } from '@react-icons/all-files/vsc/VscTriangleRight';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
+import { FolderOpen, FolderClosed, Plus, Trash2 } from 'lucide-react';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
-// import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
-// import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { Button } from '@firecamp/ui';
 
 export default {
@@ -12,7 +9,7 @@ export default {
     return context.isExpanded ? (
       <>
         <VscTriangleDown className="mr-1 flex-none" size={12} opacity={'0.6'} />
-        <VscFolderOpened className="mr-1 flex-none" size={16} opacity={'0.8'} />
+        <FolderOpen className="mr-1 flex-none" size={16} opacity={'0.8'} />
       </>
     ) : (
       <>
@@ -21,7 +18,7 @@ export default {
           size={12}
           opacity={'0.6'}
         />
-        <VscFolder
+        <FolderClosed
           className="mr-1 opacity-80 flex-none"
           size={16}
           opacity={'0.8'}
@@ -172,14 +169,14 @@ export default {
               <></>
             )}
 
-            {/* <VscAdd
+            {/* <Plus
               className="ml-1 cursor-pointer"
               size={14}
               onClick={() => {
                 createFolder(item.index);
               }}
             />
-            <VscTrash
+            <Trash2
               className="ml-1 cursor-pointer"
               size={14}
               onClick={() => {

platform/firecamp-platform/src/components/sidebar/EnvSidebar.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { VscClose } from '@react-icons/all-files/vsc/VscClose';
 import classnames from 'classnames';
 import shallow from 'zustand/shallow';
+import { Pencil } from 'lucide-react';
 import {
   Resizable,
   Container,
@@ -11,7 +12,6 @@ import {
   PlainTable,
 } from '@firecamp/ui';
 import { useEnvStore, IEnvironmentStore } from '../../store/environment';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
 import { useTabStore } from '../../store/tab';
 import { ETabEntityTypes } from '../tabs/types';
 
@@ -118,7 +118,7 @@ const EnvPreviewTable: FC<any> = ({
         )}
         <div className="flex items-center ml-auto">
           {envId ? <Button text="Open" onClick={onOpen} secondary compact xs /> : <></>}
-          {/* <VscEdit className="table-action ml-2 cursor-pointer" /> */}
+          {/* <Pencil className="table-action ml-2 cursor-pointer" /> */}
         </div>
       </div>
       <div className="flex-1 overflow-auto visible-scrollbar">

platform/firecamp-platform/src/components/status-bar/items/DDMenuContainer.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import shallow from 'zustand/shallow';
+import { Plus } from 'lucide-react';
 import { DropdownMenu } from '@firecamp/ui';
 import { _misc } from '@firecamp/utils';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { VscSignIn } from '@react-icons/all-files/vsc/VscSignIn';
 import { VscSignOut } from '@react-icons/all-files/vsc/VscSignOut';
 import { VscAccount } from '@react-icons/all-files/vsc/VscAccount';
@@ -101,7 +101,7 @@ const UserDDMenus: FC<{ title: string; isGuest: boolean }> = ({
       name: 'Create new organization',
       postfix: () => (
         <div className={'ml-2'}>
-          <VscAdd size={14} />
+          <Plus size={14} />
         </div>
       ),
       onClick: () => {
@@ -181,7 +181,7 @@ const WorkspaceDDMenus: FC<{ title: string; disabled?: boolean }> = ({
       disabled,
       postfix: () => (
         <div className={'ml-2'}>
-          <VscAdd size={14} strokeWidth={1.5} />
+          <Plus size={14} strokeWidth={1.5} />
         </div>
       ),
       onClick: () => {
@@ -193,7 +193,7 @@ const WorkspaceDDMenus: FC<{ title: string; disabled?: boolean }> = ({
       disabled,
       postfix: () => (
         <div className={'ml-2'}>
-          <VscAdd size={14} strokeWidth={1.5} />
+          <Plus size={14} strokeWidth={1.5} />
         </div>
       ),
       onClick: () => {
@@ -264,7 +264,7 @@ const OrgDDMenus: FC<{ title: string; disabled?: boolean }> = ({
       disabled,
       postfix: () => (
         <div className={'ml-2'}>
-          <VscAdd size={14} strokeWidth={1.5} />
+          <Plus size={14} strokeWidth={1.5} />
         </div>
       ),
       onClick: () => {
@@ -276,7 +276,7 @@ const OrgDDMenus: FC<{ title: string; disabled?: boolean }> = ({
       disabled,
       postfix: () => (
         <div className={'ml-2'}>
-          <VscAdd size={14} strokeWidth={1.5} />
+          <Plus size={14} strokeWidth={1.5} />
         </div>
       ),
       onClick: () => {

platform/firecamp-platform/src/components/tabs/TabContainerHeader.tsx

@@ -1,7 +1,7 @@
 import { useEffect, memo, useRef } from 'react';
 import classnames from 'classnames';
 import shallow from 'zustand/shallow';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { VscHome } from '@react-icons/all-files/vsc/VscHome';
 import { Column, Row, TabsV3 as Tabs } from '@firecamp/ui';
 import { _misc } from '@firecamp/utils';
@@ -121,7 +121,7 @@ const TabHeaderContainer = () => {
                     onClick={(e) => openNewTab()}
                   >
                     <a>
-                      <VscAdd size={16} />
+                      <Plus size={16} />
                     </a>
                   </div>
                   <Menu />

platform/firecamp-platform/src/components/tabs/header/Menu.tsx

@@ -1,8 +1,8 @@
 import { FC } from 'react';
+import { MoreHorizontal } from 'lucide-react';
 import { ERequestTypes } from '@firecamp/types';
 import { DropdownMenu } from '@firecamp/ui';
 import { _misc } from '@firecamp/utils';
-import { VscEllipsis } from '@react-icons/all-files/vsc/VscEllipsis';
 import {
   FcIconGetSquare,
   FcIconGraphQL,
@@ -74,7 +74,7 @@ const Menu: FC = () => {
     <DropdownMenu
       handler={() => (
         <span className="w-9 h-full border-r border-tab-border bg-tab-background-activeColor flex items-center justify-center cursor-pointer">
-          <VscEllipsis size={20} strokeWidth={1} />
+          <MoreHorizontal size={20} strokeWidth={1} />
         </span>
       )}
       options={tabMenus}

platform/firecamp-platform/src/components/tabs/header/PreComp.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 import classNames from 'classnames';
+import { FolderOpen, FolderClosed } from 'lucide-react';
+
 import { VscJson } from '@react-icons/all-files/vsc/VscJson';
 import { EHttpMethod, ERequestTypes } from '@firecamp/types';
 import {
@@ -8,8 +10,6 @@ import {
   FcIconWebSocket,
 } from '@firecamp/ui';
 import { ETabEntityTypes } from '../types';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
 import { VscArrowDown } from '@react-icons/all-files/vsc/VscArrowDown';
 
 const PreComp: FC<{ entity: any; entityType: string }> = ({
@@ -57,13 +57,13 @@ const PreComp: FC<{ entity: any; entityType: string }> = ({
     case ETabEntityTypes.Collection:
       return (
         <div className="collection text-xs font-bold w-5 tab-icon">
-          <VscFolder size={16} />
+          <FolderClosed size={16} />
         </div>
       );
     case ETabEntityTypes.Folder:
       return (
         <div className="folder text-xs font-bold w-5 tab-icon">
-          <VscFolderOpened size={16} />
+          <FolderOpen size={16} />
         </div>
       );
     case ETabEntityTypes.Import:

platform/firecamp-ui/src/components/activity-bar/ActivityBar.stories.tsx

@@ -1,7 +1,7 @@
+import { Settings } from 'lucide-react';
 import { VscFiles } from "@react-icons/all-files/vsc/VscFiles";
 import { VscHistory } from "@react-icons/all-files/vsc/VscHistory";
 import { VscAccount } from "@react-icons/all-files/vsc/VscAccount";
-import { VscSettingsGear } from "@react-icons/all-files/vsc/VscSettingsGear";
 import ActivityBar from './ActivityBar';
 
 export default {
@@ -25,7 +25,7 @@ const compositeBar = [
 
 const actionBar = [
   { id: '4', icon: <VscAccount data-tip={'User (⇧⌘U)'} data-for={'4'} />, text: 'User (⇧⌘U)', active: false },
-  { id: '5', icon: <VscSettingsGear data-tip={'Settings (⇧⌘/)'} data-for={'5'} />, text: 'Settings (⇧⌘/)', active: false }
+  { id: '5', icon: <Settings data-tip={'Settings (⇧⌘/)'} data-for={'5'} />, text: 'Settings (⇧⌘/)', active: false }
 ];
 
 const TemplateContainer = (args: any) => {

platform/firecamp-ui/src/components/activity-bar/ActivityBar.test.tsx

@@ -1,10 +1,10 @@
 import {useState} from 'react';
 import '@testing-library/jest-dom';
 import { render, screen, waitFor } from '@testing-library/react';
+import { Settings } from 'lucide-react';
 import { VscFiles } from "@react-icons/all-files/vsc/VscFiles";
 import { VscHistory } from "@react-icons/all-files/vsc/VscHistory";
 import { VscAccount } from "@react-icons/all-files/vsc/VscAccount";
-import { VscSettingsGear } from "@react-icons/all-files/vsc/VscSettingsGear";
 
 import ActivityBar from './ActivityBar';
 import { click } from '../../../__mocks__/eventMock';
@@ -17,7 +17,7 @@ const compositeBarList = [
 
 const actionBarList = [
     { id: '4', icon: <VscAccount data-tip={'User (⇧⌘U)'} data-for={'4'} />, text: 'User (⇧⌘U)', active: false },
-    { id: '5', icon: <VscSettingsGear data-tip={'Settings (⇧⌘/)'} data-for={'5'} />, text: 'Settings (⇧⌘/)', active: false }
+    { id: '5', icon: <Settings data-tip={'Settings (⇧⌘/)'} data-for={'5'} />, text: 'Settings (⇧⌘/)', active: false }
 ];
 
 const Template = (args: any = {}) => {

platform/firecamp-ui/src/components/dropdown/DropdownMenu.stories.tsx

@@ -1,24 +1,19 @@
 import { useState } from 'react';
 import cx from 'classnames';
-
+import { FolderClosed, MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
 import { AiOutlineUserAdd } from '@react-icons/all-files/ai/AiOutlineUserAdd';
 import { AiOutlineUserSwitch } from '@react-icons/all-files/ai/AiOutlineUserSwitch';
 import { IoSendSharp } from '@react-icons/all-files/io5/IoSendSharp';
 import { RiBracesLine } from '@react-icons/all-files/ri/RiBracesLine';
 import { VscAccount } from '@react-icons/all-files/vsc/VscAccount';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { VscArrowDown } from '@react-icons/all-files/vsc/VscArrowDown';
 import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
-import { VscEllipsis } from '@react-icons/all-files/vsc/VscEllipsis';
 import { VscFile } from '@react-icons/all-files/vsc/VscFile';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
 import { VscGithubInverted } from '@react-icons/all-files/vsc/VscGithubInverted';
 import { VscMultipleWindows } from '@react-icons/all-files/vsc/VscMultipleWindows';
 import { VscOrganization } from '@react-icons/all-files/vsc/VscOrganization';
 import { VscRemote } from '@react-icons/all-files/vsc/VscRemote';
 import { VscSignIn } from '@react-icons/all-files/vsc/VscSignIn';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
 import { VscTwitter } from '@react-icons/all-files/vsc/VscTwitter';
 import { VscWindow } from '@react-icons/all-files/vsc/VscWindow';
@@ -57,7 +52,7 @@ Example.args = {
     {
       id: EMenuOptions.Collection,
       name: 'Collection',
-      prefix: () => <VscFolder size={18} />,
+      prefix: () => <FolderClosed size={18} />,
     },
     {
       id: EMenuOptions.Environment,
@@ -148,7 +143,7 @@ export const GlobalCreate = () => {
         {
           id: EMenuOptions.Collection,
           name: 'Collection',
-          prefix: () => <VscFolder size={18} />,
+          prefix: () => <FolderClosed size={18} />,
         },
         {
           id: EMenuOptions.Environment,
@@ -571,7 +566,7 @@ export const FooterStatusBar = () => {
                 name: 'Workspace Management',
                 postfix: () => (
                   <div className={'ml-2 leading-3'}>
-                    <VscAdd size={14} strokeWidth={1.5} />
+                    <Plus size={14} strokeWidth={1.5} />
                   </div>
                 ),
               },
@@ -580,7 +575,7 @@ export const FooterStatusBar = () => {
                 name: 'Invite Members',
                 postfix: () => (
                   <div className={'ml-2 leading-3'}>
-                    <VscAdd size={14} strokeWidth={1.5} />
+                    <Plus size={14} strokeWidth={1.5} />
                   </div>
                 ),
               },
@@ -647,14 +642,14 @@ export const SidebarCollectionOption = () => {
   const [selected, setSelected] = useState('MyQuery');
   return (
     <DropdownMenu
-      handler={() => <VscEllipsis className="cursor-pointer" />}
+      handler={() => <MoreHorizontal className="cursor-pointer" />}
       options={[
         {
-          prefix: () => <VscEdit size={14} />,
+          prefix: () => <Pencil size={14} />,
           name: 'Rename',
         },
         {
-          prefix: () => <VscTrash size={14} />,
+          prefix: () => <Trash2 size={14} />,
           name: 'Delete',
         },
       ]}

platform/firecamp-ui/src/components/dropdown/DropdownV2.stories.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { FolderClosed, Plus } from 'lucide-react';
 
 import { VscAccount } from '@react-icons/all-files/vsc/VscAccount';
 import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
@@ -13,7 +13,6 @@ import { FcIconGetSquare } from '@firecamp/ui';
 
 import { RiBracesLine } from '@react-icons/all-files/ri/RiBracesLine';
 import { VscArrowDown } from '@react-icons/all-files/vsc/VscArrowDown';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
 import { VscOrganization } from '@react-icons/all-files/vsc/VscOrganization';
 import { AiOutlineUserAdd } from '@react-icons/all-files/ai/AiOutlineUserAdd';
 import { AiOutlineUserSwitch } from '@react-icons/all-files/ai/AiOutlineUserSwitch';
@@ -57,7 +56,7 @@ export const DropDownv2Example = () => {
           name: 'GraphQL',
           disabled: false,
           showSeparator: true,
-          prefix: () => <VscAdd className="mr-2" size={10} />,
+          prefix: () => <Plus className="mr-2" size={10} />,
           postfix: () => <VscChevronRight size={10} className={'ml-auto'} />,
           list: [
             {
@@ -282,7 +281,7 @@ export const CreateMenuExample = () => {
               {
                 id: 'Collection',
                 name: 'Collection',
-                prefix: () => <VscFolder className="mr-2" size={16} />,
+                prefix: () => <FolderClosed className="mr-2" size={16} />,
                 postfix: () => (
                   <VscChevronRight size={14} className={'ml-auto'} />
                 ),
@@ -617,7 +616,7 @@ export const StatusBarExample = () => {
                     name: 'Workspace Management',
                     postfix: () => (
                       <div className={'ml-2 leading-3'}>
-                        <VscAdd size={14} strokeWidth={1.5} />
+                        <Plus size={14} strokeWidth={1.5} />
                       </div>
                     ),
                   },
@@ -626,7 +625,7 @@ export const StatusBarExample = () => {
                     name: 'Invite Members',
                     postfix: () => (
                       <div className={'ml-2 leading-3'}>
-                        <VscAdd size={14} strokeWidth={1.5} />
+                        <Plus size={14} strokeWidth={1.5} />
                       </div>
                     ),
                   },

platform/firecamp-ui/src/components/table/basic-table/BasicTable.tsx

@@ -1,9 +1,8 @@
 import { useRef } from 'react';
 import cx from 'classnames';
+import { Plus, Trash2 } from 'lucide-react';
 import { _array } from '@firecamp/utils';
 import { GrDrag } from '@react-icons/all-files/gr/GrDrag';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { EEditorLanguage } from '@firecamp/types';
 import { Input, Button } from '@firecamp/ui';
 import Checkbox from '../../checkbox/Checkbox';
@@ -141,7 +140,7 @@ const BasicTable = ({
         if (!options.allowRowRemove) return <></>;
         return (
           <div className="px-2 flex">
-            <VscTrash
+            <Trash2
               size={14}
               className="text-error cursor-pointer"
               onClick={(e) => tableApi?.removeRow(row.id)}
@@ -186,7 +185,7 @@ const BasicTable = ({
           <Button
             onClick={() => apiRef.current.addRow()}
             text="Add Row"
-            leftIcon={<VscAdd size={16} />}
+            leftIcon={<Plus size={16} />}
             disabled={
               options.hasOwnProperty('allowRowAdd') && !options.allowRowAdd
             }

platform/firecamp-ui/src/components/table/environment-table/EnvironmentTable.tsx

@@ -1,10 +1,9 @@
 import { useRef, memo } from 'react';
 import isEqual from 'react-fast-compare';
 import cx from 'classnames';
+import { Plus, Trash2 } from 'lucide-react';
 import { _array } from '@firecamp/utils';
 import { GrDrag } from '@react-icons/all-files/gr/GrDrag';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { EEditorLanguage } from '@firecamp/types';
 import { Button } from '@firecamp/ui';
 
@@ -112,7 +111,7 @@ const EnvironmentTable = ({
         if (!options.allowRowRemove) return <></>;
         return (
           <div className="px-2 flex">
-            <VscTrash
+            <Trash2
               size={14}
               className="text-error cursor-pointer"
               onClick={(e) => tableApi?.removeRow(row.id)}
@@ -154,7 +153,7 @@ const EnvironmentTable = ({
         <Button
           text="Add Row"
           onClick={() => apiRef.current.addRow()}
-          leftIcon={<VscAdd size={16} />}
+          leftIcon={<Plus size={16} />}
           disabled={
             options.hasOwnProperty('allowRowAdd') && !options.allowRowAdd
           }

platform/firecamp-ui/src/components/table/multipart-table/MultipartTable.tsx

@@ -1,11 +1,10 @@
 import React, { FC, memo, useEffect, useRef, useState } from 'react';
 import isEqual from 'react-fast-compare';
+import { Plus, Trash2 } from 'lucide-react';
 import { _array } from '@firecamp/utils';
 import { GrDrag } from '@react-icons/all-files/gr/GrDrag';
 import { VscTextSize } from '@react-icons/all-files/vsc/VscTextSize';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { VscFile } from '@react-icons/all-files/vsc/VscFile';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 import { EEditorLanguage } from '@firecamp/types';
 import { Input, Button } from '@firecamp/ui';
 
@@ -148,7 +147,7 @@ const MultipartTable = ({
         if (!options.allowRowRemove) return <></>;
         return (
           <div className="px-2 flex">
-            <VscTrash
+            <Trash2
               size={14}
               className="text-error cursor-pointer"
               onClick={(e) => tableApi?.removeRow(row.id)}
@@ -190,7 +189,7 @@ const MultipartTable = ({
         <Button
           onClick={() => apiRef.current.addRow()}
           text="Add Row"
-          leftIcon={<VscAdd size={16} />}
+          leftIcon={<Plus size={16} />}
           primary
           transparent
           xs

platform/firecamp-ui/src/components/table/test-result-table/TestResultTable.tsx

@@ -1,7 +1,6 @@
 import { useRef, memo } from 'react';
 import isEqual from 'react-fast-compare';
 import { _array } from '@firecamp/utils';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import Table from '../primitive/Table';
 import {
   ITableRows,

platform/firecamp-ui/src/components/tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react';
 import cx from 'classnames';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { ScrollBar } from '@firecamp/ui';
 import Tab from './Tab';
 import { ITabs } from './interfaces/Tabs.interfaces';
@@ -172,7 +172,7 @@ const Tabs: FC<ITabs> = ({
                   }
                 }}
               >
-                <VscAdd className="flex" size={16} title="IconAdd" />
+                <Plus className="flex" size={16} />
               </div>
             )}
           </div>

platform/firecamp-ui/src/components/tabs/v3/Tabs.tsx

@@ -9,7 +9,7 @@ import {
   useEffect,
 } from 'react';
 import cx from 'classnames';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
+import { Plus } from 'lucide-react';
 import { TId } from '@firecamp/types';
 import { ScrollBar } from '@firecamp/ui';
 
@@ -246,7 +246,7 @@ const Tabs: FC<ITabs> = forwardRef(
                     }
                   }}
                 >
-                  <VscAdd className="flex" size={16} />
+                  <Plus className="flex" size={16} />
                 </div>
               )}
             </div>

platform/firecamp-ui/src/components/url/components/UrlBar.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import cx from 'classnames';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
+import { Pencil } from 'lucide-react';
 import {
   CopyButton,
   Column,
@@ -29,7 +29,7 @@ const UrlBar: FC<IUrlBar> & {
             <span>{nodePath || ''}</span>
             <ToolBar className="ml-4 visible">
               {showEditIcon ? (
-                <VscEdit size={16} onClick={onEditClick} />
+                <Pencil size={16} onClick={onEditClick} />
               ) : (
                 <></>
               )}

platform/firecamp-ui/src/components/url/primitives/UrlBar.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import cx from 'classnames';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
+import { Pencil } from 'lucide-react';
 import {
   CopyButton,
   Column,
@@ -29,7 +29,7 @@ const UrlBar: FC<IUrlBar> & {
             <span>{nodePath || ''}</span>
             <ToolBar className="ml-4 visible">
               {showEditIcon ? (
-                <VscEdit size={16} onClick={onEditClick} />
+                <Pencil size={16} onClick={onEditClick} />
               ) : (
                 <></>
               )}

playgrounds/firecamp-graphql/src/components/playground-panel/PlaygroundPanel.tsx

@@ -1,5 +1,5 @@
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import shallow from 'zustand/shallow';
+import { Plus } from 'lucide-react';
 import { Button, Container, Tabs } from '@firecamp/ui';
 import Playground from './playground/Playground';
 import { useStore, IStore, useStoreApi } from '../../store';
@@ -54,7 +54,7 @@ const TabsSuffixComp = () => {
   return (
     <Button
       text="add playground"
-      leftIcon={<VscAdd size={12} />}
+      leftIcon={<Plus size={12} />}
       onClick={() => addPlayground()}
       transparent
       xs

playgrounds/firecamp-graphql/src/components/playground-panel/playground/request/statusbar/EditPlaygroundName.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { VscEdit } from '@react-icons/all-files/vsc/VscEdit';
+import { Pencil } from 'lucide-react';
 import shallow from 'zustand/shallow';
 import { IStore, useStore } from '../../../../../store';
 
@@ -46,6 +46,6 @@ const EditPlaygroundName: FC<any> = ({}) => {
         // console.log(res)
       });
   };
-  return <VscEdit size={12} onClick={_rename} />;
+  return <Pencil size={12} onClick={_rename} />;
 };
 export default EditPlaygroundName;

playgrounds/firecamp-graphql/src/components/sidebar-panel/tabs/collection-tree/treeItemRenderer.tsx

@@ -1,9 +1,9 @@
 import cx from 'classnames';
+import { Trash2 } from 'lucide-react';
 // import { VscChevronRight } from '@react-icons/all-files/vsc/VscChevronRight';
 // import { VscChevronDown } from '@react-icons/all-files/vsc/VscChevronDown';
 // import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
 import { Button, FcIconGraphQL, ToolBar } from '@firecamp/ui';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
 
 export default {
   renderItemArrow: ({ item, context }) => {
@@ -171,7 +171,7 @@ export default {
               xs
             />
 
-            <VscTrash
+            <Trash2
               className="ml-1 cursor-pointer"
               size={14}
               onClick={() => {

playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/CollectionPane.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
-import { VscNewFolder } from '@react-icons/all-files/vsc/VscNewFolder';
+import { FolderPlus } from 'lucide-react';
 import { VscRefresh } from '@react-icons/all-files/vsc/VscRefresh';
 import { Tree, UncontrolledTreeEnvironment } from '@firecamp/ui/src/tree';
 import { Pane, ToolBar, Empty } from '@firecamp/ui';
@@ -23,7 +23,7 @@ const CollectionPane = () => {
               {/* <VscRefresh size={14} className="mr-2 cursor-pointer" /> */}
             </div>
             <div>
-              <VscNewFolder
+              <FolderPlus
                 size={14}
                 className="cursor-pointer"
                 onClick={() => promptCreateFolder()}

playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/collection-tree/treeItemRenderer.tsx

@@ -1,10 +1,7 @@
 import cx from 'classnames';
+import { FolderOpen, FolderClosed, Plus, Trash2 } from 'lucide-react';
 import { VscTriangleRight } from '@react-icons/all-files/vsc/VscTriangleRight';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { Button } from '@firecamp/ui';
 import { ISocketIOEmitter } from '@firecamp/types';
 
@@ -22,7 +19,7 @@ export default {
             size={12}
             opacity={'0.6'}
           />
-          <VscFolderOpened
+          <FolderOpen
             className="mr-1 flex-none"
             size={16}
             opacity={'0.8'}
@@ -35,7 +32,7 @@ export default {
             size={12}
             opacity={'0.6'}
           />
-          <VscFolder
+          <FolderClosed
             className="mr-1 opacity-80 flex-none"
             size={16}
             opacity={'0.8'}
@@ -206,7 +203,7 @@ export default {
               <></>
             )}
             {item.data.__ref.isFolder ? (
-              <VscAdd
+              <Plus
                 className="ml-1 cursor-pointer"
                 tabIndex={2}
                 size={14}
@@ -218,7 +215,7 @@ export default {
               <></>
             )}
 
-            <VscTrash
+            <Trash2
               className="ml-1 cursor-pointer"
               size={14}
               onClick={() => {

playgrounds/firecamp-socket-io/src/components/sidebar-panel/panes/listeners/PaneBody.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import shallow from 'zustand/shallow';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
+import { Trash2 } from 'lucide-react';
 import {
   Input,
   Container,
@@ -175,7 +175,7 @@ const Listener = ({ listener, isActive }) => {
         {name}
       </div>
 
-      <VscTrash
+      <Trash2
         className="h-0 ml-1 group-hover:h-auto cursor-pointer"
         onClick={() => {
           deleteListener(listener);

playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/CollectionTab.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import shallow from 'zustand/shallow';
-import { VscNewFolder } from '@react-icons/all-files/vsc/VscNewFolder';
+import { FolderPlus } from 'lucide-react';
 import { VscRefresh } from '@react-icons/all-files/vsc/VscRefresh';
 import { Tree, UncontrolledTreeEnvironment } from '@firecamp/ui/src/tree';
 import { Pane, ToolBar, Empty } from '@firecamp/ui';
@@ -23,7 +23,7 @@ const CollectionTab = () => {
               {/* <VscRefresh size={14} className="cursor-pointer" /> */}
             </div>
             <div>
-              <VscNewFolder
+              <FolderPlus
                 size={14}
                 className="cursor-pointer"
                 onClick={() => promptCreateFolder()}

playgrounds/firecamp-websocket/src/components/sidebar-panel/tabs/collection-tree/treeItemRenderer.tsx

@@ -1,10 +1,7 @@
 import cx from 'classnames';
+import { FolderOpen, FolderClosed, Plus, Trash2 } from 'lucide-react';
 import { VscTriangleRight } from '@react-icons/all-files/vsc/VscTriangleRight';
 import { VscTriangleDown } from '@react-icons/all-files/vsc/VscTriangleDown';
-import { VscFolderOpened } from '@react-icons/all-files/vsc/VscFolderOpened';
-import { VscFolder } from '@react-icons/all-files/vsc/VscFolder';
-import { VscTrash } from '@react-icons/all-files/vsc/VscTrash';
-import { VscAdd } from '@react-icons/all-files/vsc/VscAdd';
 import { Button } from '@firecamp/ui';
 
 export default {
@@ -20,7 +17,7 @@ export default {
             size={12}
             opacity={'0.6'}
           />
-          <VscFolderOpened
+          <FolderOpen
             className="mr-1 flex-none"
             size={16}
             opacity={'0.8'}
@@ -33,7 +30,7 @@ export default {
             size={12}
             opacity={'0.6'}
           />
-          <VscFolder
+          <FolderClosed
             className="mr-1 opacity-80 flex-none"
             size={16}
             opacity={'0.8'}
@@ -229,7 +226,7 @@ export default {
             )}
 
             {item.data.__ref.isFolder ? (
-              <VscAdd
+              <Plus
                 className="ml-1 cursor-pointer"
                 tabIndex={2}
                 size={14}
@@ -241,7 +238,7 @@ export default {
               <></>
             )}
 
-            <VscTrash
+            <Trash2
               className="ml-1 cursor-pointer"
               size={14}
               onClick={() => {