fix: 404 page styles (#38775)

client/src/components/FourOhFour/404.css

@@ -1,5 +1,5 @@
 .notfound-page-wrapper {
-  min-height: 100%;
+  min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;

client/src/components/FourOhFour/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
-import Spinner from 'react-spinkit';
+import { Loader, Spacer } from '../../components/helpers';
 import { Link } from 'gatsby';
 
 import notFoundLogo from '../../assets/images/freeCodeCamp-404.svg';
@@ -31,13 +31,16 @@ class NotFoundPage extends Component {
       <div className='notfound-page-wrapper'>
         <Helmet title='Page Not Found | freeCodeCamp' />
         <img alt='404 Not Found' src={notFoundLogo} />
-        <h1>NOT FOUND</h1>
+        <Spacer />
+        <h1>Page not found.</h1>
+        <Spacer />
         {this.state.randomQuote ? (
           <div>
             <p>
               We couldn&#x27;t find what you were looking for, but here is a
               quote:
             </p>
+            <Spacer />
             <blockquote className='quote-wrapper'>
               <p className='quote'>
                 <span>&#8220;</span>
@@ -47,8 +50,9 @@ class NotFoundPage extends Component {
             </blockquote>
           </div>
         ) : (
-          <Spinner color='#006400' name='ball-clip-rotate-multiple' />
+          <Loader />
         )}
+        <Spacer size={2} />
         <Link className='btn btn-cta' to='/learn'>
           View the Curriculum
         </Link>