diff --git a/src/components/LoadError.tsx b/src/components/LoadError.tsx index 50998e7..7e1d229 100644 --- 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 ( -
-
{operation} failed
-
{formattedError}
- +
+
+
+
{operation} failed
+
{formattedError}
+ +
); } diff --git a/src/components/Loading.module.css b/src/components/Loading.module.css index d00504e..7b8a7e7 100644 --- 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; }