From 1142b51462f2d8c2efcf05c026f48f5f50519c0c Mon Sep 17 00:00:00 2001
From: codebriefcase <c.ankit1997@gmail.com>
Date: Wed, 23 Jun 2021 09:21:58 +0530
Subject: [PATCH] fix(docs-infra): styling fix on error pages (#42627)

Add Center Aligment for heading texts and additional styles on 404 (not found) related pages

PR Close #42627
---
 aio/content/file-not-found.md                                | 2 +-
 aio/src/404-body.html                                        | 2 +-
 .../search/file-not-found-search.component.ts                | 4 +++-
 aio/src/app/documents/document.service.ts                    | 5 +++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/aio/content/file-not-found.md b/aio/content/file-not-found.md
index 880e42cda2..b8a0ff887f 100644
--- a/aio/content/file-not-found.md
+++ b/aio/content/file-not-found.md
@@ -1,7 +1,7 @@
 <div class="center-layout-wide">
   <div class="nf-container l-flex-wrap flex-center">
     <img src="assets/images/support/angular-404.svg" width="300" height="300"/>
-    <div class="nf-response l-flex-wrap">
+    <div class="nf-response l-flex-wrap center">
       <h1 class="no-anchor no-toc">Page Not Found</h1>
       <p>We're sorry. The page you are looking for cannot be found.</p>
     </div>
diff --git a/aio/src/404-body.html b/aio/src/404-body.html
index f27dd0a057..a41585acb3 100644
--- a/aio/src/404-body.html
+++ b/aio/src/404-body.html
@@ -28,7 +28,7 @@
             <div class="content">
               <div class="nf-container l-flex-wrap flex-center">
                 <img src="assets/images/support/angular-404.svg" width="300" height="300" />
-                <div class="nf-response l-flex-wrap">
+                <div class="nf-response l-flex-wrap center">
                   <h1 class="no-toc" id="page-not-found">Resource Not Found</h1>
                   <p>We're sorry. The resource you are looking for cannot be found.</p>
                 </div>
diff --git a/aio/src/app/custom-elements/search/file-not-found-search.component.ts b/aio/src/app/custom-elements/search/file-not-found-search.component.ts
index e8af858b49..8a26f40b52 100644
--- a/aio/src/app/custom-elements/search/file-not-found-search.component.ts
+++ b/aio/src/app/custom-elements/search/file-not-found-search.component.ts
@@ -8,7 +8,9 @@ import { SearchService } from 'app/search/search.service';
 @Component({
   selector: 'aio-file-not-found-search',
   template:
-  `<p>Let's see if any of these search results help...</p>
+  `<div class="alert is-helpful">
+      <p>Let's see if any of these search results help...</p>
+   </div>
   <aio-search-results class="embedded" [searchResults]="searchResults | async"></aio-search-results>`
 })
 export class FileNotFoundSearchComponent implements OnInit {
diff --git a/aio/src/app/documents/document.service.ts b/aio/src/app/documents/document.service.ts
index 73ab9a0ec3..872f8b6205 100644
--- a/aio/src/app/documents/document.service.ts
+++ b/aio/src/app/documents/document.service.ts
@@ -18,10 +18,11 @@ export const DOC_CONTENT_URL_PREFIX = CONTENT_URL_PREFIX + 'docs/';
 const FETCHING_ERROR_CONTENTS = (path: string) => `
   <div class="nf-container l-flex-wrap flex-center">
     <div class="nf-icon material-icons">error_outline</div>
-    <div class="nf-response l-flex-wrap">
-      <h1 class="no-toc">Request for document failed.</h1>
+    <div class="nf-response l-flex-wrap center">
+      <h1 class="no-toc">Request for document failed</h1>
       <p>
         We are unable to retrieve the "${path}" page at this time.
+        <br/>
         Please check your connection and try again later.
       </p>
     </div>