feat: init boring avatars (#3615)

packages/hoppscotch-common/src/components/app/Header.vue

@@ -134,15 +134,10 @@
               :on-shown="() => tippyActions.focus()"
             >
               <HoppSmartPicture
-                v-if="currentUser.photoURL"
                 v-tippy="{
                   theme: 'tooltip',
                 }"
-                :url="currentUser.photoURL"
-                :alt="
-                  currentUser.displayName ||
-                  t('profile.default_hopp_displayname')
-                "
+                :name="currentUser.uid"
                 :title="
                   currentUser.displayName ||
                   currentUser.email ||
@@ -153,20 +148,6 @@
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
                 "
               />
-              <HoppSmartPicture
-                v-else
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  currentUser.displayName ||
-                  currentUser.email ||
-                  t('profile.default_hopp_displayname')
-                "
-                :initial="currentUser.displayName || currentUser.email"
-                indicator
-                :indicator-styles="
-                  network.isOnline ? 'bg-green-500' : 'bg-red-500'
-                "
-              />
               <template #content="{ hide }">
                 <div
                   ref="tippyActions"

packages/hoppscotch-common/src/components/teams/MemberStack.vue

@@ -6,19 +6,9 @@
       class="inline-flex"
     >
       <HoppSmartPicture
-        v-if="member.user.photoURL"
         v-tippy="{ theme: 'tooltip' }"
-        :url="member.user.photoURL"
-        :title="getUserName(member)"
-        :alt="getUserName(member)"
-        class="ring-2 ring-primary"
-        @click="handleClick()"
-      />
-      <HoppSmartPicture
-        v-else
-        v-tippy="{ theme: 'tooltip' }"
-        :title="getUserName(member)"
-        :initial="getUserName(member)"
+        :name="member.user.uid"
+        :title="getUserName(member as TeamMember)"
         class="ring-2 ring-primary"
         @click="handleClick()"
       />
@@ -59,7 +49,7 @@ const emit = defineEmits<{
 const getUserName = (member: TeamMember): string =>
   member.user.displayName ||
   member.user.email ||
-  t("profile.default_hopp_displayName")
+  t("profile.default_hopp_displayname")
 
 const maxMembersSoftLimit = 4
 const maxMembersHardLimit = 6
@@ -77,7 +67,7 @@ const remainingSlicedMembers = computed(
     props.teamMembers
       .slice(maxMembersSoftLimit)
       .slice(0, maxMembersHardLimit)
-      .map((member) => getUserName(member))
+      .map((member) => getUserName(member as TeamMember))
       .join(`,<br>`) +
     (props.teamMembers.length - (maxMembersSoftLimit + maxMembersHardLimit) > 0
       ? `,<br>${t("team.more_members", {

packages/hoppscotch-common/src/pages/profile.vue

@@ -21,27 +21,15 @@
         </HoppSmartPlaceholder>
         <div v-else class="space-y-8">
           <div
-            class="-mb-11 h-24 rounded bg-primaryLight md:h-32"
+            class="-mb-12 h-24 rounded bg-primaryLight md:h-32"
             style="background-image: url(/images/cover.svg)"
           ></div>
           <div class="flex flex-col justify-between space-y-8 px-4 md:flex-row">
             <div class="flex items-end">
               <HoppSmartPicture
-                v-if="currentUser.photoURL"
-                :url="currentUser.photoURL"
-                :alt="
-                  currentUser.displayName || t('profile.default_displayname')
-                "
-                class="ring-4 ring-primary"
-                size="16"
-                rounded="lg"
-              />
-              <HoppSmartPicture
-                v-else
-                :initial="currentUser.displayName || currentUser.email"
-                rounded="lg"
-                size="16"
-                class="ring-4 ring-primary"
+                :name="currentUser.uid"
+                class="ring-8 ring-primary"
+                :size="64"
               />
               <div class="ml-4">
                 <label class="heading">