Redesign 404 page

The logo comes from https://www.rustacean.net

Author: Turbo87

app/controllers/catch-all.js

@@ -1,9 +1,19 @@
-.p404 {
-    font-size: 120%;
-    line-height: 3em;
+.wrapper {
+    height: 100%;
+    display: grid;
+    place-items: center;
 }
 
-.search-field {
-    width: 100%;
-    padding: 5px;
+.content {
+    display: grid;
+    place-items: center;
+    margin: 25px 0;
+}
+
+.logo {
+    max-width: 200px;
+}
+
+.link {
+    font-weight: 500;
 }

app/styles/catch-all.module.css

@@ -1,19 +1,11 @@
-<h1 data-test-404-header>Oops, that route doesn't exist!</h1>
+<div local-class="wrapper" data-test-404-page>
+  <div local-class="content">
+    {{svg-jar "cuddlyferris" local-class="logo"}}
 
-<form
-  local-class='p404'
-  data-test-404-search-form
-  {{on "submit" (prevent-default this.search)}}
->
-  Perhaps a search of the site may help?
+    <h1 local-class="title" data-test-title>Page not found</h1>
 
-  <Input
-    @type="text"
-    local-class="search-field"
-    placeholder="Search"
-    aria-label="Search"
-    @value={{this.header.searchValue}}
-    required={{true}}
-    data-test-404-search-input
-  />
-</form>
+    <a href="javascript:history.back()" local-class="link">
+      Go Back
+    </a>
+  </div>
+</div>

app/templates/catch-all.hbs

@@ -1,6 +1,8 @@
-import { currentURL, fillIn, triggerEvent, visit } from '@ember/test-helpers';
+import { currentURL, visit } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 
+import percySnapshot from '@percy/ember';
+
 import { setupApplicationTest } from 'cargo/tests/helpers';
 
 module('Acceptance | 404', function (hooks) {
@@ -9,17 +11,9 @@ module('Acceptance | 404', function (hooks) {
   test('/unknown-route shows a 404 page', async function (assert) {
     await visit('/unknown-route');
     assert.equal(currentURL(), '/unknown-route');
-    assert.dom('[data-test-404-header]').exists();
-  });
-
-  test('search on the 404 page works correctly', async function (assert) {
-    await visit('/unknown-route');
-    assert.dom('[data-test-404-search-input]').hasValue('');
-
-    await fillIn('[data-test-404-search-input]', 'rust');
-    assert.dom('[data-test-404-search-input]').hasValue('rust');
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('Page not found');
 
-    await triggerEvent('[data-test-404-search-form]', 'submit');
-    assert.equal(currentURL(), '/search?q=rust');
+    await percySnapshot(assert);
   });
 });

public/assets/cuddlyferris.svg

@@ -13,13 +13,15 @@ module('Acceptance | /accept-invite/:token', function (hooks) {
   test('visiting to /accept-invite shows 404 page', async function (assert) {
     await visit('/accept-invite');
     assert.equal(currentURL(), '/accept-invite');
-    assert.dom('main').containsText("Oops, that route doesn't exist!");
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('Page not found');
   });
 
   test('visiting to /accept-invite/ shows 404 page', async function (assert) {
     await visit('/accept-invite/');
     assert.equal(currentURL(), '/accept-invite/');
-    assert.dom('main').containsText("Oops, that route doesn't exist!");
+    assert.dom('[data-test-404-page]').exists();
+    assert.dom('[data-test-title]').hasText('Page not found');
   });
 
   test('shows error for unknown token', async function (assert) {