better looking error boundary

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

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>

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..." />;
 }