feat: apply theme to error page

edwardzjl · Jan 4, 2025 · d7dfc81 · d7dfc81
1 parent b15bdde
commit d7dfc81
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/web/src/routes/error/index.jsx b/web/src/routes/error/index.jsx
@@ -1,9 +1,14 @@
 import styles from "./index.module.css";
 
+import { useContext } from "react";
 import { useRouteError, useNavigate } from "react-router-dom";
 
+import { ThemeContext } from "@/contexts/theme";
+
 export default function ErrorPage() {
     const navigate = useNavigate();
+    const { theme } = useContext(ThemeContext);
+    console.log(theme)
     const error = useRouteError();
     console.error(error);
 
@@ -12,7 +17,7 @@ export default function ErrorPage() {
     };
 
     return (
-        <div className={styles.container}>
+        <div className={`${styles.container} theme-${theme}`}>
             <h1 className={styles.errorCode}>
                 <span>{error.status} {error.statusText || error.message}</span>
             </h1>

diff --git a/web/src/routes/error/index.module.css b/web/src/routes/error/index.module.css
@@ -4,9 +4,9 @@
     align-items: center;
     justify-content: center;
     text-align: center;
-    min-height: 100vh;
-    margin: 0;
-    padding: 20px;
+    background-color: var(--bg-primary);
+    inset: 0;
+    position: absolute;
 }
 
 .errorCode {
@@ -18,13 +18,13 @@
 
 .heading {
     font-size: 2rem;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 1.5rem;
 }
 
 .message {
     font-size: 1.1rem;
-    color: #555;
+    color: var(--text-secondary);
     margin-bottom: 2rem;
 }