From 85354922986226d99181a4463f52cfba8ba6be58 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Fri, 16 Jun 2023 22:12:31 +0100
Subject: [PATCH] Adjusting error page

---
 src/app.css                      |  1 +
 src/lib/navigation/header.svelte |  2 +-
 src/lib/navigation/nav.svelte    |  2 +-
 src/lib/stores/quick-links.js    |  2 +-
 src/routes/+error.svelte         | 24 ++++++++++++++++++++++++
 svelte.config.js                 |  2 +-
 6 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 src/routes/+error.svelte

diff --git a/src/app.css b/src/app.css
index 4d25d56..9571ac8 100644
--- a/src/app.css
+++ b/src/app.css
@@ -38,6 +38,7 @@
     --second-bg-color: #2b343c; /* Use as first arg in radial gradient */
     --accent-color: #007979;
     --overlay-color: #3c6f79de;
+    --overlay-color-solid: #3c6f79;
     --main-text-color: #00b7b7;
     --second-text-color: #0afdfd;
     --note-text-color: #9de7ff;
diff --git a/src/lib/navigation/header.svelte b/src/lib/navigation/header.svelte
index 8f61b5c..687f221 100644
--- a/src/lib/navigation/header.svelte
+++ b/src/lib/navigation/header.svelte
@@ -16,7 +16,7 @@
 </div>
 <style>
 .headerBar {
-    background: var(--overlay-color);
+    background: var(--overlay-color-solid);
     position: fixed;
     top: 0; left: 0;
     width: 100%;
diff --git a/src/lib/navigation/nav.svelte b/src/lib/navigation/nav.svelte
index b442c82..898c65d 100644
--- a/src/lib/navigation/nav.svelte
+++ b/src/lib/navigation/nav.svelte
@@ -37,7 +37,7 @@
         left: 0;
         width: 100%;
         height: 50px;
-        background-color: rgba(0, 0, 0, 0.123);
+        background-color: rgb(54, 54, 54);
     }
 
    footer a {
diff --git a/src/lib/stores/quick-links.js b/src/lib/stores/quick-links.js
index 439735d..aebe416 100644
--- a/src/lib/stores/quick-links.js
+++ b/src/lib/stores/quick-links.js
@@ -10,7 +10,7 @@ function fromLocalStorage(storageKey, fallback) {
         if (storedValue !== 'undefined' && storedValue !== null) {
             return (typeof fallback === 'object')
             ? JSON.parse(storedValue)
-           : storedValue
+            : storedValue
         }
     }
     return fallback
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..03a18d6
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,24 @@
+<script>
+    import { page } from '$app/stores';
+	import Header from '$lib/navigation/header.svelte';
+    import Nav from '$lib/navigation/nav.svelte';
+    const title = "OwlBoard - Error"
+</script>
+
+<Header {title} />
+
+<h1>{$page.status}: {$page?.error?.message}</h1>
+
+{#if $page.status === 404}
+<p>This is not the page you're looking for.</p>
+<p>The page you are looking for doesn't exist, use the tabs below to find another page.</p>
+{:else if $page.status === 500}
+<p>Something went wrong loading the app.<br>
+    Try going <a href="/">home</a> and try again.</p>
+<p>If the problem persists, you can report an issue from the 'More' menu.</p>
+{:else}
+<p>Not sure what went wrong, please try again later or report an issue from
+    the 'More' menu.</p>
+{/if}
+
+<Nav />
\ No newline at end of file
diff --git a/svelte.config.js b/svelte.config.js
index d3dc24c..0a3eae5 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -5,7 +5,7 @@ export default {
         adapter: adapter({
             pages: 'build',
             assets: 'build',
-            fallback: undefined,
+            fallback: '/',
             precompress: true,
             strict: true
         })