updated error pages

resources/css/app.scss

@@ -69,38 +69,29 @@ code {
 /* Page Errors */
 .sm-page-error {
     display: flex;
-    flex-direction: row;
-    flex: 1;
-    margin-top: map-get($spacer, 5);
-    min-height: 50vh;
+    flex-direction: column;
 
-    .image {
-        flex: 1;
-        height: 100%;
-        width: 100%;
-        background-position: center;
-        background-size: contain;
-        background-repeat: no-repeat;
-        margin-left: map-get($spacer, 2);
-        margin-right: map-get($spacer, 2);
+    .sm-error-number {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 30vw;
+        font-weight: 600;
+        color: #295b7e;
+
+        img {
+            height: 25vw;
+            margin: 0 0.5rem 0 1rem;
+        }
     }
 
-    .content {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        justify-content: center;
-        margin-left: map-get($spacer, 2);
-        margin-right: map-get($spacer, 2);
-        margin-bottom: 0;
+    .sm-error-content {
+        text-align: center;
+        font-size: 120%;
 
-        h1 {
-            text-align: left;
-            margin-bottom: map-get($spacer, 1);
-        }
-
-        p {
-            margin: 0;
+        h2 {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
         }
     }
 }

resources/js/components/errors/Forbidden.vue

@@ -1,19 +1,28 @@
 <template>
     <SMPage no-breadcrumbs>
-        <div class="sm-page-error sm-error-forbidden">
-            <div class="image"></div>
-            <div class="content">
-                <h1>The cat says no!</h1>
-                <p>You do not have the needed access to see this page</p>
+        <div class="sm-page-error sm-error-not-found">
+            <div class="sm-error-number">
+                4<img src="/img/sad-monster.png" />3
+            </div>
+            <div class="sm-error-content">
+                <h2>Ooops!</h2>
+                <p>This page is not for you to view!</p>
+                <SMButton label="Go Back" @click="handleClick" />
             </div>
         </div>
     </SMPage>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SMButton from "../SMButton.vue";
+import { useRouter } from "vue-router";
 
-<style lang="scss">
-.sm-page-error.sm-error-forbidden .image {
-    background-image: url("/img/403.jpg");
-}
-</style>
+const router = useRouter();
+
+/**
+ * Handle user clicking back/home button
+ */
+const handleClick = () => {
+    router.go(-1);
+};
+</script>

resources/js/components/errors/Internal.vue

@@ -1,22 +1,31 @@
 <template>
     <SMPage no-breadcrumbs>
-        <div class="sm-page-error sm-error-internal">
-            <div class="image"></div>
-            <div class="content">
-                <h1>The cat has broken something</h1>
+        <div class="sm-page-error sm-error-not-found">
+            <div class="sm-error-number">
+                5<img src="/img/sad-monster.png" />0
+            </div>
+            <div class="sm-error-content">
+                <h2>Ooops!</h2>
                 <p>
                     We are working to fix that what was broken. Please try again
-                    later.
+                    later!
                 </p>
+                <SMButton label="Go Back" @click="handleClick" />
             </div>
         </div>
     </SMPage>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SMButton from "../SMButton.vue";
+import { useRouter } from "vue-router";
 
-<style lang="scss">
-.sm-page-error.sm-error-internal .image {
-    background-image: url("/img/500.jpg");
-}
-</style>
+const router = useRouter();
+
+/**
+ * Handle user clicking back/home button
+ */
+const handleClick = () => {
+    router.go(-1);
+};
+</script>

resources/js/components/errors/NotFound.vue

@@ -1,19 +1,28 @@
 <template>
     <SMPage no-breadcrumbs>
         <div class="sm-page-error sm-error-not-found">
-            <div class="image"></div>
-            <div class="content">
-                <h1>Opps</h1>
-                <p>The page you asked for was not found</p>
+            <div class="sm-error-number">
+                4<img src="/img/sad-monster.png" />4
+            </div>
+            <div class="sm-error-content">
+                <h2>Ooops!</h2>
+                <p>The page you are looking for does not exist!</p>
+                <SMButton label="Go Back" @click="handleClick" />
             </div>
         </div>
     </SMPage>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import SMButton from "../SMButton.vue";
+import { useRouter } from "vue-router";
 
-<style lang="scss">
-.sm-page-error.sm-error-not-found .image {
-    background-image: url("/img/404.jpg");
-}
-</style>
+const router = useRouter();
+
+/**
+ * Handle user clicking back/home button
+ */
+const handleClick = () => {
+    router.go(-1);
+};
+</script>