diff --git a/client/Routes.jsx b/client/Routes.jsx index 53745589c..3a1a6af03 100644 --- a/client/Routes.jsx +++ b/client/Routes.jsx @@ -5,34 +5,48 @@ import { Redirect, useLocation, } from 'react-router-dom'; +import { ThemeProvider } from '@material-ui/core/styles'; +import theme, { darkTheme } from '@theme/theme'; +import Paper from '@material-ui/core/Paper'; import Box from '@material-ui/core/Box'; import Desktop from '@components/main/Desktop'; import Reports from '@components/main/Reports'; import Privacy from '@components/main/Privacy'; import Faqs from '@components/main/Faqs'; import About from '@components/main/About'; -import Blog from '@components/main/Blog'; import Contact from '@components/contact/Contact'; +import ContentBottom from '@components/common/ContentBottom'; export default function Routes() { const { pathname } = useLocation(); return ( <> - - - - - - - - - - - - - - + {/* Dark Theme - Map. */} + + + + + + + + + {/* Default theme - Everything else. */} + + + + + + + + + + + + + + + ); } diff --git a/client/components/common/ContentBody/index.jsx b/client/components/common/ContentBody/index.jsx new file mode 100644 index 000000000..609e0a7dc --- /dev/null +++ b/client/components/common/ContentBody/index.jsx @@ -0,0 +1,39 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import Container from '@material-ui/core/Container'; +import Grid from '@material-ui/core/Grid'; +import sharedLayout from '@theme/layout'; +import clsx from 'clsx'; + +// ContentBody keeps the body of all content pages centered +// with a customizable maxWidth container that defaults to 'md'. + +const ContentBody = ({ children, maxWidth, hasTopMargin }) => { + const classes = sharedLayout(); + + return ( + + + +
+ {children} +
+
+
+
+ ); +}; + +ContentBody.defaultProps = { + children: {}, + maxWidth: 'md', + hasTopMargin: true, +}; + +ContentBody.propTypes = { + children: PropTypes.node, + maxWidth: PropTypes.string, + hasTopMargin: PropTypes.bool, +}; + +export default ContentBody; diff --git a/client/components/common/ContentBottom/index.jsx b/client/components/common/ContentBottom/index.jsx new file mode 100644 index 000000000..665e552e1 --- /dev/null +++ b/client/components/common/ContentBottom/index.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles(theme => ({ + bottomSpacing: { + height: theme.footer.height, + }, +})); + +// ContentBottom is used to provide the necessary amount of bottom margin on +// all content pages to prevent the fixed footer from covering the +// bottom of the content pages. This component is utilized at the bottom of the +// component page of Routes.jsx + +const ContentBottom = () => { + const classes = useStyles(); + return ( + + {/* an empty grid container with footer height to prevent + * fixed positioned footer from obscuring submit button */} + + ); +}; + +export default ContentBottom; diff --git a/client/components/common/TextHeading/index.jsx b/client/components/common/TextHeading/index.jsx new file mode 100644 index 000000000..3aa4669b8 --- /dev/null +++ b/client/components/common/TextHeading/index.jsx @@ -0,0 +1,53 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Typography from '@material-ui/core/Typography'; + +const useStyles = makeStyles(theme => ({ + headingBackground: { + background: theme.palette.primary.main, + backgroundPosition: 'top', + height: '20vh', + position: 'relative', + }, + headingOverlayText: { + left: '50%', + color: 'white', + position: 'absolute', + textAlign: 'center', + top: '50%', + transform: 'translate(-50%, -70%)', + }, + contentHeading: { + fontWeight: theme.typography.fontWeightBold, + }, +})); + +// TextHeading provides a standardized heading area and custom title +// below the Header on all content pages. + +const TextHeading = ({ children }) => { + const classes = useStyles(); + + return ( +
+
+ +
+ {children} +
+
+
+
+ ); +}; + +TextHeading.defaultProps = { + children: {}, +}; + +TextHeading.propTypes = { + children: PropTypes.node, +}; + +export default TextHeading;