refactor: empty state illustrations

packages/hoppscotch-app/components/http/Authorization.vue

@@ -95,6 +95,11 @@
       v-if="authType === 'none'"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
+      <img
+        :src="`/images/states/${$colorMode.value}/login.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.authorization") }}
       </span>

packages/hoppscotch-app/components/http/Body.vue

@@ -65,6 +65,11 @@
       v-if="contentType == null"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
+      <img
+        :src="`/images/states/${$colorMode.value}/upload_single_file.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.body") }}
       </span>

packages/hoppscotch-app/components/http/BodyParameters.vue

@@ -153,6 +153,11 @@
       v-if="bodyParams.length === 0"
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
+      <img
+        :src="`/images/states/${$colorMode.value}/upload_single_file.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.body") }}
       </span>

packages/hoppscotch-app/components/http/Headers.vue

@@ -144,6 +144,18 @@
           justify-center
         "
       >
+        <img
+          :src="`/images/states/${$colorMode.value}/add_category.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.headers") }}
         </span>

packages/hoppscotch-app/components/http/Parameters.vue

@@ -137,6 +137,18 @@
           justify-center
         "
       >
+        <img
+          :src="`/images/states/${$colorMode.value}/add_files.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.parameters") }}
         </span>

packages/hoppscotch-app/components/http/ResponseMeta.vue

@@ -68,11 +68,22 @@
           justify-center
         "
       >
-        <i class="opacity-75 pb-2 material-icons">cloud_off</i>
-        <span class="text-center pb-2">
+        <img
+          :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
+          loading="lazy"
+          class="
+            flex-col
+            my-4
+            object-contain object-center
+            h-32
+            w-32
+            inline-flex
+          "
+        />
+        <span class="text-center mb-2">
           {{ $t("error.network_fail") }}
         </span>
-        <span class="text-center pb-4">
+        <span class="text-center mb-4 max-w-sm">
           {{ $t("helpers.network_fail") }}
         </span>
         <ButtonSecondary

packages/hoppscotch-app/components/http/TestResult.vue

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