feat: invite modal mvp

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

@@ -1,18 +1,11 @@
 <template>
-  <SmartModal v-if="show" :title="$t('team.invite_tooltip')" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('team.invite')" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <div class="flex flex-1 justify-between items-center">
           <label for="memberList" class="p-4">
-            {{ $t("team.members") }}
+            {{ $t("team.pending_invites") }}
           </label>
-          <div class="flex">
-            <ButtonSecondary
-              svg="plus"
-              :label="$t('add.new')"
-              @click.native="addTeamMember"
-            />
-          </div>
         </div>
         <div class="divide-y divide-dividerLight border-divider border rounded">
           <div
@@ -81,6 +74,35 @@
               />
             </div>
           </div>
+          <div
+            v-if="members.length === 0"
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <SmartIcon class="opacity-75 pb-2" name="users" />
+            <span class="text-center pb-4">
+              {{ $t("empty.pending_invites") }}
+            </span>
+          </div>
+        </div>
+        <div class="flex flex-1 justify-between items-center">
+          <label for="memberList" class="p-4">
+            {{ $t("team.invite_tooltip") }}
+          </label>
+          <div class="flex">
+            <ButtonSecondary
+              svg="plus"
+              :label="$t('add.new')"
+              @click.native="addTeamMember"
+            />
+          </div>
+        </div>
+        <div class="divide-y divide-dividerLight border-divider border rounded">
           <div
             v-for="(member, index) in newMembers"
             :key="`new-member-${index}`"
@@ -148,7 +170,7 @@
             </div>
           </div>
           <div
-            v-if="members.length === 0 && newMembers.length === 0"
+            v-if="newMembers.length === 0"
             class="
               flex flex-col
               text-secondaryLight
@@ -172,7 +194,7 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="saveTeam" />
+        <ButtonPrimary :label="$t('team.invite')" @click.native="saveTeam" />
         <ButtonSecondary
           :label="$t('action.cancel')"
           @click.native="hideModal"

packages/hoppscotch-app/locales/en.json

@@ -143,6 +143,7 @@
     "history": "History is empty",
     "members": "Team is empty",
     "parameters": "This request does not have any parameters",
+    "pending_invites": "There are no pending invites for this team",
     "protocols": "Protocols are empty",
     "schema": "Connect to a GraphQL endpoint",
     "team_name": "Team name empty",
@@ -484,6 +485,7 @@
     "new_created": "New team created",
     "new_name": "My New Team",
     "no_access": "You do not have edit access to these collections",
+    "pending_invites": "Pending invites",
     "permissions": "Permissions",
     "saved": "Team saved",
     "title": "Teams"