From 311e57403504461bfd139e87c2c6f3444f543a4d Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 9 Nov 2022 15:21:00 -0800
Subject: nicer error page

---
 src/components/Invoice.svelte                       |  2 --
 src/routes/(app)/+error.svelte                      | 21 ++++++++++++++++++---
 .../(app)/[username]/dashboard/+page.server.js      |  4 +++-
 3 files changed, 21 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
index d68824a8..5955bcc0 100644
--- a/src/components/Invoice.svelte
+++ b/src/components/Invoice.svelte
@@ -3,8 +3,6 @@
 	import { fly } from 'svelte/transition';
 	import { Avatar, Icon } from '$comp';
 	import { invoice } from '$lib/store';
-
-	export let user;
 </script>
 
 {#if $invoice}
diff --git a/src/routes/(app)/+error.svelte b/src/routes/(app)/+error.svelte
index d561b111..dddc83a7 100644
--- a/src/routes/(app)/+error.svelte
+++ b/src/routes/(app)/+error.svelte
@@ -6,21 +6,36 @@
 
 	export let data;
 	let { user } = data;
+
+	$: message = $page.error.message;
+	$: if (message.startsWith('Internal')) message = 'Something went wrong';
 </script>
 
 {#if $page.error.message.includes('not found') || $page.status === 404}
 	<PageNotFound />
 {:else}
-	<div class="container px-4 max-w-md mx-auto mt-20 text-center">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-8">
+	<div class="container px-4 max-w-lg mx-auto mt-20 space-y-5">
+		<div class="w-[243px] mx-auto mb-10">
+			<a href="/">
+				<Icon icon="logo" />
+			</a>
+		</div>
+
+	<div class="flex justify-center items-center">
+		<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
+		<h1 class="text-3xl md:text-4xl font-semibold">
 			{$t('error.header')}
 		</h1>
 
-		<p class="px-1 break-all mb-8">{$page.error.message}</p>
+		<p class="text-secondary">
+    {message}. If the problem persists, please <a href="/support" class="underline">let us know.</a>
+		</p>
 
 		<button
 			class="rounded-full bg-black text-white py-2 px-5 font-bold hover:opacity-80 mb-2"
 			on:click={back}>Back</button
 		>
+    </div>
+    </div>
 	</div>
 {/if}
diff --git a/src/routes/(app)/[username]/dashboard/+page.server.js b/src/routes/(app)/[username]/dashboard/+page.server.js
index b6206324..46058038 100644
--- a/src/routes/(app)/[username]/dashboard/+page.server.js
+++ b/src/routes/(app)/[username]/dashboard/+page.server.js
@@ -1 +1,3 @@
-export const load = ({ parent }) => parent();
+export const load = ({ parent }) => {
+  throw new Error("BOOM")
+} 
-- 
cgit v1.2.3