feat: disclaimer

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 (
+    <div className={classes.popup} onClick={stopClick}>
+      <IconButton onClick={onClose} className={classes.closeButton}>
+        <CloseIcon className={classes.closeIcon} fontSize="large" />
+      </IconButton>
+      <SectionHeader title="Website disclaimer" />
+      <p>
+        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.
+      </p>
+    </div>
+  );
+};
+
+Disclaimer.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default Disclaimer;

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 (
     <div>
@@ -34,6 +36,7 @@ const Partnership = () => {
       </Button>
       <div className={classes.links}>
         <a
+          className={classes.link}
           href="https://forums.solana.com/"
           target="_blank"
           rel="noopener noreferrer"
@@ -42,11 +45,25 @@ const Partnership = () => {
           Discuss on forums
           <img src={iconRight} width={53} alt="" />
         </a>
-        <a href="https://solana.com/" target="_blank" rel="noopener noreferrer">
+        <button className={classes.link} onClick={openDisclaimer}>
           Website disclaimer
           <img src={iconRight} width={53} alt="" />
-        </a>
+        </button>
       </div>
+      <Modal
+        open={isOpen}
+        onClose={closeDisclaimer}
+        closeAfterTransition
+        BackdropComponent={Backdrop}
+        className={classes.disclaimer}
+        BackdropProps={{
+          timeout: 300,
+        }}
+      >
+        <Fade in={isOpen}>
+          <Disclaimer onClose={closeDisclaimer} />
+        </Fade>
+      </Modal>
     </div>
   );
 };

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,
     },
   },
-});
+}));

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',