feat: add back button and i18n support on 404 page (#1700)

src/app/not-found/not-found.component.html

@@ -1,5 +1,9 @@
-  <div id="particles-js"></div>
-  <div class="text">
-    <h1 id="title">404</h1>
-    <p id="subtitle">Something went wrong.</p>
+  <div class="not-found-container">
+    <div id="title">404</div>
+    <div id="subtitle" class="f30">{{'not_found_subtitle' | translate}}</div>
+    <div class="back-button m-t-20">
+      <button type="button" (click)="goBack()" mat-raised-button>
+        <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
+        {{'labels.buttons.Back' | translate}}</button>
+    </div>
   </div>

src/app/not-found/not-found.component.scss

@@ -1,28 +1,18 @@
-#particles-js {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: cornflowerblue;
-}
+@import "assets/styles/helper";
 
-.text {
-	position: absolute;
-	top: 50%;
-	right: 50%;
-	transform: translate(50%,-50%);
-	max-width: 90%;
-	padding: 2em 3em;
-  color: white;
-	font-family: 'Raleway', sans-serif;
+.not-found-container {
+  height: 100%;
   display: flex;
   flex-direction: column;
+  justify-content: center;
   align-items: center;
+  background: $accent;
+  color: $white;
 }
 
 #title {
-  font-size: 120pt;
+  font-size: 160px;
+  font-weight: bolder;
 }
 
-#subtitle {
-  font-size: 12pt;
-}
+

src/app/not-found/not-found.component.ts

@@ -1,17 +1,17 @@
-import { Component, OnInit } from '@angular/core';
-declare var particlesJS: any;
+import { Component } from '@angular/core';
+import {Location} from '@angular/common';
 
 @Component({
   selector: 'mifosx-not-found',
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.scss']
 })
-export class NotFoundComponent implements OnInit {
+export class NotFoundComponent {
 
-  constructor() { }
+constructor(private location: Location) {}
 
-  ngOnInit() {
-    particlesJS.load('particles-js', '/assets/particles.json');
+  goBack(): void {
+  this.location.back();
   }
 
 }