From 05e8b2a982273f6d28bea8897caa2c64813d5dc0 Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Tue, 15 Nov 2022 13:38:30 +0100
Subject: [PATCH] feat(notFound): updated not found page - closes #4719

---
 src/i18n/en/index.js   |  1 +
 src/i18n/es/index.js   |  1 +
 src/pages/NotFound.vue | 39 +++++++++++++++++++++++++++++----------
 src/router/routes.js   | 10 +++++-----
 4 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 857df8d89..229a5b995 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -19,6 +19,7 @@ export default {
         remove: 'Remove',
         reset: 'Reset',
         cancel: 'Cancel',
+        back: 'Back',
         yes: 'Yes',
         no: 'No',
         noChanges: 'No changes to save',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 57ed01b0d..c8dff9d30 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -19,6 +19,7 @@ export default {
         remove: 'Eliminar',
         reset: 'Restaurar',
         cancel: 'Cancelar',
+        back: 'Volver',
         yes: 'Si',
         no: 'No',
         noChanges: 'Sin cambios que guardar',
diff --git a/src/pages/NotFound.vue b/src/pages/NotFound.vue
index 65b91a3b8..98ed76297 100644
--- a/src/pages/NotFound.vue
+++ b/src/pages/NotFound.vue
@@ -1,20 +1,39 @@
-<template>
-    <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
-        <div>
-            <div style="font-size: 30vh">404</div>
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
-            <div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
+const router = useRouter();
+const { t } = useI18n();
+</script>
+<template>
+    <div class="text-center q-pa-md flex flex-center">
+        <div>
+            <div class="text-grey-5" style="opacity: 0.4; font-size: 30vh">
+                <q-icon name="vn:claims" />
+            </div>
+
+            <div class="text-h2 text-grey-5" style="opacity: 0.4">{{ t('notFound') }}</div>
 
             <q-btn
+                @click="router.go(-1)"
+                :label="t('globals.back')"
                 class="q-mt-xl"
-                color="white"
-                text-color="blue"
+                color="primary"
                 unelevated
-                to="/"
-                label="Go Home"
+                outline
                 no-caps
             />
         </div>
     </div>
 </template>
-
+<style lang="scss" scoped></style>
+<i18n>
+{
+    'en': {
+        'notFound': 'Oops. Nothing here...'
+    },
+    'es': {
+        'notFound': 'Vaya. Nada por aquĆ­...'
+    }
+}
+</i18n>
diff --git a/src/router/routes.js b/src/router/routes.js
index db21227a5..a7261379f 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -25,12 +25,12 @@ const routes = [
             customer,
             ticket,
             claim,
+            {
+                path: '/:pathMatch(.*)*',
+                name: 'NotFound',
+                component: () => import('../pages/NotFound.vue'),
+            }
         ],
-    },
-    {
-        path: '/:pathMatch(.*)*',
-        name: 'NotFound',
-        component: () => import('../pages/NotFound.vue'),
     }
 ];