diff --git a/client/common/RouterTab.jsx b/client/common/RouterTab.jsx new file mode 100644 index 0000000000..d08c839855 --- /dev/null +++ b/client/common/RouterTab.jsx @@ -0,0 +1,25 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { NavLink } from 'react-router-dom'; + +/** + * Wraps the react-router `NavLink` with dashboard-header__tab styling. + */ +const Tab = ({ children, to }) => ( +
  • + + {children} + +
    • +); + +Tab.propTypes = { + children: PropTypes.string.isRequired, + to: PropTypes.string.isRequired +}; + +export default Tab; diff --git a/client/modules/Legal/pages/CodeOfConduct.jsx b/client/modules/Legal/pages/CodeOfConduct.jsx index 50c67edb9c..c961ec74b6 100644 --- a/client/modules/Legal/pages/CodeOfConduct.jsx +++ b/client/modules/Legal/pages/CodeOfConduct.jsx @@ -1,22 +1,12 @@ -import React, { useEffect, useState } from 'react'; -import Helmet from 'react-helmet'; -import axios from 'axios'; -import PolicyContainer from '../components/PolicyContainer'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import Legal from './Legal'; function CodeOfConduct() { - const [codeOfConduct, setCodeOfConduct] = useState(''); - useEffect(() => { - axios.get('code-of-conduct.md').then((response) => { - setCodeOfConduct(response.data); - }); - }, []); + const { t } = useTranslation(); + return ( - <> - - p5.js Web Editor | Code of Conduct - - - + ); } diff --git a/client/modules/Legal/pages/Legal.jsx b/client/modules/Legal/pages/Legal.jsx index fa4028c7b1..0e629f789a 100644 --- a/client/modules/Legal/pages/Legal.jsx +++ b/client/modules/Legal/pages/Legal.jsx @@ -1,90 +1,71 @@ -import React, { useState, useEffect } from 'react'; -import { useHistory, useLocation } from 'react-router-dom'; -import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; -import styled from 'styled-components'; +import axios from 'axios'; +import PropTypes from 'prop-types'; +import React, { useEffect, useState } from 'react'; +import Helmet from 'react-helmet'; import { useTranslation } from 'react-i18next'; -import PrivacyPolicy from './PrivacyPolicy'; -import TermsOfUse from './TermsOfUse'; -import CodeOfConduct from './CodeOfConduct'; +import styled from 'styled-components'; +import RouterTab from '../../../common/RouterTab'; import RootPage from '../../../components/RootPage'; +import { remSize } from '../../../theme'; +import Loader from '../../App/components/loader'; import Nav from '../../IDE/components/Header/Nav'; -import { remSize, prop } from '../../../theme'; +import PolicyContainer from '../components/PolicyContainer'; -const StyledTabList = styled(TabList)` +const StyledTabList = styled.nav` display: flex; - max-width: ${remSize(680)}; - padding-top: ${remSize(10)}; + max-width: ${remSize(700)}; margin: 0 auto; - border-bottom: 1px solid ${prop('Modal.separator')}; -`; - -const TabTitle = styled.p` - padding: 0 ${remSize(5)} ${remSize(5)} ${remSize(5)}; - cursor: pointer; - color: ${prop('inactiveTextColor')}; - &:hover, - &:focus { - color: ${prop('primaryTextColor')}; + padding: 0 ${remSize(10)}; + & ul { + padding-top: ${remSize(10)}; + gap: ${remSize(19)}; } `; -function Legal() { - const [selectedIndex, setSelectedIndex] = useState(0); +function Legal({ policyFile, title }) { const { t } = useTranslation(); - const location = useLocation(); - const history = useHistory(); + const [isLoading, setIsLoading] = useState(true); + const [policy, setPolicy] = useState(''); useEffect(() => { - if (location.pathname === '/privacy-policy') { - setSelectedIndex(0); - } else if (location.pathname === '/terms-of-use') { - setSelectedIndex(1); - } else { - setSelectedIndex(2); - } - }, [location]); - - function onSelect(index, lastIndex, event) { - if (index === lastIndex) return; - if (index === 0) { - setSelectedIndex(0); - history.push('/privacy-policy'); - } else if (index === 1) { - setSelectedIndex(1); - history.push('/terms-of-use'); - } else if (index === 2) { - setSelectedIndex(2); - history.push('/code-of-conduct'); - } - } + axios.get(policyFile).then((response) => { + setPolicy(response.data); + setIsLoading(false); + }); + }, [policyFile]); return ( + {/* TODO: translate site name */} + + p5.js Web Editor | {title} +