Skip to content

Commit 0302f74

Browse files
catarakcatarak
committed
Add Tabs to PP/ToS Page
1 parent 5f1daea commit 0302f74

File tree

6 files changed

+98
-21
lines changed

6 files changed

+98
-21
lines changed

‎client/modules/IDE/pages/Legal.jsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React, { useState, useEffect } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
4+
import { browserHistory } from 'react-router';
5+
import styled from 'styled-components';
6+
import PrivacyPolicy from './PrivacyPolicy';
7+
import TermsOfUse from './TermsOfUse';
8+
import RootPage from '../../../components/RootPage';
9+
import Nav from '../../../components/Nav';
10+
import { remSize, prop } from '../../../theme';
11+
12+
const StyledTabList = styled(TabList)`
13+
display: flex;
14+
max-width: ${remSize(680)};
15+
padding-top: ${remSize(10)};
16+
margin: 0 auto;
17+
border-bottom: 1px solid ${prop('Modal.separator')};
18+
`;
19+
20+
const StyledTab = styled(Tab)`
21+
cursor: pointer;
22+
& p {
23+
padding: 0 ${remSize(5)} ${remSize(5)} ${remSize(5)};
24+
}
25+
`;
26+
27+
function Legal({ location }) {
28+
const [selectedIndex, setSelectedIndex] = useState(0);
29+
useEffect(() => {
30+
if (location.pathname === '/privacy-policy') {
31+
setSelectedIndex(0);
32+
} else {
33+
setSelectedIndex(1);
34+
}
35+
}, [location]);
36+
37+
function onSelect(index, lastIndex, event) {
38+
if (index === lastIndex) return;
39+
if (index === 0) {
40+
setSelectedIndex(0);
41+
browserHistory.push('/privacy-policy');
42+
} else if (index === 1) {
43+
setSelectedIndex(1);
44+
browserHistory.push('/terms-of-use');
45+
}
46+
}
47+
48+
return (
49+
<RootPage>
50+
<Nav layout="dashboard" />
51+
<Tabs selectedIndex={selectedIndex} onSelect={onSelect}>
52+
<StyledTabList>
53+
<StyledTab className="react-tabs__tab">
54+
<p>Privacy Policy</p>
55+
</StyledTab>
56+
<StyledTab className="react-tabs__tab">
57+
<p>Terms of Use</p>
58+
</StyledTab>
59+
</StyledTabList>
60+
<TabPanel>
61+
<PrivacyPolicy />
62+
</TabPanel>
63+
<TabPanel>
64+
<TermsOfUse />
65+
</TabPanel>
66+
</Tabs>
67+
</RootPage>
68+
);
69+
}
70+
71+
Legal.propTypes = {
72+
location: PropTypes.shape({
73+
pathname: PropTypes.string
74+
}).isRequired
75+
};
76+
77+
export default Legal;

‎client/modules/IDE/pages/PrivacyPolicy.jsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React, { useEffect, useState } from 'react';
22
import Helmet from 'react-helmet';
33
import axios from 'axios';
4-
import Nav from '../../../components/Nav';
54
import PolicyContainer from '../components/PolicyContainer';
6-
import RootPage from '../../../components/RootPage';
75

86
function PrivacyPolicy() {
97
const [privacyPolicy, setPrivacyPolicy] = useState('');
@@ -15,12 +13,9 @@ function PrivacyPolicy() {
1513
return (
1614
<>
1715
<Helmet>
18-
<title>Privacy Policy</title>
16+
<title>p5.js Web Editor | Privacy Policy</title>
1917
</Helmet>
20-
<RootPage>
21-
<Nav layout="dashboard" />
22-
<PolicyContainer policy={privacyPolicy} />
23-
</RootPage>
18+
<PolicyContainer policy={privacyPolicy} />
2419
</>
2520
);
2621
}

‎client/modules/IDE/pages/TermsOfUse.jsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import React, { useEffect, useState } from 'react';
22
import Helmet from 'react-helmet';
33
import axios from 'axios';
4-
import Nav from '../../../components/Nav';
54
import PolicyContainer from '../components/PolicyContainer';
6-
import RootPage from '../../../components/RootPage';
75

86
function TermsOfUse() {
97
const [termsOfUse, setTermsOfUse] = useState('');
@@ -15,12 +13,9 @@ function TermsOfUse() {
1513
return (
1614
<>
1715
<Helmet>
18-
<title>Terms of Use</title>
16+
<title>p5.js Web Editor | Terms of Use</title>
1917
</Helmet>
20-
<RootPage>
21-
<Nav layout="dashboard" />
22-
<PolicyContainer policy={termsOfUse} />
23-
</RootPage>
18+
<PolicyContainer policy={termsOfUse} />
2419
</>
2520
);
2621
}

‎client/routes.jsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ import CollectionView from './modules/User/pages/CollectionView';
1717
import DashboardView from './modules/User/pages/DashboardView';
1818
import createRedirectWithUsername from './components/createRedirectWithUsername';
1919
import MobileDashboardView from './modules/Mobile/MobileDashboardView';
20-
import PrivacyPolicy from './modules/IDE/pages/PrivacyPolicy';
21-
import TermsOfUse from './modules/IDE/pages/TermsOfUse';
20+
// import PrivacyPolicy from './modules/IDE/pages/PrivacyPolicy';
21+
// import TermsOfUse from './modules/IDE/pages/TermsOfUse';
22+
import Legal from './modules/IDE/pages/Legal';
2223
import { getUser } from './modules/User/actions';
2324
import { stopSketch } from './modules/IDE/actions/ide';
2425
import {
@@ -119,8 +120,8 @@ const routes = (store) => (
119120
{/* Mobile-only Routes */}
120121
<Route path="/preview" component={MobileSketchView} />
121122
<Route path="/preferences" component={MobilePreferences} />
122-
<Route path="/privacy-policy" component={PrivacyPolicy} />
123-
<Route path="/terms-of-use" component={TermsOfUse} />
123+
<Route path="/privacy-policy" component={Legal} />
124+
<Route path="/terms-of-use" component={Legal} />
124125
</Route>
125126
);
126127

‎client/styles/components/_preferences.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,12 @@
140140
& + & {
141141
margin-left: #{45 / $base-font-size}rem;
142142
}
143+
&:hover {
144+
@include themify() {
145+
border-bottom: #{4 / $base-font-size}rem solid
146+
getThemifyVariable("button-background-hover-color");
147+
}
148+
}
143149
}
144150

145151
.preference__subheading {

‎client/theme.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,8 @@ export default {
126126
},
127127
Modal: {
128128
background: grays.light,
129-
border: grays.middleLight
129+
border: grays.middleLight,
130+
separator: grays.middleDark
130131
},
131132
Separator: grays.middleLight,
132133

@@ -206,7 +207,8 @@ export default {
206207
},
207208
Modal: {
208209
background: grays.dark,
209-
border: grays.middleDark
210+
border: grays.middleDark,
211+
separator: grays.middleLight
210212
},
211213
Separator: grays.middleDark,
212214

@@ -286,7 +288,8 @@ export default {
286288
},
287289
Modal: {
288290
background: grays.dark,
289-
border: grays.middleDark
291+
border: grays.middleDark,
292+
separator: grays.light
290293
},
291294
Separator: grays.middleDark,
292295

0 commit comments

Comments
 (0)