LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

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

Browse Source
This commit is contained in:
Gabe Kangas 2022-12-05 21:53:09 -08:00
parent 5bc7fe04b6
commit 4bcfc82a30
No known key found for this signature in database
GPG Key ID: 4345B2060657F330
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/components/modals/BrowserNotifyModal/BrowserNotifyModal.module.scss
View File

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

20
web/components/modals/BrowserNotifyModal/BrowserNotifyModal.tsx
View File

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

2
web/components/ui/Content/Content.tsx
View File

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