Merge branch '228-update-error-pages' into 'develop'

Resolve "Update error pages"

See merge request !40

src/app/service-unavailable/service-unavailable.component.css

@@ -33,3 +33,19 @@
     right: 0;
     left: auto;
 }
+.position{
+    flex-direction: column;
+    width: 90%;
+}
+.size{
+    width: 100%;
+}
+@media (min-width: 700px){
+    .position{
+        flex-direction: row;
+        width: 60%;
+    }
+    .size{
+        width: 50%;
+    }
+}

src/app/service-unavailable/service-unavailable.component.html

 <div>
-  <div id="service-denied" class="col-md-offset-4 col-sm-offset-3 col-xs-offset-1 col-md-4 col-sm-6 col-xs-10">
-    <div class="border-denied col-xs-12" style="width: 100%; height: 100%;">
-      <div class="col-xs-9"><h1 class="text-danger">Ooops!</h1></div>
-      <div class="col-xs-3">
-        <div class="dropdown">
-          <a style="display: inline-block" class="dropdown-toggle dropdown-lang" aria-expanded="false" aria-haspopup="true"
-             data-toggle="dropdown" href="#" role="button">
-            <img alt="language" class="lang-circle-icon" src="{{[getPathToCurrent()]}}"/>
-          </a>
-          <ul class="dropdown-menu pull-right-drop">
-            <li *ngFor="let lang of languages" [ngClass]="{'active': getCurrent() == lang}">
-              <a (click)="useLanguage(lang)">
-                <img alt="lang flag" class="lang-circle-icon"
-                     src="assets/images/country/{{lang}}_circle.png"/>
-                <span>{{lang.toUpperCase()}}</span>
+  <div>
+    <div id="service-denied" style="display: flex; justify-content: center">
+      <div class="position" style=" height: 100%; display: flex; justify-content: center">
+        <div class="size">
+          <img src="assets/images/error/500.gif" width="60%">
+        </div>
+        <div class="size">
+          <div class="col-xs-9"><h1 class="text-danger">Ooops!</h1></div>
+          <div class="col-xs-3">
+            <div class="dropdown">
+              <a style="display: inline-block" class="dropdown-toggle dropdown-lang" aria-expanded="false" aria-haspopup="true"
+                 data-toggle="dropdown" href="#" role="button">
+                <img alt="language" class="lang-circle-icon" src="{{[getPathToCurrent()]}}"/>
               </a>
-            </li>
-          </ul>
+              <ul class="dropdown-menu pull-right-drop">
+                <li *ngFor="let lang of languages" [ngClass]="{'active': getCurrent() == lang}">
+                  <a (click)="useLanguage(lang)">
+                    <img alt="lang flag" class="lang-circle-icon"
+                         src="assets/images/country/{{lang}}_circle.png"/>
+                    <span>{{lang.toUpperCase()}}</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div class="col-xs-12">
+            <h2>{{ "SERVICE_UNAVAILABLE.HEADER" | translate }}</h2>
+            <p>
+              {{ "SERVICE_UNAVAILABLE.TEXT_FIRST_PART" | translate }}
+              <br>
+              {{ "SERVICE_UNAVAILABLE.TEXT_SECOND_PART" | translate }}
+            </p>
+          </div>
         </div>
-      </div>
-      <div class="col-xs-12">
-        <h2>{{ "SERVICE_UNAVAILABLE.HEADER" | translate }}</h2>
-        <p>
-          {{ "SERVICE_UNAVAILABLE.TEXT_FIRST_PART" | translate }}
-          <br>
-          {{ "SERVICE_UNAVAILABLE.TEXT_SECOND_PART" | translate }}
-        </p>
+
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+
+</div>

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

 .container-fluid {
     min-height: 100vh;
+    padding: 25px;
     background-repeat: no-repeat;
     background-color: rgb(255, 255, 255);
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-direction: column;
+}
+@media (min-width: 700px){
+    .container-fluid{
+        flex-direction: row;
+    }
 }

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

 <div class="container-fluid">
+  <div>
+    <img src="assets/images/error/404.gif" width="60%">
+  </div>
   <div class="row">
-    <h1>Page not found</h1>
-    <p>The page you requested was not found. Click button below to go back to previous page.</p>
+    <h1>Oops! Something went wrong.</h1>
+    <p>Our robot couldn't find this page. Try a different link or head back to the homepage.</p>
     <button class="btn btn-primary" type="button" (click)="redirect()">Go back</button>
   </div>
 </div>