style: 🎨 style error screen

NUXT/layouts/error.vue

@@ -1,26 +1,24 @@
 <template>
   <v-app>
-    <center>
-      <v-icon size="100">mdi-alert-circle</v-icon>
-      <h1
-        class="background--text"
-        :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
-      >
-        An error occured!
-      </h1>
-      <v-btn to="/">Reload Application</v-btn>
-      <v-btn to="/mods/logs">Show Logs</v-btn>
+    <center style="padding: 10% 0;">
+      <v-icon size="100">mdi-heart-broken</v-icon>
+      <h1>Something went wrong</h1>
+      <v-btn rounded to="/" color="primary darken-2"><v-icon>mdi-restart</v-icon>Restart</v-btn>
+      <v-btn rounded @click="exit"><v-icon>mdi-close</v-icon>Exit</v-btn>
 
       <div style="margin-top: 5em; color: #999; font-size: 0.75em">
-        <div style="font-size: 1.4em">Error Information</div>
-        <div>Code: {{ error.statusCode }}</div>
+        <div style="font-size: 1.4em">Crash Information</div>
+        <div>Reason: {{ error.message }}</div>
         <div>Path: {{ $route.fullPath }}</div>
+        <div>Code: {{ error.statusCode }}</div>
       </div>
     </center>
   </v-app>
 </template>
 
 <script>
+import { App } from '@capacitor/app';
+
 export default {
   layout: "empty",
   props: {
@@ -29,5 +27,10 @@ export default {
       default: null,
     },
   },
+  method: {
+    exit() {
+      App.exitApp()
+    }
+  }
 };
 </script>