refactor: empty state illustrations

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -155,7 +155,18 @@
             justify-center
           "
         >
-          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <img
+            :src="`/images/states/${$colorMode.value}/pack.svg`"
+            loading="lazy"
+            class="
+              flex-col
+              mb-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
+          />
           <span class="text-center">
             {{ $t("empty.collection") }}
           </span>

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -154,7 +154,18 @@
             justify-center
           "
         >
-          <i class="opacity-75 pb-2 material-icons">folder_open</i>
+          <img
+            :src="`/images/states/${$colorMode.value}/pack.svg`"
+            loading="lazy"
+            class="
+              flex-col
+              mb-4
+              object-contain object-center
+              h-16
+              w-16
+              inline-flex
+            "
+          />
           <span class="text-center">
             {{ $t("empty.folder") }}
           </span>

packages/hoppscotch-app/components/collections/graphql/index.vue

@@ -70,6 +70,11 @@
       v-if="collections.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
+      <img
+        :src="`/images/states/${$colorMode.value}/pack.svg`"
+        loading="lazy"
+        class="flex-col my-4 object-contain object-center h-16 w-16 inline-flex"
+      />
       <span class="text-center pb-4">
         {{ $t("empty.collections") }}
       </span>