Merge pull request #1388 from hackforla/1347-thematic-coloring-of-con…

…tent-pages-2-v2-new-components

#2 v2 new components

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 (
     <>
-      <Box visibility={pathname !== '/map' ? 'hidden' : 'visible'}>
-        <Desktop />
-      </Box>
-      <Switch>
-        <Route path="/reports" component={Reports} />
-        <Route path="/privacy" component={Privacy} />
-        <Route path="/faqs" component={Faqs} />
-        <Route path="/about" component={About} />
-        <Route path="/blog" component={Blog} />
-        <Route path="/contact" component={Contact} />
-        <Route path="/">
-          <Redirect to="map" />
-        </Route>
-      </Switch>
+      {/* Dark Theme - Map. */}
+      <ThemeProvider theme={darkTheme}>
+        <Paper elevation={0}>
+          <Box visibility={pathname !== '/map' ? 'hidden' : 'visible'}>
+            <Desktop />
+          </Box>
+        </Paper>
+      </ThemeProvider>
+
+      {/* Default theme - Everything else. */}
+      <ThemeProvider theme={theme}>
+        <Paper elevation={0}>
+          <Switch>
+            <Route path="/reports" component={Reports} />
+            <Route path="/privacy" component={Privacy} />
+            <Route path="/faqs" component={Faqs} />
+            <Route path="/about" component={About} />
+            <Route path="/contact" component={Contact} />
+            <Route path="/">
+              <Redirect to="map" />
+            </Route>
+          </Switch>
+          <ContentBottom />
+        </Paper>
+      </ThemeProvider>
     </>
   );
 }

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 (
+    <Grid container className={clsx(hasTopMargin && classes.marginTopLarge)} alignItems="center" justify="center" direction="column">
+      <Grid item>
+        <Container component="main" maxWidth={maxWidth}>
+          <div>
+            {children}
+          </div>
+        </Container>
+      </Grid>
+    </Grid>
+  );
+};
+
+ContentBody.defaultProps = {
+  children: {},
+  maxWidth: 'md',
+  hasTopMargin: true,
+};
+
+ContentBody.propTypes = {
+  children: PropTypes.node,
+  maxWidth: PropTypes.string,
+  hasTopMargin: PropTypes.bool,
+};
+
+export default ContentBody;

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 <Switch> of Routes.jsx
+
+const ContentBottom = () => {
+  const classes = useStyles();
+  return (
+    <Grid container className={classes.bottomSpacing}>
+      {/*  an empty grid container with footer height to prevent
+        *  fixed positioned footer from obscuring submit button */}
+    </Grid>
+  );
+};
+
+export default ContentBottom;

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 (
+    <div className={classes.headingBackground}>
+      <div className={classes.headingOverlayText}>
+        <Typography variant="h3" className={classes.contentHeading}>
+          <div>
+            {children}
+          </div>
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+TextHeading.defaultProps = {
+  children: {},
+};
+
+TextHeading.propTypes = {
+  children: PropTypes.node,
+};
+
+export default TextHeading;