From 748318d44eb08820d2327852c4b893a91e868d8a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 16 Oct 2021 11:14:33 +0530
Subject: [PATCH] feat: compact mode for team component

---
 .../hoppscotch-app/components/teams/Modal.vue |  2 +-
 .../hoppscotch-app/components/teams/Team.vue  | 21 +++++++++++++++----
 .../hoppscotch-app/components/teams/index.vue |  1 +
 packages/hoppscotch-app/locales/en.json       |  1 +
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/hoppscotch-app/components/teams/Modal.vue b/packages/hoppscotch-app/components/teams/Modal.vue
index 25c7e8a96..eed3f1bec 100644
--- a/packages/hoppscotch-app/components/teams/Modal.vue
+++ b/packages/hoppscotch-app/components/teams/Modal.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('team.title')"
+    :title="$t('team.select_a_team')"
     @close="$emit('hide-modal')"
   >
     <template #body>
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 341e266e2..5605b1d31 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -1,8 +1,18 @@
 <template>
-  <div class="border border-dividerLight rounded flex flex-col flex-1">
-    <div class="flex flex-1 items-start">
+  <div class="border border-divider rounded flex flex-col flex-1">
+    <div
+      class="flex flex-1 items-start"
+      :class="{
+        'cursor-pointer hover:bg-primaryDark transition hover:border-dividerDark focus-visible:border-dividerDark':
+          compact && team.myRole === 'OWNER',
+      }"
+      @click="compact && team.myRole === 'OWNER' ? $emit('invite-team') : ''"
+    >
       <div class="p-4">
-        <label class="font-semibold text-secondaryDark">
+        <label
+          class="font-semibold text-secondaryDark"
+          :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
+        >
           {{ team.name || $t("state.nothing_found") }}
         </label>
         <div class="flex -space-x-1 mt-2 overflow-hidden">
@@ -18,11 +28,12 @@
         </div>
       </div>
     </div>
-    <div class="flex items-center justify-between">
+    <div v-if="!compact" class="flex items-center justify-between">
       <span>
         <ButtonSecondary
           v-if="team.myRole === 'OWNER'"
           svg="edit"
+          class="rounded-none"
           :label="$t('action.edit').toString()"
           @click.native="
             () => {
@@ -33,6 +44,7 @@
         <ButtonSecondary
           v-if="team.myRole === 'OWNER'"
           svg="user-plus"
+          class="rounded-none"
           :label="$t('team.invite')"
           @click.native="
             () => {
@@ -113,6 +125,7 @@ const props = defineProps<{
     }>
   }
   teamID: string
+  compact: boolean
 }>()
 
 const emit = defineEmits<{
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index ef5804a12..76132e784 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -42,6 +42,7 @@
           :key="`team-${String(index)}`"
           :team-i-d="team.id"
           :team="team"
+          :compact="modal"
           @edit-team="editTeam(team, team.id)"
           @invite-team="inviteTeam(team, team.id)"
         />
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 7062fb851..dee9eceb1 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -474,6 +474,7 @@
     "invalid_email_format": "Email format is invalid",
     "invalid_member_permission": "Please provide a valid permission to the team member",
     "invite": "Invite",
+    "select_a_team": "Select a team",
     "invite_tooltip": "Invite people to this workspace",
     "invited_to_team": "{owner} invited you to join {team}",
     "join_beta": "Join the beta program to access teams.",