From c3fa7637e19c357ccd6ec6b1b398c1273b377b14 Mon Sep 17 00:00:00 2001 From: millerm30 Date: Tue, 24 Sep 2024 08:48:52 -0230 Subject: [PATCH 1/3] Fixes Fix darkmode collapse issue, adjust all images to match border radius 8px --- docs/channels/email.md | 2 +- docs/channels/inapp.md | 2 +- docs/channels/web-push.md | 4 ++-- docs/components/inapp.md | 6 +++--- docs/components/unsubscribe-page.md | 6 +++--- docs/components/user-preferences.md | 2 +- docs/features/deduplication.md | 2 +- docs/features/digest.md | 8 ++++---- docs/features/environments.md | 4 ++-- docs/features/logs.md | 2 +- docs/features/throttling.md | 2 +- docs/guides/domain-verification.md | 2 +- docs/quick-start/display-inapp-notifications.md | 2 +- docs/quick-start/how-does-it-work.md | 2 +- docs/quick-start/manage-preferences.md | 2 +- docs/reference/ios-sdk.md | 3 +-- docs/reference/react-sdk.md | 10 +++------- src/css/custom.css | 14 +++++++++++++- 18 files changed, 41 insertions(+), 34 deletions(-) diff --git a/docs/channels/email.md b/docs/channels/email.md index d7ecd792..3997a61f 100644 --- a/docs/channels/email.md +++ b/docs/channels/email.md @@ -34,7 +34,7 @@ You DON'T need another 3rd-party email service like SendGrid or SES. Through our import BeePNG from '@site/static/bee.webp'; - + To remove the burden of manually building email templates, we have integrated a fully loaded email editor. Now everyone on your team can create and modify your email notfications without coding. diff --git a/docs/channels/inapp.md b/docs/channels/inapp.md index bca1e3d1..1b0c3394 100644 --- a/docs/channels/inapp.md +++ b/docs/channels/inapp.md @@ -8,7 +8,7 @@ In-app notifications are messages that appear inside your web application, for e import InAppPNG from '@site/static/inapp.png'; - + ## Supported Environments diff --git a/docs/channels/web-push.md b/docs/channels/web-push.md index ec0d4eef..509b0767 100644 --- a/docs/channels/web-push.md +++ b/docs/channels/web-push.md @@ -2,12 +2,12 @@ import webpush from '@site/static/webpush.png'; - +
import webpush2 from '@site/static/webpush2.png'; - + Web push notifications look almost identical to native notification on the device. However, they require the user to opt-in from their browser when they are on your website/front-end. diff --git a/docs/components/inapp.md b/docs/components/inapp.md index c0e790d7..61d6adfe 100644 --- a/docs/components/inapp.md +++ b/docs/components/inapp.md @@ -24,7 +24,7 @@ By default, the `showInApp()` function will place a 🔔 button inside the selec import inapp from '@site/static/inapp.png'; - + #### Inline Mode @@ -32,7 +32,7 @@ With `inline: true`, there is no bell button or popup. Instead, the notification import inline from '@site/static/inline.png'; - + The inline mode is useful for creating a stand-alone Notifications page in your app, in combination with the [paginated mode](#paginated-mode). @@ -68,7 +68,7 @@ With `pagination: true` and `pageSize: 2`, only 2 notifications are rendered (an import paginated from '@site/static/paginated.gif'; - + This mode is useful in combination with the inline mode to create a stand-alone Notifications page in your app. diff --git a/docs/components/unsubscribe-page.md b/docs/components/unsubscribe-page.md index 4cb5c71f..30d1d2ff 100644 --- a/docs/components/unsubscribe-page.md +++ b/docs/components/unsubscribe-page.md @@ -2,7 +2,7 @@ import notificationapi_unsub from '@site/static/notificationapi_unsub.png'; - + Email best-practice recommends including a "One-Click Unsubscribe Link" in your emails. This URL, upon being opened should automatically unsubscribes the user from that notification. It can also show some content with your branding and message. @@ -19,7 +19,7 @@ Starting February 2024, Google is enforcing a new policy that requires all email Google will use this link to display a unsubscribe link in the Gmail UI, as shown below: - + ::: @@ -32,7 +32,7 @@ Google will use this link to display a unsubscribe link in the Gmail UI, as show import notificationapi_unsub2 from '@site/static/notificationapi_unsub2.png'; - + ## Can I customize this page? diff --git a/docs/components/user-preferences.md b/docs/components/user-preferences.md index aada3e8a..5a066f03 100644 --- a/docs/components/user-preferences.md +++ b/docs/components/user-preferences.md @@ -2,7 +2,7 @@ import userpref2 from '@site/static/userpref2.png'; -

+

This document outlines all the features, common use-cases and best-practices for the user notification preferences widget. diff --git a/docs/features/deduplication.md b/docs/features/deduplication.md index bb49c432..e0e9685a 100644 --- a/docs/features/deduplication.md +++ b/docs/features/deduplication.md @@ -17,7 +17,7 @@ A notification is duplicate if it is: import img from '@site/static/NotificationAPI notification as a service deduplication feature.png'; - + When setting up deduplication, you are asked to select a deduplication duration. This is the window of time during which we will consider a notification a duplicate of another. diff --git a/docs/features/digest.md b/docs/features/digest.md index 7ce9a18e..753b9c4d 100644 --- a/docs/features/digest.md +++ b/docs/features/digest.md @@ -20,7 +20,7 @@ import deliveryOptions from '@site/static/delivery_options.png'; src={deliveryOptions} style={{ maxWidth: 480, - borderRadius: 20, + borderRadius: 8, border: '1px solid #d9d9d9', marginBottom: 20 }} @@ -36,7 +36,7 @@ import userPreference from '@site/static/UserPreferencesEmailBatching.png'; src={userPreference} style={{ maxWidth: 480, - borderRadius: 2 + borderRadius: 8 }} /> @@ -66,7 +66,7 @@ import EmailEditorBatching from '@site/static/EmailEditorBatching.png'; src={EmailEditorBatching} style={{ maxWidth: 800, - borderRadius: 2 + borderRadius: 8 }} /> @@ -90,7 +90,7 @@ import InAppEditorBatched from '@site/static/InAppEditorBatched.png'; src={InAppEditorBatched} style={{ maxWidth: 600, - borderRadius: 2 + borderRadius: 8 }} /> diff --git a/docs/features/environments.md b/docs/features/environments.md index fa1a6728..88937625 100644 --- a/docs/features/environments.md +++ b/docs/features/environments.md @@ -8,7 +8,7 @@ To create a testing environment, navigate to the "Environments" page. Then click import environments_add_testing from '@site/static/environments_add_testing.png'; - + ## Environment Channels @@ -16,4 +16,4 @@ On the "Environments" page, you can enable or disable specific channels per envi import environments_enable_channels from '@site/static/environments_enable_channels.png'; - \ No newline at end of file + diff --git a/docs/features/logs.md b/docs/features/logs.md index 71a37264..1573971c 100644 --- a/docs/features/logs.md +++ b/docs/features/logs.md @@ -12,7 +12,7 @@ To programmatically access the log of your requests, you can use the [queryLogs] ::: - + ## Notification States diff --git a/docs/features/throttling.md b/docs/features/throttling.md index ea889c09..332bef7b 100644 --- a/docs/features/throttling.md +++ b/docs/features/throttling.md @@ -8,7 +8,7 @@ You can pick how many of the same notification you want to allow to be sent to a import img from '@site/static/NotificationAPI - Notifications as a service - throttling detection 6.png'; - + For example, if you configure throttling to allow 5 `delivery_tracking` notifications within one hour, it means that: diff --git a/docs/guides/domain-verification.md b/docs/guides/domain-verification.md index 8040690d..fa2f9bb2 100644 --- a/docs/guides/domain-verification.md +++ b/docs/guides/domain-verification.md @@ -26,4 +26,4 @@ The MAIL-FROM field is different than the "From" address. This field indicates w The Domain Verification method sets this field to _notificationapi.yourdomain.com_, which is better for deliverability and branding. - + diff --git a/docs/quick-start/display-inapp-notifications.md b/docs/quick-start/display-inapp-notifications.md index 5d6e2374..446f43cd 100644 --- a/docs/quick-start/display-inapp-notifications.md +++ b/docs/quick-start/display-inapp-notifications.md @@ -18,7 +18,7 @@ We provide an in-app notification widget compatible with most f import InAppPNG from '@site/static/inapp.png';
- +
## Playground diff --git a/docs/quick-start/how-does-it-work.md b/docs/quick-start/how-does-it-work.md index 3c405a7f..28a4d8d2 100644 --- a/docs/quick-start/how-does-it-work.md +++ b/docs/quick-start/how-does-it-work.md @@ -2,7 +2,7 @@ import diagram from '@site/static/diagram.png'; - +

diff --git a/docs/quick-start/manage-preferences.md b/docs/quick-start/manage-preferences.md index 81a6e068..72c0461f 100644 --- a/docs/quick-start/manage-preferences.md +++ b/docs/quick-start/manage-preferences.md @@ -20,7 +20,7 @@ Our notification preferences widget works out-of-the-box with most front-end fra import UserPref from '@site/static/userpref.gif'; - + There are 2 ways to access the widget: diff --git a/docs/reference/ios-sdk.md b/docs/reference/ios-sdk.md index 7d25be31..2eb24d43 100644 --- a/docs/reference/ios-sdk.md +++ b/docs/reference/ios-sdk.md @@ -94,8 +94,7 @@ Requests the user's permission to recieve push notifications. import IosRequestAuth from '@site/static/ios_request_auth.png'; - + #### Parameters diff --git a/docs/reference/react-sdk.md b/docs/reference/react-sdk.md index 98904026..594cf0fa 100644 --- a/docs/reference/react-sdk.md +++ b/docs/reference/react-sdk.md @@ -28,11 +28,7 @@ The React SDK is mainly used for displaying **In-App** Notifications and allowin ## Setup -
+
``` - + ### Feed @@ -164,7 +160,7 @@ const [preferencesPopupVisibility, setPreferencesPopupVisiblity] = React.useStat /> ``` - +

diff --git a/src/css/custom.css b/src/css/custom.css index e04894d4..5dd1cd99 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -49,4 +49,16 @@ main .container { [data-theme='dark'] .SupportedEnvironment:hover { filter: grayscale(0%) brightness(100%) !important; -} \ No newline at end of file +} + +[data-theme='dark'] .ant-collapse-item { + background-color: #f5f5f5; +} + +[data-theme='dark'] .ant-collapse-item:first-of-type { + border-radius: 8px 8px 0px 0px; +} + +[data-theme='dark'] .ant-collapse { + border: none; +} From bd93ce799547f2205b3c7bae849e5ad8e5d2ec99 Mon Sep 17 00:00:00 2001 From: millerm30 Date: Tue, 24 Sep 2024 09:18:29 -0230 Subject: [PATCH 2/3] Space Add some breathing room --- docs/assets/reactComponents/Parameters.tsx | 2 +- docs/channels/email.md | 2 +- docs/channels/web-push.md | 4 ++-- docs/components/inapp.md | 4 ++-- docs/features/deduplication.md | 2 +- docs/features/throttling.md | 2 +- docs/quick-start/display-inapp-notifications.md | 2 +- docs/reference/react-sdk.md | 4 ++-- src/css/custom.css | 4 ++++ 9 files changed, 15 insertions(+), 11 deletions(-) diff --git a/docs/assets/reactComponents/Parameters.tsx b/docs/assets/reactComponents/Parameters.tsx index 2ae9c826..b8703c10 100644 --- a/docs/assets/reactComponents/Parameters.tsx +++ b/docs/assets/reactComponents/Parameters.tsx @@ -78,7 +78,7 @@ const Parameters: React.FC = () => { The parameters you pass through the API (json):