Make the push notification modal slightly more correct. Closes #2163

web/components/modals/BrowserNotifyModal/BrowserNotifyModal.module.scss

@@ -1,7 +1,14 @@
+.description {
+  margin-bottom: 5px;
+}
+
 .pushPreview {
   border-style: dashed;
   border-width: 2px;
-  width: 30vw;
+  width: 100%;
+  max-width: 400px;
+  margin: 1%;
+  margin-top: 10px;
 
   .inner {
     margin: 10px;
@@ -15,6 +22,13 @@
 
     .permissionLine {
       margin-top: 5px;
+      display: flex;
+      align-items: center;
+
+      .bell {
+        margin-top: -1px;
+        margin-right: 5px;
+      }
     }
 
     .buttonRow {
@@ -30,10 +44,6 @@
         background-color: white;
       }
 
-      .allow {
-        background-color: var(--theme-primary-color);
-      }
-
       button {
         margin-left: 10px;
         padding-left: 15px;

web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx

@@ -1,4 +1,4 @@
-import { Row, Col, Spin, Typography, Button } from 'antd';
+import { Row, Spin, Typography, Button } from 'antd';
 import React, { FC, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { accessTokenAtom, clientConfigStateAtom } from '../../stores/ClientConfigStore';
@@ -25,6 +25,7 @@ const PermissionPopupPreview: FC<PermissionPopupPreviewProps> = ({ start }) => (
       <div className={styles.title}>{window.location.toString()} wants to</div>
       <div className={styles.permissionLine}>
         <svg
+          className={styles.bell}
           width="16"
           height="16"
           viewBox="0 0 16 16"
@@ -36,12 +37,11 @@ const PermissionPopupPreview: FC<PermissionPopupPreviewProps> = ({ start }) => (
             fill="#676670"
           />
         </svg>
-        Show notifications
+        <span className={styles.showNotificationsText}>Show notifications</span>
       </div>
       <div className={styles.buttonRow}>
         <Button
           type="primary"
-          className={styles.allow}
           onClick={() => {
             start();
           }}
@@ -110,17 +110,13 @@ export const BrowserNotifyModal = () => {
 
   return (
     <Spin spinning={browserPushPermissionsPending}>
-      <Row align="top">
-        <Title>Browser Notifications</Title>
-        Get notified right in the browser each time this stream goes live. Blah blah blah more
-        description text goes here.
+      <Row className={styles.description}>
+        Get notified right in the browser each time this stream goes live.
+        <a href="https://owncast.online/docs/notifications/#browser-notifications">Learn more</a>
+        &nbsp; about Owncast browser notifications.
       </Row>
       <Row>{error}</Row>
-      <Row align="top">
-        <Col span={12}>
-          <PermissionPopupPreview start={() => startBrowserPushRegistration()} />
-        </Col>
-      </Row>
+      <PermissionPopupPreview start={() => startBrowserPushRegistration()} />
     </Spin>
   );
 };

web/components/ui/Content/Content.tsx

@@ -346,7 +346,7 @@ export const Content: FC = () => {
                   )}
 
                   <Modal
-                    title="Notify"
+                    title="Browser Notifications"
                     open={showNotifyModal}
                     afterClose={() => disableNotifyReminderPopup()}
                     handleCancel={() => disableNotifyReminderPopup()}