diff --git a/src/v2/components/Footer/Partnership/Disclaimer.jsx b/src/v2/components/Footer/Partnership/Disclaimer.jsx new file mode 100644 index 00000000..82c2d1e4 --- /dev/null +++ b/src/v2/components/Footer/Partnership/Disclaimer.jsx @@ -0,0 +1,46 @@ +import {IconButton} from '@material-ui/core'; +import React from 'react'; +import SectionHeader from 'v2/components/UI/SectionHeader'; +import CloseIcon from '@material-ui/icons/Close'; +import PropTypes from 'prop-types'; + +import useStyles from './styles'; +const Disclaimer = ({onClose}) => { + const classes = useStyles(); + const stopClick = e => e.stopPropagation(); + + return ( +
+ + + + +

+ Nothing in this website is an offer to sell, or the solicitation of an + offer to buy, any tokens. Solana is publishing this website solely to + receive feedback and comments from the public. If and when Solana offers + for sale any tokens (or a Simple Agreement for Future Tokens), it will + do so through definitive offering documents, including a disclosure + document and risk factors. Those definitive documents also are expected + to include an updated version of this website, which may differ + significantly from the current version. If and when Solana makes such an + offering in the United States, the offering likely will be available + solely to accredited investors. Nothing in this website should be + treated or read as a guarantee or promise of how Solana’s business or + the tokens will develop or of the utility or value of the tokens. This + website outlines current plans, which could change at its discretion, + and the success of which will depend on many factors outside Solana’s + control, including market-based factors and factors within the data and + cryptocurrency industries, among others. Any statements about future + events are based solely on Solana’s analysis of the issues described in + this website. That analysis may prove to be incorrect. +

+
+ ); +}; + +Disclaimer.propTypes = { + onClose: PropTypes.func.isRequired, +}; + +export default Disclaimer; diff --git a/src/v2/components/Footer/Partnership/index.jsx b/src/v2/components/Footer/Partnership/index.jsx index 53026ecf..82b77e10 100644 --- a/src/v2/components/Footer/Partnership/index.jsx +++ b/src/v2/components/Footer/Partnership/index.jsx @@ -1,17 +1,19 @@ -import {Typography} from '@material-ui/core'; -import React from 'react'; +import React, {useState} from 'react'; import Button from 'v2/components/UI/Button'; +import {Modal, Fade, Typography, Backdrop} from '@material-ui/core'; import iconRight from 'v2/assets/icons/arrow-right.png'; import Mixpanel from 'v2/mixpanel'; +import Disclaimer from './Disclaimer'; import useStyles from './styles'; const Partnership = () => { + const [isOpen, setOpen] = useState(false); const classes = useStyles(); - const handlePartner = () => Mixpanel.track('Clicked Partner with us'); - const handleDiscuss = () => Mixpanel.track('Clicked Discuss on Forums'); + const openDisclaimer = () => setOpen(true); + const closeDisclaimer = () => setOpen(false); return (
@@ -34,6 +36,7 @@ const Partnership = () => {
{ Discuss on forums - +
+ + + + +
); }; diff --git a/src/v2/components/Footer/Partnership/styles.js b/src/v2/components/Footer/Partnership/styles.js index 6999dc80..764b2e1f 100644 --- a/src/v2/components/Footer/Partnership/styles.js +++ b/src/v2/components/Footer/Partnership/styles.js @@ -1,6 +1,8 @@ import {makeStyles} from '@material-ui/core'; -export default makeStyles({ +import getColor from '../../../utils/getColor'; + +export default makeStyles(theme => ({ title: { marginBottom: 15, }, @@ -11,21 +13,65 @@ export default makeStyles({ }, links: { marginTop: 43, - '& a': { - display: 'flex', - alignItems: 'center', - textDecoration: 'none', - textTransform: 'uppercase', - fontWeight: 'bold', - fontSize: 11, - letterSpacing: 3.2, - color: '#fff', - marginBottom: 21, - width: 250, - justifyContent: 'space-between', - '& img': { - marginLeft: 10, - }, + }, + link: { + background: 'transparent', + border: 'none', + padding: 0, + display: 'flex', + alignItems: 'center', + textDecoration: 'none', + textTransform: 'uppercase', + fontWeight: 'bold', + fontSize: 11, + letterSpacing: 3.2, + color: '#fff', + marginBottom: 21, + outline: 'none', + width: 250, + justifyContent: 'space-between', + '& img': { + marginLeft: 10, + }, + cursor: 'pointer', + }, + disclaimer: { + display: 'flex', + zIndex: 9999, + [theme.breakpoints.down('sm')]: { + overflow: 'auto', + }, + }, + closeButton: { + position: 'absolute', + right: 0, + top: 0, + backgroundColor: getColor('white')(theme), + borderRadius: 0, + '&:hover': { + backgroundColor: getColor('white')(theme), + }, + }, + closeIcon: { + color: getColor('dark')(theme), + }, + popup: { + position: 'relative', + background: getColor('dark')(theme), + padding: '0 150px', + maxWidth: 1050, + height: '70%', + margin: 'auto', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + [theme.breakpoints.down('sm')]: { + padding: 25, + height: 'auto', + }, + '& p': { + fontSize: 14, + lineHeight: 1.73, }, }, -}); +})); diff --git a/src/v2/components/UI/SectionHeader/styles.js b/src/v2/components/UI/SectionHeader/styles.js index 112754cc..74ac54c0 100644 --- a/src/v2/components/UI/SectionHeader/styles.js +++ b/src/v2/components/UI/SectionHeader/styles.js @@ -18,6 +18,9 @@ export default makeStyles(theme => ({ alignItems: 'center', whiteSpace: 'nowrap', marginRight: 25, + [theme.breakpoints.down('sm')]: { + whiteSpace: 'normal', + }, }, decor: { position: 'absolute',