Add working but unstyled notify registration modal

web/components/action-buttons/ActionButton.tsx

@@ -31,6 +31,7 @@ export default function ActionButton({
         title={description || title}
         url={url}
         visible={showModal}
+        height="80vh"
         handleCancel={() => setShowModal(false)}
       />
     </>

web/components/action-buttons/FollowButton.tsx

@@ -0,0 +1,31 @@
+import { Button } from 'antd';
+import { HeartFilled } from '@ant-design/icons';
+import { useState } from 'react';
+import Modal from '../ui/Modal/Modal';
+import s from './ActionButton.module.scss';
+
+export default function FollowButton() {
+  const [showModal, setShowModal] = useState(false);
+
+  const buttonClicked = () => {
+    setShowModal(true);
+  };
+
+  return (
+    <>
+      <Button
+        type="primary"
+        className={`${s.button}`}
+        icon={<HeartFilled />}
+        onClick={buttonClicked}
+      >
+        Follow
+      </Button>
+      <Modal
+        title="Follow <servername>"
+        visible={showModal}
+        handleCancel={() => setShowModal(false)}
+      />
+    </>
+  );
+}

web/components/action-buttons/NotifyButton.tsx

@@ -0,0 +1,30 @@
+import { Button } from 'antd';
+import { NotificationFilled } from '@ant-design/icons';
+import { useState } from 'react';
+import Modal from '../ui/Modal/Modal';
+import s from './ActionButton.module.scss';
+import BrowserNotifyModal from '../modals/BrowserNotify/BrowserNotifyModal';
+
+export default function NotifyButton() {
+  const [showModal, setShowModal] = useState(false);
+
+  const buttonClicked = () => {
+    setShowModal(true);
+  };
+
+  return (
+    <>
+      <Button
+        type="primary"
+        className={`${s.button}`}
+        icon={<NotificationFilled />}
+        onClick={buttonClicked}
+      >
+        Notify
+      </Button>
+      <Modal title="Notify" visible={showModal} handleCancel={() => setShowModal(false)}>
+        <BrowserNotifyModal />
+      </Modal>
+    </>
+  );
+}