Styling error page

atst/routes/errors.py

@@ -11,6 +11,7 @@ from atst.domain.invitations import (
 from atst.domain.authnid.crl import CRLInvalidException
 from atst.domain.portfolios import PortfolioError
 from atst.utils.flash import formatted_flash as flash
+from atst.utils.localization import translate
 
 NO_NOTIFY_STATUS_CODES = set([404, 401])
 
@@ -25,10 +26,25 @@ def notify(e, message, code):
         current_app.notification_sender.send(message)
 
 
-def handle_error(e, message="Not Found", code=404):
+def handle_error(
+    e,
+    message=translate("errors.not_found"),
+    code=404,
+    submessage=translate("errors.not_found_sub"),
+    more_info=translate("common.lorem"),
+):
     log_error(e)
     notify(e, message, code)
-    return render_template("error.html", message=message), code
+    return (
+        render_template(
+            "error.html",
+            message=message,
+            code=code,
+            submessage=submessage,
+            more_info=more_info,
+        ),
+        code,
+    )
 
 
 def make_error_pages(app):

styles/atat.scss

@@ -38,6 +38,7 @@
 @import "components/usa_banner";
 @import "components/dod_login_notice.scss";
 @import "components/sticky_cta.scss";
+@import "components/error_page.scss";
 
 @import "sections/login";
 @import "sections/home";

styles/components/_error_page.scss

@@ -0,0 +1,33 @@
+.error-page {
+  max-width: 475px;
+  margin: auto;
+
+  .panel__heading {
+    text-align: center;
+    padding: $gap 0;
+
+    hr {
+      width: 100%;
+      border: 1px solid $color-red;
+    }
+
+    h1 {
+      margin-bottom: $gap;
+    }
+  }
+
+  .panel__body {
+    padding: $gap * 2;
+    margin: 0;
+  }
+
+  .icon {
+    @include icon-size(60);
+  }
+
+  hr {
+    margin-bottom: $gap * 4;
+    width: 80%;
+    border: 0.5px solid $color-gray-light;
+  }
+}

templates/error.html

@@ -1,19 +1,25 @@
 {% extends "error_base.html" %}
 
+{% from "components/icon.html" import Icon %}
+
 {% block content %}
 
-<main class="usa-section usa-content">
+<main class="usa-section usa-content error-page">
-
+    <div class="panel__heading">
-{% if message %}
+      {{ Icon('cloud', classes="icon--red icon--large")}}
-    <h1>{{ message }}</h1>
+      <hr>
-{% else %}
+      <h1>{{ code }} - {{ message }}</h1>
-    <h1>An error occurred.</h1>
+      <p>{{ submessage }}</p>
-{% endif %}
+    </div>
-
+    <hr>
-{% if g.current_user %}
+    <div class="panel__body">
-  <p>Return <a href="{{ url_for("atst.home") }}">home</a>.</p>
+      <p>
-{% endif %}
+        {{ more_info }}
-
+      </p>
+      <p>
+        <a href="#">More lorem</a>
+      </p>
+    </div>
 </main>
 
 {% endblock %}

templates/error_base.html

@@ -13,6 +13,10 @@
 
   {% block template_vars %}{% endblock %}
 
+  {% include 'components/usa_header.html' %}
+
+  {% include 'navigation/topbar.html' %}
+
   <div class='global-layout'>
 
     <div class='global-panel-container'>

translations.yaml

@@ -55,6 +55,7 @@ common:
   disable: Disable
   edit: Edit
   email: Email
+  lorem: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   members: Members
   name: Name
   next: Next
@@ -96,6 +97,9 @@ components:
           The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
         </p>
       title: Here’s how you know
+errors:
+  not_found: Page Not Found
+  not_found_sub: Looks like that page does not exist!
 email:
   application_invite: "{inviter_name} has invited you to a JEDI cloud application"
   portfolio_invite: "{inviter_name} has invited you to a JEDI cloud portfolio"