chore(ui): minor ui improvements, empty teams state

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"

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>

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)"