chore: admin-dashboard team page UI polish (#75)

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

@@ -1,139 +1,62 @@
 <template>
-  <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
-  <div v-if="team">
-    <div class="flex">
-      <button
-        class="p-2 mb-2 mr-5 rounded-3xl bg-zinc-800"
-        @click="router.push('/teams')"
-      >
-        <icon-lucide-arrow-left class="text-xl" />
-      </button>
-      <div class="">
-        <h3 class="mx-auto text-3xl font-bold text-gray-200 mt-1">
-          {{ team.name }}
-        </h3>
-      </div>
-    </div>
-    <div v-if="team" class="flex !rounded-none justify-center mb-5 sm:px-6 p-4">
-      <HoppButtonSecondary
-        class="!rounded-none"
-        :class="{ '!bg-primaryDark': showTeamDetails }"
-        filled
-        outline
-        label="Details"
-        @click="switchToTeamDetailsTab"
-      />
-
-      <HoppButtonSecondary
-        class="!rounded-none"
-        :class="{ '!bg-primaryDark': showMembers }"
-        filled
-        outline
-        label="Members"
-        @click="switchToMembersTab"
-      />
-
-      <HoppButtonSecondary
-        class="!rounded-none"
-        :class="{ '!bg-primaryDark': showPendingInvites }"
-        filled
-        outline
-        label="Invites"
-        @click="switchToPendingInvitesTab"
-      />
+  <div class="flex flex-col">
+    <div v-if="fetching" class="flex justify-center">
+      <HoppSmartSpinner />
     </div>
 
-    <div v-if="team && showTeamDetails">
-      <h3 class="sm:px-6 px-4 text-2xl font-bold text-gray-200">
-        Team Details
-      </h3>
-
-      <div class="px-6 rounded-md mt-5">
-        <div class="grid gap-6">
-          <div v-if="team.id">
-            <label class="text-gray-200" for="username">Team ID</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"
-            >
-              {{ team.id }}
-            </div>
-          </div>
-          <div>
-            <label class="text-gray-200" for="username">Team Name</label>
-
-            <div v-if="!showRenameInput" class="flex">
-              <div
-                class="flex-1 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"
-              >
-                {{ teamName }}
-              </div>
-
-              <HoppButtonPrimary
-                class="cursor-pointer mt-2 ml-2"
-                filled
-                :icon="IconEdit"
-                label="Edit"
-                @click="showRenameInput = true"
-              />
-            </div>
-            <div v-else class="flex">
-              <input
-                class="flex-1 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"
-                type="text"
-                v-model="teamName"
-                placeholder="Team Name"
-                autofocus
-                v-focus
-              />
-              <div>
-                <HoppButtonPrimary
-                  class="cursor-pointer mt-2 ml-2 min-h-11"
-                  :icon="IconSave"
-                  filled
-                  label="Rename"
-                  @click="renameTeamName()"
-                />
-              </div>
-            </div>
-          </div>
-          <div v-if="team.teamMembers.length">
-            <label class="text-gray-200" for="username"
-              >Number of Members</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"
-            >
-              {{ team.teamMembers.length }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-start mt-8">
-          <HoppButtonSecondary
-            class="mr-4 !bg-red-600 !text-gray-300 !hover:text-gray-100"
-            filled
-            label="Delete Team"
-            @click="team && deleteTeam(team.id)"
-          />
+    <div v-if="team" class="flex flex-col">
+      <div class="flex items-center space-x-4">
+        <button
+          class="p-2 rounded-3xl bg-divider hover:bg-dividerDark transition flex justify-center items-center"
+          @click="router.push('/teams')"
+        >
+          <icon-lucide-arrow-left class="text-xl" />
+        </button>
+        <div class="flex justify-center items-center space-x-3">
+          <h1 class="text-lg text-accentContrast">
+            {{ team.name }}
+          </h1>
+          <span>/</span>
+          <h2 class="text-lg text-accentContrast">
+            {{ currentTabName }}
+          </h2>
         </div>
       </div>
-    </div>
-  </div>
 
-  <div v-if="team" class="sm:px-6 px-4">
-    <TeamsMembers v-if="showMembers" @updateTeam="updateTeam()" />
-    <TeamsPendingInvites v-if="showPendingInvites" :editingTeamID="team.id" />
-    <HoppSmartConfirmModal
-      :show="confirmDeletion"
-      :title="`Confirm Deletion of ${team.name} team?`"
-      @hide-modal="confirmDeletion = false"
-      @resolve="deleteTeamMutation(deleteTeamUID)"
-    />
+      <div class="py-8">
+        <HoppSmartTabs v-model="selectedOptionTab" render-inactive-tabs>
+          <HoppSmartTab :id="'details'" label="Details">
+            <TeamsDetails
+              :team="team"
+              :teamName="teamName"
+              v-model:showRenameInput="showRenameInput"
+              @rename-team="renameTeamName"
+              @delete-team="deleteTeam"
+              class="py-8 px-4"
+            />
+          </HoppSmartTab>
+          <HoppSmartTab :id="'members'" label="Members">
+            <TeamsMembers @update-team="updateTeam()" class="py-8 px-4" />
+          </HoppSmartTab>
+          <HoppSmartTab :id="'invites'" label="Invites">
+            <TeamsPendingInvites :editingTeamID="team.id" class="py-8 px-4" />
+          </HoppSmartTab>
+        </HoppSmartTabs>
+
+        <HoppSmartConfirmModal
+          :show="confirmDeletion"
+          :title="`Confirm Deletion of ${team.name} team?`"
+          @hide-modal="confirmDeletion = false"
+          @resolve="deleteTeamMutation(deleteTeamUID)"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useClientHandle, useMutation } from '@urql/vue';
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '../../composables/toast';
 import {
@@ -143,33 +66,26 @@ import {
   TeamMemberRole,
   TeamInfoQuery,
 } from '../../helpers/backend/graphql';
-import IconEdit from '~icons/lucide/edit';
-import IconSave from '~icons/lucide/save';
+import { HoppSmartTabs } from '@hoppscotch/ui';
 
 const toast = useToast();
 
-// Switch between team details, members and invites tab
-const showMembers = ref(false);
-const showPendingInvites = ref(false);
-const showTeamDetails = ref(true);
+type OptionTabs = 'details' | 'members' | 'invites';
 
-const switchToMembersTab = () => {
-  showMembers.value = true;
-  showTeamDetails.value = false;
-  showPendingInvites.value = false;
-};
+const selectedOptionTab = ref<OptionTabs>('details');
 
-const switchToPendingInvitesTab = () => {
-  showTeamDetails.value = false;
-  showMembers.value = false;
-  showPendingInvites.value = true;
-};
-
-const switchToTeamDetailsTab = () => {
-  showTeamDetails.value = true;
-  showMembers.value = false;
-  showPendingInvites.value = false;
-};
+const currentTabName = computed(() => {
+  switch (selectedOptionTab.value) {
+    case 'details':
+      return 'Team details';
+    case 'members':
+      return 'Team members';
+    case 'invites':
+      return 'Pending invites';
+    default:
+      return '';
+  }
+});
 
 // Get the details of the team
 const team = ref<TeamInfoQuery['admin']['teamInfo'] | undefined>();
@@ -194,27 +110,28 @@ const getTeamInfo = async () => {
 };
 
 onMounted(async () => await getTeamInfo());
+
 const updateTeam = async () => await getTeamInfo();
 
 // Rename the team name
 const showRenameInput = ref(false);
 const teamRename = useMutation(RenameTeamDocument);
 
-const renameTeamName = async () => {
+const renameTeamName = async (teamName: string) => {
   if (!team.value) return;
 
-  if (team.value.name === teamName.value) {
+  if (team.value.name === teamName) {
     showRenameInput.value = false;
     return;
   }
-  const variables = { uid: team.value.id, name: teamName.value };
+  const variables = { uid: team.value.id, name: teamName };
   await teamRename.executeMutation(variables).then((result) => {
     if (result.error) {
       toast.error('Failed to rename team!!');
     } else {
       showRenameInput.value = false;
       if (team.value) {
-        team.value.name = teamName.value;
+        team.value.name = teamName;
         toast.success('Team renamed successfully!!');
       }
     }