refactor: empty state illustrations

packages/hoppscotch-app/components/teams/Edit.vue

@@ -59,7 +59,18 @@
               justify-center
             "
           >
-            <SmartIcon class="opacity-75 pb-2" name="users" />
+            <img
+              :src="`/images/states/${$colorMode.value}/add_group.svg`"
+              loading="lazy"
+              class="
+                flex-col
+                my-4
+                object-contain object-center
+                h-16
+                w-16
+                inline-flex
+              "
+            />
             <span class="text-center pb-4">
               {{ $t("empty.members") }}
             </span>

packages/hoppscotch-app/components/teams/Invite.vue

@@ -131,7 +131,6 @@
                 justify-center
               "
             >
-              <SmartIcon class="opacity-75 pb-2" name="users" />
               <span class="text-center">
                 {{ $t("empty.pending_invites") }}
               </span>
@@ -250,7 +249,18 @@
               justify-center
             "
           >
-            <SmartIcon class="opacity-75 pb-2" name="user-plus" />
+            <img
+              :src="`/images/states/${$colorMode.value}/add_group.svg`"
+              loading="lazy"
+              class="
+                flex-col
+                mb-4
+                object-contain object-center
+                h-16
+                w-16
+                inline-flex
+              "
+            />
             <span class="text-center pb-4">
               {{ $t("empty.invites") }}
             </span>
@@ -348,7 +358,12 @@
           @click.native="
             () => {
               sendInvitesResult = []
-              newInvites = []
+              newInvites = [
+                {
+                  key: '',
+                  value: 'VIEWRER',
+                },
+              ]
             }
           "
         />
@@ -473,7 +488,12 @@ const removeInvitee = async (id: string) => {
   }
 }
 
-const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([])
+const newInvites = ref<Array<{ key: string; value: TeamMemberRole }>>([
+  {
+    key: "",
+    value: TeamMemberRole.Viewer,
+  },
+])
 
 const addNewInvitee = () => {
   newInvites.value.push({
@@ -580,7 +600,12 @@ const getErrorMessage = (error: SendInvitesErrorType) => {
 const hideModal = () => {
   sendingInvites.value = false
   sendInvitesResult.value = []
-  newInvites.value = []
+  newInvites.value = [
+    {
+      key: "",
+      value: TeamMemberRole.Viewer,
+    },
+  ]
   emit("hide-modal")
 }
 </script>

packages/hoppscotch-app/components/teams/index.vue

@@ -27,10 +27,26 @@
           justify-center
         "
       >
-        <i class="opacity-75 pb-2 material-icons">help_outline</i>
-        <span class="text-center">
+        <img
+          :src="`/images/states/${$colorMode.value}/add_group.svg`"
+          loading="lazy"
+          class="
+            flex-col
+            mb-8
+            object-contain object-center
+            h-16
+            w-16
+            inline-flex
+          "
+        />
+        <span class="text-center mb-4">
           {{ $t("empty.teams") }}
         </span>
+        <ButtonSecondary
+          :label="`${$t('team.create_new')}`"
+          filled
+          @click.native="displayModalAdd(true)"
+        />
       </div>
       <div
         v-else-if="!myTeams.loading && E.isRight(myTeams.data)"