Adjust the rendering of the error page

zM-ax · zM-ax · commit 385a5f97cceb · 2021-04-02T09:40:20.000+03:00
diff --git a/React JS Workshop/origami/src/errorBoundary.js b/React JS Workshop/origami/src/errorBoundary.js
@@ -1,4 +1,6 @@
 import React from "react";
+import image from './images/404.png'
+import styles from './errorBoundary.module.css'
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -17,9 +19,13 @@ class ErrorBoundary extends React.Component {
 
   render() {
     if (this.state.isThereAnError) {
-      return <div>{"Something went wrong (error boundary)"}</div>;
+      return <div>
+        <div className={styles.textContainer}>The page you're looking for is missing. Are you missing something? </div>;
+        <div className={styles.image}>
+          <img src={image} className={styles.image}></img>
+        </div>
+      </div>
     }
-
     return this.props.children;
   }
 }
diff --git a/React JS Workshop/origami/src/errorBoundary.module.css b/React JS Workshop/origami/src/errorBoundary.module.css
@@ -0,0 +1,10 @@
+.textContainer{
+    text-align: center;
+    font-size: 20px;
+    text-shadow: 2px 2px 2px rgba(136, 184, 156, 0.66);
+}
+
+.image{
+    text-align: center;
+    font-size: large;
+}
diff --git a/React JS Workshop/origami/src/pages/error/error.js b/React JS Workshop/origami/src/pages/error/error.js
@@ -1,5 +1,10 @@
 import React from "react";
+import image from '../../images/404.png'
 
-const ErrorPage = () => <div>Something went wrong (from Error Page) </div>;
-
+const ErrorPage = () => {
+    <div>
+        <div>The page you're looking for is missing. Are you missing something? </div>;
+        <img src ={image}></img>
+    </div>
+}
 export default ErrorPage;
