Merge pull request #124 from TheBroMoe/404-html-component

update app routes and redesign 404 page

frontend/src/app/app.routes.ts

@@ -11,7 +11,8 @@ const appRoutes: Routes = [
   { path: 'about', component: AboutPageComponent},
   { path: 'resources', component: ResourcesPageComponent },
   { path: '', redirectTo: 'home', pathMatch: 'full' },
-  { path: '**', component: PageNotFoundComponent }
+  { path: '404', component: PageNotFoundComponent},
+  { path: '**', redirectTo: '404' }
 ];
 
 

frontend/src/app/shared/components/page-not-found/page-not-found.component.css

@@ -1,28 +1,44 @@
+.mat-elevation-z0
+
 main {
-  height: 94vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
   position: fixed;
 }
 
 mat-card {
-  background-color: silver;
+  background-color: lightgoldenrodyellow;
   font-family: 'Open Sans', sans-serif;
 }
 
 
-@media(min-width: 40em) {
-
-  mat-card {
-    height: 50vh;
-
-  }
+mat-card-title{
+  font-size: 13em;
+  width: 567px;
+  max-width: 100%;
+  margin:0;
+}
+
+
+mat-card-subtitle{
+  font-size: 2.5em;
+  width: 567px;
+  max-width: 100%;
 }
 
+.separator{
+  margin-top: 0;
+  padding:0;
+  margin-left: 20%;
+}
 
-@media(max-width: 40em){
+p {
+  text-align: left;
+  font-size: larger;
+  font-weight: bold;
+}
 
-  mat-card {
-    height: 40vh;
-    margin-top: 5%;
-  }
+a > button {
+  background-color: darkorange;
+  color: white;
 }

frontend/src/app/shared/components/page-not-found/page-not-found.component.html

@@ -1,24 +1,22 @@
-<main>
-  <!-- LARGE AND MEDIUM SCREENS -->
-  <div class="sm-show">
+<main class="mat-elevation-z0">
     <div class="p2"></div>
     <div class="flex">
       <span class="flex-grow"></span>
       <mat-card class="col col-6 center">
         <div class="p4"></div>
-        <mat-card-title> PAGE NOT FOUND </mat-card-title>
-        <mat-card-subtitle> The requested resource was not found </mat-card-subtitle>
+        <mat-card-title> 404 </mat-card-title>
+        <div class="separator">
+        <mat-card-subtitle> Sorry - the resource you have requested does not exist </mat-card-subtitle>
+        <p>You may have entered an invalid URL. If you believe this to be an error, please 
+          <a href="https://docs.google.com/forms/d/e/1FAIpQLScxdY0tJJXKGAPvuCtwL23TVc72G14TCNMxsWdWdZAn57dh2g/viewform" target="_blank">
+          report it.
+        </a>
+        </p>
+        <a routerLink="/home">
+          <button mat-raised-button ><mat-icon>home</mat-icon> Go to the home page</button>
+        </a>
+      </div>
       </mat-card>
       <span class="flex-grow"></span>
     </div>
-  </div>
-
-  <!-- SMALL SCREENS -->
-  <div class="sm-hide">
-    <mat-card class="center">
-      <div class="p2"></div>
-      <mat-card-title> PAGE NOT FOUND </mat-card-title>
-      <mat-card-subtitle> The requested resource was not found </mat-card-subtitle>
-    </mat-card>
-  </div>
-</main>
+</main>