From 3b842e960e6827f3b9572d63d96b972062c4b6a9 Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Mon, 7 Feb 2022 20:39:52 +0100
Subject: [PATCH] not found pages improved

---
 src/components/icons/IconCloudQuestion.vue | 8 ++++++++
 src/components/icons/index.ts              | 1 +
 src/config/locales/de-DE.json              | 2 +-
 src/config/locales/en-US.json              | 2 +-
 src/views/NotFound.vue                     | 8 +++++++-
 5 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/components/icons/IconCloudQuestion.vue

diff --git a/src/components/icons/IconCloudQuestion.vue b/src/components/icons/IconCloudQuestion.vue
new file mode 100644
index 0000000..c6ce08c
--- /dev/null
+++ b/src/components/icons/IconCloudQuestion.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M19.35 10.03A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.03A6.004 6.004 0 0 0 0 14a6 6 0 0 0 6 6h13a5 5 0 0 0 5-5c0-2.64-2.05-4.78-4.65-4.97M13 17h-2v-2h2v2m1.8-5.18c-.3.39-.67.68-1.13.93c-.26.16-.43.32-.52.51A1.7 1.7 0 0 0 13 14h-2c0-.55.11-.92.3-1.18c.2-.26.55-.57 1.07-.91c.26-.16.47-.35.63-.59c.15-.23.23-.51.23-.82c0-.32-.09-.56-.27-.74c-.18-.2-.46-.29-.76-.29c-.27 0-.49.08-.7.23c-.15.15-.25.38-.25.69H9.28c-.05-.75.22-1.39.78-1.8C10.6 8.2 11.31 8 12.2 8c.94 0 1.69.23 2.23.68c.54.45.81 1.07.81 1.82c0 .5-.15.91-.44 1.32z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index f01f74f..07964c1 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -6,3 +6,4 @@ export { default as IconSpinner } from './IconSpinner.vue'
 export { default as IconNoGift } from './IconNoGift.vue'
 export { default as IconLightDark } from './IconLightDark.vue'
 export { default as IconMenu } from './IconMenu.vue'
+export { default as IconCloudQuestion } from './IconCloudQuestion.vue'
diff --git a/src/config/locales/de-DE.json b/src/config/locales/de-DE.json
index 3f74f40..c827653 100644
--- a/src/config/locales/de-DE.json
+++ b/src/config/locales/de-DE.json
@@ -9,7 +9,7 @@
   },
   "errors": {
     "not-found": {
-      "text": "Ups, es sieht so aus, als ob die Seite, die du suchst, nicht existiert."
+      "text": "Ups, die aufgerufene Seite existiert nicht."
     },
     "generic": {
       "text": "Es ist ein Fehler aufgetreten..."
diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json
index 38a3a0d..5a332f8 100644
--- a/src/config/locales/en-US.json
+++ b/src/config/locales/en-US.json
@@ -9,7 +9,7 @@
   },
   "errors": {
     "not-found": {
-      "text": "Oops, it looks like the page you're looking for doesn't exist."
+      "text": "Oops, the requested page does not exist."
     },
     "generic": {
       "text": "An error has occurred..."
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 9886ca4..8f9e150 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,7 +1,13 @@
 <template>
-  <h1>{{ t('errors.not-found.text') }}</h1>
+  <div
+    class="mt-20 flex flex-wrap flex-col sm:flex-row items-center sm:space-x-2 justify-center text-center sm:text-left text-xl"
+  >
+    <IconCloudQuestion class="h-12 w-12" />
+    <h1>{{ t('errors.not-found.text') }}</h1>
+  </div>
 </template>
 <script setup lang="ts">
+import { IconCloudQuestion } from '@/components/icons'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
 </script>