Add Privacy Policy page

Author: catarak

client/modules/IDE/pages/PrivacyPolicy.jsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import Helmet from 'react-helmet';
+import ReactMarkdown from 'react-markdown';
+import remarkSlug from 'remark-slug';
+import styled from 'styled-components';
+import axios from 'axios';
+import Nav from '../../../components/Nav';
+import { remSize } from '../../../theme';
+
+const PrivacyPolicyContainer = styled.main`
+  max-width: ${remSize(700)};
+  margin: 0 auto;
+  padding: ${remSize(10)};
+  & p {
+    margin-bottom: ${remSize(10)};
+  }
+  font-size: ${remSize(16)};
+  & h1 {
+    font-size: 2em;
+  }
+  & h2 {
+    font-size: 1.5em;
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+  }
+  & h3 {
+    font-size: 1.17em;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    font-weight: bold;
+  }
+  & ul {
+    list-style: initial;
+    padding-inline-start: 40px;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+  }
+`;
+
+function PrivacyPolicy() {
+  const [privacyPolicy, setPrivacyPolicy] = useState('');
+  useEffect(() => {
+    axios.get('privacy-policy.md').then((response) => {
+      setPrivacyPolicy(response.data);
+    });
+  }, []);
+  return (
+    <>
+      <Helmet>
+        <title>Privacy Policy</title>
+      </Helmet>
+      <Nav layout="dashboard" />
+      <PrivacyPolicyContainer>
+        <ReactMarkdown remarkPlugins={[remarkSlug]}>
+          {privacyPolicy}
+        </ReactMarkdown>
+      </PrivacyPolicyContainer>
+    </>
+  );
+}
+
+export default PrivacyPolicy;

client/modules/IDE/pages/TermsOfUse.jsx

@@ -17,6 +17,7 @@ import CollectionView from './modules/User/pages/CollectionView';
 import DashboardView from './modules/User/pages/DashboardView';
 import createRedirectWithUsername from './components/createRedirectWithUsername';
 import MobileDashboardView from './modules/Mobile/MobileDashboardView';
+import PrivacyPolicy from './modules/IDE/pages/PrivacyPolicy';
 import { getUser } from './modules/User/actions';
 import { stopSketch } from './modules/IDE/actions/ide';
 import {
@@ -117,6 +118,7 @@ const routes = (store) => (
     {/* Mobile-only Routes */}
     <Route path="/preview" component={MobileSketchView} />
     <Route path="/preferences" component={MobilePreferences} />
+    <Route path="privacy-policy" component={PrivacyPolicy} />
   </Route>
 );