Refactor layout (#486)

* Refactor to move `<DatasetContainer>` out of layout
* `<DatasetContainer>` is now in the methodology page. Starting the review there will help understand the motive for this change.
* Fixed 404 page which seems way out of date.
* Use row/col grid syntax
This commit is contained in:
TomNUSDS 2021-08-09 08:04:24 -07:00 committed by GitHub
commit 73a205dc48
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 285 additions and 216 deletions

View file

@ -1,14 +1,12 @@
import * as React from 'react';
import Layout from '../components/layout';
import J40MainGridContainer from '../components/J40MainGridContainer';
import {Link} from 'gatsby-plugin-intl';
import {Grid} from '@trussworks/react-uswds';
// styles
const pageStyles = {
color: '#232129',
padding: '96px',
fontFamily: '-apple-system, Roboto, sans-serif, serif',
};
const headingStyles = {
marginTop: 0,
marginTop: 32,
marginBottom: 64,
maxWidth: 320,
};
@ -16,6 +14,7 @@ const headingStyles = {
const paragraphStyles = {
marginBottom: 48,
};
const codeStyles = {
color: '#8A6534',
padding: 4,
@ -24,30 +23,39 @@ const codeStyles = {
borderRadius: 4,
};
interface I404PageProps {
location: Location;
}
// markup
const NotFoundPage = () => {
return (
<main style={pageStyles}>
<title>Not found</title>
<h1 style={headingStyles}>Page not found</h1>
<p style={paragraphStyles}>
Sorry{' '}
<span role="img" aria-label="Pensive emoji">
😔
</span>{' '}
we couldnt find what you were looking for.
<br />
{process.env.NODE_ENV === 'development' ? (
<>
<br />
Try creating a page in <code style={codeStyles}>src/pages/</code>.
<br />
</>
) : null}
<br />
<Link to="/">Go home</Link>.
</p>
</main>
const NotFoundPage =({location}: I404PageProps) => {
return (<Layout location={location}>
<J40MainGridContainer>
<Grid row><Grid col>
<h1 style={headingStyles}>Page not found</h1>
</Grid></Grid>
<Grid row><Grid col>
<p style={paragraphStyles}>
Sorry{' '}
<span role="img" aria-label="Pensive emoji">
😔
</span>{' '}
we couldnt find what you were looking for.
<br/>
{process.env.NODE_ENV === 'development' ? (
<>
<br/>
Try creating a page
in <code style={codeStyles}>src/pages/</code>.
<br/>
</>
) : null}
<br/>
<Link to="/">Go home</Link>.
</p>
</Grid></Grid>
</J40MainGridContainer>
</Layout>
);
};