mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-19 22:01:39 -07:00
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:
parent
9a9d5fdf7f
commit
73a205dc48
7 changed files with 285 additions and 216 deletions
|
@ -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 couldn’t 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 couldn’t 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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue