chore: improve placeholder component styles (#3638)

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

packages/hoppscotch-common/src/components/teams/Edit.vue

@@ -45,15 +45,17 @@
             :alt="`${t('empty.members')}`"
             :text="t('empty.members')"
           >
-            <HoppButtonSecondary
-              :icon="IconUserPlus"
-              :label="t('team.invite')"
-              @click="
-                () => {
-                  emit('invite-team')
-                }
-              "
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :icon="IconUserPlus"
+                :label="t('team.invite')"
+                @click="
+                  () => {
+                    emit('invite-team')
+                  }
+                "
+              />
+            </template>
           </HoppSmartPlaceholder>
           <div v-else class="divide-y divide-dividerLight">
             <div

packages/hoppscotch-common/src/components/teams/Invite.vue

@@ -125,8 +125,7 @@
                 pendingInvites.data.right.team?.teamInvitations.length === 0
               "
               :text="t('empty.pending_invites')"
-            >
-            </HoppSmartPlaceholder>
+            />
             <div
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
               class="flex flex-col items-center p-4"
@@ -245,11 +244,13 @@
             :alt="`${t('empty.invites')}`"
             :text="`${t('empty.invites')}`"
           >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              @click="addNewInvitee"
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :label="t('add.new')"
+                filled
+                @click="addNewInvitee"
+              />
+            </template>
           </HoppSmartPlaceholder>
         </div>
         <div

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

@@ -16,11 +16,13 @@
         :alt="`${t('empty.teams')}`"
         :text="`${t('empty.teams')}`"
       >
-        <HoppButtonSecondary
-          :label="`${t('team.create_new')}`"
-          filled
-          @click="displayModalAdd(true)"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            :label="`${t('team.create_new')}`"
+            filled
+            @click="displayModalAdd(true)"
+          />
+        </template>
       </HoppSmartPlaceholder>
       <div
         v-else-if="!loading"