From 36737490a8712f0f27f5c44a079b8342305a5924 Mon Sep 17 00:00:00 2001
From: Jelle van Snik <jellevs@gmail.com>
Date: Fri, 18 Feb 2022 14:51:30 +0100
Subject: [PATCH] better looking error boundary

---
 README.md                               |  4 ++--
 src/components/layout/ErrorBoundary.tsx | 15 +++++++++------
 src/views/SearchView.tsx                |  1 +
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 92ea6316..98c11808 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ Check out [this project's issues](https://github.com/JamesHawkinss/movie-web/iss
 ## Rewrite TODO's
 
 - [x] Better provider errors (only fail if all failed, show individual fails somewhere)
-- [ ] Better search suffix view
+- [x] Better search suffix view
 - [ ] Add back link of results view
 - [x] Add results list end
 - [ ] Add Brand tag top left
@@ -42,6 +42,6 @@ Check out [this project's issues](https://github.com/JamesHawkinss/movie-web/iss
 - [ ] Store watched percentage
 - [ ] Implement movie + series view
 - [ ] Add provider stream method
-- [ ] Better looking error boundary
+- [x] Better looking error boundary
 - [ ] sort search results so they aren't sorted by provider
 - [ ] Get rid of react warnings
diff --git a/src/components/layout/ErrorBoundary.tsx b/src/components/layout/ErrorBoundary.tsx
index 5af355e4..fcb386d0 100644
--- a/src/components/layout/ErrorBoundary.tsx
+++ b/src/components/layout/ErrorBoundary.tsx
@@ -1,3 +1,5 @@
+import { IconPatch } from "components/Buttons/IconPatch";
+import { Icons } from "components/Icon";
 import { Title } from "components/Text/Title";
 import { Component } from "react";
 
@@ -42,20 +44,21 @@ export class ErrorBoundary extends Component<{}, ErrorBoundaryState> {
 
     // TODO make pretty
     return (
-      <div>
-        <div>
+      <div className="flex min-h-screen w-full flex-col items-center justify-center px-4 py-12">
+        <div className="flex flex-col items-center justify-start text-center">
+          <IconPatch icon={Icons.WARNING} className="mb-6 text-red-400" />
           <Title>Whoops, it broke</Title>
-          <p>
+          <p className="my-6 max-w-lg">
             The app encountered an error and wasn't able to recover, please
             report it to the discord server or on GitHub.
           </p>
         </div>
         {this.state.error ? (
-          <div>
-            <p className="txt-white">
+          <div className="bg-denim-300 mt-12 max-w-4xl rounded px-6 py-4">
+            <p className="mb-2 break-words font-bold text-white">
               {this.state.error.name} - {this.state.error.description}
             </p>
-            <p>{this.state.error.path}</p>
+            <p className="break-words">{this.state.error.path}</p>
           </div>
         ) : null}
       </div>
diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx
index 3c75e594..8d345c1f 100644
--- a/src/views/SearchView.tsx
+++ b/src/views/SearchView.tsx
@@ -19,6 +19,7 @@ import { useLoading } from "hooks/useLoading";
 import { IconPatch } from "components/Buttons/IconPatch";
 
 function SearchLoading() {
+  throw new Error("testing");
   return <Loading className="my-12" text="Fetching your favourite shows..." />;
 }