refactor(sh-admin): improvements to pending invites page in dashboard (#3926)

packages/hoppscotch-sh-admin/locales/en.json

@@ -253,7 +253,6 @@
   },
   "users": {
     "admin": "Admin",
-    "admin_email": "Admin Email",
     "admin_id": "Admin ID",
     "cancel": "Cancel",
     "created_on": "Created On",
@@ -270,6 +269,7 @@
     "invalid_user": "Invalid User",
     "invite_load_list_error": "Unable to Load Invited Users List",
     "invite_user": "Invite User",
+    "invited_by": "Invited By",
     "invited_on": "Invited On",
     "invited_users": "Invited Users",
     "invitee_email": "Invitee Email",

packages/hoppscotch-sh-admin/src/components.d.ts

@@ -51,7 +51,6 @@ declare module '@vue/runtime-core' {
     UsersDetails: typeof import('./components/users/Details.vue')['default']
     UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
     UsersSharedRequests: typeof import('./components/users/SharedRequests.vue')['default']
-    UsersTable: typeof import('./components/users/Table.vue')['default']
   }
 
 }

packages/hoppscotch-sh-admin/src/pages/users/index.vue

@@ -20,7 +20,7 @@
           />
         </div>
       </div>
-      <div class="overflow-x-auto">
+      <div class="overflow-x-auto mb-5">
         <div class="mb-3 flex items-center justify-end">
           <HoppButtonSecondary
             outline

packages/hoppscotch-sh-admin/src/pages/users/invited.vue

@@ -45,7 +45,7 @@
           <template #action="{ item }">
             <div v-if="item" class="my-1 mr-2">
               <HoppButtonSecondary
-                v-if="xlAndLarger"
+                v-if="lgAndLarger"
                 :icon="IconTrash"
                 :label="t('users.revoke_invitation')"
                 class="text-secondaryDark bg-red-500 hover:bg-red-600"
@@ -119,7 +119,7 @@ const toast = useToast();
 const router = useRouter();
 
 const breakpoints = useBreakpoints(breakpointsTailwind);
-const xlAndLarger = breakpoints.greater('xl');
+const lgAndLarger = breakpoints.greater('lg');
 
 // Get Proper Date Formats
 const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
@@ -130,9 +130,8 @@ const { fetching, error, data } = useQuery({ query: InvitedUsersDocument });
 
 // Table Headings
 const headings = [
-  { key: 'adminUid', label: t('users.admin_id') },
-  { key: 'adminEmail', label: t('users.admin_email') },
   { key: 'inviteeEmail', label: t('users.invitee_email') },
+  { key: 'adminEmail', label: t('users.invited_by') },
   { key: 'invitedOn', label: t('users.invited_on') },
   { key: 'action', label: 'Action' },
 ];