#6 v2 Privacy

hackforla · Oct 6, 2022 · 8d7eb33 · 8d7eb33
1 parent 0f4288b
commit 8d7eb33
Showing 1 changed file with 29 additions and 32 deletions.
diff --git a/client/components/main/Privacy.jsx b/client/components/main/Privacy.jsx
@@ -1,12 +1,19 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import {
-  makeStyles,
-  Container,
-  Grid,
-} from '@material-ui/core';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import sharedLayout from '@theme/layout';
+import TextHeading from '@components/common/TextHeading';
+import ContentBody from '@components/common/ContentBody';
 import useContentful from '../../hooks/useContentful';
 
+const useStyles = makeStyles(theme => ({
+  contentTitle: {
+    fontWeight: theme.typography.fontWeightBold,
+  },
+}));
+
 const query = `
   query {
     simplePageCollection(where: {slug: "privacy"}) {
@@ -18,45 +25,35 @@ const query = `
   }
 `;
 
-const useStyles = makeStyles({
-  root: {
-    color: 'black',
-    backgroundColor: 'white',
-    padding: '2em',
-    '& h1': {
-      fontSize: '2.5em',
-    },
-    '& img': {
-      maxWidth: '100%',
-      height: 'auto',
-      display: 'block',
-      marginLeft: 'auto',
-      marginRight: 'auto',
-    },
-  },
-});
-
 const Privacy = () => {
   const { data, errors } = useContentful(query);
-  const classes = useStyles();
+  const classes = { ...useStyles(), ...sharedLayout() };
 
   React.useEffect(() => {
     if (errors) console.log(errors);
   }, [errors]);
 
   return (
     <>
-      { data
+      <TextHeading>
+        Privacy Policy
+      </TextHeading>
+
+      <ContentBody maxWidth="md">
+        { data
         && (
-          <Container className={classes.root} maxWidth="md">
-            <Grid container spacing={2}>
-              <Grid item xs={9}>
-                <h1>{data.simplePageCollection.items[0].title}</h1>
-                <ReactMarkdown>{data.simplePageCollection.items[0].body}</ReactMarkdown>
-              </Grid>
+          <Grid container className={classes.marginTopSmall}>
+            <Grid item>
+              <Typography variant="h6" className={classes.contentTitle}>
+                {data.simplePageCollection.items[0].title}
+              </Typography>
+              <ReactMarkdown>
+                {data.simplePageCollection.items[0].body}
+              </ReactMarkdown>
             </Grid>
-          </Container>
+          </Grid>
         )}
+      </ContentBody>
     </>
   );
 };