better errors

AppliedEnergistics · Jul 3, 2023 · 49bd7c7 · 49bd7c7
1 parent 23522d4
commit 49bd7c7
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/src/components/LoadError.tsx b/src/components/LoadError.tsx
@@ -1,5 +1,6 @@
 import { ReactNode, useMemo } from "react";
 import { LoadResultError } from "../data/useLoadEffect.ts";
+import css from "./Loading.module.css";
 
 export type LoadErrorProps = {
   operation: string;
@@ -19,10 +20,13 @@ function LoadError({ operation, result: { error, retry } }: LoadErrorProps) {
   const formattedError = useMemo(() => formatError(error), [error]);
 
   return (
-    <div>
-      <div>{operation} failed</div>
-      <div>{formattedError}</div>
-      <button onClick={() => retry()}>Retry</button>
+    <div className={css.container}>
+      <div className={css.indicator + " " + css.errorIndicator} />
+      <div className={css.message}>
+        <div className={css.errorMessage}>{operation} failed</div>
+        <div className={css.errorDetails}>{formattedError}</div>
+        <button onClick={() => retry()}>Retry</button>
+      </div>
     </div>
   );
 }

diff --git a/src/components/Loading.module.css b/src/components/Loading.module.css
@@ -15,6 +15,8 @@
     background-size: contain;
     image-rendering: smooth;
     position: relative;
+
+    filter: drop-shadow(11px 11px 4px rgba(0, 0, 0, 0.5));
 }
 
 .indicator::after {
@@ -35,6 +37,11 @@
     animation-iteration-count: infinite;
 }
 
+.errorIndicator.indicator::after {
+    animation: unset;
+    background-color: crimson;
+}
+
 @keyframes controller-lights {
     100%, 0% {
         background-color: #457BFA;
@@ -77,4 +84,19 @@
 .message {
     margin-top: 1em;
     color: #666666;
+    max-width: 800px;
+    text-align: center;
+    border-radius: 15px;
+    background-color: rgb(0, 0, 0, 0.5);
+    padding: 20px;
+}
+
+.errorMessage {
+    color: crimson;
+    font-weight: bold;
+    margin-bottom: 0.5em;
+}
+
+.errorDetails {
+    margin-bottom: 0.5em;
 }