From a8e7fd3434fdcc1ca1d40b00560df5985dee4ce1 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 4 Mar 2022 05:56:52 +0530
Subject: [PATCH] feat: arbitrary profile picture

---
 .../assets/icons/auth/email.svg               | 22 +++++---
 .../assets/icons/auth/github.svg              | 19 ++++---
 .../assets/icons/auth/google.svg              | 31 ++++++++---
 .../assets/icons/auth/microsoft.svg           | 23 ++++----
 .../hoppscotch-app/components/app/Header.vue  | 11 ++--
 .../components/profile/Picture.vue            | 53 ++++++++++++++++---
 .../hoppscotch-app/components/teams/Team.vue  | 13 +++--
 packages/hoppscotch-app/locales/af.json       |  1 -
 packages/hoppscotch-app/locales/ar.json       |  1 -
 packages/hoppscotch-app/locales/ca.json       |  1 -
 packages/hoppscotch-app/locales/cn.json       |  1 -
 packages/hoppscotch-app/locales/cs.json       |  1 -
 packages/hoppscotch-app/locales/da.json       |  1 -
 packages/hoppscotch-app/locales/de.json       |  1 -
 packages/hoppscotch-app/locales/el.json       |  1 -
 packages/hoppscotch-app/locales/en.json       |  1 -
 packages/hoppscotch-app/locales/es.json       |  1 -
 packages/hoppscotch-app/locales/fi.json       |  1 -
 packages/hoppscotch-app/locales/fr.json       |  1 -
 packages/hoppscotch-app/locales/he.json       |  1 -
 packages/hoppscotch-app/locales/hu.json       |  1 -
 packages/hoppscotch-app/locales/it.json       |  1 -
 packages/hoppscotch-app/locales/ja.json       |  1 -
 packages/hoppscotch-app/locales/ko.json       |  1 -
 packages/hoppscotch-app/locales/nl.json       |  1 -
 packages/hoppscotch-app/locales/no.json       |  1 -
 packages/hoppscotch-app/locales/pl.json       |  1 -
 packages/hoppscotch-app/locales/pt-br.json    |  1 -
 packages/hoppscotch-app/locales/pt.json       |  1 -
 packages/hoppscotch-app/locales/ro.json       |  1 -
 packages/hoppscotch-app/locales/ru.json       |  1 -
 packages/hoppscotch-app/locales/sr.json       |  1 -
 packages/hoppscotch-app/locales/sv.json       |  1 -
 packages/hoppscotch-app/locales/tr.json       |  1 -
 packages/hoppscotch-app/locales/tw.json       |  1 -
 packages/hoppscotch-app/locales/uk.json       |  1 -
 packages/hoppscotch-app/locales/vi.json       |  1 -
 packages/hoppscotch-app/pages/profile.vue     | 18 ++++---
 38 files changed, 132 insertions(+), 88 deletions(-)

diff --git a/packages/hoppscotch-app/assets/icons/auth/email.svg b/packages/hoppscotch-app/assets/icons/auth/email.svg
index cb9568f5..ac21b3d0 100644
--- a/packages/hoppscotch-app/assets/icons/auth/email.svg
+++ b/packages/hoppscotch-app/assets/icons/auth/email.svg
@@ -1,7 +1,15 @@
-
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Email" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="teal"/><rect width="356" height="256" x="78" y="128" fill="#fff" rx="8%"/><path fill="none" stroke="teal" stroke-width="20" d="M434 128L269 292c-7 8-19 8-26 0L78 128m0 256l129-128m227 128L305 256"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Email"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="teal" />
+  <rect width="356" height="256" x="78" y="128" fill="#fff" rx="8%" />
+  <path
+    fill="none"
+    stroke="teal"
+    stroke-width="20"
+    d="M434 128L269 292c-7 8-19 8-26 0L78 128m0 256l129-128m227 128L305 256"
+  />
+</svg>
diff --git a/packages/hoppscotch-app/assets/icons/auth/github.svg b/packages/hoppscotch-app/assets/icons/auth/github.svg
index 451e6a29..a4a47b02 100644
--- a/packages/hoppscotch-app/assets/icons/auth/github.svg
+++ b/packages/hoppscotch-app/assets/icons/auth/github.svg
@@ -1,7 +1,12 @@
-
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="GitHub" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#181717"/><path fill="#fff" d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-34-86-34-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="GitHub"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#181717" />
+  <path
+    fill="#fff"
+    d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-44c-71 16-86-34-86-34-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"
+  />
+</svg>
diff --git a/packages/hoppscotch-app/assets/icons/auth/google.svg b/packages/hoppscotch-app/assets/icons/auth/google.svg
index 75c59abd..5cdb447f 100644
--- a/packages/hoppscotch-app/assets/icons/auth/google.svg
+++ b/packages/hoppscotch-app/assets/icons/auth/google.svg
@@ -1,7 +1,24 @@
-
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Google" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#fff"/><path fill="#4285f4" d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"/><path fill="#34a853" d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"/><path fill="#fbbc02" d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"/><path fill="#ea4335" d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Google"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#fff" />
+  <path
+    fill="#4285f4"
+    d="M386 400c45-42 65-112 53-179H260v74h102c-4 24-18 44-38 57z"
+  />
+  <path
+    fill="#34a853"
+    d="M90 341a192 192 0 0 0 296 59l-62-48c-53 35-141 22-171-60z"
+  />
+  <path
+    fill="#fbbc02"
+    d="M153 292c-8-25-8-48 0-73l-63-49c-23 46-30 111 0 171z"
+  />
+  <path
+    fill="#ea4335"
+    d="M153 219c22-69 116-109 179-50l55-54c-78-75-230-72-297 55z"
+  />
+</svg>
diff --git a/packages/hoppscotch-app/assets/icons/auth/microsoft.svg b/packages/hoppscotch-app/assets/icons/auth/microsoft.svg
index d2f484f2..dcc6cd28 100644
--- a/packages/hoppscotch-app/assets/icons/auth/microsoft.svg
+++ b/packages/hoppscotch-app/assets/icons/auth/microsoft.svg
@@ -1,11 +1,12 @@
-
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Microsoft" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#fff"/><path
-d="M75 75v171h171v-171z" fill="#f25022"/><path
-d="M266 75v171h171v-171z" fill="#7fba00"/><path
-d="M75 266v171h171v-171z" fill="#00a4ef"/><path
-d="M266 266v171h171v-171z" fill="#ffb900"/></svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  aria-label="Microsoft"
+  role="img"
+  viewBox="0 0 512 512"
+>
+  <rect width="512" height="512" rx="15%" fill="#fff" />
+  <path d="M75 75v171h171v-171z" fill="#f25022" />
+  <path d="M266 75v171h171v-171z" fill="#7fba00" />
+  <path d="M75 266v171h171v-171z" fill="#00a4ef" />
+  <path d="M266 266v171h171v-171z" fill="#ffb900" />
+</svg>
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index edcc8375..b7a80dc7 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -79,12 +79,15 @@
                     network.isOnline ? 'bg-green-500' : 'bg-red-500'
                   "
                 />
-                <ButtonSecondary
+                <ProfilePicture
                   v-else
                   v-tippy="{ theme: 'tooltip' }"
-                  :title="t('header.account')"
-                  class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-                  svg="user"
+                  :title="currentUser.displayName"
+                  :initial="currentUser.displayName"
+                  indicator
+                  :indicator-styles="
+                    network.isOnline ? 'bg-green-500' : 'bg-red-500'
+                  "
                 />
               </template>
               <div class="flex flex-col px-2 text-tiny" role="menu">
diff --git a/packages/hoppscotch-app/components/profile/Picture.vue b/packages/hoppscotch-app/components/profile/Picture.vue
index b38409b7..8bae6117 100644
--- a/packages/hoppscotch-app/components/profile/Picture.vue
+++ b/packages/hoppscotch-app/components/profile/Picture.vue
@@ -1,20 +1,31 @@
 <template>
   <div
     tabindex="0"
-    class="relative flex items-center justify-center w-5 h-5 rounded-full cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    class="relative flex items-center justify-center cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-primaryDark"
+    :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
   >
     <img
-      class="absolute object-cover object-center w-5 h-5 rounded-full transition bg-primaryDark"
+      v-if="url"
+      class="absolute object-cover object-center transition bg-primaryDark"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
       :src="url"
       :alt="alt"
       loading="lazy"
     />
-    <div class="absolute inset-0 rounded-full shadow-inner"></div>
+    <div
+      v-else
+      class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+      :style="`background-color: ${toHex(initial)}`"
+    >
+      {{ initial.charAt(0).toUpperCase() }}
+    </div>
     <span
       v-if="indicator"
-      class="border-primary rounded-full border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
-      :class="indicatorStyles"
+      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      :class="[`rounded-${rounded}`, indicatorStyles]"
     ></span>
+    <!-- w-5 h-5 rounded-lg -->
   </div>
 </template>
 
@@ -25,9 +36,7 @@ export default defineComponent({
   props: {
     url: {
       type: String,
-      default: `https://avatars.dicebear.com/v2/avataaars/${Math.random()
-        .toString(36)
-        .substring(7)}.svg?mood[]=happy`,
+      default: "",
     },
     alt: {
       type: String,
@@ -41,6 +50,34 @@ export default defineComponent({
       type: String,
       default: "bg-green-500",
     },
+    rounded: {
+      type: String,
+      default: "full",
+    },
+    size: {
+      type: String,
+      default: "5",
+    },
+    initial: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    toHex(initial) {
+      let hash = 0
+      if (initial.length === 0) return hash
+      for (let i = 0; i < initial.length; i++) {
+        hash = initial.charCodeAt(i) + ((hash << 5) - hash)
+        hash = hash & hash
+      }
+      let color = "#"
+      for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 255
+        color += `00${value.toString(16)}`.substr(-2)
+      }
+      return color
+    },
   },
 })
 </script>
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 79c28fb0..a34363eb 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -35,17 +35,16 @@
             :title="member.user.displayName"
             class="inline-flex"
           >
-            <img
+            <ProfilePicture
               v-if="member.user.photoURL"
-              :src="member.user.photoURL"
+              :url="member.user.photoURL"
               :alt="member.user.displayName"
-              class="inline-block w-5 h-5 rounded-full ring-primary ring-2"
-              loading="lazy"
+              class="ring-primary ring-2"
             />
-            <SmartIcon
+            <ProfilePicture
               v-else
-              name="user"
-              class="rounded-lg svg-icons bg-primaryLight ring-primary ring-2"
+              :initial="member.user.displayName"
+              class="ring-primary ring-2"
             />
           </div>
         </div>
diff --git a/packages/hoppscotch-app/locales/af.json b/packages/hoppscotch-app/locales/af.json
index e5c2115a..ebb8baa2 100644
--- a/packages/hoppscotch-app/locales/af.json
+++ b/packages/hoppscotch-app/locales/af.json
@@ -216,7 +216,6 @@
     "subscriptions": "Inskrywings"
   },
   "header": {
-    "account": "Rekening",
     "install_pwa": "Installeer toep",
     "login": "Teken aan",
     "save_workspace": "Stoor my werkspasie"
diff --git a/packages/hoppscotch-app/locales/ar.json b/packages/hoppscotch-app/locales/ar.json
index e1facbfa..e1f89fcf 100644
--- a/packages/hoppscotch-app/locales/ar.json
+++ b/packages/hoppscotch-app/locales/ar.json
@@ -217,7 +217,6 @@
     "subscriptions": "الاشتراكات"
   },
   "header": {
-    "account": "حساب",
     "install_pwa": "تثبيت التطبيق",
     "login": "تسجيل الدخول",
     "save_workspace": "حفظ مساحة العمل الخاصة بي"
diff --git a/packages/hoppscotch-app/locales/ca.json b/packages/hoppscotch-app/locales/ca.json
index 803fed42..1206fec3 100644
--- a/packages/hoppscotch-app/locales/ca.json
+++ b/packages/hoppscotch-app/locales/ca.json
@@ -216,7 +216,6 @@
     "subscriptions": "Subscripcions"
   },
   "header": {
-    "account": "Compte",
     "install_pwa": "Instal·la l'aplicació",
     "login": "iniciar Sessió",
     "save_workspace": "Desa el meu espai de treball"
diff --git a/packages/hoppscotch-app/locales/cn.json b/packages/hoppscotch-app/locales/cn.json
index 406bc8d6..6a76e9eb 100644
--- a/packages/hoppscotch-app/locales/cn.json
+++ b/packages/hoppscotch-app/locales/cn.json
@@ -216,7 +216,6 @@
     "subscriptions": "订阅"
   },
   "header": {
-    "account": "帐户",
     "install_pwa": "安装应用",
     "login": "登录",
     "save_workspace": "保存我的工作区"
diff --git a/packages/hoppscotch-app/locales/cs.json b/packages/hoppscotch-app/locales/cs.json
index 3ef784e7..207b278d 100644
--- a/packages/hoppscotch-app/locales/cs.json
+++ b/packages/hoppscotch-app/locales/cs.json
@@ -216,7 +216,6 @@
     "subscriptions": "Předplatné"
   },
   "header": {
-    "account": "Účet",
     "install_pwa": "Nainstalovat aplikaci",
     "login": "Přihlásit se",
     "save_workspace": "Uložit můj pracovní prostor"
diff --git a/packages/hoppscotch-app/locales/da.json b/packages/hoppscotch-app/locales/da.json
index 78a1f317..81649e70 100644
--- a/packages/hoppscotch-app/locales/da.json
+++ b/packages/hoppscotch-app/locales/da.json
@@ -216,7 +216,6 @@
     "subscriptions": "Abonnementer"
   },
   "header": {
-    "account": "Konto",
     "install_pwa": "Installer app",
     "login": "Log på",
     "save_workspace": "Gem mit arbejdsområde"
diff --git a/packages/hoppscotch-app/locales/de.json b/packages/hoppscotch-app/locales/de.json
index 65b30ccb..9dfbdff8 100644
--- a/packages/hoppscotch-app/locales/de.json
+++ b/packages/hoppscotch-app/locales/de.json
@@ -216,7 +216,6 @@
     "subscriptions": "Abonnements"
   },
   "header": {
-    "account": "Konto",
     "install_pwa": "App installieren",
     "login": "Anmeldung",
     "save_workspace": "Meinen Arbeitsbereich speichern"
diff --git a/packages/hoppscotch-app/locales/el.json b/packages/hoppscotch-app/locales/el.json
index ba0eb785..6e30d559 100644
--- a/packages/hoppscotch-app/locales/el.json
+++ b/packages/hoppscotch-app/locales/el.json
@@ -216,7 +216,6 @@
     "subscriptions": "Συνδρομές"
   },
   "header": {
-    "account": "λογαριασμός",
     "install_pwa": "Εγκατάσταση εφαρμογής",
     "login": "Σύνδεση",
     "save_workspace": "Αποθήκευση του χώρου εργασίας μου"
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 3e0b50aa..6e11a758 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -216,7 +216,6 @@
     "subscriptions": "Subscriptions"
   },
   "header": {
-    "account": "Account",
     "install_pwa": "Install app",
     "login": "Login",
     "save_workspace": "Save My Workspace"
diff --git a/packages/hoppscotch-app/locales/es.json b/packages/hoppscotch-app/locales/es.json
index c54b9bf2..63445855 100644
--- a/packages/hoppscotch-app/locales/es.json
+++ b/packages/hoppscotch-app/locales/es.json
@@ -216,7 +216,6 @@
     "subscriptions": "Suscripciones"
   },
   "header": {
-    "account": "Cuenta",
     "install_pwa": "Instalar aplicación",
     "login": "Acceso",
     "save_workspace": "Guardar mi espacio de trabajo"
diff --git a/packages/hoppscotch-app/locales/fi.json b/packages/hoppscotch-app/locales/fi.json
index e198d507..9b31a165 100644
--- a/packages/hoppscotch-app/locales/fi.json
+++ b/packages/hoppscotch-app/locales/fi.json
@@ -216,7 +216,6 @@
     "subscriptions": "Tilaukset"
   },
   "header": {
-    "account": "Tili",
     "install_pwa": "Asenna sovellus",
     "login": "Kirjaudu sisään",
     "save_workspace": "Tallenna työtila"
diff --git a/packages/hoppscotch-app/locales/fr.json b/packages/hoppscotch-app/locales/fr.json
index 61a3d06c..f4e3963f 100644
--- a/packages/hoppscotch-app/locales/fr.json
+++ b/packages/hoppscotch-app/locales/fr.json
@@ -216,7 +216,6 @@
     "subscriptions": "Abonnements"
   },
   "header": {
-    "account": "Compte",
     "install_pwa": "Installer l'application",
     "login": "Connexion",
     "save_workspace": "Enregistrer mon espace de travail"
diff --git a/packages/hoppscotch-app/locales/he.json b/packages/hoppscotch-app/locales/he.json
index 8f9f3cbe..41dfd479 100644
--- a/packages/hoppscotch-app/locales/he.json
+++ b/packages/hoppscotch-app/locales/he.json
@@ -216,7 +216,6 @@
     "subscriptions": "מנויים"
   },
   "header": {
-    "account": "חֶשְׁבּוֹן",
     "install_pwa": "התקן אפליקציה",
     "login": "התחברות",
     "save_workspace": "שמור את סביבת העבודה שלי"
diff --git a/packages/hoppscotch-app/locales/hu.json b/packages/hoppscotch-app/locales/hu.json
index 5b8fb598..f38c30f2 100644
--- a/packages/hoppscotch-app/locales/hu.json
+++ b/packages/hoppscotch-app/locales/hu.json
@@ -216,7 +216,6 @@
     "subscriptions": "Feliratkozások"
   },
   "header": {
-    "account": "Fiók",
     "install_pwa": "Alkalmazás telepítése",
     "login": "Bejelentkezés",
     "save_workspace": "Saját munkaterület mentése"
diff --git a/packages/hoppscotch-app/locales/it.json b/packages/hoppscotch-app/locales/it.json
index be7801eb..3b8620fd 100644
--- a/packages/hoppscotch-app/locales/it.json
+++ b/packages/hoppscotch-app/locales/it.json
@@ -216,7 +216,6 @@
     "subscriptions": "Sottoscrizioni"
   },
   "header": {
-    "account": "Account",
     "install_pwa": "Installa l'applicazione",
     "login": "Accedi",
     "save_workspace": "Salva il mio spazio di lavoro"
diff --git a/packages/hoppscotch-app/locales/ja.json b/packages/hoppscotch-app/locales/ja.json
index 868ba5f9..3ea311d7 100644
--- a/packages/hoppscotch-app/locales/ja.json
+++ b/packages/hoppscotch-app/locales/ja.json
@@ -216,7 +216,6 @@
     "subscriptions": "サブスクリプション"
   },
   "header": {
-    "account": "アカウント",
     "install_pwa": "アプリをインストールする",
     "login": "ログイン",
     "save_workspace": "ワークスペースを保存"
diff --git a/packages/hoppscotch-app/locales/ko.json b/packages/hoppscotch-app/locales/ko.json
index d7c740ca..34ac44a5 100644
--- a/packages/hoppscotch-app/locales/ko.json
+++ b/packages/hoppscotch-app/locales/ko.json
@@ -216,7 +216,6 @@
     "subscriptions": "구독"
   },
   "header": {
-    "account": "계정",
     "install_pwa": "앱을 설치",
     "login": "로그인",
     "save_workspace": "내 작업 공간 저장"
diff --git a/packages/hoppscotch-app/locales/nl.json b/packages/hoppscotch-app/locales/nl.json
index 876c1bba..f25f6daa 100644
--- a/packages/hoppscotch-app/locales/nl.json
+++ b/packages/hoppscotch-app/locales/nl.json
@@ -216,7 +216,6 @@
     "subscriptions": "Abonnementen"
   },
   "header": {
-    "account": "Rekening",
     "install_pwa": "Installeer app",
     "login": "Log in",
     "save_workspace": "Bewaar mijn werkruimte"
diff --git a/packages/hoppscotch-app/locales/no.json b/packages/hoppscotch-app/locales/no.json
index e0330d3e..bd83a55e 100644
--- a/packages/hoppscotch-app/locales/no.json
+++ b/packages/hoppscotch-app/locales/no.json
@@ -216,7 +216,6 @@
     "subscriptions": "Abonnementer"
   },
   "header": {
-    "account": "Regnskap",
     "install_pwa": "Installer app",
     "login": "Logg Inn",
     "save_workspace": "Lagre arbeidsområdet mitt"
diff --git a/packages/hoppscotch-app/locales/pl.json b/packages/hoppscotch-app/locales/pl.json
index 1fccd77a..efc6bc30 100644
--- a/packages/hoppscotch-app/locales/pl.json
+++ b/packages/hoppscotch-app/locales/pl.json
@@ -216,7 +216,6 @@
     "subscriptions": "Subskrypcje"
   },
   "header": {
-    "account": "Konto",
     "install_pwa": "Zainstaluj aplikację",
     "login": "Zaloguj sie",
     "save_workspace": "Zapisz mój obszar roboczy"
diff --git a/packages/hoppscotch-app/locales/pt-br.json b/packages/hoppscotch-app/locales/pt-br.json
index b40653ce..3c0d96d3 100644
--- a/packages/hoppscotch-app/locales/pt-br.json
+++ b/packages/hoppscotch-app/locales/pt-br.json
@@ -216,7 +216,6 @@
     "subscriptions": "Assinaturas"
   },
   "header": {
-    "account": "Conta",
     "install_pwa": "Instalar aplicativo",
     "login": "Conecte-se",
     "save_workspace": "Salvar meu espaço de trabalho"
diff --git a/packages/hoppscotch-app/locales/pt.json b/packages/hoppscotch-app/locales/pt.json
index b40653ce..3c0d96d3 100644
--- a/packages/hoppscotch-app/locales/pt.json
+++ b/packages/hoppscotch-app/locales/pt.json
@@ -216,7 +216,6 @@
     "subscriptions": "Assinaturas"
   },
   "header": {
-    "account": "Conta",
     "install_pwa": "Instalar aplicativo",
     "login": "Conecte-se",
     "save_workspace": "Salvar meu espaço de trabalho"
diff --git a/packages/hoppscotch-app/locales/ro.json b/packages/hoppscotch-app/locales/ro.json
index dd23f43f..0b69ebd2 100644
--- a/packages/hoppscotch-app/locales/ro.json
+++ b/packages/hoppscotch-app/locales/ro.json
@@ -216,7 +216,6 @@
     "subscriptions": "Abonamente"
   },
   "header": {
-    "account": "Cont",
     "install_pwa": "Instalează aplicația",
     "login": "Autentificare",
     "save_workspace": "Salvați spațiul meu de lucru"
diff --git a/packages/hoppscotch-app/locales/ru.json b/packages/hoppscotch-app/locales/ru.json
index 45296c76..15d6ed7d 100644
--- a/packages/hoppscotch-app/locales/ru.json
+++ b/packages/hoppscotch-app/locales/ru.json
@@ -216,7 +216,6 @@
     "subscriptions": "Подписки"
   },
   "header": {
-    "account": "Счет",
     "install_pwa": "Установить приложение",
     "login": "Авторизоваться",
     "save_workspace": "Сохранить мою рабочую область"
diff --git a/packages/hoppscotch-app/locales/sr.json b/packages/hoppscotch-app/locales/sr.json
index 513ce0b0..a44c5d56 100644
--- a/packages/hoppscotch-app/locales/sr.json
+++ b/packages/hoppscotch-app/locales/sr.json
@@ -217,7 +217,6 @@
     "subscriptions": "Претплате"
   },
   "header": {
-    "account": "Рачун",
     "install_pwa": "Инсталирати апликацију",
     "login": "Пријавите се",
     "save_workspace": "Сачувај мој радни простор"
diff --git a/packages/hoppscotch-app/locales/sv.json b/packages/hoppscotch-app/locales/sv.json
index fb85a8bf..023676ee 100644
--- a/packages/hoppscotch-app/locales/sv.json
+++ b/packages/hoppscotch-app/locales/sv.json
@@ -216,7 +216,6 @@
     "subscriptions": "Prenumerationer"
   },
   "header": {
-    "account": "konto",
     "install_pwa": "Installera app",
     "login": "Logga in",
     "save_workspace": "Spara min arbetsyta"
diff --git a/packages/hoppscotch-app/locales/tr.json b/packages/hoppscotch-app/locales/tr.json
index 51541a85..b4ba457a 100644
--- a/packages/hoppscotch-app/locales/tr.json
+++ b/packages/hoppscotch-app/locales/tr.json
@@ -216,7 +216,6 @@
     "subscriptions": "abonelikler"
   },
   "header": {
-    "account": "Hesap",
     "install_pwa": "Uygulamayı yükle",
     "login": "Giriş yap",
     "save_workspace": "Çalışma Alanımı Kaydet"
diff --git a/packages/hoppscotch-app/locales/tw.json b/packages/hoppscotch-app/locales/tw.json
index 9906d9e9..5b89145d 100644
--- a/packages/hoppscotch-app/locales/tw.json
+++ b/packages/hoppscotch-app/locales/tw.json
@@ -216,7 +216,6 @@
     "subscriptions": "訂閱"
   },
   "header": {
-    "account": "帳號",
     "install_pwa": "安裝應用程式",
     "login": "登入",
     "save_workspace": "儲存我的工作區"
diff --git a/packages/hoppscotch-app/locales/uk.json b/packages/hoppscotch-app/locales/uk.json
index 75bdfce8..106fb526 100644
--- a/packages/hoppscotch-app/locales/uk.json
+++ b/packages/hoppscotch-app/locales/uk.json
@@ -216,7 +216,6 @@
     "subscriptions": "Підписки"
   },
   "header": {
-    "account": "Рахунок",
     "install_pwa": "Встановити додаток",
     "login": "Увійти",
     "save_workspace": "Зберегти мою робочу область"
diff --git a/packages/hoppscotch-app/locales/vi.json b/packages/hoppscotch-app/locales/vi.json
index 6c7ce903..f4128858 100644
--- a/packages/hoppscotch-app/locales/vi.json
+++ b/packages/hoppscotch-app/locales/vi.json
@@ -216,7 +216,6 @@
     "subscriptions": "Đăng ký"
   },
   "header": {
-    "account": "Tài khoản",
     "install_pwa": "Cài đặt ứng dụng",
     "login": "Đăng nhập",
     "save_workspace": "Lưu không gian làm việc của tôi"
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 11e4fb73..f5509960 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -28,16 +28,20 @@
           ></div>
           <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
             <div class="flex items-end">
-              <img
+              <ProfilePicture
                 v-if="currentUser.photoURL"
-                :src="currentUser.photoURL"
-                class="w-16 h-16 rounded-lg ring-primary ring-4"
-                :alt="`${currentUser.displayName}`"
+                :url="currentUser.photoURL"
+                :alt="currentUser.displayName"
+                class="ring-primary ring-4"
+                size="16"
+                rounded="lg"
               />
-              <SmartIcon
+              <ProfilePicture
                 v-else
-                name="user"
-                class="svg-icons !w-16 !h-16 bg-primaryLight rounded-lg ring-primary ring-4"
+                :initial="currentUser.displayName"
+                rounded="lg"
+                size="16"
+                class="ring-primary ring-4"
               />
               <div class="ml-4">
                 <label class="heading">