chore: improve placeholder component styles (#3638)

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

packages/hoppscotch-common/src/components/app/Shortcuts.vue

@@ -17,9 +17,10 @@
           v-if="isEmpty(shortcutsResults)"
           :text="`${t('state.nothing_found')} ‟${filterText}”`"
         >
-          <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+          <template #icon>
+            <icon-lucide-search class="svg-icons opacity-75" />
+          </template>
         </HoppSmartPlaceholder>
-
         <details
           v-for="(sectionResults, sectionTitle) in shortcutsResults"
           v-else

packages/hoppscotch-common/src/components/app/spotlight/index.vue

@@ -49,13 +49,15 @@
           :text="`${t('state.nothing_found')} ‟${search}”`"
         >
           <template #icon>
-            <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+            <icon-lucide-search class="svg-icons opacity-75" />
+          </template>
+          <template #body>
+            <HoppButtonSecondary
+              :label="t('action.clear')"
+              outline
+              @click="search = ''"
+            />
           </template>
-          <HoppButtonSecondary
-            :label="t('action.clear')"
-            outline
-            @click="search = ''"
-          />
         </HoppSmartPlaceholder>
       </div>
       <div

packages/hoppscotch-common/src/components/collections/MyCollections.vue

@@ -254,7 +254,7 @@
             :text="`${t('state.nothing_found')} ‟${filterText}”`"
           >
             <template #icon>
-              <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+              <icon-lucide-search class="svg-icons opacity-75" />
             </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
@@ -263,27 +263,29 @@
             :alt="`${t('empty.collections')}`"
             :text="t('empty.collections')"
           >
-            <div class="flex flex-col items-center space-y-4">
-              <span class="text-center text-secondaryLight">
-                {{ t("collection.import_or_create") }}
-              </span>
-              <div class="flex flex-col items-stretch gap-4">
-                <HoppButtonPrimary
-                  :icon="IconImport"
-                  :label="t('import.title')"
-                  filled
-                  outline
-                  @click="emit('display-modal-import-export')"
-                />
-                <HoppButtonSecondary
-                  :icon="IconPlus"
-                  :label="t('add.new')"
-                  filled
-                  outline
-                  @click="emit('display-modal-add')"
-                />
+            <template #body>
+              <div class="flex flex-col items-center space-y-4">
+                <span class="text-center text-secondaryLight">
+                  {{ t("collection.import_or_create") }}
+                </span>
+                <div class="flex flex-col items-stretch gap-4">
+                  <HoppButtonPrimary
+                    :icon="IconImport"
+                    :label="t('import.title')"
+                    filled
+                    outline
+                    @click="emit('display-modal-import-export')"
+                  />
+                  <HoppButtonSecondary
+                    :icon="IconPlus"
+                    :label="t('add.new')"
+                    filled
+                    outline
+                    @click="emit('display-modal-add')"
+                  />
+                </div>
               </div>
-            </div>
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'collections'"
@@ -291,18 +293,20 @@
             :alt="`${t('empty.collections')}`"
             :text="t('empty.collections')"
           >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              outline
-              @click="
-                node.data.type === 'collections' &&
-                  emit('add-folder', {
-                    path: node.id,
-                    folder: node.data.data.data,
-                  })
-              "
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :label="t('add.new')"
+                filled
+                outline
+                @click="
+                  node.data.type === 'collections' &&
+                    emit('add-folder', {
+                      path: node.id,
+                      folder: node.data.data.data,
+                    })
+                "
+              />
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'folders'"

packages/hoppscotch-common/src/components/collections/TeamCollections.vue

@@ -274,33 +274,37 @@
             :text="t('empty.collections')"
             @drop.stop
           >
-            <div class="flex flex-col items-center space-y-4">
-              <span class="text-center text-secondaryLight">
-                {{ t("collection.import_or_create") }}
-              </span>
-              <div class="flex flex-col items-stretch gap-4">
-                <HoppButtonPrimary
-                  :icon="IconImport"
-                  :label="t('import.title')"
-                  filled
-                  outline
-                  :disabled="hasNoTeamAccess"
-                  :title="hasNoTeamAccess ? t('team.no_access') : ''"
-                  @click="
-                    hasNoTeamAccess ? null : emit('display-modal-import-export')
-                  "
-                />
-                <HoppButtonSecondary
-                  :icon="IconPlus"
-                  :label="t('add.new')"
-                  filled
-                  outline
-                  :disabled="hasNoTeamAccess"
-                  :title="hasNoTeamAccess ? t('team.no_access') : ''"
-                  @click="hasNoTeamAccess ? null : emit('display-modal-add')"
-                />
+            <template #body>
+              <div class="flex flex-col items-center space-y-4">
+                <span class="text-center text-secondaryLight">
+                  {{ t("collection.import_or_create") }}
+                </span>
+                <div class="flex flex-col items-stretch gap-4">
+                  <HoppButtonPrimary
+                    :icon="IconImport"
+                    :label="t('import.title')"
+                    filled
+                    outline
+                    :disabled="hasNoTeamAccess"
+                    :title="hasNoTeamAccess ? t('team.no_access') : ''"
+                    @click="
+                      hasNoTeamAccess
+                        ? null
+                        : emit('display-modal-import-export')
+                    "
+                  />
+                  <HoppButtonSecondary
+                    :icon="IconPlus"
+                    :label="t('add.new')"
+                    filled
+                    outline
+                    :disabled="hasNoTeamAccess"
+                    :title="hasNoTeamAccess ? t('team.no_access') : ''"
+                    @click="hasNoTeamAccess ? null : emit('display-modal-add')"
+                  />
+                </div>
               </div>
-            </div>
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'collections'"
@@ -309,18 +313,20 @@
             :text="t('empty.collections')"
             @drop.stop
           >
-            <HoppButtonSecondary
-              :label="t('add.new')"
-              filled
-              outline
-              @click="
-                node.data.type === 'collections' &&
-                  emit('add-folder', {
-                    path: node.id,
-                    folder: node.data.data.data,
-                  })
-              "
-            />
+            <template #body>
+              <HoppButtonSecondary
+                :label="t('add.new')"
+                filled
+                outline
+                @click="
+                  node.data.type === 'collections' &&
+                    emit('add-folder', {
+                      path: node.id,
+                      folder: node.data.data.data,
+                    })
+                "
+              />
+            </template>
           </HoppSmartPlaceholder>
           <HoppSmartPlaceholder
             v-else-if="node.data.type === 'folders'"

packages/hoppscotch-common/src/components/collections/graphql/Collection.vue

@@ -180,16 +180,18 @@
           :alt="`${t('empty.collection')}`"
           :text="t('empty.collection')"
         >
-          <HoppButtonSecondary
-            :label="t('add.new')"
-            filled
-            outline
-            @click="
-              emit('add-folder', {
-                path: `${collectionIndex}`,
-              })
-            "
-          />
+          <template #body>
+            <HoppButtonSecondary
+              :label="t('add.new')"
+              filled
+              outline
+              @click="
+                emit('add-folder', {
+                  path: `${collectionIndex}`,
+                })
+              "
+            />
+          </template>
         </HoppSmartPlaceholder>
       </div>
     </div>

packages/hoppscotch-common/src/components/collections/graphql/Folder.vue

@@ -176,8 +176,7 @@
           :src="`/images/states/${colorMode.value}/pack.svg`"
           :alt="`${t('empty.folder')}`"
           :text="t('empty.folder')"
-        >
-        </HoppSmartPlaceholder>
+        />
       </div>
     </div>
     <HoppSmartConfirmModal

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -11,7 +11,7 @@
         type="search"
         autocomplete="off"
         :placeholder="t('action.search')"
-        class="!border-0 bg-transparent py-2 pl-4 pr-2"
+        class="flex w-full bg-transparent px-4 py-2 h-8"
       />
       <div
         class="flex flex-1 flex-shrink-0 justify-between border-y border-dividerLight bg-primary"
@@ -66,34 +66,36 @@
       :alt="`${t('empty.collections')}`"
       :text="t('empty.collections')"
     >
-      <div class="flex flex-col items-center space-y-4">
-        <span class="text-center text-secondaryLight">
-          {{ t("collection.import_or_create") }}
-        </span>
-        <div class="flex flex-col items-stretch gap-4">
-          <HoppButtonPrimary
-            :icon="IconImport"
-            :label="t('import.title')"
-            filled
-            outline
-            @click="displayModalImportExport(true)"
-          />
-          <HoppButtonSecondary
-            :label="t('add.new')"
-            filled
-            outline
-            :icon="IconPlus"
-            @click="displayModalAdd(true)"
-          />
+      <template #body>
+        <div class="flex flex-col items-center space-y-4">
+          <span class="text-center text-secondaryLight">
+            {{ t("collection.import_or_create") }}
+          </span>
+          <div class="flex flex-col items-stretch gap-4">
+            <HoppButtonPrimary
+              :icon="IconImport"
+              :label="t('import.title')"
+              filled
+              outline
+              @click="displayModalImportExport(true)"
+            />
+            <HoppButtonSecondary
+              :label="t('add.new')"
+              filled
+              outline
+              :icon="IconPlus"
+              @click="displayModalAdd(true)"
+            />
+          </div>
         </div>
-      </div>
+      </template>
     </HoppSmartPlaceholder>
     <HoppSmartPlaceholder
       v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
       :text="`${t('state.nothing_found')} ‟${filterText}”`"
     >
       <template #icon>
-        <icon-lucide-search class="svg-icons pb-2 opacity-75" />
+        <icon-lucide-search class="svg-icons opacity-75" />
       </template>
     </HoppSmartPlaceholder>
     <CollectionsGraphqlAdd

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

@@ -22,7 +22,7 @@
         v-model="filterTexts"
         type="search"
         autocomplete="off"
-        class="flex w-full bg-transparent px-4 py-2"
+        class="flex w-full bg-transparent px-4 py-2 h-8"
         :placeholder="t('action.search')"
         :disabled="collectionsType.type === 'team-collections'"
       />

packages/hoppscotch-common/src/components/cookies/AllModal.vue

@@ -11,7 +11,9 @@
         v-if="!currentInterceptorSupportsCookies"
         :text="t('cookies.modal.interceptor_no_support')"
       >
-        <AppInterceptor class="rounded border border-dividerLight p-2" />
+        <template #body>
+          <AppInterceptor class="rounded border border-dividerLight p-2" />
+        </template>
       </HoppSmartPlaceholder>
       <div v-else class="flex flex-col">
         <div
@@ -38,8 +40,7 @@
             :alt="`${t('cookies.modal.empty_domains')}`"
             :text="t('cookies.modal.empty_domains')"
             class="mt-6"
-          >
-          </HoppSmartPlaceholder>
+          />
           <div
             v-for="[domain, entries] in workingCookieJar.entries()"
             v-else

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -93,20 +93,12 @@
                   }
                 "
               />
-              <div
+              <HoppSmartPlaceholder
                 v-if="myEnvironments.length === 0"
-                class="flex flex-col items-center justify-center text-secondaryLight"
-              >
-                <img
-                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                  loading="lazy"
-                  class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
-                  :alt="`${t('empty.environments')}`"
-                />
-                <span class="pb-2 text-center">
-                  {{ t("empty.environments") }}
-                </span>
-              </div>
+                :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                :alt="`${t('empty.environments')}`"
+                :text="t('empty.environments')"
+              />
             </HoppSmartTab>
             <HoppSmartTab
               :id="'team-environments'"
@@ -140,20 +132,12 @@
                     }
                   "
                 />
-                <div
+                <HoppSmartPlaceholder
                   v-if="teamEnvironmentList.length === 0"
-                  class="flex flex-col items-center justify-center text-secondaryLight"
-                >
-                  <img
-                    :src="`/images/states/${colorMode.value}/blockchain.svg`"
-                    loading="lazy"
-                    class="mb-2 inline-flex h-16 w-16 flex-col object-contain object-center"
-                    :alt="`${t('empty.environments')}`"
-                  />
-                  <span class="pb-2 text-center">
-                    {{ t("empty.environments") }}
-                  </span>
-                </div>
+                  :src="`/images/states/${colorMode.value}/blockchain.svg`"
+                  :alt="`${t('empty.environments')}`"
+                  :text="t('empty.environments')"
+                />
               </div>
               <div
                 v-if="!teamListLoading && teamAdapterError"