[IMPROVE] UI of page not found (#13757)

client/main.js

@@ -19,7 +19,7 @@ import './notifications/updateAvatar';
 import './notifications/updateUserState';
 import './notifications/UsersNameChanged';
 import './routes/adminRouter';
-import './routes/pageNotFound.html';
+import './routes/pageNotFound';
 import './routes/roomRoute';
 import './routes/router';
 import './startup/emailVerification';

client/routes/pageNotFound.html

 <template name="pageNotFound">
-  <h1>{{_ "Error_404"}}</h1>
-  <h3>{{_ "Oops_page_not_found"}}</h3>
-  <p>{{_ "Sorry_page_you_requested_does_not_exists_or_was_deleted"}}</p>
+	<section class = "page-not-found-container content-background-color">
+		<span class = "error-404">404</span>
+		<span class = "page-not-found-message">{{_ "Oops_page_not_found"}}</span>
+		<span class = "page-not-found-description">{{_ "Sorry_page_you_requested_does_not_exists_or_was_deleted"}}</span>
+		<button class = "page-not-found-button page-not-found-button-previous rc-button rc-button--primary">{{_ "Return_to_previous_page"}}</button>
+		<button class = "page-not-found-button page-not-found-button-home rc-button rc-button--primary">{{_ "Return_to_home"}}</button>
+	</section>
 </template>

client/routes/pageNotFound.js

+import { Template } from 'meteor/templating';
+import { FlowRouter } from 'meteor/kadira:flow-router';
+
+import './pageNotFound.html';
+
+Template.pageNotFound.onRendered(function() {
+	const parent = document.querySelector('.page-loading');
+	const child = document.querySelector('.loading-animation');
+	parent.removeChild(child);
+});
+
+Template.pageNotFound.events({
+	'click .page-not-found-button-home'(e) {
+		e.preventDefault();
+		FlowRouter.go('home');
+	},
+
+	'click .page-not-found-button-previous'(e) {
+		e.preventDefault();
+		window.history.back();
+	},
+});

client/routes/stylesheets/pageNotFound.css

+.page-not-found-container {
+	width: 100%;
+	height: 100%;
+	padding: 10%;
+
+	text-align: center;
+
+	color: white;
+	background-image: url("/images/404.svg");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+
+	.error-404 {
+		display: block;
+
+		padding: 10px;
+
+		font-size: 4em;
+		font-weight: bold;
+	}
+
+	.page-not-found-message {
+		display: block;
+
+		padding: 10px;
+
+		font-size: 2em;
+		font-weight: bold;
+	}
+
+	.page-not-found-description {
+		display: block;
+
+		padding: 10px;
+
+		font-size: 1em;
+	}
+
+	.page-not-found-button {
+		display: inline-block;
+
+		margin: 20px 10px 0;
+		padding: 8px 16px;
+
+		font-size: 1em;
+	}
+}

packages/rocketchat-i18n/i18n/en.i18n.json

@@ -2434,6 +2434,8 @@
   "RetentionPolicyRoom_OverrideGlobal": "Override global retention policy",
   "RetentionPolicyRoom_ReadTheDocs": "Watch out! Tweaking these settings without utmost care can destroy all message history. Please read the documentation before turning the feature on <a href='https://rocket.chat/docs/administrator-guides/retention-policies/'>here</a>.",
   "Retry_Count": "Retry Count",
+  "Return_to_home": "Return to home",
+  "Return_to_previous_page": "Return to previous page",
   "Robot_Instructions_File_Content": "Robots.txt File Contents",
   "Rocket_Chat_Alert": "Rocket.Chat Alert",
   "Role": "Role",