feat: improve import-export UI (#3452)

* chore: uniform styles across components

* chore: removed absolute wrapper divs

* feat: add import button when graphql collections are empty

* chore: add icon for button

---------

Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -251,12 +251,17 @@
               <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
             </template>
           </HoppSmartPlaceholder>
-          <div v-else-if="node === null" class="flex flex-col space-y-25 py-5">
+          <HoppSmartPlaceholder
+            v-else-if="node === null"
+            :src="`/images/states/${colorMode.value}/pack.svg`"
+            :alt="`${t('empty.collections')}`"
+            :text="t('empty.collections')"
+          >
             <div class="flex flex-col items-center space-y-4">
               <span class="text-secondaryLight text-center">
                 {{ t("collection.import_or_create") }}
               </span>
-              <div class="flex gap-4 flex-col items-center">
+              <div class="flex gap-4 flex-col items-stretch">
                 <HoppButtonPrimary
                   :icon="IconImport"
                   :label="t('import.title')"
@@ -273,13 +278,7 @@
                 />
               </div>
             </div>
-            <HoppSmartPlaceholder
+          </HoppSmartPlaceholder>
-              :src="`/images/states/${colorMode.value}/pack.svg`"
-              :alt="`${t('empty.collections')}`"
-              :text="t('empty.collections')"
-            />
-          </div>
-
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'collections'"
             :src="`/images/states/${colorMode.value}/pack.svg`"

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -261,16 +261,18 @@
           />
         </template>
         <template #emptyNode="{ node }">
-          <div
+          <HoppSmartPlaceholder
             v-if="node === null"
-            class="flex flex-col space-y-25 py-5"
+            :src="`/images/states/${colorMode.value}/pack.svg`"
-            @drop="(e) => e.stopPropagation()"
+            :alt="`${t('empty.collections')}`"
+            :text="t('empty.collections')"
+            @drop.stop
           >
             <div class="flex flex-col items-center space-y-4">
               <span class="text-secondaryLight text-center">
                 {{ t("collection.import_or_create") }}
               </span>
-              <div class="flex gap-4 flex-col items-center">
+              <div class="flex gap-4 flex-col items-stretch">
                 <HoppButtonPrimary
                   :icon="IconImport"
                   :label="t('import.title')"
@@ -293,45 +295,34 @@
                 />
               </div>
             </div>
-            <HoppSmartPlaceholder
+          </HoppSmartPlaceholder>
-              :src="`/images/states/${colorMode.value}/pack.svg`"
+          <HoppSmartPlaceholder
-              :alt="`${t('empty.collections')}`"
-              :text="t('empty.collections')"
-            />
-          </div>
-          <div
             v-else-if="node.data.type === 'collections'"
-            @drop="(e) => e.stopPropagation()"
+            :src="`/images/states/${colorMode.value}/pack.svg`"
+            :alt="`${t('empty.collections')}`"
+            :text="t('empty.collections')"
+            @drop.stop
           >
-            <HoppSmartPlaceholder
+            <HoppButtonSecondary
-              :src="`/images/states/${colorMode.value}/pack.svg`"
+              :label="t('add.new')"
-              :alt="`${t('empty.collections')}`"
+              filled
-              :text="t('empty.collections')"
+              outline
-            >
+              @click="
-              <HoppButtonSecondary
+                node.data.type === 'collections' &&
-                :label="t('add.new')"
+                  emit('add-folder', {
-                filled
+                    path: node.id,
-                outline
+                    folder: node.data.data.data,
-                @click="
+                  })
-                  node.data.type === 'collections' &&
+              "
-                    emit('add-folder', {
-                      path: node.id,
-                      folder: node.data.data.data,
-                    })
-                "
-              />
-            </HoppSmartPlaceholder>
-          </div>
-          <div
-            v-else-if="node.data.type === 'folders'"
-            @drop="(e) => e.stopPropagation()"
-          >
-            <HoppSmartPlaceholder
-              :src="`/images/states/${colorMode.value}/pack.svg`"
-              :alt="`${t('empty.folder')}`"
-              :text="t('empty.folder')"
             />
-          </div>
+          </HoppSmartPlaceholder>
+          <HoppSmartPlaceholder
+            v-else-if="node.data.type === 'folders'"
+            :src="`/images/states/${colorMode.value}/pack.svg`"
+            :alt="`${t('empty.folder')}`"
+            :text="t('empty.folder')"
+            @drop.stop
+          />
         </template>
       </HoppSmartTree>
     </div>

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -34,7 +34,7 @@
             v-if="!saveRequest"
             v-tippy="{ theme: 'tooltip' }"
             :title="t('modal.import_export')"
-            :icon="IconArchive"
+            :icon="IconImport"
             @click="displayModalImportExport(true)"
           />
         </div>
@@ -66,12 +66,27 @@
       :alt="`${t('empty.collections')}`"
       :text="t('empty.collections')"
     >
-      <HoppButtonSecondary
+      <div class="flex flex-col items-center space-y-4">
-        :label="t('add.new')"
+        <span class="text-secondaryLight text-center">
-        filled
+          {{ t("collection.import_or_create") }}
-        outline
+        </span>
-        @click="displayModalAdd(true)"
+        <div class="flex gap-4 flex-col items-stretch">
-      />
+          <HoppButtonPrimary
+            :icon="IconImport"
+            :label="t('import.title')"
+            filled
+            outline
+            @click="displayModalImportExport(true)"
+          />
+          <HoppButtonSecondary
+            :label="t('add.new')"
+            filled
+            outline
+            :icon="IconPlus"
+            @click="displayModalAdd(true)"
+          />
+        </div>
+      </div>
     </HoppSmartPlaceholder>
     <HoppSmartPlaceholder
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
@@ -140,7 +155,7 @@ import {
 
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
-import IconArchive from "~icons/lucide/archive"
+import IconImport from "~icons/lucide/folder-down"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
@@ -168,7 +183,7 @@ export default defineComponent({
       tabs,
       IconPlus,
       IconHelpCircle,
-      IconArchive,
+      IconImport,
     }
   },
   data() {

packages/hoppscotch-common/src/components/environments/my/index.vue

@@ -32,12 +32,17 @@
       :environment="environment"
       @edit-environment="editEnvironment(index)"
     />
-    <div v-if="!environments.length" class="p-5 space-y-25 flex flex-col">
+    <HoppSmartPlaceholder
+      v-if="!environments.length"
+      :src="`/images/states/${colorMode.value}/blockchain.svg`"
+      :alt="`${t('empty.environments')}`"
+      :text="t('empty.environments')"
+    >
       <div class="flex flex-col items-center space-y-4">
         <span class="text-secondaryLight text-center">
           {{ t("environment.import_or_create") }}
         </span>
-        <div class="flex gap-4 flex-col items-center">
+        <div class="flex gap-4 flex-col items-stretch">
           <HoppButtonPrimary
             :icon="IconImport"
             :label="t('import.title')"
@@ -54,13 +59,7 @@
           />
         </div>
       </div>
-      <HoppSmartPlaceholder
+    </HoppSmartPlaceholder>
-        :src="`/images/states/${colorMode.value}/blockchain.svg`"
-        :alt="`${t('empty.environments')}`"
-        :text="t('empty.environments')"
-      />
-    </div>
-
     <EnvironmentsMyDetails
       :show="showModalDetails"
       :action="action"

packages/hoppscotch-common/src/components/environments/teams/index.vue

@@ -43,15 +43,17 @@
         />
       </div>
     </div>
-    <div
+    <HoppSmartPlaceholder
       v-if="!loading && !teamEnvironments.length && !adapterError"
-      class="p-5 space-y-25 flex flex-col"
+      :src="`/images/states/${colorMode.value}/blockchain.svg`"
+      :alt="`${t('empty.environments')}`"
+      :text="t('empty.environments')"
     >
       <div class="flex flex-col items-center space-y-4">
         <span class="text-secondaryLight text-center">
           {{ t("environment.import_or_create") }}
         </span>
-        <div class="flex gap-4 flex-col items-center">
+        <div class="flex gap-4 flex-col items-stretch">
           <HoppButtonPrimary
             :icon="IconImport"
             :label="t('import.title')"
@@ -72,13 +74,7 @@
           />
         </div>
       </div>
-      <HoppSmartPlaceholder
+    </HoppSmartPlaceholder>
-        :src="`/images/states/${colorMode.value}/blockchain.svg`"
-        :alt="`${t('empty.environments')}`"
-        :text="t('empty.environments')"
-      />
-    </div>
-
     <div v-else-if="!loading">
       <EnvironmentsTeamsEnvironment
         v-for="(environment, index) in JSON.parse(