diff --git a/src/pages/settings/Notifications.js b/src/pages/settings/Notifications.js index 81635076..1bf19e28 100644 --- a/src/pages/settings/Notifications.js +++ b/src/pages/settings/Notifications.js @@ -3,7 +3,7 @@ import { useStoreState, useStoreActions } from 'easy-peasy'; import Header from 'components/Header'; import { Row, Text } from 'components/Containers'; import styled from 'styled-components'; -import { Grid } from '@material-ui/core'; +import { Grid, Tooltip } from '@material-ui/core'; import { Paper } from 'components/Paper'; import Button from 'components/Buttons'; import queryString from 'query-string'; @@ -168,11 +168,59 @@ const Notifications = () => { )} + +
Battle Notifier
+ {notifSettings?.DiscordId ? ( + + To manage your battle notifications, go to Discord Elma Online and + write in any channel. + + ) : ( + + You can get notifications as PMs from the @ElmaOnline Discord bot + when a battle is started. +
    +
  1. Join Discord Elma Online.
  2. +
  3. + In this page, click{' '} + {' '} + to connect your Discord account. +
  4. +
  5. + Finally, go back to Discord Elma Online and write{' '} + in any channel. +
    You will get a PM from the bot with the instructions to + get started. +
  6. +
+
+ )} +
); }; +const CopyToClipboard = ({ text }) => { + const [copied, setCopied] = React.useState(false); + const copy = () => { + navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + return ( + + + + + + ); +}; + const Avatar = styled.img` height: 80px; width: 80px;