update crash style

packages/app/src/components/Crash/index.jsx

@@ -8,7 +8,7 @@ export const CrashComponent = (props) => {
 
     return <Result
         status="error"
-        title="Crash"
+        title="Well, we're sorry! The application has a fatal crash."
         subTitle={crash.message}
         extra={[
             <Button type="primary" key="reload" onClick={() => window.location.reload()}>
@@ -17,7 +17,7 @@ export const CrashComponent = (props) => {
         ]}
     >
         <div>
-            <code>{crash.error}</code>
+            <code>{crash.details}</code>
         </div>
     </Result>
 }
@@ -30,5 +30,4 @@ export const CrashWrapper = (props) => {
     </div>
 }
 
-
 export default CrashComponent

packages/app/src/components/Crash/index.less

@@ -3,17 +3,59 @@
 
     width: 100vw;
     height: 100vh;
-    
+
     top: 0;
     left: 0;
 
     z-index: 10000;
 
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(10px);
 
+    color: #fff;
+
+    .ant-result,
+    .ant-result-title,
+    .ant-result-subtitle,
+    .ant-result-extra {
+        color: #fff;
+    }
+
+    .ant-result-content {
+        background-color: rgba(0, 0, 0, 0.7) !important;
+    }
+
+    code {
+        color: #fff;
+        font-family: "DM Mono", monospace;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    span,
+    pre {
+        color: #fff;
+    }
+
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
+    animation: opacity-fade-in 0.3s ease-in-out;
+}
+
+@keyframes opacity-fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }