1import {Icon} from '@material-ui/core';
 2import Button from '@material-ui/core/Button';
 3import {makeStyles} from '@material-ui/core/styles';
 4import {useState} from 'react';
 5import {hashText, setCookie} from '../../lib/cookies';
 6import Markdown from '../Markdown';
 7
 8const ANNOUNCEMENT_COOKIE = 'lastAnnouncementSeen';
 9
10interface Props {
11  announcement?: string;
12}
13
14const Banner = (props: Props) => {
15  const {announcement} = props;
16  const classes = useStyles();
17  const [showBanner, setShowBanner] = useState(!!announcement);
18
19  const onBannerClear = () => {
20    const hashedMessage = hashText(announcement);
21    setCookie(ANNOUNCEMENT_COOKIE, hashedMessage);
22    setShowBanner(false);
23  };
24
25  if (!showBanner) return null;
26
27  return (
28    <div className={classes.banner}>
29      <Markdown className={classes.htmlReset}>{announcement}</Markdown>
30      <Button
31        className={classes.clear}
32        onClick={e => {
33          e.stopPropagation();
34          onBannerClear();
35        }}
36      >
37        <Icon>close</Icon>
38      </Button>
39    </div>
40  );
41};
42
43const useStyles = makeStyles(theme => ({
44  banner: {
45    position: 'relative',
46    background: `linear-gradient(90deg, #FCDC61 20%, #78B2AC 90%)`,
47    width: '100%',
48    padding: '12px 60px',
49    textAlign: 'center',
50    zIndex: theme.zIndex.appBar - 1,
51    color: 'black',
52  },
53  clear: {
54    position: 'absolute',
55    right: '12px',
56    bottom: '50%',
57    transform: 'translateY(50%)',
58    minWidth: '44px',
59    padding: '12px',
60    lineHeight: '1.4em',
61  },
62  htmlReset: {
63    '& a': {
64      color: 'inherit',
65      margin: 0,
66    },
67    '& p': {
68      margin: 0,
69    },
70  },
71}));
72
73export default Banner;