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

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

packages/hoppscotch-common/src/components/smart/AccentModePicker.vue

@@ -9,7 +9,7 @@
     <!-- text-orange-500 -->
     <!-- text-red-500 -->
     <!-- text-pink-500 -->
-    <ButtonSecondary
+    <HoppButtonSecondary
       v-for="(color, index) of accentColors"
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"

packages/hoppscotch-common/src/components/smart/ChangeLanguage.vue

@@ -7,7 +7,7 @@
       :on-shown="() => tippyActions.focus()"
     >
       <span class="select-wrapper">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('settings.choose_language')"
           class="pr-8"
@@ -33,7 +33,7 @@
             tabindex="0"
             @keyup.escape="hide()"
           >
-            <SmartLink
+            <HoppSmartLink
               v-for="locale in filteredAppLanguages"
               :key="`locale-${locale.code}`"
               class="flex flex-1"
@@ -44,14 +44,14 @@
                 }
               "
             >
-              <SmartItem
+              <HoppSmartItem
                 :label="locale.name"
                 :active-info-icon="currentLocale.code === locale.code"
                 :info-icon="
                   currentLocale.code === locale.code ? IconDone : null
                 "
               />
-            </SmartLink>
+            </HoppSmartLink>
             <div
               v-if="
                 !(

packages/hoppscotch-common/src/components/smart/ColorModePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <ButtonSecondary
+    <HoppButtonSecondary
       v-for="(color, index) of colors"
       :key="`color-${index}`"
       v-tippy="{ theme: 'tooltip' }"

packages/hoppscotch-common/src/components/smart/FontSizePicker.vue

@@ -7,7 +7,7 @@
       :on-shown="() => tippyActions.focus()"
     >
       <span class="select-wrapper">
-        <ButtonSecondary
+        <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('settings.change_font_size')"
           class="pr-8"
@@ -25,7 +25,7 @@
           tabindex="0"
           @keyup.escape="hide()"
         >
-          <SmartItem
+          <HoppSmartItem
             v-for="(size, index) in fontSizes"
             :key="`size-${index}`"
             :label="`${getFontSizeName(size)}`"

packages/hoppscotch-common/src/components/smart/Tree.vue

@@ -31,7 +31,7 @@
       v-else-if="rootNodes.status === 'loading'"
       class="flex flex-col items-center justify-center flex-1 p-4"
     >
-      <SmartSpinner class="my-4" />
+      <HoppSmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div

packages/hoppscotch-common/src/components/smart/TreeBranch.vue

@@ -46,7 +46,7 @@
       v-if="childNodes.status === 'loading'"
       class="flex flex-col items-center justify-center flex-1 p-4"
     >
-      <SmartSpinner class="my-4" />
+      <HoppSmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
     <div