chore: minor ui improvements

packages/hoppscotch-common/src/pages/join-team.vue

@@ -27,7 +27,7 @@
       <ButtonPrimary
         :label="t('auth.login_to_hoppscotch')"
         class="mt-8"
-        @click="showLogin = true"
+        @click="invokeAction('modals.login.toggle')"
       />
     </div>
     <div v-else class="flex flex-col items-center justify-center flex-1 p-4">
@@ -138,7 +138,6 @@
         to="/"
       />
     </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
 
@@ -163,6 +162,7 @@ import { useReadonlyStream } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { useI18n } from "~/composables/i18n"
 import IconHome from "~icons/lucide/home"
+import { invokeAction } from "~/helpers/actions"
 
 type GetInviteDetailsError =
   | "team_invite/not_valid_viewer"
@@ -214,12 +214,12 @@ export default defineComponent({
       toast: useToast(),
       t: useI18n(),
       IconHome,
+      invokeAction,
     }
   },
   data() {
     return {
       invalidLink: false,
-      showLogin: false,
       loading: false,
       revokedLink: false,
       inviteID: "",

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

@@ -24,7 +24,7 @@
           <ButtonPrimary
             :label="t('auth.login')"
             class="mb-4"
-            @click="showLogin = true"
+            @click="invokeAction('modals.login.toggle')"
           />
         </div>
         <div v-else class="space-y-8">
@@ -285,7 +285,6 @@
         </div>
       </div>
     </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>
 
@@ -317,6 +316,7 @@ import { deleteShortcode as backendDeleteShortcode } from "~/helpers/backend/mut
 import IconVerified from "~icons/lucide/verified"
 import IconSettings from "~icons/lucide/settings"
 import IconHelpCircle from "~icons/lucide/help-circle"
+import { invokeAction } from "~/helpers/actions"
 
 type ProfileTabs = "sync" | "teams"
 
@@ -330,8 +330,6 @@ usePageHead({
   title: computed(() => t("navigation.profile")),
 })
 
-const showLogin = ref(false)
-
 const SYNC_COLLECTIONS = useSetting("syncCollections")
 const SYNC_ENVIRONMENTS = useSetting("syncEnvironments")
 const SYNC_HISTORY = useSetting("syncHistory")