Add notification reminder popup component

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.module.scss

@@ -0,0 +1,22 @@
+.contentbutton {
+  background-color: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+}
+
+.closebutton {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  background-color: transparent;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.title {
+  border-bottom: none;
+  font-weight: bold;
+  padding-left: 5px;
+}

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx

@@ -1,6 +1,60 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-interface Props {}
+import { Popover } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import s from './NotifyReminderPopup.module.scss';
+
+interface Props {
+  visible: boolean;
+  children: React.ReactNode[];
+  notificationClicked: () => void;
+  notificationClosed: () => void;
+}
 
 export default function NotifyReminderPopup(props: Props) {
-  return <div>Popup reminder goes here</div>;
+  const { children, visible, notificationClicked, notificationClosed } = props;
+  const [visiblePopup, setVisiblePopup] = useState(visible);
+
+  const title = <div className={s.title}>Stay updated!</div>;
+  const popupStyle = {
+    borderRadius: '5px',
+    cursor: 'pointer',
+    paddingTop: '10px',
+    paddingRight: '10px',
+    fontSize: '16px',
+  };
+
+  const popupClicked = e => {
+    e.stopPropagation();
+    notificationClicked();
+  };
+
+  const popupClosed = e => {
+    e.stopPropagation();
+    setVisiblePopup(false);
+    notificationClosed();
+  };
+
+  const content = (
+    <button type="button" onClick={popupClicked} className={s.contentbutton}>
+      <button type="button" className={s.closebutton} onClick={popupClosed}>
+        <CloseOutlined />
+      </button>
+      Click and never miss
+      <br />
+      future streams!
+    </button>
+  );
+  return (
+    <Popover
+      placement="topLeft"
+      defaultVisible={visiblePopup}
+      visible={visiblePopup}
+      destroyTooltipOnHide
+      title={title}
+      content={content}
+      overlayInnerStyle={popupStyle}
+    >
+      {children}
+    </Popover>
+  );
 }