new 404 page

public/language/en-GB/global.json

@@ -6,7 +6,7 @@
 	"403.message": "You seem to have stumbled upon a page that you do not have access to.",
 	"403.login": "Perhaps you should <a class=\"alert-link\" href='%1/login'>try logging in</a>?",
 	"404.title": "Not Found",
-	"404.message": "You seem to have stumbled upon a page that does not exist. Return to the <a class=\"alert-link\" href='%1/'>home page</a>.",
+	"404.message": "You seem to have stumbled upon a page that does not exist.<br/><div class=\"text-sm text-muted\">Return to the <a href='%1/'>home page</a>.</div>",
 	"500.title": "Internal Error.",
 	"500.message": "Oops! Looks like something went wrong!",
 	"400.title": "Bad Request.",

src/controllers/404.js

@@ -54,11 +54,16 @@ exports.send404 = async function (req, res) {
 			bodyClass: helpers.buildBodyClass(req, res),
 		});
 	}
-
+	const icons = [
+		'fa-hippo', 'fa-cat', 'fa-otter',
+		'fa-dog', 'fa-cow', 'fa-fish',
+		'fa-dragon', 'fa-horse', 'fa-dove',
+	];
 	await middleware.buildHeaderAsync(req, res);
 	await res.render('404', {
 		path: validator.escape(path),
 		title: '[[global:404.title]]',
 		bodyClass: helpers.buildBodyClass(req, res),
+		icon: icons[Math.floor(Math.random() * icons.length)],
 	});
 };

src/views/404.tpl

@@ -1,4 +1,12 @@
-<div class="alert alert-danger">
-	<strong>{path} [[global:404.title]]</strong>
-	<p>{{{ if error }}}{error}{{{ else }}}[[global:404.message, {config.relative_path}]]{{{ end }}}</p>
-</div>
+<div class="flex-fill">
+	<h2 class="fw-semibold tracking-tight text-center">[[global:404.title]]</h2>
+
+	<div class="mx-auto">
+		<div class="d-flex flex-column gap-3 justify-content-center text-center">
+			<div class="mx-auto p-4 bg-light border rounded">
+				<i class="text-secondary fa fa-fw fa-4x {{{ if icon }}}{icon}{{{ else }}}fa-otter{{{ end }}}"></i>
+			</div>
+			{{{ if error }}}{error}{{{ else }}}[[global:404.message, {config.relative_path}]]{{{ end }}}
+		</div>
+	</div>
+</div>

src/views/outgoing.tpl

@@ -1,12 +1,7 @@
-<div class="outgoing d-flex flex-column gap-3">
-	<!-- IMPORT partials/breadcrumbs.tpl -->
-	<div class="card card-header p-3 border-0 shadow-none mb-3 gap-2">
-		<h4>
-			[[notifications:outgoing_link_message, {title}]]
-		</h4>
-		<div class="d-flex flex-column gap-2">
-			<a href="{outgoing}" rel="nofollow noopener noreferrer" class="btn btn-primary text-truncate">[[notifications:continue_to, {outgoing}]]</a>
-			<a href="#" class="btn btn-warning" onclick="history.back(); return false;">[[notifications:return_to, {title}]]</a>
-		</div>
-	</div>
-</div>
+<div class="outgoing d-flex flex-column gap-3 align-items-center">
+	<h4>
+		[[notifications:outgoing_link_message, {title}]]
+	</h4>
+	<a href="{outgoing}" rel="nofollow noopener noreferrer" class="btn btn-primary">[[notifications:continue_to, {outgoing}]]</a>
+	<a href="#" class="btn btn-warning" onclick="history.back(); return false;">[[notifications:return_to, {title}]]</a>
+</div>