chore: improve placeholder component styles (#3638)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/src/components/http/Authorization.vue

@@ -119,14 +119,16 @@
       :alt="`${t('empty.authorization')}`"
       :text="t('empty.authorization')"
     >
-      <HoppButtonSecondary
-        outline
-        :label="t('app.documentation')"
-        to="https://docs.hoppscotch.io/documentation/features/authorization"
-        blank
-        :icon="IconExternalLink"
-        reverse
-      />
+      <template #body>
+        <HoppButtonSecondary
+          outline
+          :label="t('app.documentation')"
+          to="https://docs.hoppscotch.io/documentation/features/authorization"
+          blank
+          :icon="IconExternalLink"
+          reverse
+        />
+      </template>
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">

packages/hoppscotch-common/src/components/http/Body.vue

@@ -112,14 +112,16 @@
       :alt="`${t('empty.body')}`"
       :text="t('empty.body')"
     >
-      <HoppButtonSecondary
-        outline
-        :label="`${t('app.documentation')}`"
-        to="https://docs.hoppscotch.io/documentation/getting-started/rest/uploading-data"
-        blank
-        :icon="IconExternalLink"
-        reverse
-      />
+      <template #body>
+        <HoppButtonSecondary
+          outline
+          :label="`${t('app.documentation')}`"
+          to="https://docs.hoppscotch.io/documentation/getting-started/rest/uploading-data"
+          blank
+          :icon="IconExternalLink"
+          reverse
+        />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>

packages/hoppscotch-common/src/components/http/BodyParameters.vue

@@ -158,12 +158,14 @@
       :alt="`${t('empty.body')}`"
       :text="t('empty.body')"
     >
-      <HoppButtonSecondary
-        :label="`${t('add.new')}`"
-        filled
-        :icon="IconPlus"
-        @click="addBodyParam"
-      />
+      <template #body>
+        <HoppButtonSecondary
+          :label="`${t('add.new')}`"
+          filled
+          :icon="IconPlus"
+          @click="addBodyParam"
+        />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>

packages/hoppscotch-common/src/components/http/CodegenModal.vue

@@ -61,7 +61,7 @@
                   :text="`${t('state.nothing_found')} ‟${searchQuery}”`"
                 >
                   <template #icon>
-                    <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+                    <icon-lucide-search class="svg-icons opacity-75" />
                   </template>
                 </HoppSmartPlaceholder>
               </div>

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -209,12 +209,14 @@
         :alt="`${t('empty.headers')}`"
         :text="t('empty.headers')"
       >
-        <HoppButtonSecondary
-          filled
-          :label="`${t('add.new')}`"
-          :icon="IconPlus"
-          @click="addHeader"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            filled
+            :label="`${t('add.new')}`"
+            :icon="IconPlus"
+            @click="addHeader"
+          />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -157,12 +157,14 @@
         :alt="`${t('empty.parameters')}`"
         :text="t('empty.parameters')"
       >
-        <HoppButtonSecondary
-          :label="`${t('add.new')}`"
-          :icon="IconPlus"
-          filled
-          @click="addParam"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            :label="`${t('add.new')}`"
+            :icon="IconPlus"
+            filled
+            @click="addParam"
+          />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>

packages/hoppscotch-common/src/components/http/ResponseMeta.vue

@@ -37,7 +37,9 @@
         :text="t('helpers.network_fail')"
         large
       >
-        <AppInterceptor class="rounded border border-dividerLight p-2" />
+        <template #body>
+          <AppInterceptor class="rounded border border-dividerLight p-2" />
+        </template>
       </HoppSmartPlaceholder>
       <HoppSmartPlaceholder
         v-if="response.type === 'script_fail'"
@@ -47,12 +49,14 @@
         :text="t('helpers.script_fail')"
         large
       >
-        <div
-          class="mt-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
-        >
-          {{ response.error.name }}: {{ response.error.message }}<br />
-          {{ response.error.stack }}
-        </div>
+        <template #body>
+          <div
+            class="mt-2 w-full overflow-auto whitespace-normal rounded bg-primaryLight px-4 py-2 font-mono text-red-400"
+          >
+            {{ response.error.name }}: {{ response.error.message }}<br />
+            {{ response.error.stack }}
+          </div>
+        </template>
       </HoppSmartPlaceholder>
       <div
         v-if="response.type === 'success' || response.type === 'fail'"

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -159,8 +159,7 @@
       :alt="`${t('error.test_script_fail')}`"
       :heading="t('error.test_script_fail')"
       :text="t('helpers.test_script_fail')"
-    >
-    </HoppSmartPlaceholder>
+    />
     <HoppSmartPlaceholder
       v-else
       :src="`/images/states/${colorMode.value}/validation.svg`"
@@ -168,15 +167,16 @@
       :heading="t('empty.tests')"
       :text="t('helpers.tests')"
     >
-      <HoppButtonSecondary
-        outline
-        :label="`${t('action.learn_more')}`"
-        to="https://docs.hoppscotch.io/documentation/getting-started/rest/tests"
-        blank
-        :icon="IconExternalLink"
-        reverse
-        class="my-4"
-      />
+      <template #body>
+        <HoppButtonSecondary
+          outline
+          :label="`${t('action.learn_more')}`"
+          to="https://docs.hoppscotch.io/documentation/getting-started/rest/tests"
+          blank
+          :icon="IconExternalLink"
+          reverse
+        />
+      </template>
     </HoppSmartPlaceholder>
     <EnvironmentsMyDetails
       :show="showMyEnvironmentDetailsModal"

packages/hoppscotch-common/src/components/http/URLEncodedParams.vue

@@ -149,12 +149,14 @@
         :alt="`${t('empty.body')}`"
         :text="t('empty.body')"
       >
-        <HoppButtonSecondary
-          filled
-          :label="`${t('add.new')}`"
-          :icon="IconPlus"
-          @click="addUrlEncodedParam"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            filled
+            :label="`${t('add.new')}`"
+            :icon="IconPlus"
+            @click="addUrlEncodedParam"
+          />
+        </template>
       </HoppSmartPlaceholder>
     </div>
   </div>