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

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

packages/hoppscotch-common/src/components/profile/Shortcode.vue

@@ -15,7 +15,7 @@
       {{ dateStamp }}
     </div>
     <div class="justify-center table-box">
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.open_workspace')"
         :to="`${shortcodeBaseURL}/r/${shortcode.id}`"
@@ -23,7 +23,7 @@
         :icon="IconExternalLink"
         class="px-3 text-accent hover:text-accent"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.copy')"
         color="green"
@@ -31,7 +31,7 @@
         class="px-3"
         @click="copyShortcode(shortcode.id)"
       />
-      <ButtonSecondary
+      <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         :title="t('action.delete')"
         :icon="IconTrash"

packages/hoppscotch-common/src/components/profile/Shortcodes.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="relative py-4 overflow-x-auto">
       <div v-if="loading" class="flex flex-col items-center justify-center">
-        <SmartSpinner class="mb-4" />
+        <HoppSmartSpinner class="mb-4" />
         <span class="text-secondaryLight">{{ t("state.loading") }}</span>
       </div>
       <div
@@ -56,14 +56,14 @@
             :shortcode="shortcode"
             @delete-shortcode="deleteShortcode"
           />
-          <SmartIntersection
+          <HoppSmartIntersection
             v-if="hasMoreShortcodes && myShortcodes.length > 0"
             @intersecting="loadMoreShortcodes()"
           >
             <div v-if="adapterLoading" class="flex flex-col items-center py-3">
-              <SmartSpinner />
+              <HoppSmartSpinner />
             </div>
-          </SmartIntersection>
+          </HoppSmartIntersection>
         </div>
       </div>
       <div

packages/hoppscotch-common/src/components/profile/UserDelete.vue

@@ -6,14 +6,14 @@
     <div class="my-1 mb-4 text-secondaryLight">
       {{ t("settings.delete_account_description") }}
     </div>
-    <ButtonSecondary
+    <HoppButtonSecondary
       filled
       outline
       :label="t('settings.delete_account')"
       type="submit"
       @click="showDeleteAccountModal = true"
     />
-    <SmartModal
+    <HoppSmartModal
       v-if="showDeleteAccountModal"
       dialog
       :title="t('settings.delete_account')"
@@ -21,7 +21,7 @@
     >
       <template #body>
         <div v-if="loading" class="flex flex-col items-center justify-center">
-          <SmartSpinner class="mb-4" />
+          <HoppSmartSpinner class="mb-4" />
           <span class="text-secondaryLight">{{ t("state.loading") }}</span>
         </div>
         <div
@@ -73,7 +73,7 @@
       </template>
       <template #footer>
         <span class="flex space-x-2">
-          <ButtonPrimary
+          <HoppButtonPrimary
             :label="t('settings.delete_account')"
             :loading="deletingUser"
             filled
@@ -86,7 +86,7 @@
             class="!bg-red-500 !hover:bg-red-600 !border-red-500 !hover:border-red-600"
             @click="deleteUserAccount"
           />
-          <ButtonSecondary
+          <HoppButtonSecondary
             :label="t('action.cancel')"
             outline
             filled
@@ -94,7 +94,7 @@
           />
         </span>
       </template>
-    </SmartModal>
+    </HoppSmartModal>
   </section>
 </template>