💄 redesign error pages

froide/templates/400.html

@@ -1,6 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>{% blocktrans %}400 - Bad Request{% endblocktrans %}</h2>
-{% endblock %}
+{% block error %}
+{% blocktrans %}400 - Bad Request{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}This one seems to be on you. Please contact us, if this error comes as a surprise.{% endblocktrans %}
+{% endblock error_description %}

froide/templates/403.html

@@ -1,11 +1,10 @@
-{% extends 'base.html' %}
+{% extends "error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>{% blocktrans %}403 - Forbidden{% endblocktrans %}</h2>
-{% if message %}
-  <p>{{ message }}</p>
-{% else %}
-  <p>{% blocktrans %}You tried to access a site that you are not authorized to access or you triggered a security warning.{% endblocktrans %}</p>
-{% endif %}
-{% endblock %}
+{% block error %}
+{% blocktrans %}403 - Forbidden{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}You tried to access a site that you are not authorized to access or you triggered a security warning.{% endblocktrans %}
+{% endblock error_description %}

froide/templates/404.html

@@ -1,9 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
 
-{% block app_body %}
-<h2>
-  {% blocktrans %}404 - Not Found{% endblocktrans %}
-</h2>
-<span class="text-white">{{ exception }}</span>
-{% endblock %}
+{% block error %}
+{% blocktrans %}404 - Not Found{% endblocktrans %}
+{% endblock error %}
+
+{% block error_description %}
+{% blocktrans %}Nothing to see here.{% endblocktrans %}
+{% endblock error_description %}

froide/templates/500.html

@@ -1,14 +1,10 @@
-{% extends 'base.html' %}
+{% extends "./error_base.html" %}
 {% load i18n %}
-{% load static %}
 
-{% block css %}
-<link href="{% static 'css/main.css' %}" rel="stylesheet">
-{% endblock %}
+{% block error %}
+{% blocktrans %}500 - Server Error{% endblocktrans %}
+{% endblock error %}
 
-{% block app_body %}
-<h2>{% blocktrans %}500 - Server Error{% endblocktrans %}</h2>
-{% if request.sentry.id %}
-<p>{% blocktrans with ref=request.sentry.id %}If you need assistance, you may reference this error as <strong>{{ ref }}</strong>.{% endblocktrans %}</p>
-{% endif %}
-{% endblock %}
+{% block error_description %}
+{% blocktrans with ref=request.sentry.id %}We logged the error and are working on fixing it. If you need to contact us, please use the reference <code>{{ ref }}</code>.{% endblocktrans %}
+{% endblock error_description %}

froide/templates/error_base.html

@@ -0,0 +1,34 @@
+{% extends "base.html" %}
+{% load i18n %}
+{% load search_helper %}
+
+{% block body %}
+  <div class="container mt-3">
+    <h2 class="mb-3">{% block error %}{% endblock error %}</h2>
+
+    <div class="row">
+      <div class="col col-md-8">
+        <div class="redacted error-redacted-bar mb-1" aria-hidden="true">&nbsp;</div>
+        <div class="mb-1 error-page-description">
+          <span>{% block error_description %}{% endblock error_description %}</span>
+        </div>
+        <div class="redacted error-redacted-bar mb-1" aria-hidden="true">&nbsp;</div>
+        <div class="redacted error-redacted-bar" aria-hidden="true">&nbsp;</div>
+      </div>
+
+      {% block error_right %}{% endblock error_right %}
+    </div>
+  </div>
+
+  <div class="py-3 py-lg-5 my-5 text-bg-subtle tight-margin">
+    <div class="container">
+      <p class="lead">
+        {% blocktrans %}You can try searching or go back to the <a href="/">Home page</a>.{% endblocktrans %}
+      </p>
+
+      {% multi_search %}
+    </div>
+  </div>
+
+  {% block error_footer %}{% endblock error_footer %}
+{% endblock body %}

frontend/styles/components/misc.scss

@@ -123,3 +123,28 @@ input.copy-text {
   aspect-ratio: 3/2;
   object-fit: contain;
 }
+
+.error-redacted-bar {
+  height: 1.25em;
+}
+
+.error-page-description {
+  position: relative;
+
+  span {
+    background-color: var(--#{$prefix}body-bg);
+    padding-bottom: 0.25rem;
+    padding-right: 0.25rem;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--redacted);
+    height: 1.25em;
+    z-index: -1;
+  }
+}