use create instead of import

Author: jsajal

src/components/molecules/headers/SideBarSubHeader.js

@@ -30,7 +30,7 @@ const SideBarSubHeader = () => {
           fullWidth={true}
         >
           <PlusIcon className='w-4 h-4' />
-          <span className='font-semibold'>Import</span>
+          <span className='font-semibold'>Create</span>
         </Button>
       </div>
       <div>

src/components/molecules/modals/ImportCollectionModal.js

@@ -98,7 +98,7 @@ const ImportCollectionModal = ({ closeFn = () => null, open = false }) => {
             >
               <Dialog.Panel className='w-full max-w-xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white rounded shadow-xl'>
                 <Dialog.Title as='h3' className='pb-4 text-lg font-semibold text-center border-b border-gray-300'>
-                  Import a Collection
+                  Create a Collection
                 </Dialog.Title>
                 {/* ToDo: Add the message of instructions here, if that is not required then we can remove this div */}
                 {/* <div className='mt-4'>

src/components/molecules/workspace/EmptyWorkSpaceContent.js

@@ -19,14 +19,14 @@ const EmptyWorkSpaceContent = () => {
   const [generateFlowTestModalOpen, setGenerateFlowTestModalOpen] = useState(false);
   const [newEnvironmentFileModal, setNewEnvironmentFileModal] = useState(false);
   return (
-    <div className='flex h-full items-center justify-center text-cyan-900'>
-      <div className='flex max-w-xl flex-col gap-8 2xl:gap-10'>
+    <div className='flex items-center justify-center h-full text-cyan-900'>
+      <div className='flex flex-col max-w-xl gap-8 2xl:gap-10'>
         <div className='text-center'>
           <div className='flex items-center justify-center'>
-            <RectangleStackIcon className='h-24 w-24' />
+            <RectangleStackIcon className='w-24 h-24' />
           </div>
           <p className='text-2xl'>
-            A <span className='font-montserrat font-semibold italic'>Collection</span> is a ...
+            A <span className='italic font-semibold font-montserrat'>Collection</span> is a ...
           </p>
           <p className='mt-2 text-sm italic 2xl:mt-4'>
             A Collection is a set of flows where each flow is a set of API requests chained together, along with each
@@ -70,7 +70,7 @@ const EmptyWorkSpaceContent = () => {
                   onClickHandle={() => setImportCollectionModal(true)}
                   fullWidth={true}
                 >
-                  Import a Collection
+                  Create a Collection
                 </Button>
               </>
             )}
@@ -81,10 +81,10 @@ const EmptyWorkSpaceContent = () => {
             <HorizontalDivider themeColor={'bg-cyan-900'} themeStyles={'opacity-75'} />
             <div className='text-center'>
               <div className='flex items-center justify-center'>
-                <Square3Stack3DIcon className='h-24 w-24' />
+                <Square3Stack3DIcon className='w-24 h-24' />
               </div>
               <p className='text-2xl'>
-                An <span className='font-montserrat font-semibold italic'>Environment</span> is a ...
+                An <span className='italic font-semibold font-montserrat'>Environment</span> is a ...
               </p>
               <p className='mt-2 text-sm italic 2xl:mt-4'>
                 An environment is a set of one or more variables that you can reference when sending API requests using