feat: teams modal wrapper

packages/hoppscotch-app/components/app/Header.vue

@@ -47,49 +47,65 @@
           :label="$t('header.login')"
           @click.native="showLogin = true"
         />
-        <span v-else class="px-2">
-          <tippy ref="user" interactive trigger="click" theme="popover" arrow>
-            <template #trigger>
-              <ProfilePicture
-                v-if="currentUser.photoURL"
-                v-tippy="{
-                  theme: 'tooltip',
-                }"
-                :url="currentUser.photoURL"
-                :alt="currentUser.displayName"
-                :title="currentUser.displayName"
-                indicator
-                :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
-              />
-              <ButtonSecondary
-                v-else
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('header.account')"
-                class="rounded"
+        <div v-else class="space-x-2 inline-flex items-center">
+          <ButtonPrimary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('team.invite_tooltip')"
+            :label="$t('team.invite')"
+            svg="user-plus"
+            class="
+              !bg-green-400
+              !text-green-500
+              !bg-opacity-10
+              !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-600
+            "
+            @click.native="showTeamsModal = true"
+          />
+          <span class="px-2">
+            <tippy ref="user" interactive trigger="click" theme="popover" arrow>
+              <template #trigger>
+                <ProfilePicture
+                  v-if="currentUser.photoURL"
+                  v-tippy="{
+                    theme: 'tooltip',
+                  }"
+                  :url="currentUser.photoURL"
+                  :alt="currentUser.displayName"
+                  :title="currentUser.displayName"
+                  indicator
+                  :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+                />
+                <ButtonSecondary
+                  v-else
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('header.account')"
+                  class="rounded"
+                  svg="user"
+                />
+              </template>
+              <SmartItem
+                to="/profile"
                 svg="user"
+                :label="$t('navigation.profile')"
+                @click.native="$refs.user.tippy().hide()"
               />
-            </template>
-            <SmartItem
-              to="/profile"
-              svg="user"
-              :label="$t('navigation.profile')"
-              @click.native="$refs.user.tippy().hide()"
-            />
-            <SmartItem
-              to="/settings"
-              svg="settings"
-              :label="$t('navigation.settings')"
-              @click.native="$refs.user.tippy().hide()"
-            />
-            <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
-          </tippy>
-        </span>
+              <SmartItem
+                to="/settings"
+                svg="settings"
+                :label="$t('navigation.settings')"
+                @click.native="$refs.user.tippy().hide()"
+              />
+              <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
+            </tippy>
+          </span>
+        </div>
       </div>
     </header>
     <AppAnnouncement v-if="!isOnLine" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
     <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
+    <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
   </div>
 </template>
 
@@ -127,6 +143,7 @@ export default defineComponent({
       showInstallPrompt: null,
       showLogin: false,
       isOnLine: navigator.onLine,
+      showTeamsModal: false,
     }
   },
   async mounted() {

packages/hoppscotch-app/components/teams/Modal.vue

@@ -0,0 +1,26 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('app.invite_your_friends')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <Teams :modal="true" />
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>

packages/hoppscotch-app/components/teams/index.vue

@@ -26,7 +26,8 @@
       </div>
       <div
         v-else-if="!myTeams.loading && E.isRight(myTeams.data)"
-        class="grid gap-4 sm:grid-cols-3 md:grid-cols-4"
+        class="grid gap-4"
+        :class="modal ? 'grid-cols-1' : 'sm:grid-cols-3 md:grid-cols-4'"
       >
         <TeamsTeam
           v-for="(team, index) in myTeams.data.right.myTeams"
@@ -69,6 +70,10 @@ import { useGQLQuery } from "~/helpers/backend/GQLClient"
 import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
 import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
+defineProps<{
+  modal: boolean
+}>()
+
 const showModalAdd = ref(false)
 const showModalEdit = ref(false)
 const editingTeam = ref<any>({}) // TODO: Check this out

packages/hoppscotch-app/locales/en.json

@@ -472,6 +472,8 @@
     "exit_disabled": "Only owner cannot exit the team",
     "invalid_email_format": "Email format is invalid",
     "invalid_member_permission": "Please provide a valid permission to the team member",
+    "invite": "Invite",
+    "invite_tooltip": "Invite people to this workspace",
     "join_beta": "Join the beta program to access teams.",
     "left": "You left the team",
     "member_removed": "User removed",

packages/hoppscotch-app/pages/profile.vue

@@ -73,7 +73,7 @@
             </SmartTab>
             <SmartTab :id="'teams'" :label="$t('team.title')">
               <AppSection label="teams">
-                <Teams />
+                <Teams :modal="false" />
               </AppSection>
             </SmartTab>
           </SmartTabs>