NotifyReminderPopup uses a custom Popover (#3194)

* NotifyReminderPopup uses a custom Popover

* fix Popover resizing in storybook

* Prettified Code!

---------

Co-authored-by: janWilejan <>
Co-authored-by: janWilejan <janWilejan@users.noreply.github.com>

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

@@ -3,6 +3,7 @@
 }
 
 .contentbutton {
+  width: 150px;
   background-color: transparent;
   border: none;
   text-align: left;
@@ -12,8 +13,8 @@
 
 .closebutton {
   position: absolute;
-  right: 10px;
-  top: 10px;
+  right: 0;
+  top: 0;
   background-color: transparent;
   border: none;
   font-size: 1.3rem;

web/components/ui/NotifyReminderPopup/NotifyReminderPopup.tsx

@@ -1,7 +1,7 @@
-import { Popover } from 'antd';
 import React, { useState, useEffect, FC } from 'react';
 import dynamic from 'next/dynamic';
 import styles from './NotifyReminderPopup.module.scss';
+import { Popover } from '../Popover/Popover';
 
 // Lazy loaded components
 
@@ -34,13 +34,6 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
   }, []);
 
   const title = <div className={styles.title}>Stay updated!</div>;
-  const popupStyle = {
-    borderRadius: '5px',
-    cursor: 'pointer',
-    paddingTop: '10px',
-    paddingRight: '10px',
-    fontSize: '14px',
-  };
 
   const popupClicked = e => {
     e.stopPropagation();
@@ -58,27 +51,14 @@ export const NotifyReminderPopup: FC<NotifyReminderPopupProps> = ({
       <button type="button" className={styles.closebutton} onClick={popupClosed}>
         <CloseOutlined />
       </button>
-      <div className={styles.contentbutton}>
-        Click and never miss
-        <br />
-        future streams!
-      </div>
+      <div className={styles.contentbutton}>Click and never miss future streams!</div>
     </div>
   );
 
   return (
     mounted && (
-      <Popover
-        placement="topRight"
-        defaultOpen={openPopup}
-        open={openPopup}
-        destroyTooltipOnHide
-        title={title}
-        content={content}
-        overlayInnerStyle={popupStyle}
-        color={styles.popupBackgroundColor}
-      >
-        <div>{children}</div>
+      <Popover open={openPopup} title={title} content={content}>
+        {children}
       </Popover>
     )
   );