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 */
+import { Popover } from 'antd';
-interface Props {}
+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>
+  );
 }

web/stories/NotifyReminder.stories.tsx

@@ -1,8 +1,17 @@
+/* eslint-disable no-alert */
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import NotifyReminder from '../components/ui/NotifyReminderPopup/NotifyReminderPopup';
 import Mock from './assets/mocks/notify-popup.png';
 
+const Example = args => (
+  <div style={{ margin: '20px', marginTop: '130px' }}>
+    <NotifyReminder {...args}>
+      <button type="button">notify button</button>
+    </NotifyReminder>
+  </div>
+);
+
 export default {
   title: 'owncast/Notify Reminder',
   component: NotifyReminder,
@@ -14,13 +23,26 @@ export default {
     docs: {
       description: {
         component: `After visiting the page three times this popup reminding you that you can register for live stream notifications shows up.
-Clicking it will make the notificaiton modal display. Clicking the "X" will hide the modal and make it never show again.`,
+Clicking it will make the notification modal display. Clicking the "X" will hide the modal and make it never show again.`,
       },
     },
   },
 } as ComponentMeta<typeof NotifyReminder>;
 
-const Template: ComponentStory<typeof NotifyReminder> = args => <NotifyReminder {...args} />;
+const Template: ComponentStory<typeof NotifyReminder> = args => <Example {...args} />;
 
-export const Example = Template.bind({});
+export const Active = Template.bind({});
-Example.args = {};
+Active.args = {
+  visible: true,
+  notificationClicked: () => {
+    alert('notification clicked');
+  },
+  notificationClosed: () => {
+    alert('notification closed');
+  },
+};
+
+export const InActive = Template.bind({});
+InActive.args = {
+  visible: false,
+};

web/style-definitions/tokens/color/antd-overrides.yaml

@@ -9,7 +9,7 @@ text-color-secondry:
 link-color:
   value: 'var(--theme-link-color)'
 popover-background:
-  value: 'var(--theme-background)'
+  value: '{color.owncast.purple.700.value}'
 background-color-light:
   value: 'var(--theme-background-secondary)'
 

web/styles/ant-overrides.scss

@@ -536,3 +536,4 @@ textarea.ant-input {
     display: block;
   }
 }
+

web/styles/theme.less

@@ -1,10 +1,11 @@
+
 // Do not edit directly
-// Generated on Sat, 07 May 2022 17:24:18 GMT
+// Generated on Tue, 17 May 2022 02:47:26 GMT
 
 @text-color: var(--theme-text-color);
 @text-color-secondry: var(--theme-text-color-secondary);
 @link-color: var(--theme-link-color);
-@popover-background: var(--theme-background);
+@popover-background: #6941c6;
 @background-color-light: var(--theme-background-secondary);
 @primary-color: #9e77ed;
 @info-color: #667085;
@@ -19,12 +20,10 @@
 @theme-text-color: #d0d5dd; // The color of the text in the application.
 @theme-text-color-secondary: #667085;
 @theme-link-color: #9e77ed;
-@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-  'Segoe UI Symbol', 'Noto Color Emoji';
 @theme-background: #1b1a26; // The main background color of the page.
 @theme-background-secondary: #16151f; // A secondary background color used in sections and controls.
-@theme-rounded-corners: 5px; // The radius of rounded corners.
+@theme-rounded-corners: 5px; // The radius of rounded corners used in places.
 @theme-success-color: #12b76a;
 @theme-info-color: #d6bbfb;
 @theme-warning-color: #f79009;
@@ -59,9 +58,7 @@
 @color-owncast-logo-blue: #2086e1;
 @color-owncast-background: #1b1a26;
 @color-owncast-background-secondary: #16151f;
-@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-  'Segoe UI Symbol', 'Noto Color Emoji';
 @owncast-purple: #7871ff;
 @owncast-purple-25: rgba(120, 113, 255, 0.25);
 @owncast-purple-50: rgba(120, 113, 255, 0.5);

web/styles/variables.css

@@ -1,13 +1,13 @@
 /**
  * Do not edit directly
- * Generated on Sat, 07 May 2022 17:24:18 GMT
+ * Generated on Tue, 17 May 2022 02:47:26 GMT
  */
 
 :root {
   --text-color: var(--theme-text-color);
   --text-color-secondry: var(--theme-text-color-secondary);
   --link-color: var(--theme-link-color);
-  --popover-background: var(--theme-background);
+  --popover-background: #6941c6;
   --background-color-light: var(--theme-background-secondary);
   --primary-color: #9e77ed;
   --info-color: #667085;
@@ -27,7 +27,7 @@
     'Segoe UI Symbol', 'Noto Color Emoji';
   --theme-background: #1b1a26; /* The main background color of the page. */
   --theme-background-secondary: #16151f; /* A secondary background color used in sections and controls. */
-  --theme-rounded-corners: 5px; /* The radius of rounded corners. */
+  --theme-rounded-corners: 5px; /* The radius of rounded corners used in places. */
   --theme-success-color: #12b76a;
   --theme-info-color: #d6bbfb;
   --theme-warning-color: #f79009;