fix: sh-admin dashboard bugs and UI polish (#56)

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

@@ -13,18 +13,15 @@ declare module '@vue/runtime-core' {
     AppModal: typeof import('./components/app/Modal.vue')['default']
     AppSidebar: typeof import('./components/app/Sidebar.vue')['default']
     AppToast: typeof import('./components/app/Toast.vue')['default']
+    DashboardMetricsCard: typeof import('./components/dashboard/MetricsCard.vue')['default']
     HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
     HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
     HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
     HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
+    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default']
-    IconLucideMenu: typeof import('~icons/lucide/menu')['default']
-    IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default']
-    IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default']
     TeamsDetails: typeof import('./components/teams/Details.vue')['default']
@@ -32,6 +29,8 @@ declare module '@vue/runtime-core' {
     TeamsMembers: typeof import('./components/teams/Members.vue')['default']
     TeamsPendingInvites: typeof import('./components/teams/PendingInvites.vue')['default']
     Tippy: typeof import('vue-tippy')['Tippy']
+    UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default']
+    UsersTable: typeof import('./components/users/Table.vue')['default']
   }
 
 }

packages/hoppscotch-sh-admin/src/components/app/Header.vue

@@ -1,31 +1,32 @@
 <template>
   <header
-    class="flex items-center justify-between border-b border-gray-600 px-6 py-4 bg-neutral-900 shadow-lg"
+    class="flex items-center justify-between border-b border-divider px-6 py-4 bg-primary shadow-lg"
   >
     <div class="flex items-center">
-      <button
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        title="Open navigation"
+        :icon="IconMenu"
+        class="transform !md:hidden mr-2"
         @click="isOpen = true"
-        class="text-gray-200 focus:outline-none md:hidden mr-2"
-      >
-        <icon-lucide-menu class="text-gray-300 w-6" />
-      </button>
-
-      <div class="mr-3 mt-2 xs:hidden md:block">
-        <button @click="expandSidebar">
-          <icon-lucide-sidebar-open
-            v-if="isExpanded"
-            class="text-gray-300 w-6"
-          />
-          <icon-lucide-sidebar-close v-else class="text-gray-300 w-6" />
-        </button>
-      </div>
+      />
+      <HoppButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="isExpanded ? 'Collapse sidebar' : 'Expand sidebar'"
+        :icon="isExpanded ? IconSidebarClose : IconSidebarOpen"
+        class="transform"
+        @click="expandSidebar"
+      />
     </div>
 
     <div class="flex items-center">
       <div v-if="currentUser" class="relative">
-        <button
-          @click="dropdownOpen = !dropdownOpen"
-          class="relative z-10 block w-8 h-8 overflow-hidden rounded-full shadow focus:outline-none"
+        <tippy
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+          :on-shown="() => tippyActions!.focus()"
         >
           <ProfilePicture
             v-if="currentUser.photoURL"
@@ -42,29 +43,19 @@
             :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
             :initial="currentUser.displayName ?? currentUser.email"
           />
-        </button>
-
-        <div
-          v-show="dropdownOpen"
-          @click="dropdownOpen = false"
-          class="fixed inset-0 z-10 w-full h-full"
-        ></div>
-
-        <transition
-          enter-active-class="transition duration-150 ease-out transform"
-          enter-from-class="scale-95 opacity-0"
-          enter-to-class="scale-100 opacity-100"
-          leave-active-class="transition duration-150 ease-in transform"
-          leave-from-class="scale-100 opacity-100"
-          leave-to-class="scale-95 opacity-0"
-        >
-          <div
-            v-show="dropdownOpen"
-            class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-800 rounded-md shadow-xl"
-          >
-            <AppLogout ref="logout" />
-          </div>
-        </transition>
+          <template #content="{ hide }">
+            <div
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
+              tabindex="0"
+              @keyup.escape="hide()"
+            >
+              <div>
+                <AppLogout ref="logout" @click="hide()" />
+              </div>
+            </div>
+          </template>
+        </tippy>
       </div>
     </div>
   </header>
@@ -72,9 +63,13 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
+import { TippyComponent } from 'vue-tippy';
 import { useReadonlyStream } from '~/composables/stream';
 import { useSidebar } from '~/composables/useSidebar';
 import { auth } from '~/helpers/auth';
+import IconMenu from '~icons/lucide/menu';
+import IconSidebarOpen from '~icons/lucide/sidebar-open';
+import IconSidebarClose from '~icons/lucide/sidebar-close';
 
 const { isOpen, isExpanded } = useSidebar();
 
@@ -87,5 +82,6 @@ const expandSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
 
-const dropdownOpen = ref(false);
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null);
 </script>

packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue

@@ -4,7 +4,7 @@
     <div
       :class="isOpen ? 'block' : 'hidden'"
       @click="isOpen = false"
-      class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"
+      class="fixed inset-0 z-20 transition-opacity bg-primary opacity-50 lg:hidden"
     ></div>
     <!-- End Backdrop -->
 
@@ -12,60 +12,45 @@
       :class="isOpen ? '' : '!-translate-x-full ease-in'"
       class="sidebar-container transform !md:translate-x-0 ease-out"
     >
-      <div :class="isExpanded ? 'w-64' : 'w-full'">
-        <div class="flex items-center justify-start mt-6 ml-6">
+      <div :class="isExpanded ? 'w-xs' : 'w-full'">
+        <div class="flex items-center justify-start px-4 my-4">
           <div class="flex items-center">
             <HoppSmartLink class="flex items-center space-x-4" to="/dashboard">
               <img src="/cover.jpg" alt="hoppscotch-logo" class="h-7" />
 
-              <span
-                v-if="isExpanded"
-                class="mx-2 text-xl font-semibold text-gray-200"
-                >Hoppscotch</span
+              <span v-if="isExpanded" class="font-semibold text-accentContrast"
+                >HOPPSCOTCH</span
               >
             </HoppSmartLink>
           </div>
         </div>
 
-        <nav class="mt-10">
-          <router-link
-            class="flex items-center px-6 py-4 duration-200 border-l-4"
-            :class="[route.name === '/dashboard' ? activeClass : inactiveClass]"
-            to="/dashboard"
+        <nav class="my-5">
+          <HoppSmartLink
+            v-for="(navigation, index) in primaryNavigations"
+            :key="`navigation-${index}`"
+            v-tippy="{
+              theme: 'tooltip',
+              placement: 'right',
+              content: !isExpanded ? navigation.label : null,
+            }"
+            :to="navigation.to"
+            tabindex="0"
+            :exact="navigation.exact"
+            class="nav-link"
+            :class="
+              !isExpanded
+                ? 'flex items-center justify-center'
+                : 'flex items-center'
+            "
           >
-            <icon-lucide-layout-dashboard
-              class="text-xl"
-              :class="route.name === '/dashboard' ? 'white' : 'gray'"
-            />
-
-            <span v-if="isExpanded" class="mx-4 font-semibold">Dashboard</span>
-          </router-link>
-
-          <router-link
-            class="flex items-center px-6 py-4 duration-200 border-l-4 rounded-sm"
-            :class="[route.name === 'User' ? activeClass : inactiveClass]"
-            to="/users"
-          >
-            <icon-lucide-user
-              class="text-xl"
-              :class="route.path === '/users' ? 'white' : 'gray'"
-            />
-
-            <span v-if="isExpanded" class="mx-4 font-semibold">Users</span>
-          </router-link>
-
-          <router-link
-            class="flex items-center px-6 py-4 duration-200 border-l-4 rounded-sm"
-            :class="[route.name === '/teams' ? activeClass : inactiveClass]"
-            to="/teams"
-          >
-            <icon-lucide-users
-              class="text-xl"
-              :class="route.name === '/teams' ? 'white' : 'gray'"
-            />
-
-            <span v-if="isExpanded" class="mx-4 font-semibold">Teams</span>
-          </router-link>
+            <div v-if="navigation.icon">
+              <component :is="navigation.icon" class="svg-icons" />
+            </div>
+            <span v-if="isExpanded" class="nav-title">
+              {{ navigation.label }}
+            </span>
+          </HoppSmartLink>
         </nav>
       </div>
     </div>
@@ -75,23 +60,88 @@
 <script setup lang="ts">
 import { HoppSmartLink } from '@hoppscotch/ui';
 import { useSidebar } from '../../composables/useSidebar';
-import { useRoute } from 'vue-router';
+import IconDashboard from '~icons/lucide/layout-dashboard';
+import IconUser from '~icons/lucide/user';
+import IconUsers from '~icons/lucide/users';
 
 const { isOpen, isExpanded } = useSidebar();
 
-const route = useRoute();
-
-const activeClass =
-  'bg-gray-600 bg-opacity-25 text-gray-100 border-gray-100 border-emerald-600';
-const inactiveClass =
-  'border-gray-900 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100';
+const primaryNavigations = [
+  {
+    label: 'Dashboard',
+    icon: IconDashboard,
+    to: '/dashboard',
+    exact: true,
+  },
+  {
+    label: 'Users',
+    icon: IconUser,
+    to: '/users',
+    exact: false,
+  },
+  {
+    label: 'Teams',
+    icon: IconUsers,
+    to: '/teams',
+    exact: false,
+  },
+];
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .sidebar-container {
   @apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30;
   @apply transition duration-300;
+  @apply flex overflow-y-auto bg-primary border-r border-divider;
+}
 
-  @apply flex overflow-y-auto bg-neutral-900 border-r border-gray-600;
+.nav-link {
+  @apply relative;
+  @apply p-4;
+  @apply flex flex-1;
+  @apply items-center;
+  @apply space-x-4;
+  @apply hover: (bg-primaryDark text-secondaryDark);
+  @apply focus-visible: text-secondaryDark;
+  @apply after:absolute;
+  @apply after:inset-x-0;
+  @apply after:md: inset-x-auto;
+  @apply after:md: inset-y-0;
+  @apply after:bottom-0;
+  @apply after:md: bottom-auto;
+  @apply after:md: left-0;
+  @apply after:z-2;
+  @apply after:h-0.5;
+  @apply after:md: h-full;
+  @apply after:w-full;
+  @apply after:md: w-0.5;
+  @apply after:content-DEFAULT;
+  @apply focus: after: bg-divider;
+
+  .svg-icons {
+    @apply opacity-75;
+  }
+
+  &.router-link-active {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover: text-secondaryDark;
+    @apply after:bg-accent;
+
+    .svg-icons {
+      @apply opacity-100;
+    }
+  }
+
+  &.exact-active-link {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover: text-secondaryDark;
+    @apply after:bg-accent;
+
+    .svg-icons {
+      @apply opacity-100;
+    }
+  }
 }
 </style>

packages/hoppscotch-sh-admin/src/components/dashboard/MetricsCard.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="flex items-center sm:px-15 px-8 justify-center !sm:justify-start py-6 bg-primaryLight rounded-md shadow-sm h-50 space-x-6"
+  >
+    <component :is="icon" class="text-5xl" :class="color" />
+
+    <div class="space-y-2">
+      <h4 class="text-4xl font-semibold text-accentContrast">
+        {{ count }}
+      </h4>
+      <div class="text-gray-400 font-bold">
+        {{ label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+defineProps<{
+  count: number;
+  label: string;
+  icon: Component;
+  color: string;
+}>();
+</script>

packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue

@@ -0,0 +1,71 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    title="Invite User"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col">
+        <input
+          id="inviteUserEmail"
+          v-model="email"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          autocomplete="off"
+          @keyup.enter="sendInvite"
+        />
+        <label for="inviteUserEmail">Email Address</label>
+      </div>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          label="Send Invite"
+          :loading="loadingState"
+          @click="sendInvite"
+        />
+        <HoppButtonSecondary label="Cancel" outline filled @click="hideModal" />
+      </span>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useToast } from '~/composables/toast';
+
+const toast = useToast();
+
+withDefaults(
+  defineProps<{
+    show: boolean;
+    loadingState: boolean;
+  }>(),
+  {
+    show: false,
+    loadingState: false,
+  }
+);
+
+const emit = defineEmits<{
+  (event: 'hide-modal'): void;
+  (event: 'send-invite', email: string): void;
+}>();
+
+const email = ref('');
+
+const sendInvite = () => {
+  if (email.value.trim() === '') {
+    toast.error('Please enter a valid email address');
+    return;
+  }
+  emit('send-invite', email.value);
+};
+
+const hideModal = () => {
+  emit('hide-modal');
+};
+</script>

packages/hoppscotch-sh-admin/src/components/users/Table.vue

@@ -0,0 +1,170 @@
+<template>
+  <table class="w-full">
+    <thead>
+      <tr class="text-secondary border-b border-dividerDark text-sm text-left">
+        <th class="px-3 pb-3">User ID</th>
+        <th class="px-3 pb-3">Name</th>
+        <th class="px-3 pb-3">Email</th>
+        <th class="px-3 pb-3">Date</th>
+        <th class="px-3 pb-3"></th>
+      </tr>
+    </thead>
+
+    <tbody class="divide-y divide-divider">
+      <tr
+        v-for="user in usersList"
+        :key="user.uid"
+        class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+      >
+        <td
+          @click="$emit('goToUserDetails', user.uid)"
+          class="py-2 px-3 max-w-30"
+        >
+          <div class="flex">
+            <span class="truncate">
+              {{ user.uid }}
+            </span>
+          </div>
+        </td>
+
+        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+          <div v-if="user.displayName" class="flex items-center space-x-3">
+            <span>
+              {{ user.displayName }}
+            </span>
+            <span
+              v-if="user.isAdmin"
+              class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+            >
+              Admin
+            </span>
+          </div>
+          <div v-else class="flex items-center space-x-3">
+            <span> (Unnamed user) </span>
+            <span
+              v-if="user.isAdmin"
+              class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+            >
+              Admin
+            </span>
+          </div>
+        </td>
+
+        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+          <span>
+            {{ user.email }}
+          </span>
+        </td>
+
+        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+          <div class="flex items-center">
+            <div class="flex flex-col">
+              {{ getCreatedDate(user.createdOn) }}
+              <div class="text-gray-400 text-tiny">
+                {{ getCreatedTime(user.createdOn) }}
+              </div>
+            </div>
+          </div>
+        </td>
+
+        <td>
+          <div class="relative">
+            <span>
+              <tippy
+                interactive
+                trigger="click"
+                theme="popover"
+                :on-shown="() => tippyActions!.focus()"
+              >
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :icon="IconMoreHorizontal"
+                />
+                <template #content="{ hide }">
+                  <div
+                    ref="tippyActions"
+                    class="flex flex-col focus:outline-none"
+                    tabindex="0"
+                    @keyup.escape="hide()"
+                  >
+                    <HoppSmartItem
+                      v-if="!user.isAdmin"
+                      :icon="IconUserCheck"
+                      :label="'Make Admin'"
+                      class="!hover:bg-emerald-600"
+                      @click="
+                        () => {
+                          $emit('makeUserAdmin', user.uid);
+                          hide();
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      v-else
+                      :icon="IconUserMinus"
+                      :label="'Remove Admin Status'"
+                      class="!hover:bg-emerald-600"
+                      @click="
+                        () => {
+                          $emit('makeAdminToUser', user.uid);
+                          hide();
+                        }
+                      "
+                    />
+                    <HoppSmartItem
+                      v-if="!user.isAdmin"
+                      :icon="IconTrash"
+                      :label="'Delete User'"
+                      class="!hover:bg-red-600"
+                      @click="
+                        () => {
+                          $emit('deleteUser', user.uid);
+                          hide();
+                        }
+                      "
+                    />
+                  </div>
+                </template>
+              </tippy>
+            </span>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { format } from 'date-fns';
+import { ref } from 'vue';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
+import IconUserCheck from '~icons/lucide/user-check';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
+import { UsersListQuery } from '~/helpers/backend/graphql';
+import { TippyComponent } from 'vue-tippy';
+
+defineProps<{
+  usersList: UsersListQuery['admin']['allUsers'];
+}>();
+
+defineEmits<{
+  (event: 'goToUserDetails', uid: string): void;
+  (event: 'makeUserAdmin', uid: string): void;
+  (event: 'makeAdminToUser', uid: string): void;
+  (event: 'deleteUser', uid: string): void;
+}>();
+
+// Get Proper Date Formats
+const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
+const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
+
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null);
+</script>
+
+<style scoped>
+.tippy-box[data-theme~='popover'] .tippy-content {
+  padding: 0;
+}
+</style>

packages/hoppscotch-sh-admin/src/composables/usePagedQuery.ts

@@ -17,7 +17,7 @@ export function usePagedQuery<
   const { client } = useClientHandle();
   const fetching = ref(true);
   const error = ref(false);
-  const list = ref<any[]>([]);
+  const list = ref<ListItem[]>([]);
   const currentPage = ref(0);
   const hasNextPage = ref(true);
 

packages/hoppscotch-sh-admin/src/layouts/default.vue

@@ -6,7 +6,7 @@
       <AppHeader />
 
       <main class="flex-1 overflow-x-hidden overflow-y-auto bg-primary">
-        <div class="container mx-auto px-6 py-8">
+        <div class="px-8 py-6">
           <router-view />
         </div>
       </main>

packages/hoppscotch-sh-admin/src/pages/_.vue

@@ -0,0 +1,56 @@
+<!-- The Catch-All Page -->
+<!-- Reserved for Critical Errors and 404 ONLY -->
+<template>
+  <div
+    class="flex flex-col items-center justify-center"
+    :class="{ 'min-h-screen': statusCode !== 404 }"
+  >
+    <img
+      :src="`/images/youre_lost.svg`"
+      loading="lazy"
+      class="inline-flex flex-col object-contain object-center mb-2 h-46 w-46"
+      :alt="message"
+    />
+    <h1 class="mb-2 text-4xl heading">
+      {{ statusCode }}
+    </h1>
+    <p class="mb-4 text-secondaryLight">{{ message }}</p>
+    <p class="mt-4 space-x-2">
+      <HoppButtonSecondary to="/" :icon="IconHome" filled label="Home" />
+      <HoppButtonSecondary
+        :icon="IconRefreshCW"
+        label="Reload"
+        filled
+        @click="reloadApplication"
+      />
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconRefreshCW from '~icons/lucide/refresh-cw';
+import IconHome from '~icons/lucide/home';
+import { PropType, computed } from 'vue';
+
+export type ErrorPageData = {
+  message: string;
+  statusCode: number;
+};
+
+const props = defineProps({
+  error: {
+    type: Object as PropType<ErrorPageData | null>,
+    default: null,
+  },
+});
+
+const statusCode = computed(() => props.error?.statusCode ?? 404);
+
+const message = computed(
+  () => props.error?.message ?? 'The page you are looking for does not exist.'
+);
+
+const reloadApplication = () => {
+  window.location.reload();
+};
+</script>

packages/hoppscotch-sh-admin/src/pages/dashboard.vue

@@ -1,77 +1,40 @@
 <template>
-  <div class="sm:px-6 p-4">
-    <h3 class="text-3xl font-bold text-gray-200 mb-6">Dashboard</h3>
-
+  <div class="flex flex-col">
     <div v-if="fetching" class="flex justify-center">
       <HoppSmartSpinner />
     </div>
-    <div v-else-if="error">
+
+    <div v-else-if="error || !metrics">
       <p class="text-xl">No Metrics Found..</p>
     </div>
 
-    <div v-else class="mt-4">
-      <div class="grid lg:grid-cols-2 gap-6">
-        <div class="w-full">
-          <div
-            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
-          >
-            <icon-lucide-user-cog class="text-5xl text-emerald-500" />
-
-            <div class="mx-10">
-              <h4 class="text-4xl font-semibold text-gray-200">
-                {{ metrics?.usersCount }}
-              </h4>
-              <div class="text-gray-400 font-bold text-xl">Total Users</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full">
-          <div
-            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
-          >
-            <icon-lucide-users class="text-5xl text-pink-400" />
-
-            <div class="mx-10">
-              <h4 class="text-4xl font-semibold text-gray-200">
-                {{ metrics?.teamsCount }}
-              </h4>
-              <div class="text-gray-400 font-bold text-xl">Total Teams</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full">
-          <div
-            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
-          >
-            <icon-lucide-line-chart class="text-5xl text-cyan-400" />
-
-            <div class="mx-10">
-              <h4 class="text-4xl font-semibold text-gray-200">
-                {{ metrics?.teamRequestsCount }}
-              </h4>
-              <div class="text-gray-400 font-bold text-xl">Total Requests</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="w-full">
-          <div
-            class="flex items-center px-15 py-6 bg-primaryLight rounded-md shadow-sm h-50"
-          >
-            <icon-lucide-folder-tree class="text-5xl text-orange-400" />
-
-            <div class="mx-10">
-              <h4 class="text-4xl font-semibold text-gray-200">
-                {{ metrics?.teamCollectionsCount }}
-              </h4>
-              <div class="text-gray-400 font-bold text-xl">
-                Total Collections
-              </div>
-            </div>
-          </div>
-        </div>
+    <div v-else>
+      <h1 class="text-lg font-bold text-secondaryDark">Dashboard</h1>
+      <div class="py-10 grid lg:grid-cols-2 gap-6">
+        <DashboardMetricsCard
+          :count="metrics.usersCount"
+          label="Total Users"
+          :icon="UserIcon"
+          color="text-green-400"
+        />
+        <DashboardMetricsCard
+          :count="metrics.teamsCount"
+          label="Total Teams"
+          :icon="UsersIcon"
+          color="text-pink-400"
+        />
+        <DashboardMetricsCard
+          :count="metrics.teamRequestsCount"
+          label="Total Requests"
+          :icon="LineChartIcon"
+          color="text-cyan-400"
+        />
+        <DashboardMetricsCard
+          :count="metrics.teamCollectionsCount"
+          label="Total Collections"
+          :icon="FolderTreeIcon"
+          color="text-orange-400"
+        />
       </div>
     </div>
   </div>
@@ -81,6 +44,10 @@
 import { computed } from 'vue';
 import { useQuery } from '@urql/vue';
 import { MetricsDocument } from '../helpers/backend/graphql';
+import UserIcon from '~icons/lucide/user';
+import UsersIcon from '~icons/lucide/users';
+import LineChartIcon from '~icons/lucide/line-chart';
+import FolderTreeIcon from '~icons/lucide/folder-tree';
 
 // Get Metrics Data
 const { fetching, error, data } = useQuery({ query: MetricsDocument });

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

@@ -1,120 +1,113 @@
 <template>
   <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
-  <div v-else>
-    <div class="ml-3">
+  <div v-else class="flex flex-col space-y-4">
+    <div>
       <button
-        class="p-2 mb-2 rounded-3xl bg-zinc-800"
+        class="p-2 mb-2 rounded-3xl bg-divider"
         @click="router.push('/users')"
       >
         <icon-lucide-arrow-left class="text-xl" />
       </button>
     </div>
-    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">User Details</h3>
 
-    <div>
-      <div>
-        <div class="px-6 rounded-md">
-          <div class="grid gap-6 mt-4">
-            <div v-if="user.photoURL" class="relative h-20 w-20">
-              <img class="object-cover rounded-3xl mb-3" :src="user.photoURL" />
-              <span
-                v-if="user.isAdmin"
-                class="absolute bottom-0 ml-17 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
-              >
-                Admin
-              </span>
-            </div>
+    <div class="rounded-md">
+      <div class="grid gap-6 mt-4">
+        <div v-if="user.photoURL" class="relative h-20 w-20">
+          <img class="object-cover rounded-3xl mb-3" :src="user.photoURL" />
+          <span
+            v-if="user.isAdmin"
+            class="absolute left-17 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+          >
+            Admin
+          </span>
+        </div>
 
-            <div
-              v-else
-              class="bg-primaryDark w-17 p-3 rounded-2xl mb-3 relative"
-            >
-              <icon-lucide-user class="text-4xl" />
-              <span
-                v-if="user.isAdmin"
-                class="absolute bottom-0 ml-11 rounded-xl p-1 bg-emerald-800 border-1 border-emerald-400 text-xs text-emerald-400 px-2"
-              >
-                Admin
-              </span>
-            </div>
+        <div v-else class="bg-primaryDark w-17 p-3 rounded-2xl mb-3 relative">
+          <icon-lucide-user class="text-4xl" />
+          <span
+            v-if="user.isAdmin"
+            class="absolute left-15 bottom-0 text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+          >
+            Admin
+          </span>
+        </div>
 
-            <div v-if="user.uid">
-              <label class="text-gray-200" for="username">UID</label>
-              <div
-                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              >
-                {{ user.uid }}
-              </div>
-            </div>
-            <div>
-              <label class="text-gray-200" for="username">Name</label>
-              <div
-                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              >
-                <span v-if="user.displayName">
-                  {{ user.displayName }}
-                </span>
-                <span v-else> (Unnamed user) </span>
-              </div>
-            </div>
-            <div v-if="user.email">
-              <label class="text-gray-200" for="username">Email</label>
-              <div
-                class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              >
-                {{ user.email }}
-              </div>
-            </div>
-            <div v-if="user.createdOn">
-              <label class="text-gray-200" for="username">Created On</label>
-              <div
-                class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-              >
-                {{ getCreatedDateAndTime(user.createdOn) }}
-              </div>
-            </div>
-          </div>
-
-          <div class="flex justify-start mt-8">
-            <span v-if="!user.isAdmin">
-              <HoppButtonPrimary
-                class="mr-4"
-                filled
-                outline
-                label="Make Admin"
-                @click="makeUserAdmin(user.uid)"
-              />
-            </span>
-            <span v-else>
-              <HoppButtonPrimary
-                class="mr-4"
-                filled
-                outline
-                label="Remove Admin Privilege"
-                @click="makeAdminToUser(user.uid)"
-              />
-            </span>
-            <HoppButtonSecondary
-              v-if="!user.isAdmin"
-              class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
-              filled
-              outline
-              label="Delete"
-              @click="deleteUser(user.uid)"
-            />
-
-            <HoppButtonSecondary
-              v-if="user.isAdmin"
-              class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
-              filled
-              outline
-              label="Delete"
-              @click="
-                toast.error('Remove admin privilege to delete the user!!')
-              "
-            />
+        <div v-if="user.uid">
+          <label class="text-secondaryDark" for="username">UID</label>
+          <div
+            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+          >
+            {{ user.uid }}
           </div>
         </div>
+        <div>
+          <label class="text-secondaryDark" for="username">Name</label>
+          <div
+            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+          >
+            <span v-if="user.displayName">
+              {{ user.displayName }}
+            </span>
+            <span v-else> (Unnamed user) </span>
+          </div>
+        </div>
+        <div v-if="user.email">
+          <label class="text-secondaryDark" for="username">Email</label>
+          <div
+            class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+          >
+            {{ user.email }}
+          </div>
+        </div>
+        <div v-if="user.createdOn">
+          <label class="text-secondaryDark" for="username">Created On</label>
+          <div
+            class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
+          >
+            {{ getCreatedDateAndTime(user.createdOn) }}
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-start mt-8">
+        <span v-if="!user.isAdmin">
+          <HoppButtonPrimary
+            class="mr-4"
+            filled
+            outline
+            label="Make Admin"
+            @click="makeUserAdmin(user.uid)"
+          />
+        </span>
+        <span v-else>
+          <HoppButtonPrimary
+            class="mr-4"
+            filled
+            outline
+            :icon="IconUserMinus"
+            label="Remove Admin Privilege"
+            @click="makeAdminToUser(user.uid)"
+          />
+        </span>
+        <HoppButtonSecondary
+          v-if="!user.isAdmin"
+          class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+          filled
+          outline
+          label="Delete"
+          :icon="IconTrash"
+          @click="deleteUser(user.uid)"
+        />
+
+        <HoppButtonSecondary
+          v-if="user.isAdmin"
+          class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
+          filled
+          outline
+          :icon="IconTrash"
+          label="Delete"
+          @click="toast.error('Remove admin privilege to delete the user!!')"
+        />
       </div>
     </div>
     <HoppSmartConfirmModal
@@ -151,6 +144,8 @@ import { useClientHandle } from '@urql/vue';
 import { format } from 'date-fns';
 import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
 
 const toast = useToast();
 

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

@@ -1,215 +1,62 @@
 <template>
-  <div>
-    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200">Users</h3>
-
+  <div class="flex flex-col">
     <!-- Table View for All Users -->
     <div class="flex flex-col">
-      <div class="pt-2 my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
-        <div class="inline-block min-w-full overflow-hidden align-middle">
-          <div class="sm:px-7 px-4 pt-4 pb-1">
-            <div class="flex w-full items-center mb-7">
-              <HoppButtonPrimary
-                class="mr-4"
-                label="Invite a User"
-                @click="showInviteUserModal = true"
-              />
+      <h1 class="text-lg font-bold text-secondaryDark">Users</h1>
+      <div class="flex items-center space-x-4 py-10">
+        <HoppButtonPrimary
+          label="Invite a user"
+          @click="showInviteUserModal = true"
+          :icon="IconAddUser"
+        />
 
-              <HoppButtonSecondary
-                filled
-                outline
-                label="Invited Users"
-                :to="'/users/invited'"
-              />
-            </div>
-            <div>
-              <div
-                v-if="fetching && !error && !(usersList.length >= 1)"
-                class="flex justify-center"
-              >
-                <HoppSmartSpinner />
-              </div>
-              <div v-else-if="error">Unable to Load Users List..</div>
+        <div class="flex">
+          <HoppButtonSecondary
+            outline
+            filled
+            label="Invited users"
+            :to="'/users/invited'"
+          />
+        </div>
+      </div>
+      <div class="overflow-x-auto">
+        <div
+          v-if="fetching && !error && usersList.length === 0"
+          class="flex justify-center"
+        >
+          <HoppSmartSpinner />
+        </div>
+        <div v-else-if="error">Unable to Load Users List..</div>
 
-              <table
-                v-if="usersList.length >= 1"
-                class="w-full text-left min-h-32"
-              >
-                <thead>
-                  <tr
-                    class="text-gray-200 border-b border-gray-600 text-sm font-bold"
-                  >
-                    <th class="px-3 pt-0 pb-3">User ID</th>
-                    <th class="px-3 pt-0 pb-3">Name</th>
-                    <th class="px-3 pt-0 pb-3">Email</th>
-                    <th class="px-3 pt-0 pb-3">Date</th>
-                    <th class="px-3 pt-0 pb-3"></th>
-                  </tr>
-                </thead>
+        <UsersTable
+          v-else-if="usersList.length >= 1"
+          :usersList="usersList"
+          :fetching="fetching"
+          :error="error"
+          @goToUserDetails="goToUserDetails"
+          @makeUserAdmin="makeUserAdmin"
+          @makeAdminToUser="makeAdminToUser"
+          @deleteUser="deleteUser"
+        />
 
-                <tbody class="text-gray-300">
-                  <tr
-                    v-for="user in usersList"
-                    :key="user.uid"
-                    class="border-b border-gray-600 hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
-                  >
-                    <td
-                      @click="goToUserDetails(user)"
-                      class="sm:p-3 py-2 px-1 max-w-30"
-                    >
-                      <div class="flex">
-                        <span class="ml-3 truncate">
-                          {{ user.uid }}
-                        </span>
-                      </div>
-                    </td>
+        <div v-else class="flex justify-center">No Users Found</div>
 
-                    <td
-                      @click="goToUserDetails(user)"
-                      class="sm:p-3 py-2 px-1 0"
-                    >
-                      <div
-                        v-if="user.displayName"
-                        class="flex items-center ml-2"
-                      >
-                        {{ user.displayName }}
-                        <span
-                          v-if="user.isAdmin"
-                          class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
-                        >
-                          Admin
-                        </span>
-                      </div>
-                      <div v-else class="flex items-center">
-                        <span class="ml-2"> (Unnamed user) </span>
-                        <span
-                          v-if="user.isAdmin"
-                          class="rounded-xl p-1 bg-emerald-300 bg-opacity-15 border-1 border-emerald-400 text-xs text-emerald-400 px-2 ml-2"
-                        >
-                          Admin
-                        </span>
-                      </div>
-                    </td>
-
-                    <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
-                      <span class="ml-2">
-                        {{ user.email }}
-                      </span>
-                    </td>
-
-                    <td @click="goToUserDetails(user)" class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center ml-2">
-                        <div class="flex flex-col">
-                          {{ getCreatedDate(user.createdOn) }}
-                          <div class="text-gray-400 text-xs">
-                            {{ getCreatedTime(user.createdOn) }}
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-
-                    <td>
-                      <div class="relative">
-                        <button
-                          @click.stop="toggleDropdown(user.uid)"
-                          class="w-8 h-8 dropdown inline-flex items-center justify-end text-gray-400"
-                        >
-                          <icon-lucide-more-horizontal />
-                        </button>
-
-                        <transition
-                          enter-active-class="transition duration-150 ease-out transform"
-                          enter-from-class="scale-95 opacity-0"
-                          enter-to-class="scale-100 opacity-100"
-                          leave-active-class="transition duration-150 ease-in transform"
-                          leave-from-class="scale-100 opacity-100"
-                          leave-to-class="scale-95 opacity-0"
-                        >
-                          <div
-                            v-show="activeUserId && activeUserId == user.uid"
-                            class="absolute right-0 z-20 bg-zinc-800 rounded-md shadow-xl"
-                          >
-                            <HoppSmartItem
-                              v-if="!user.isAdmin"
-                              :icon="IconUserCheck"
-                              :label="'Make Admin'"
-                              class="!hover:bg-emerald-600 w-full"
-                              @click="makeUserAdmin(user.uid)"
-                            />
-                            <HoppSmartItem
-                              v-else
-                              :icon="IconUserMinus"
-                              :label="'Remove Admin Status'"
-                              class="!hover:bg-emerald-600 w-full"
-                              @click="makeAdminToUser(user.uid)"
-                            />
-                            <HoppSmartItem
-                              v-if="!user.isAdmin"
-                              :icon="IconTrash"
-                              :label="'Delete User'"
-                              class="!hover:bg-red-600 w-full"
-                              @click="deleteUser(user.uid)"
-                            />
-                          </div>
-                        </transition>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-
-              <div
-                v-if="hasNextPage"
-                class="flex justify-center mt-5 p-2 font-semibold rounded-3xl bg-zinc-800 hover:bg-zinc-700 mx-auto w-32 text-light-500"
-                @click="fetchNextUsers"
-              >
-                <span>Show more </span>
-                <icon-lucide-chevron-down class="ml-2 text-lg" />
-              </div>
-              <div v-else class="mb-12 p-2"></div>
-            </div>
-          </div>
+        <div
+          v-if="hasNextPage && usersList.length >= usersPerPage"
+          class="flex justify-center my-5 px-3 py-2 cursor-pointer font-semibold rounded-3xl bg-dividerDark hover:bg-divider transition mx-auto w-38 text-secondaryDark"
+          @click="fetchNextUsers"
+        >
+          <span>Show more </span>
+          <icon-lucide-chevron-down class="ml-2 text-lg" />
         </div>
       </div>
     </div>
 
-    <!-- Send Invite Modal -->
-    <HoppSmartModal
-      v-if="showInviteUserModal"
-      dialog
-      title="Invite User"
-      @close="showInviteUserModal = false"
-    >
-      <template #body>
-        <div>
-          <div>
-            <div class="px-6 rounded-md">
-              <div>
-                <div class="my-4">
-                  <div>
-                    <label class="text-gray-200" for="emailAddress">
-                      Email Address
-                    </label>
-                    <input
-                      class="w-full p-3 mt-3 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
-                      type="email"
-                      v-model="email"
-                      placeholder="Enter Email Address"
-                    />
-                  </div>
-                </div>
-                <div class="flex justify-end my-2 pt-3">
-                  <HoppButtonPrimary
-                    label="Send Invite"
-                    @click="sendInvite()"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-    </HoppSmartModal>
-
+    <UsersInviteModal
+      :show="showInviteUserModal"
+      @hide-modal="showInviteUserModal = false"
+      @send-invite="sendInvite"
+    />
     <HoppSmartConfirmModal
       :show="confirmDeletion"
       :title="`Confirm user deletion?`"
@@ -232,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
   InviteNewUserDocument,
@@ -242,19 +89,13 @@ import {
   UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '../../composables/usePagedQuery';
-import { format } from 'date-fns';
 import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
-import IconTrash from '~icons/lucide/trash';
-import IconUserMinus from '~icons/lucide/user-minus';
-import IconUserCheck from '~icons/lucide/user-check';
+import { HoppButtonSecondary } from '@hoppscotch/ui';
+import IconAddUser from '~icons/lucide/user-plus';
 
 const toast = useToast();
 
-// Get Proper Date Formats
-const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
-const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
-
 // Get Paginated Results of all the users in the infra
 const usersPerPage = 20;
 const {
@@ -272,17 +113,20 @@ const {
 );
 
 // Send Invitation through Email
-const email = ref('');
 const sendInvitation = useMutation(InviteNewUserDocument);
 const showInviteUserModal = ref(false);
 
-const sendInvite = async () => {
-  const variables = { inviteeEmail: email.value.trim() };
+const sendInvite = async (email: string) => {
+  if (!email.trim()) {
+    toast.error('Please enter a valid email address');
+    return;
+  }
+  const variables = { inviteeEmail: email.trim() };
   await sendInvitation.executeMutation(variables).then((result) => {
     if (result.error) {
-      toast.error('Failed to send invitation!!');
+      toast.error('Failed to send invitation');
     } else {
-      toast.success('Email invitation sent successfully!!');
+      toast.success('Email invitation sent successfully');
       showInviteUserModal.value = false;
     }
   });
@@ -291,32 +135,10 @@ const sendInvite = async () => {
 // Go to Individual User Details Page
 const route = useRoute();
 const router = useRouter();
-const goToUserDetails = (user: any) => {
-  router.push('/users/' + user.uid);
+const goToUserDetails = (uid: string) => {
+  router.push('/users/' + uid);
 };
 
-// Open the side menu dropdown of only the selected user
-const activeUserId = ref<null | String>(null);
-
-function toggleDropdown(uid: String) {
-  if (activeUserId.value && activeUserId.value == uid) {
-    activeUserId.value = null;
-  } else {
-    activeUserId.value = uid;
-  }
-}
-
-// Hide dropdown when user clicks elsewhere
-const close = (e: any) => {
-  if (!e.target.closest('.dropdown')) {
-    activeUserId.value = null;
-  }
-};
-
-onMounted(() => document.addEventListener('click', close));
-onBeforeUnmount(() => document.removeEventListener('click', close));
-
-// Reload Users Page when routed back to the users page
 watch(
   () => route.params.id,
   () => window.location.reload()
@@ -327,11 +149,6 @@ const userDeletion = useMutation(RemoveUserByAdminDocument);
 const confirmDeletion = ref(false);
 const deleteUserUID = ref<string | null>(null);
 
-const deleteUser = (id: string) => {
-  confirmDeletion.value = true;
-  deleteUserUID.value = id;
-};
-
 const deleteUserMutation = async (id: string | null) => {
   if (!id) {
     confirmDeletion.value = false;
@@ -345,7 +162,6 @@ const deleteUserMutation = async (id: string | null) => {
     } else {
       toast.success('User deleted successfully!!');
       usersList.value = usersList.value.filter((user) => user.uid !== id);
-      toggleDropdown(id);
     }
   });
   confirmDeletion.value = false;
@@ -396,6 +212,11 @@ const makeAdminToUser = (id: string) => {
   adminToUserUID.value = id;
 };
 
+const deleteUser = (id: string) => {
+  confirmDeletion.value = true;
+  deleteUserUID.value = id;
+};
+
 const makeAdminToUserMutation = async (id: string | null) => {
   if (!id) {
     confirmAdminToUser.value = false;

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

@@ -1,81 +1,77 @@
 <template>
-  <div>
-    <div class="ml-3">
-      <button
-        class="p-2 mb-2 rounded-3xl bg-zinc-800"
-        @click="router.push('/users')"
-      >
+  <div class="flex flex-col">
+    <div class="flex">
+      <button class="p-2 rounded-3xl bg-divider" @click="router.push('/users')">
         <icon-lucide-arrow-left class="text-xl" />
       </button>
     </div>
-    <h3 class="sm:px-6 p-4 text-3xl font-bold text-gray-200 mb-2">
-      Invited Users
-    </h3>
+
+    <h3 class="text-lg font-bold text-accentContrast py-6">Invited Users</h3>
 
     <div class="flex flex-col">
-      <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
-        <div class="inline-block min-w-full overflow-hidden align-middle">
-          <div class="sm:px-7 p-4">
-            <div>
-              <div v-if="fetching" class="flex justify-center">
-                <HoppSmartSpinner />
-              </div>
-              <div v-else-if="error">
-                <p class="text-xl">No Invited Users Found..</p>
-              </div>
-
-              <table v-else class="w-full text-left">
-                <thead>
-                  <tr
-                    class="text-gray-200 border-b border-gray-600 text-sm font-bold"
-                  >
-                    <th class="px-3 pt-0 pb-3">Admin ID</th>
-                    <th class="px-3 pt-0 pb-3">Admin Email</th>
-                    <th class="px-3 pt-0 pb-3">Invitee Email</th>
-                    <th class="px-3 pt-0 pb-3">Invited On</th>
-                  </tr>
-                </thead>
-                <tbody
-                  v-for="user in invitedUsers"
-                  id="user.id"
-                  class="text-gray-300"
-                >
-                  <tr
-                    class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
-                  >
-                    <td class="sm:p-3 py-2 px-3 max-w-30 ml-2">
-                      <div>
-                        <span class="truncate">
-                          {{ user?.adminUid }}
-                        </span>
-                      </div>
-                    </td>
-                    <td class="sm:p-3 py-2 px-1">
-                      <span class="flex items-center ml-2">
-                        {{ user?.adminEmail }}
-                      </span>
-                    </td>
-                    <td class="sm:p-3 py-2 px-1 ml-4">
-                      <span class="ml-2">
-                        {{ user?.inviteeEmail }}
-                      </span>
-                    </td>
-
-                    <td class="sm:p-3 py-2 px-1">
-                      <div class="flex items-center ml-2">
-                        <div class="flex flex-col">
-                          {{ getCreatedDate(user?.invitedOn) }}
-                          <div class="text-gray-400 text-xs">
-                            {{ getCreatedTime(user?.invitedOn) }}
-                          </div>
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
+      <div class="py-2 overflow-x-auto">
+        <div>
+          <div v-if="fetching" class="flex justify-center">
+            <HoppSmartSpinner />
           </div>
+          <div v-else-if="error || invitedUsers === undefined">
+            <p class="text-xl">No invited users found..</p>
+          </div>
+
+          <table v-else class="w-full text-left">
+            <thead>
+              <tr
+                class="text-secondary border-b border-dividerDark text-sm text-left"
+              >
+                <th class="px-3 pb-3">Admin ID</th>
+                <th class="px-3 pb-3">Admin Email</th>
+                <th class="px-3 pb-3">Invitee Email</th>
+                <th class="px-3 pb-3">Invited On</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-divider">
+              <tr
+                v-if="invitedUsers.length === 0"
+                class="text-secondaryDark py-4"
+              >
+                <div class="py-6 px-3">No invited users found..</div>
+              </tr>
+              <tr
+                v-else
+                v-for="(user, index) in invitedUsers"
+                :key="index"
+                class="text-secondaryDark hover:bg-zinc-800 hover:cursor-pointer rounded-xl"
+              >
+                <td class="py-2 px-3 max-w-30">
+                  <div>
+                    <span class="truncate">
+                      {{ user?.adminUid }}
+                    </span>
+                  </div>
+                </td>
+                <td class="py-2 px-3">
+                  <span class="flex items-center">
+                    {{ user?.adminEmail }}
+                  </span>
+                </td>
+                <td class="py-2 px-3">
+                  <span>
+                    {{ user?.inviteeEmail }}
+                  </span>
+                </td>
+                <td class="py-2 px-3">
+                  <div class="flex items-center">
+                    <div class="flex flex-col">
+                      {{ getCreatedDate(user?.invitedOn) }}
+                      <div class="text-gray-400 text-xs">
+                        {{ getCreatedTime(user?.invitedOn) }}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>