From 3809e9853eec683ac53d30be1725c44e7dbe65ed Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 5 Oct 2021 22:17:29 +0530
Subject: [PATCH] chore(ui): minor ui improvements, empty teams state

---
 packages/hoppscotch-app/components/app/Header.vue  | 10 +++-------
 packages/hoppscotch-app/components/teams/Modal.vue |  2 +-
 packages/hoppscotch-app/components/teams/index.vue | 14 +++++++++++---
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index ba2829831..d8556738f 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -54,10 +54,10 @@
             :label="$t('team.invite')"
             svg="user-plus"
             class="
-              !bg-green-400
+              !bg-green-500
               !text-green-500
               !bg-opacity-10
-              !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-600
+              !hover:bg-opacity-10 !hover:text-green-400 !hover:bg-green-400
             "
             @click.native="showTeamsModal = true"
           />
@@ -110,11 +110,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  onMounted,
-  ref,
-  useContext,
-} from "@nuxtjs/composition-api"
+import { onMounted, ref, useContext } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
diff --git a/packages/hoppscotch-app/components/teams/Modal.vue b/packages/hoppscotch-app/components/teams/Modal.vue
index bbe25ad3b..25c7e8a96 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('app.invite_your_friends')"
+    :title="$t('team.title')"
     @close="$emit('hide-modal')"
   >
     <template #body>
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index c170960f5..e8b8793e3 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -19,10 +19,18 @@
           E.isRight(myTeams.data) &&
           myTeams.data.right.myTeams.length === 0
         "
-        class="flex items-center"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
       >
-        <i class="mr-4 material-icons">help_outline</i>
-        {{ $t("empty.teams") }}
+        <i class="opacity-75 pb-2 material-icons">help_outline</i>
+        <span class="text-center">
+          {{ $t("empty.teams") }}
+        </span>
       </div>
       <div
         v-else-if="!myTeams.loading && E.isRight(myTeams.data)"