Added styles for error pages (#18)

Author: gabesullice

src/app.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import LandingPage from "./page/landing-page/landing-page.jsx";
 import BasicPage from "./page/basic-page/basic-page.jsx";
+import ProblemPages from "./page/system/problem-pages.jsx";
 
 /**
  * PageTypes maps server resource types to the component that should render them.
@@ -20,7 +21,18 @@ const PageTypes = {
  */
 const App = ({ resource, problem }) => {
   if (problem) {
-    return (<div><h1>Error</h1><p>An unexpected problem occurred.</p></div>);
+    const statusCode = problem.response.status;
+    const phrases = {
+      403: 'Sign in or get out!',
+      404: "Oops, this is not the page you're looking for.",
+    };
+    const text = phrases?.[statusCode] || 'Something went terribly, terribly wrong.';
+    return (
+      <ProblemPages
+        status={statusCode}
+        text={text}
+      />
+    );
   }
   // Extract the type of the current resource.
   const { type } = resource;

src/page/system/problem-pages.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import './problem-pages.pcss';
+
+const ProblemPages = ({status, text}) => {
+  return (
+    <div className={"main-content error-pages page-" + status }>
+      <div className="content-wrapper">
+        <div className="icon"></div>
+        <h2 className={'page-title'}>{status}</h2>
+        <p className={'text'}>{text}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ProblemPages;

src/page/system/problem-pages.pcss

@@ -0,0 +1,76 @@
+.main-content.error-pages {
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: '';
+    position: absolute;
+    background-image: url("../../static/images/intro-background.svg");
+    padding: 140px 0;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: top;
+    animation: 2.5s fadeInUp;
+    width: 100%;
+    height: 100%;
+    top: calc(100% - 300px);
+    z-index: -1;
+
+  }
+
+  &.page-403 {
+    .content-wrapper {
+      .icon {
+        mask-image: url("./../../static/images/lock.svg");
+      }
+    }
+  }
+
+  &.page-404 {
+    .content-wrapper {
+      .icon {
+        mask-image: url("./../../static/images/not-found.svg");
+        mask-size: 400px;
+      }
+    }
+  }
+
+  &.page-500 {
+    .content-wrapper {
+      .icon {
+        mask-image: url("./../../static/images/error.svg");
+      }
+    }
+  }
+
+  .content-wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+    animation: 2s fadeInUp;
+
+    .icon {
+      display: block;
+      width: 400px;
+      height: 240px;
+      background: var(--color-primary);
+      mask-repeat: no-repeat;
+      mask-size: contain;
+      mask-position: center;
+    }
+
+    h2 {
+      margin: 0;
+      font-size: 72px;
+    }
+
+    p.text {
+      margin: 0;
+      font-size: 24px;
+    }
+  }
+}