From 4a8efbf426d9f35a5c1fc57928dd3c8646ed657f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 15 Nov 2021 20:59:07 +0530
Subject: [PATCH] feat: better empty state illustratils in profile and error
 pages

---
 packages/hoppscotch-app/layouts/error.vue  |  6 ++++++
 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  | 22 +++++++++++++++++++++-
 32 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/layouts/error.vue b/packages/hoppscotch-app/layouts/error.vue
index 1c251a793..c4f9890f3 100644
--- a/packages/hoppscotch-app/layouts/error.vue
+++ b/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">
diff --git a/packages/hoppscotch-app/locales/af.json b/packages/hoppscotch-app/locales/af.json
index 20245b982..b09241787 100644
--- a/packages/hoppscotch-app/locales/af.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/ar.json b/packages/hoppscotch-app/locales/ar.json
index 6399d9ae0..2bc139664 100644
--- a/packages/hoppscotch-app/locales/ar.json
+++ b/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": "اسم الفريق فارغ",
diff --git a/packages/hoppscotch-app/locales/ca.json b/packages/hoppscotch-app/locales/ca.json
index 2b68407d2..1deb31f19 100644
--- a/packages/hoppscotch-app/locales/ca.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/cn.json b/packages/hoppscotch-app/locales/cn.json
index 1eedfcc8b..8f4c35005 100644
--- a/packages/hoppscotch-app/locales/cn.json
+++ b/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": "团队名称为空",
diff --git a/packages/hoppscotch-app/locales/cs.json b/packages/hoppscotch-app/locales/cs.json
index 451edb6d6..1f250b75d 100644
--- a/packages/hoppscotch-app/locales/cs.json
+++ b/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ý",
diff --git a/packages/hoppscotch-app/locales/da.json b/packages/hoppscotch-app/locales/da.json
index 914b3c473..3917716d0 100644
--- a/packages/hoppscotch-app/locales/da.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/de.json b/packages/hoppscotch-app/locales/de.json
index 00c9547b7..2fa62f4ce 100644
--- a/packages/hoppscotch-app/locales/de.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/el.json b/packages/hoppscotch-app/locales/el.json
index 27572c409..c2b47dc81 100644
--- a/packages/hoppscotch-app/locales/el.json
+++ b/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": "Το όνομα της ομάδας είναι κενό",
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 845f2c2f8..9717150ff 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/es.json b/packages/hoppscotch-app/locales/es.json
index 02853f950..1ccf91317 100644
--- a/packages/hoppscotch-app/locales/es.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/fi.json b/packages/hoppscotch-app/locales/fi.json
index 3766bb23c..a52f505c7 100644
--- a/packages/hoppscotch-app/locales/fi.json
+++ b/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ä",
diff --git a/packages/hoppscotch-app/locales/fr.json b/packages/hoppscotch-app/locales/fr.json
index 03e0e5adc..7cfff56e9 100644
--- a/packages/hoppscotch-app/locales/fr.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/he.json b/packages/hoppscotch-app/locales/he.json
index a21044ebf..d0910fb21 100644
--- a/packages/hoppscotch-app/locales/he.json
+++ b/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": "שם הקבוצה ריק",
diff --git a/packages/hoppscotch-app/locales/hu.json b/packages/hoppscotch-app/locales/hu.json
index efdb1d58f..a037d4dc7 100644
--- a/packages/hoppscotch-app/locales/hu.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/it.json b/packages/hoppscotch-app/locales/it.json
index 09ce58d72..f0dc73373 100644
--- a/packages/hoppscotch-app/locales/it.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/ja.json b/packages/hoppscotch-app/locales/ja.json
index a710e9164..76be84016 100644
--- a/packages/hoppscotch-app/locales/ja.json
+++ b/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": "チーム名が空です",
diff --git a/packages/hoppscotch-app/locales/ko.json b/packages/hoppscotch-app/locales/ko.json
index ec5811f74..f5e1bfe42 100644
--- a/packages/hoppscotch-app/locales/ko.json
+++ b/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": "팀 이름이 비어 있습니다.",
diff --git a/packages/hoppscotch-app/locales/nl.json b/packages/hoppscotch-app/locales/nl.json
index 54ff9844f..cf98fd3b8 100644
--- a/packages/hoppscotch-app/locales/nl.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/no.json b/packages/hoppscotch-app/locales/no.json
index 00d33e960..ae5b741b3 100644
--- a/packages/hoppscotch-app/locales/no.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/pl.json b/packages/hoppscotch-app/locales/pl.json
index aa5f47931..3a84c7a6a 100644
--- a/packages/hoppscotch-app/locales/pl.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/pt-br.json b/packages/hoppscotch-app/locales/pt-br.json
index 34962262d..2f4d4972c 100644
--- a/packages/hoppscotch-app/locales/pt-br.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/pt.json b/packages/hoppscotch-app/locales/pt.json
index 34962262d..2f4d4972c 100644
--- a/packages/hoppscotch-app/locales/pt.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/ro.json b/packages/hoppscotch-app/locales/ro.json
index 2f0028635..99cdfc1a1 100644
--- a/packages/hoppscotch-app/locales/ro.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/ru.json b/packages/hoppscotch-app/locales/ru.json
index 4ac600c79..f4d5cc681 100644
--- a/packages/hoppscotch-app/locales/ru.json
+++ b/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": "Название команды пусто",
diff --git a/packages/hoppscotch-app/locales/sr.json b/packages/hoppscotch-app/locales/sr.json
index e076d4bc2..f4b648df2 100644
--- a/packages/hoppscotch-app/locales/sr.json
+++ b/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": "Назив тима празан",
diff --git a/packages/hoppscotch-app/locales/sv.json b/packages/hoppscotch-app/locales/sv.json
index c1f08f7b7..6f4139788 100644
--- a/packages/hoppscotch-app/locales/sv.json
+++ b/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",
diff --git a/packages/hoppscotch-app/locales/tr.json b/packages/hoppscotch-app/locales/tr.json
index ea8a0b2d6..c49965fb9 100644
--- a/packages/hoppscotch-app/locales/tr.json
+++ b/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ş",
diff --git a/packages/hoppscotch-app/locales/tw.json b/packages/hoppscotch-app/locales/tw.json
index d0e42af0e..bd743bca1 100644
--- a/packages/hoppscotch-app/locales/tw.json
+++ b/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": "團隊名稱為空",
diff --git a/packages/hoppscotch-app/locales/uk.json b/packages/hoppscotch-app/locales/uk.json
index 3dbf639b2..b1d9a67a3 100644
--- a/packages/hoppscotch-app/locales/uk.json
+++ b/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": "Назва команди порожня",
diff --git a/packages/hoppscotch-app/locales/vi.json b/packages/hoppscotch-app/locales/vi.json
index 1733a1a1b..4018a22f7 100644
--- a/packages/hoppscotch-app/locales/vi.json
+++ b/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",
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index dc0ad3610..8c1f48bde 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/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>