diff --git a/src/components/PrivacyPolicy/PrivacyPolicy.css b/src/components/PrivacyPolicy/PrivacyPolicy.css new file mode 100644 index 00000000..7df85fc3 --- /dev/null +++ b/src/components/PrivacyPolicy/PrivacyPolicy.css @@ -0,0 +1,26 @@ +@import '../../marketplace.css'; + +.root { + & p { + @apply --marketplaceH4FontStyles; + } + & h2 { + /* Adjust heading margins to work with the reduced body font size */ + margin: 23px 0 19px 0; + + @media (--viewportMedium) { + margin: 24px 0 24px 0; + } + } + + & .lastUpdated { + @apply --marketplaceBodyFontStyles; + margin-top: 0; + margin-bottom: 55px; + + @media (--viewportMedium) { + margin-top: 0; + margin-bottom: 54px; + } + } +} diff --git a/src/components/PrivacyPolicy/PrivacyPolicy.js b/src/components/PrivacyPolicy/PrivacyPolicy.js new file mode 100644 index 00000000..0192d34d --- /dev/null +++ b/src/components/PrivacyPolicy/PrivacyPolicy.js @@ -0,0 +1,73 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +import css from './PrivacyPolicy.css'; + +const PrivacyPolicy = props => { + const { rootClassName, className } = props; + const classes = classNames(rootClassName || css.root, className); + return ( +
+

Last updated: October 30, 2017

+ +

+ Thank you for using Saunatime! Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +

1 Lorem ipsum dolor sit amet

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +

2 Sed ut perspiciatis unde

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque + laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi + architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit + aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione + voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, + consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et + dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum + exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi + consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil + molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +

+ +

3 At vero eos et accusamus

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium + voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati + cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id + est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam + libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod + maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. + Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut + et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a + sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis + doloribus asperiores repellat +

+
+ ); +}; + +PrivacyPolicy.defaultProps = { + rootClassName: null, + className: null, +}; + +const { string } = PropTypes; + +PrivacyPolicy.propTypes = { + rootClassName: string, + className: string, +}; + +export default PrivacyPolicy; diff --git a/src/components/index.js b/src/components/index.js index 897080f3..e70b5dbe 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -76,6 +76,7 @@ export { default as OrderDetailsPanel } from './OrderDetailsPanel/OrderDetailsPa export { default as OrderDiscussionPanel } from './OrderDiscussionPanel/OrderDiscussionPanel'; export { default as Page } from './Page/Page'; export { default as PaginationLinks } from './PaginationLinks/PaginationLinks'; +export { default as PrivacyPolicy } from './PrivacyPolicy/PrivacyPolicy'; export { default as Promised } from './Promised/Promised'; export { default as ResponsiveImage } from './ResponsiveImage/ResponsiveImage'; export { default as SaleDetailsPanel } from './SaleDetailsPanel/SaleDetailsPanel'; diff --git a/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.css b/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.css new file mode 100644 index 00000000..730f0954 --- /dev/null +++ b/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.css @@ -0,0 +1,15 @@ +@import '../../marketplace.css'; + +.heading { + margin: 5px 0 18px 0; + + @media (--viewportMedium) { + margin: 2px 0 23px 0; + } +} + +.content { + @media (--viewportLarge) { + max-width: 563px; + } +} diff --git a/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js b/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js index 460f2261..cef83627 100644 --- a/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js +++ b/src/containers/PrivacyPolicyPage/PrivacyPolicyPage.js @@ -7,9 +7,12 @@ import { LayoutWrapperSideNav, LayoutWrapperTopbar, LayoutWrapperFooter, + PrivacyPolicy, Footer, } from '../../components'; +import css from './PrivacyPolicyPage.css'; + const PrivacyPolicyPage = () => { const tabs = [ { @@ -35,7 +38,12 @@ const PrivacyPolicyPage = () => { -

TODO: Privacy policy

+
+

+ +

+ +