chore: improve placeholder component styles (#3638)

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

packages/hoppscotch-common/src/pages/profile.vue

@@ -14,10 +14,12 @@
           :alt="`${t('empty.profile')}`"
           :text="`${t('empty.profile')}`"
         >
-          <HoppButtonPrimary
-            :label="t('auth.login')"
-            @click="invokeAction('modals.login.toggle')"
-          />
+          <template #body>
+            <HoppButtonPrimary
+              :label="t('auth.login')"
+              @click="invokeAction('modals.login.toggle')"
+            />
+          </template>
         </HoppSmartPlaceholder>
         <div v-else class="space-y-8">
           <div

packages/hoppscotch-common/src/pages/realtime/mqtt.vue

@@ -142,12 +142,14 @@
         :alt="`${t('empty.subscription')}`"
         :text="`${t('empty.subscription')}`"
       >
-        <HoppButtonSecondary
-          :label="t('mqtt.new')"
-          filled
-          outline
-          @click="showSubscriptionModal(true)"
-        />
+        <template #body>
+          <HoppButtonSecondary
+            :label="t('mqtt.new')"
+            filled
+            outline
+            @click="showSubscriptionModal(true)"
+          />
+        </template>
       </HoppSmartPlaceholder>
       <div v-else>
         <div

packages/hoppscotch-common/src/pages/realtime/socketio.vue

@@ -197,14 +197,16 @@
             :alt="`${t('socketio.connection_not_authorized')}`"
             :text="`${t('socketio.connection_not_authorized')}`"
           >
-            <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-if="authType === 'Bearer'"

packages/hoppscotch-common/src/pages/realtime/websocket.vue

@@ -163,8 +163,7 @@
             :src="`/images/states/${colorMode.value}/add_category.svg`"
             :alt="`${t('empty.protocols')}`"
             :text="`${t('empty.protocols')}`"
-          >
-          </HoppSmartPlaceholder>
+          />
         </HoppSmartTab>
       </HoppSmartTabs>
     </template>