Insert 404 page inside of MainLayout

Fix 404 error page styling

Fix unclickable links on 404 page issue

src/pages/Error404.vue

@@ -1,20 +1,26 @@
 <script lang="ts">
+import { DEFAULT_THEME } from 'src/config/BaseChain';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     name: 'Error404Page',
+    setup () {
+        return {
+            secondary: DEFAULT_THEME.secondary,
+        };
+    },
 });
 </script>
 
 <template>
-<div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
-    <div>
+<div class="text-primary text-center q-pa-md flex flex-center q-my-lg">
+    <div class="message-404">
         <div class="text-xl">404</div>
         <div class="text-h2">Oops. Nothing here...</div>
         <q-btn
             class="q-mt-xl"
             color="white"
-            text-color="blue"
+            :text-color="secondary"
             unelevated
             to="/"
             label="Go Home"
@@ -23,3 +29,8 @@ export default defineComponent({
     </div>
 </div>
 </template>
+
+<style lang="sass">
+  .message-404
+    color: var(--q-secondary)
+</style>

src/router/routes.ts

@@ -92,7 +92,8 @@ const routes: RouteRecordRaw[] = [
     // but you can also remove it
     {
         path: '/:catchAll(.*)*',
-        component: () => import('pages/Error404.vue'),
+        component: () => import('layouts/MainLayout.vue'),
+        children: [{ path: '', component: () => import('pages/Error404.vue') }],
     },
 ];