explorer: Refactor error state page

dusk-network · Jun 26, 2024 · fe511f1 · fe511f1
1 parent 8ce38ce
commit fe511f1
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 26 deletions.
diff --git a/explorer/src/routes/+error.svelte b/explorer/src/routes/+error.svelte
@@ -2,22 +2,32 @@
 
 <script>
   import { page } from "$app/stores";
-
+  import { Card } from "$lib/dusk/components";
   const { error, status } = $page;
 </script>
 
 <section class="error-message">
-  <h2>Error - {status}</h2>
-  <p>{error?.message ?? ""}</p>
+  <Card className="error-message__card">
+    <p class="error-message__card-content">
+      Error {status}<br />
+      {error?.message ?? ""}
+    </p>
+  </Card>
 </section>
 
 <style lang="postcss">
   .error-message {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
     width: 100%;
-    height: 100%;
+  }
+
+  :global(.error-message__card) {
+    border: var(--control-border-size) solid var(--error-color);
+    width: 100%;
+  }
+
+  :global(.error-message__card-content) {
+    font-size: 1.75rem;
   }
 </style>
diff --git a/explorer/src/routes/__tests__/__snapshots__/error.spec.js.snap b/explorer/src/routes/__tests__/__snapshots__/error.spec.js.snap
@@ -3,33 +3,49 @@
 exports[`Error page > should be able to render the error page even without an error 1`] = `
 <body>
   <section
-    class="error-message svelte-1wuvb8w"
+    class="error-message svelte-xa69t0"
   >
-    <h2>
-      Error - 
-      200
-    </h2>
-     
-    <p>
-      
-    </p>
+    <div
+      class="dusk-card error-message__card"
+    >
+       
+      <p
+        class="error-message__card-content"
+      >
+        Error 
+        200
+        <br />
+         
+        
+      </p>
+       
+    </div>
+    
   </section>
 </body>
 `;
 
 exports[`Error page > should render the error page 1`] = `
 <body>
   <section
-    class="error-message svelte-1wuvb8w"
+    class="error-message svelte-xa69t0"
   >
-    <h2>
-      Error - 
-      500
-    </h2>
-     
-    <p>
-      some error message
-    </p>
+    <div
+      class="dusk-card error-message__card"
+    >
+       
+      <p
+        class="error-message__card-content"
+      >
+        Error 
+        500
+        <br />
+         
+        some error message
+      </p>
+       
+    </div>
+    
   </section>
 </body>
 `;
diff --git a/explorer/src/style/main.css b/explorer/src/style/main.css
@@ -55,9 +55,16 @@ html {
   letter-spacing: 0.06125rem;
 }
 
-main {
+#app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+#app-container > main {
+  flex: 1;
   padding: 1.25rem 0;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 svg {