feat: better empty state illustratils in profile and error pages

packages/hoppscotch-app/layouts/error.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="page page-error">
+    <img
+      :src="`/images/states/${$colorMode.value}/youre_lost.svg`"
+      loading="lazy"
+      class="flex-col my-4 object-contain object-center h-46 w-46 inline-flex"
+      :alt="message"
+    />
     <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>
     <h3 class="select-text">{{ message }}</h3>
     <p class="mt-4">

packages/hoppscotch-app/locales/af.json

@@ -146,6 +146,7 @@
     "members": "Span is leeg",
     "parameters": "Hierdie versoek het geen parameters nie",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokolle is leeg",
     "schema": "Koppel aan 'n GraphQL -eindpunt",
     "team_name": "Spannaam leeg",

packages/hoppscotch-app/locales/ar.json

@@ -146,6 +146,7 @@
     "members": "الفريق فارغ",
     "parameters": "هذا الطلب لا يحتوي على أي معلمات",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "البروتوكولات فارغة",
     "schema": "اتصل بنقطة نهاية GraphQL",
     "team_name": "اسم الفريق فارغ",

packages/hoppscotch-app/locales/ca.json

@@ -146,6 +146,7 @@
     "members": "L’equip està buit",
     "parameters": "Aquesta sol·licitud no té cap paràmetre",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Els protocols estan buits",
     "schema": "Connecteu-vos a un punt final GraphQL",
     "team_name": "El nom de l'equip és buit",

packages/hoppscotch-app/locales/cn.json

@@ -146,6 +146,7 @@
     "members": "团队为空",
     "parameters": "该请求没有任何参数",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "协议为空",
     "schema": "连接至 GraphQL 端点",
     "team_name": "团队名称为空",

packages/hoppscotch-app/locales/cs.json

@@ -146,6 +146,7 @@
     "members": "Tým je prázdný",
     "parameters": "Tento požadavek nemá žádné parametry",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokoly jsou prázdné",
     "schema": "Připojte se ke koncovému bodu GraphQL",
     "team_name": "Název týmu prázdný",

packages/hoppscotch-app/locales/da.json

@@ -146,6 +146,7 @@
     "members": "Holdet er tomt",
     "parameters": "Denne anmodning har ingen parametre",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokoller er tomme",
     "schema": "Opret forbindelse til et GraphQL -slutpunkt",
     "team_name": "Teamnavn er tomt",

packages/hoppscotch-app/locales/de.json

@@ -146,6 +146,7 @@
     "members": "Team ist leer",
     "parameters": "Diese Anfrage hat keine Parameter",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokolle sind leer",
     "schema": "Verbinden mit einem GraphQL-Endpunkt",
     "team_name": "Teamname leer",

packages/hoppscotch-app/locales/el.json

@@ -146,6 +146,7 @@
     "members": "Η ομάδα είναι άδεια",
     "parameters": "Αυτό το αίτημα δεν έχει παραμέτρους",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Τα πρωτόκολλα είναι κενά",
     "schema": "Συνδεθείτε σε ένα τελικό σημείο GraphQL",
     "team_name": "Το όνομα της ομάδας είναι κενό",

packages/hoppscotch-app/locales/en.json

@@ -146,6 +146,7 @@
     "members": "Team is empty",
     "parameters": "This request does not have any parameters",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protocols are empty",
     "schema": "Connect to a GraphQL endpoint to view schema",
     "team_name": "Team name empty",

packages/hoppscotch-app/locales/es.json

@@ -146,6 +146,7 @@
     "members": "El equipo está vacío",
     "parameters": "Esta petición no tiene ningún parámetro",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Los protocolos están vacíos",
     "schema": "Conectarse a un endpoint GraphQL",
     "team_name": "Nombre del equipo vacío",

packages/hoppscotch-app/locales/fi.json

@@ -146,6 +146,7 @@
     "members": "Joukkue on tyhjä",
     "parameters": "Tässä pyynnössä ei ole parametreja",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokollat ovat tyhjiä",
     "schema": "Muodosta yhteys GraphQL -päätepisteeseen",
     "team_name": "Joukkueen nimi tyhjä",

packages/hoppscotch-app/locales/fr.json

@@ -146,6 +146,7 @@
     "members": "L'équipe est vide",
     "parameters": "Cette requête n'a aucun paramètre",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Les protocoles sont vides",
     "schema": "Se connecter à un point de terminaison GraphQL",
     "team_name": "Nom de l'équipe vide",

packages/hoppscotch-app/locales/he.json

@@ -146,6 +146,7 @@
     "members": "הקבוצה ריקה",
     "parameters": "לבקשה זו אין פרמטרים",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "הפרוטוקולים ריקים",
     "schema": "התחבר לנקודת קצה של GraphQL",
     "team_name": "שם הקבוצה ריק",

packages/hoppscotch-app/locales/hu.json

@@ -146,6 +146,7 @@
     "members": "A csapat üres",
     "parameters": "Ennek a kérésnek nincsenek paraméterei",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "A protokollok üresek",
     "schema": "Csatlakozás GraphQL végponthoz",
     "team_name": "A csapat neve üres",

packages/hoppscotch-app/locales/it.json

@@ -146,6 +146,7 @@
     "members": "La squadra è vuota",
     "parameters": "Questa richiesta non ha parametri",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "I protocolli sono vuoti",
     "schema": "Connettiti a un endpoint GraphQL",
     "team_name": "Nome della squadra vuoto",

packages/hoppscotch-app/locales/ja.json

@@ -146,6 +146,7 @@
     "members": "チームは空です",
     "parameters": "このリクエストにはパラメータがありません",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "プロトコルが空です",
     "schema": "GraphQLエンドポイントに接続する",
     "team_name": "チーム名が空です",

packages/hoppscotch-app/locales/ko.json

@@ -146,6 +146,7 @@
     "members": "팀이 비어 있습니다.",
     "parameters": "이 요청에는 매개변수가 없습니다.",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "프로토콜이 비어 있습니다.",
     "schema": "GraphQL 스키마에 연결",
     "team_name": "팀 이름이 비어 있습니다.",

packages/hoppscotch-app/locales/nl.json

@@ -146,6 +146,7 @@
     "members": "Team is leeg",
     "parameters": "Dit verzoek heeft geen parameters",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protocollen zijn leeg",
     "schema": "Verbinding maken met een GraphQL-eindpunt",
     "team_name": "Teamnaam leeg",

packages/hoppscotch-app/locales/no.json

@@ -146,6 +146,7 @@
     "members": "Teamet er tomt",
     "parameters": "Denne forespørselen har ingen parametere",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokoller er tomme",
     "schema": "Koble til et GraphQL-endepunkt",
     "team_name": "Lagnavnet er tomt",

packages/hoppscotch-app/locales/pl.json

@@ -146,6 +146,7 @@
     "members": "Zespół jest pusty",
     "parameters": "To żądanie nie ma żadnych parametrów",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokoły są puste",
     "schema": "Połącz się z punktem końcowym GraphQL",
     "team_name": "Nazwa zespołu jest pusta",

packages/hoppscotch-app/locales/pt-br.json

@@ -146,6 +146,7 @@
     "members": "Time está vazio",
     "parameters": "Esta solicitação não possui parâmetros",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Os protocolos estão vazios",
     "schema": "Conecte-se a um endpoint GraphQL",
     "team_name": "Nome do time vazio",

packages/hoppscotch-app/locales/pt.json

@@ -146,6 +146,7 @@
     "members": "Time está vazio",
     "parameters": "Esta solicitação não possui parâmetros",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Os protocolos estão vazios",
     "schema": "Conecte-se a um endpoint GraphQL",
     "team_name": "Nome do time vazio",

packages/hoppscotch-app/locales/ro.json

@@ -146,6 +146,7 @@
     "members": "Echipa este goală",
     "parameters": "Această solicitare nu are niciun parametru",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protocoalele sunt goale",
     "schema": "Conectați-vă la un punct final GraphQL",
     "team_name": "Numele echipei este gol",

packages/hoppscotch-app/locales/ru.json

@@ -146,6 +146,7 @@
     "members": "Команда пуста",
     "parameters": "Этот запрос не имеет параметров",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Протоколы пустые",
     "schema": "Подключиться к конечной точке GraphQL",
     "team_name": "Название команды пусто",

packages/hoppscotch-app/locales/sr.json

@@ -146,6 +146,7 @@
     "members": "Тим је празан",
     "parameters": "Овај захтев нема параметре",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Протоколи су празни",
     "schema": "Повежите се са ГрапхКЛ крајњом тачком",
     "team_name": "Назив тима празан",

packages/hoppscotch-app/locales/sv.json

@@ -146,6 +146,7 @@
     "members": "Teamet är tomt",
     "parameters": "Denna begäran har inga parametrar",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokoll är tomma",
     "schema": "Anslut till en GraphQL -slutpunkt",
     "team_name": "Lagets namn är tomt",

packages/hoppscotch-app/locales/tr.json

@@ -146,6 +146,7 @@
     "members": "Takım boş",
     "parameters": "Bu isteğin herhangi bir parametresi yok",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Protokoller boş",
     "schema": "Bir GraphQL uç noktasına bağlanma",
     "team_name": "Takım adı boş",

packages/hoppscotch-app/locales/tw.json

@@ -146,6 +146,7 @@
     "members": "團隊為空",
     "parameters": "該請求沒有任何引數",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "協議為空",
     "schema": "連線至 GraphQL 端點",
     "team_name": "團隊名稱為空",

packages/hoppscotch-app/locales/uk.json

@@ -146,6 +146,7 @@
     "members": "Команда порожня",
     "parameters": "Цей запит не має жодних параметрів",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Протоколи порожні",
     "schema": "Підключіться до кінцевої точки GraphQL",
     "team_name": "Назва команди порожня",

packages/hoppscotch-app/locales/vi.json

@@ -146,6 +146,7 @@
     "members": "Đội trống",
     "parameters": "Yêu cầu này không có bất kỳ thông số nào",
     "pending_invites": "There are no pending invites for this team",
+    "profile": "Login in to view your profile",
     "protocols": "Giao thức trống",
     "schema": "Kết nối với một điểm cuối GraphQL",
     "team_name": "Tên đội trống",

packages/hoppscotch-app/pages/profile.vue

@@ -2,9 +2,29 @@
   <div>
     <div class="container">
       <div class="p-4">
-        <div v-if="currentUser === null">
+        <div
+          v-if="currentUser === null"
+          class="flex flex-col items-center justify-center"
+        >
+          <img
+            :src="`/images/states/${$colorMode.value}/login.svg`"
+            loading="lazy"
+            class="
+              flex-col
+              my-4
+              object-contain object-center
+              h-24
+              w-24
+              inline-flex
+            "
+            :alt="$t('empty.parameters')"
+          />
+          <p class="text-center pb-4 text-secondaryLight">
+            {{ $t("empty.profile") }}
+          </p>
           <ButtonPrimary
             :label="$t('auth.login')"
+            class="mb-4"
             @click.native="showLogin = true"
           />
         </div>