Warning Banner (#86)

* Addresses #78 - As a member of the public, I want to know that our site is a work in progress, so I can set appropriate expectations

* updating wording

* eslint changes

* package-lock updates

* Updating styling slightly and moving to top of page

client/src/components/J40Header.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import {GovBanner, Header, Title, PrimaryNav} from '@trussworks/react-uswds';
+import {GovBanner,
+  Header,
+  Title,
+  PrimaryNav,
+  SiteAlert} from '@trussworks/react-uswds';
 import {useIntl} from 'gatsby-plugin-intl';
 import {Helmet} from 'react-helmet';
-
 const headerLinks = [
   <></>,
 ];
@@ -20,7 +23,16 @@ const J40Header = () => {
         <meta charSet="utf-8"/>
         <title>{title}</title>
       </Helmet>
-
+      <SiteAlert
+        variant="info"
+        heading="Welcome to Justice40's Temporary Home">
+        <p>
+        While Justice40 gets up and running,
+        we are using GitHub Pages as a temporary website host. <br/>
+        To learn more about GitHub Pages, click &nbsp;
+          <a href="https://pages.github.com/">here</a>.
+        </p>
+      </SiteAlert>
       <GovBanner/>
       <Header className={'j40-header'} basic={true} role={'banner'}>
         <div className="usa-nav-container">

client/src/styles/global.scss

@@ -21,9 +21,8 @@
   max-width: revert;
 }
 
-
 .j40-header {
-  background-color: #112F4E; /* todo: move color to theme */
+  background-color: #112f4e; /* todo: move color to theme */
   color: white;
 }
 
@@ -32,7 +31,7 @@
 }
 
 .j40-aside {
-  background-color: #EFF6FB;
+  background-color: #eff6fb;
 }
 
 .j40-footer-logo {
@@ -41,7 +40,6 @@
 }
 
 .j40-footer-logo-heading {
-
 }
 
 .j40-address-readability {