diff --git a/package.json b/package.json
index bd34dfed..cfa47947 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
"mobx": "^5.14.0",
"mobx-react-lite": "^1.4.1",
"nocache": "^2.1.0",
+ "notistack": "^0.9.2",
"pem": "^1.14.3",
"promise.allsettled": "^1.0.1",
"prop-types": "^15.7.2",
diff --git a/src/AppV2.js b/src/AppV2.js
index 92076876..db5a9963 100644
--- a/src/AppV2.js
+++ b/src/AppV2.js
@@ -1,6 +1,7 @@
import {CssBaseline, makeStyles} from '@material-ui/core';
import {MuiThemeProvider} from '@material-ui/core/styles';
import {observer} from 'mobx-react-lite';
+import {SnackbarProvider} from 'notistack';
import React, {lazy, Suspense} from 'react';
import {hot} from 'react-hot-loader/root';
import {Route, Switch} from 'react-router-dom';
@@ -9,6 +10,7 @@ import Footer from 'v2/components/Footer';
import theme from 'v2/theme';
import FailedPanel from 'v2/components/UI/FailedPanel';
import Socket from 'v2/stores/socket';
+import getColor from 'v2/utils/getColor';
try {
Socket.init();
@@ -33,41 +35,47 @@ const ApplicationDetail = lazy(() =>
);
const Favorites = lazy(() => import('v2/components/Favorites'));
-const useStyles = makeStyles(theme => ({
- root: {
- display: 'flex',
- overflow: 'hidden',
- minHeight: '100vh',
- },
- content: {
- marginLeft: 50,
- minWidth: '1px',
- padding: '50px 24px 0 24px',
- maxWidth: 'calc(100% - 50px)',
- width: '100%',
- display: 'flex',
- flexDirection: 'column',
- [theme.breakpoints.down('sm')]: {
- marginLeft: 0,
- padding: 0,
- paddingTop: 80,
- maxWidth: '100%',
+const useStyles = makeStyles(() => {
+ return {
+ root: {
+ display: 'flex',
+ overflow: 'hidden',
+ minHeight: '100vh',
},
- },
- toolbar: {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'flex-end',
- padding: '0 8px',
- ...theme.mixins.toolbar,
- [theme.breakpoints.down('md')]: {
- minHeight: 85,
+ content: {
+ marginLeft: 50,
+ minWidth: '1px',
+ padding: '50px 24px 0 24px',
+ maxWidth: 'calc(100% - 50px)',
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ [theme.breakpoints.down('sm')]: {
+ marginLeft: 0,
+ padding: 0,
+ paddingTop: 80,
+ maxWidth: '100%',
+ },
},
- [theme.breakpoints.up('md')]: {
- minHeight: 50,
+ toolbar: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ padding: '0 8px',
+ ...theme.mixins.toolbar,
+ [theme.breakpoints.down('md')]: {
+ minHeight: 85,
+ },
+ [theme.breakpoints.up('md')]: {
+ minHeight: 50,
+ },
},
- },
-}));
+ success: {
+ backgroundColor: getColor('grey2')(theme),
+ color: getColor('white')(theme),
+ },
+ };
+});
const App = () => {
const classes = useStyles();
@@ -75,46 +83,61 @@ const App = () => {
return (
-
-
-
+
+
+
+
-
-
- {hasError &&
}
-
Loading...}>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ {hasError &&
}
+
Loading...}>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
);
};
diff --git a/src/v2/components/TourDeSol/index.jsx b/src/v2/components/TourDeSol/index.jsx
index a2dc4330..53129c09 100644
--- a/src/v2/components/TourDeSol/index.jsx
+++ b/src/v2/components/TourDeSol/index.jsx
@@ -16,7 +16,13 @@ import Table from './Table';
import Cards from './Cards';
import useStyles from './styles';
-const TourDeSol = ({history, location}: {history: RouterHistory, location: Location}) => {
+const TourDeSol = ({
+ history,
+ location,
+}: {
+ history: RouterHistory,
+ location: Location,
+}) => {
const {endpointName} = socketActions;
const queryParams = queryParse(location.search);
useEffect(() => {
diff --git a/src/v2/components/UI/CopyBtn/index.jsx b/src/v2/components/UI/CopyBtn/index.jsx
index a2dabcc6..fe016dcd 100644
--- a/src/v2/components/UI/CopyBtn/index.jsx
+++ b/src/v2/components/UI/CopyBtn/index.jsx
@@ -1,14 +1,24 @@
// @flow
import React from 'react';
+import {withSnackbar, WithSnackbarProps} from 'notistack';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import {ReactComponent as CopyIcon} from 'v2/assets/icons/copy.svg';
import useStyles from './styles';
-const CopyBtn = ({text}: {text: string | number}) => {
+const CopyBtn = ({
+ text,
+ enqueueSnackbar,
+}: {text: string | number} & WithSnackbarProps) => {
const classes = useStyles();
+ const onCopy = () => {
+ enqueueSnackbar('Successfully copied to clipboard', {
+ variant: 'success',
+ autoHideDuration: 2000,
+ });
+ };
return (
-
+
@@ -16,4 +26,4 @@ const CopyBtn = ({text}: {text: string | number}) => {
);
};
-export default CopyBtn;
+export default withSnackbar(CopyBtn);
diff --git a/yarn.lock b/yarn.lock
index 8307b466..ea38a25d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11207,6 +11207,16 @@ normalize-url@^4.0.0:
resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.1.0.tgz#307e74c87473efa81969ad1b4bb91f1990178904"
integrity sha512-X781mkWeK6PDMAZJfGn/wnwil4dV6pIdF9euiNqtA89uJvZuNDJO2YyJxiwpPhTQcF5pYUU1v+kcOxzYV6rZlA==
+notistack@^0.9.2:
+ version "0.9.2"
+ resolved "https://registry.yarnpkg.com/notistack/-/notistack-0.9.2.tgz#333ca7e08e85ae10867b1e8be5d82b149676aad6"
+ integrity sha512-Z2zi3ankqvwmrQvUx7SHM2X3P8llbPA/O1nM1hqn2fGuffn40Fi8isw701pdxczxA6S7huSyfOE/ZPgeTpWmrQ==
+ dependencies:
+ classnames "^2.2.6"
+ hoist-non-react-statics "^3.3.0"
+ prop-types "^15.7.2"
+ react-is "^16.8.6"
+
npm-audit-report@^1.3.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/npm-audit-report/-/npm-audit-report-1.3.2.tgz#303bc78cd9e4c226415076a4f7e528c89fc77018"