Add working but unstyled notify registration modal

web/components/ui/Content/Content.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-danger */
 import { useRecoilValue } from 'recoil';
-import { Layout, Button, Tabs, Spin } from 'antd';
-import { NotificationFilled, HeartFilled } from '@ant-design/icons';
+import { Layout, Tabs, Spin } from 'antd';
 import {
   clientConfigStateAtom,
   chatMessagesAtom,
@@ -31,6 +30,8 @@ import ServerLogo from '../Logo/Logo';
 import CategoryIcon from '../CategoryIcon/CategoryIcon';
 import OfflineBanner from '../OfflineBanner/OfflineBanner';
 import { AppStateOptions } from '../../stores/application-state';
+import FollowButton from '../../action-buttons/FollowButton';
+import NotifyButton from '../../action-buttons/NotifyButton';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
@@ -88,17 +89,13 @@ export default function ContentComponent() {
         <div className={s.buttonsLogoTitleSection}>
           <ActionButtonRow>
             {externalActionButtons}
-            <Button type="primary" icon={<HeartFilled />}>
-              Follow
-            </Button>
+            <FollowButton />
             <NotifyReminderPopup
               visible
               notificationClicked={() => {}}
               notificationClosed={() => {}}
             >
-              <Button type="primary" icon={<NotificationFilled />}>
-                Notify
-              </Button>
+              <NotifyButton />
             </NotifyReminderPopup>
           </ActionButtonRow>
 

web/components/ui/Modal/Modal.tsx

@@ -10,15 +10,16 @@ interface Props {
   handleCancel?: () => void;
   afterClose?: () => void;
   children?: ReactNode;
+  height?: string;
 }
 
 export default function Modal(props: Props) {
-  const { title, url, visible, handleOk, handleCancel, afterClose, children } = props;
+  const { title, url, visible, handleOk, handleCancel, afterClose, height, children } = props;
   const [loading, setLoading] = useState(!!url);
 
   const modalStyle = {
     padding: '0px',
-    height: '80vh',
+    height: height || '40vh',
   };
 
   const iframe = url && (
@@ -69,4 +70,5 @@ Modal.defaultProps = {
   handleOk: undefined,
   handleCancel: undefined,
   afterClose: undefined,
+  height: undefined,
 };

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx

@@ -1,6 +1,7 @@
 import { Popover } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import React, { useState, useEffect } from 'react';
+import { LOCAL_STORAGE_KEYS, getLocalStorage } from '../../../utils/localStorage';
 import s from './NotifyReminderPopup.module.scss';
 
 interface Props {
@@ -14,9 +15,11 @@ export default function NotifyReminderPopup(props: Props) {
   const { children, visible, notificationClicked, notificationClosed } = props;
   const [visiblePopup, setVisiblePopup] = useState(visible);
   const [mounted, setMounted] = useState(false);
+  const [shouldShowPopup, setShouldShowPopup] = useState(false);
 
   useEffect(() => {
     setMounted(true);
+    setShouldShowPopup(!getLocalStorage(LOCAL_STORAGE_KEYS.hasDisplayedNotificationModal));
   }, []);
 
   const title = <div className={s.title}>Stay updated!</div>;
@@ -52,7 +55,8 @@ export default function NotifyReminderPopup(props: Props) {
     </div>
   );
   return (
-    mounted && (
+    mounted &&
+    shouldShowPopup && (
       <Popover
         placement="topLeft"
         defaultVisible={visiblePopup}