refactor: update hopp-ui to be independent (#2927)

Co-authored-by: Anwarul Islam <anwaarulislaam@gmail.com>

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('collection.new')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="addNewCollection"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('folder.new')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="addFolder"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('request.new')"
@@ -22,13 +22,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="addRequest"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -36,7 +36,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -29,14 +29,14 @@
         </span>
       </span>
       <div v-if="!hasNoTeamAccess" class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFilePlus"
           :title="t('request.new')"
           class="hidden group-hover:inline-flex"
           @click="emit('add-request')"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFolderPlus"
           :title="t('folder.new')"
@@ -51,7 +51,7 @@
             theme="popover"
             :on-shown="() => tippyActions!.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -68,7 +68,7 @@
                 @keyup.x="exportAction?.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="requestAction"
                   :icon="IconFilePlus"
                   :label="t('request.new')"
@@ -80,7 +80,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="folderAction"
                   :icon="IconFolderPlus"
                   :label="t('folder.new')"
@@ -92,7 +92,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="t('action.edit')"
@@ -104,7 +104,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="exportAction"
                   :icon="IconDownload"
                   :label="t('export.title')"
@@ -117,7 +117,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="t('action.delete')"

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('collection.edit')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="saveCollection"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('folder.edit')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="editFolder"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('modal.edit_request')"
@@ -24,13 +24,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('action.save')"
           :loading="loadingState"
           outline
           @click="editRequest"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -38,7 +38,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('modal.collections')"
@@ -7,7 +7,7 @@
     @close="hideModal"
   >
     <template #actions>
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-if="importerType !== null"
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.go_back')"
@@ -101,7 +101,7 @@
             </div>
           </div>
         </div>
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="t('import.title')"
           :disabled="enableImportButton"
           :loading="importingMyCollections"
@@ -109,9 +109,9 @@
         />
       </div>
       <div v-else class="flex flex-col">
-        <SmartExpand>
+        <HoppSmartExpand>
           <template #body>
-            <SmartItem
+            <HoppSmartItem
               v-for="(importer, index) in importerModules"
               :key="`importer-${index}`"
               :icon="importer.icon"
@@ -119,10 +119,10 @@
               @click="importerType = index"
             />
           </template>
-        </SmartExpand>
+        </HoppSmartExpand>
         <hr />
         <div class="flex flex-col space-y-2">
-          <SmartItem
+          <HoppSmartItem
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.download_file')"
             :icon="IconDownload"
@@ -141,7 +141,7 @@
             "
             class="flex"
           >
-            <SmartItem
+            <HoppSmartItem
               :disabled="
                 !currentUser
                   ? true
@@ -158,7 +158,7 @@
         </div>
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -8,21 +8,21 @@
           : 'top: var(--upper-primary-sticky-fold)'
       "
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         :icon="IconPlus"
         :label="t('action.new')"
         class="!rounded-none"
         @click="emit('display-modal-add')"
       />
       <span class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/collections"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconArchive"
@@ -210,7 +210,7 @@
               <span class="pb-4 text-center">
                 {{ t("empty.collections") }}
               </span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 :label="t('add.new')"
                 filled
                 outline
@@ -231,7 +231,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.collection") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               :label="t('add.new')"
               filled
               outline

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

@@ -47,7 +47,7 @@
         </span>
       </span>
       <div v-if="!hasNoTeamAccess" class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconRotateCCW"
@@ -63,7 +63,7 @@
             theme="popover"
             :on-shown="() => tippyActions!.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -78,7 +78,7 @@
                 @keyup.delete="deleteAction?.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="t('action.edit')"
@@ -90,7 +90,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="duplicate"
                   :icon="IconCopy"
                   :label="t('action.duplicate')"
@@ -103,7 +103,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="t('action.delete')"

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('collection.save_as')}`"
@@ -43,13 +43,13 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           :loading="modalLoadingState"
           outline
           @click="saveRequestAs"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -57,7 +57,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -8,7 +8,7 @@
           : 'top: var(--upper-secondary-sticky-fold)'
       "
     >
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-if="hasNoTeamAccess"
         v-tippy="{ theme: 'tooltip' }"
         disabled
@@ -17,7 +17,7 @@
         :title="t('team.no_access')"
         :label="t('action.new')"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-else
         :icon="IconPlus"
         :label="t('action.new')"
@@ -25,14 +25,14 @@
         @click="emit('display-modal-add')"
       />
       <span class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/features/collections"
           blank
           :title="t('app.wiki')"
           :icon="IconHelpCircle"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :disabled="
@@ -206,7 +206,7 @@
               <span class="pb-4 text-center">
                 {{ t("empty.collections") }}
               </span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-if="hasNoTeamAccess"
                 v-tippy="{ theme: 'tooltip' }"
                 disabled
@@ -215,7 +215,7 @@
                 :title="t('team.no_access')"
                 :label="t('add.new')"
               />
-              <ButtonSecondary
+              <HoppButtonSecondary
                 v-else
                 :label="t('add.new')"
                 filled
@@ -237,7 +237,7 @@
             <span class="pb-4 text-center">
               {{ t("empty.collection") }}
             </span>
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-if="hasNoTeamAccess"
               v-tippy="{ theme: 'tooltip' }"
               disabled
@@ -246,7 +246,7 @@
               :title="t('team.no_access')"
               :label="t('add.new')"
             />
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-else
               :label="t('add.new')"
               filled

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-1">
-    <SmartIntersection
+    <HoppSmartIntersection
       class="flex flex-col flex-1"
       @intersecting="onTeamSelectIntersect"
     >
@@ -16,13 +16,13 @@
           :title="`${t('collection.select_team')}`"
           class="bg-transparent border-b border-dividerLight select-wrapper"
         >
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-if="collectionsType.selectedTeam"
             :icon="IconUsers"
             :label="collectionsType.selectedTeam.name"
             class="flex-1 !justify-start pr-8 rounded-none"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-else
             :label="`${t('collection.select_team')}`"
             class="flex-1 !justify-start pr-8 rounded-none"
@@ -39,11 +39,11 @@
               v-if="isTeamListLoading && myTeams.length === 0"
               class="flex flex-col items-center justify-center flex-1 p-2"
             >
-              <SmartSpinner class="my-2" />
+              <HoppSmartSpinner class="my-2" />
               <span class="text-secondaryLight">{{ t("state.loading") }}</span>
             </div>
             <div v-else-if="myTeams.length > 0" class="flex flex-col">
-              <SmartItem
+              <HoppSmartItem
                 v-for="(team, index) in myTeams"
                 :key="`team-${index}`"
                 :label="team.name"
@@ -62,7 +62,7 @@
                 "
               />
               <hr />
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconPlus"
                 :label="t('team.create_new')"
                 @click="
@@ -86,7 +86,7 @@
               <span class="pb-4 text-center">
                 {{ t("empty.teams") }}
               </span>
-              <ButtonSecondary
+              <HoppButtonSecondary
                 :label="t('team.create_new')"
                 filled
                 outline
@@ -101,7 +101,7 @@
           </div>
         </template>
       </tippy>
-    </SmartIntersection>
+    </HoppSmartIntersection>
   </div>
 </template>
 

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('collection.new')}`"
@@ -24,12 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="addNewCollection"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -37,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('folder.new')"
@@ -24,8 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary :label="t('action.save')" outline @click="addFolder" />
-        <ButtonSecondary
+        <HoppButtonPrimary
+          :label="t('action.save')"
+          outline
+          @click="addFolder"
+        />
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -33,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="t('request.new')"
@@ -24,8 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary :label="t('action.save')" outline @click="addRequest" />
-        <ButtonSecondary
+        <HoppButtonPrimary
+          :label="t('action.save')"
+          outline
+          @click="addRequest"
+        />
+        <HoppButtonSecondary
           :label="t('action.cancel')"
           outline
           filled
@@ -33,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -29,7 +29,7 @@
         </span>
       </span>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFilePlus"
           :title="t('request.new')"
@@ -40,7 +40,7 @@
             })
           "
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFolderPlus"
           :title="t('folder.new')"
@@ -59,7 +59,7 @@
             theme="popover"
             :on-shown="() => tippyActions.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -75,7 +75,7 @@
                 @keyup.delete="deleteAction.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="requestAction"
                   :icon="IconFilePlus"
                   :label="`${t('request.new')}`"
@@ -89,7 +89,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="folderAction"
                   :icon="IconFolderPlus"
                   :label="`${t('folder.new')}`"
@@ -103,7 +103,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="`${t('action.edit')}`"
@@ -115,7 +115,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="`${t('action.delete')}`"
@@ -186,7 +186,7 @@
           <span class="pb-4 text-center">
             {{ t("empty.collection") }}
           </span>
-          <ButtonSecondary
+          <HoppButtonSecondary
             :label="t('add.new')"
             filled
             outline
@@ -199,7 +199,7 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_collection')}`"
       @hide-modal="confirmRemove = false"

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('collection.edit')}`"
@@ -24,12 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="saveCollection"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -37,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('folder.edit')}`"
@@ -24,12 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="editFolder"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -37,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('modal.edit_request')}`"
@@ -24,12 +24,12 @@
     </template>
     <template #footer>
       <span class="flex space-x-2">
-        <ButtonPrimary
+        <HoppButtonPrimary
           :label="`${t('action.save')}`"
           outline
           @click="saveRequest"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           :label="`${t('action.cancel')}`"
           outline
           filled
@@ -37,7 +37,7 @@
         />
       </span>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script lang="ts">

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

@@ -29,14 +29,14 @@
         </span>
       </span>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFilePlus"
           :title="t('request.new')"
           class="hidden group-hover:inline-flex"
           @click="emit('add-request', { path: folderPath })"
         />
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconFolderPlus"
           :title="t('folder.new')"
@@ -51,7 +51,7 @@
             theme="popover"
             :on-shown="() => tippyActions.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -67,7 +67,7 @@
                 @keyup.delete="deleteAction.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="requestAction"
                   :icon="IconFilePlus"
                   :label="`${t('request.new')}`"
@@ -79,7 +79,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="folderAction"
                   :icon="IconFolderPlus"
                   :label="`${t('folder.new')}`"
@@ -91,7 +91,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="`${t('action.edit')}`"
@@ -103,7 +103,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="`${t('action.delete')}`"
@@ -181,7 +181,7 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_folder')}`"
       @hide-modal="confirmRemove = false"

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

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal
+  <HoppSmartModal
     v-if="show"
     dialog
     :title="`${t('modal.collections')}`"
@@ -9,7 +9,7 @@
     <template #actions>
       <span>
         <tippy interactive trigger="click" theme="popover">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="t('action.more')"
             :icon="IconMoreVertical"
@@ -22,7 +22,7 @@
               tabindex="0"
               @keyup.escape="hide()"
             >
-              <SmartItem
+              <HoppSmartItem
                 :icon="IconGithub"
                 :label="t('import.from_gist')"
                 @click="
@@ -42,7 +42,7 @@
                     : undefined
                 "
               >
-                <SmartItem
+                <HoppSmartItem
                   :disabled="
                     !currentUser
                       ? true
@@ -67,7 +67,7 @@
     </template>
     <template #body>
       <div class="flex flex-col space-y-2">
-        <SmartItem
+        <HoppSmartItem
           :icon="IconFolderPlus"
           :label="t('import.from_json')"
           @click="openDialogChooseFileToImportFrom"
@@ -80,7 +80,7 @@
           @change="importFromJSON"
         />
         <hr />
-        <SmartItem
+        <HoppSmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.download_file')"
           :icon="IconDownload"
@@ -89,7 +89,7 @@
         />
       </div>
     </template>
-  </SmartModal>
+  </HoppSmartModal>
 </template>
 
 <script setup lang="ts">

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

@@ -28,7 +28,7 @@
         </span>
       </span>
       <div class="flex">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-if="!saveRequest"
           v-tippy="{ theme: 'tooltip' }"
           :icon="IconRotateCCW"
@@ -44,7 +44,7 @@
             theme="popover"
             :on-shown="() => tippyActions.focus()"
           >
-            <ButtonSecondary
+            <HoppButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               :title="t('action.more')"
               :icon="IconMoreVertical"
@@ -59,7 +59,7 @@
                 @keyup.delete="deleteAction.$el.click()"
                 @keyup.escape="hide()"
               >
-                <SmartItem
+                <HoppSmartItem
                   ref="edit"
                   :icon="IconEdit"
                   :label="`${t('action.edit')}`"
@@ -75,7 +75,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="duplicate"
                   :icon="IconCopy"
                   :label="`${t('action.duplicate')}`"
@@ -91,7 +91,7 @@
                     }
                   "
                 />
-                <SmartItem
+                <HoppSmartItem
                   ref="deleteAction"
                   :icon="IconTrash2"
                   :label="`${t('action.delete')}`"
@@ -109,7 +109,7 @@
         </span>
       </div>
     </div>
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="`${t('confirm.remove_request')}`"
       @hide-modal="confirmRemove = false"

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

@@ -16,21 +16,21 @@
       <div
         class="flex justify-between flex-1 flex-shrink-0 border-y bg-primary border-dividerLight"
       >
-        <ButtonSecondary
+        <HoppButtonSecondary
           :icon="IconPlus"
           :label="t('action.new')"
           class="!rounded-none"
           @click="displayModalAdd(true)"
         />
         <div class="flex">
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             to="https://docs.hoppscotch.io/features/collections"
             blank
             :title="t('app.wiki')"
             :icon="IconHelpCircle"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             v-if="!saveRequest"
             v-tippy="{ theme: 'tooltip' }"
             :title="t('modal.import_export')"
@@ -73,7 +73,7 @@
       <span class="pb-4 text-center">
         {{ t("empty.collections") }}
       </span>
-      <ButtonSecondary
+      <HoppButtonSecondary
         :label="t('add.new')"
         filled
         outline

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

@@ -15,7 +15,7 @@
         :disabled="collectionsType.type === 'team-collections'"
       />
     </div>
-    <SmartTabs
+    <HoppSmartTabs
       v-model="selectedCollectionTab"
       render-inactive-tabs
       :styles="`
@@ -27,7 +27,7 @@
         }
       `"
     >
-      <SmartTab
+      <HoppSmartTab
         :id="'my-collections'"
         :label="`${t('collection.my_collections')}`"
       >
@@ -53,8 +53,8 @@
           @display-modal-add="displayModalAdd(true)"
           @display-modal-import-export="displayModalImportExport(true)"
         />
-      </SmartTab>
-      <SmartTab
+      </HoppSmartTab>
+      <HoppSmartTab
         :id="'team-collections'"
         :label="`${t('collection.team_collections')}`"
       >
@@ -99,8 +99,8 @@
           @display-modal-add="displayModalAdd(true)"
           @display-modal-import-export="displayModalImportExport(true)"
         />
-      </SmartTab>
-    </SmartTabs>
+      </HoppSmartTab>
+    </HoppSmartTabs>
     <CollectionsAdd
       :show="showModalAdd"
       :loading-state="modalLoadingState"
@@ -140,7 +140,7 @@
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"
     />
-    <SmartConfirmModal
+    <HoppSmartConfirmModal
       :show="showConfirmModal"
       :title="confirmModalTitle"
       :loading-state="modalLoadingState"