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

@@ -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>

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>

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 {

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>