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;
+  right: 0;
-  top: 10px;
+  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}>
+      <div className={styles.contentbutton}>Click and never miss future streams!</div>
-        Click and never miss
-        <br />
-        future streams!
-      </div>
     </div>
   );
 
   return (
     mounted && (
-      <Popover
+      <Popover open={openPopup} title={title} content={content}>
-        placement="topRight"
+        {children}
-        defaultOpen={openPopup}
-        open={openPopup}
-        destroyTooltipOnHide
-        title={title}
-        content={content}
-        overlayInnerStyle={popupStyle}
-        color={styles.popupBackgroundColor}
-      >
-        <div>{children}</div>
       </Popover>
     )
   );

web/components/ui/Popover/Popover.module.scss

@@ -0,0 +1,37 @@
+
+.anchor {
+  position: relative;
+  left: 50%;
+  width: 0;
+  height: 0;
+}
+
+.popover {
+  background-color: var(--theme-color-components-primary-button-background);
+  position: absolute;
+  bottom: 10px;
+  right: -20px;
+  border-radius: 5px;
+  width: max-content;
+}
+
+.popover>.title {
+  padding: 10px;
+  padding-bottom: 0;
+}
+
+.popover>.content {
+  padding: 10px;
+  padding-top: 0;
+}
+
+// Popover tail
+.popover::after {
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: var(--theme-color-components-primary-button-background);
+  right: 10px;
+  position: absolute;
+}
+
+

web/components/ui/Popover/Popover.tsx

@@ -0,0 +1,36 @@
+import React, { FC, ReactNode } from 'react';
+import styles from './Popover.module.scss';
+
+export type PopoverProps = {
+  open: boolean;
+  title: ReactNode;
+  content: ReactNode;
+  children?: ReactNode;
+};
+
+/// Replace Popover from antd with a custom popover implementation.
+///
+/// The popover is positioned relative to its parent (unlike antd's popover,
+/// which uses absolute positioning on the page).
+//
+// TODO the following properties of antd's popover have not been implemented
+//  placement ("topRight" is used as default)
+//  defaultOpen
+//  destroyTooltipOnHide
+//  overlayInnerStyle
+//  color (it uses var(--theme-color-components-primary-button-background))
+
+export const Popover: FC<PopoverProps> = ({ open, title, content, children }) => (
+  <div style={{ width: 'max-content', height: 'max-content' }}>
+    {open && (
+      <div className={styles.anchor}>
+        <div className={styles.popover}>
+          <div className={styles.title}>{title}</div>
+          <hr style={{ color: 'var(--color-owncast-palette-4)' }} />
+          <div className={styles.content}>{content}</div>
+        </div>
+      </div>
+    )}
+    {children}
+  </div>
+);