Merge pull request #62 from QuickSwap/feature/beta-warning-banner

Beta warning banner.

src/components/BetaWarningBanner/BetaWarningBanner.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { Box, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { AlertTriangle, XCircle } from 'react-feather';
+
+const useStyles = makeStyles(({ palette }) => ({
+  warningBanner: {
+    width: '100%',
+    background: '#e59840',
+    color: palette.background.default,
+    position: 'relative',
+    zIndex: 2,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '8px 32px 8px 16px',
+    '& > span': {
+      marginLeft: 8,
+      fontWeight: 'bold',
+      textTransform: 'uppercase',
+      width: 'calc(100% - 32px)',
+    },
+  },
+  closeBanner: {
+    position: 'absolute',
+    right: 12,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    display: 'flex',
+  },
+}));
+
+const BetaWarningBanner: React.FC = () => {
+  const classes = useStyles();
+  const [showBanner, setShowBanner] = useState(true);
+  return (
+    <>
+      {showBanner && (
+        <Box className={classes.warningBanner}>
+          <AlertTriangle size={20} />
+          <Typography variant='caption'>
+            This site is in beta. By using this software, you understand,
+            acknowledge and accept that Quickswap and/or the underlying software
+            are provided “as is” and “as available” basis and without warranties
+            or representations of any kind either expressed or implied
+          </Typography>
+          <Box
+            onClick={() => setShowBanner(false)}
+            className={classes.closeBanner}
+          >
+            <XCircle size={20} />
+          </Box>
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default BetaWarningBanner;

src/components/BetaWarningBanner/index.ts

@@ -0,0 +1 @@
+export { default } from './BetaWarningBanner';

src/components/index.ts

@@ -3,6 +3,7 @@ export { default as Footer } from './Footer';
 export { default as ListLogo } from './ListLogo';
 export { default as AreaChart } from './AreaChart';
 export { default as BarChart } from './BarChart';
+export { default as BetaWarningBanner } from './BetaWarningBanner';
 export { default as ChartType } from './ChartType';
 export { default as ColoredSlider } from './ColoredSlider';
 export { default as CustomTooltip } from './CustomTooltip';

src/layouts/PageLayout.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import HeroBkg from 'assets/images/heroBkg.png';
 import HeroBkg1 from 'assets/images/heroBkg.svg';
-import { Header, Footer } from 'components';
+import { Header, Footer, BetaWarningBanner } from 'components';
 
 const useStyles = makeStyles(({ palette, breakpoints }) => ({
   page: {
@@ -49,6 +49,7 @@ const PageLayout: React.FC<PageLayoutProps> = ({ children }) => {
 
   return (
     <Box className={classes.page}>
+      <BetaWarningBanner />
       <Header />
       <Box className={classes.heroBkg}>
         <img