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
This commit is contained in:
Nat Hillard 2021-06-03 13:49:38 -04:00 committed by GitHub
parent f9ac170c6a
commit dddd6d5e03
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 1505 additions and 2586 deletions

4065
client/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,8 +1,11 @@
import React from 'react'; 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 {useIntl} from 'gatsby-plugin-intl';
import {Helmet} from 'react-helmet'; import {Helmet} from 'react-helmet';
const headerLinks = [ const headerLinks = [
<></>, <></>,
]; ];
@ -20,7 +23,16 @@ const J40Header = () => {
<meta charSet="utf-8"/> <meta charSet="utf-8"/>
<title>{title}</title> <title>{title}</title>
</Helmet> </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/> <GovBanner/>
<Header className={'j40-header'} basic={true} role={'banner'}> <Header className={'j40-header'} basic={true} role={'banner'}>
<div className="usa-nav-container"> <div className="usa-nav-container">

View file

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