Merge pull request #110 from notificationapi-com/yMlKRHem/2419-notifi…

…cationapi-docs-dark-mode-issue-with-react-sdk

Y ml kr hem/2419 notificationapi docs dark mode issue with react sdk

docs/assets/reactComponents/Parameters.tsx

@@ -78,7 +78,7 @@ const Parameters: React.FC = () => {
           <Text type="secondary">
             The parameters you pass through the API (json):
             <TextArea
-              rows={3}
+              rows={5}
               defaultValue={JSON.stringify(parameters, null, 2)}
               onChange={(e) => {
                 setPreParameters(e.target.value);

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';
 
-<img src={BeePNG} style={{maxWidth: 500}} />
+<img src={BeePNG} style={{maxWidth: 500, borderRadius: 8, marginBottom: 20, width: "100%"}} />
 
 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.
 

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';
 
-<img src={InAppPNG} style={{maxWidth: 400}} />
+<img src={InAppPNG} style={{maxWidth: 400, borderRadius: 8, width: "100%"}} />
 
 ## Supported Environments
 

docs/channels/web-push.md

@@ -2,12 +2,12 @@
 
 import webpush from '@site/static/webpush.png';
 
-<img src={webpush} style={{maxWidth: 300}} />
+<img src={webpush} style={{maxWidth: 400, borderRadius: 8, marginBottom: 20, width: "100%"}} />
 <br/>
 
 import webpush2 from '@site/static/webpush2.png';
 
-<img src={webpush2} style={{maxWidth: 400}} />
+<img src={webpush2} style={{maxWidth: 400, borderRadius: 8, marginBottom: 20, width: "100%"}} />
 
 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.
 

docs/components/inapp.md

@@ -24,15 +24,15 @@ By default, the `showInApp()` function will place a 🔔 button inside the selec
 
 import inapp from '@site/static/inapp.png';
 
-<img src={inapp} width="400" />
+<img src={inapp} width="400" style={{borderRadius: 8}} />
 
 #### Inline Mode
 
 With `inline: true`, there is no bell button or popup. Instead, the notifications are directly rendered onto the parent/root element:
 
 import inline from '@site/static/inline.png';
 
-<img src={inline} width="400" />
+<img src={inline} width="400" style={{borderRadius: 8, marginBottom: 20}} />
 
 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';
 
-<img src={paginated} width="300" />
+<img src={paginated} width="300" style={{borderRadius: 8, marginBottom: 20}} />
 
 This mode is useful in combination with the inline mode to create a stand-alone Notifications page in your app.
 

docs/components/unsubscribe-page.md

@@ -2,7 +2,7 @@
 
 import notificationapi_unsub from '@site/static/notificationapi_unsub.png';
 
-<img src={notificationapi_unsub} style={{maxWidth: 700}} />
+<img src={notificationapi_unsub} style={{maxWidth: 600, borderRadius: 8, width: "100%", marginBottom: 20}} />
 
 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:
 
-<img src={unsubscribe} style={{maxWidth: 400}} />
+<img src={unsubscribe} style={{maxWidth: 400, borderRadius: 8, width: "100%"}} />
 
 :::
 
@@ -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';
 
-<img src={notificationapi_unsub2} style={{maxWidth: 400}} />
+<img src={notificationapi_unsub2} style={{maxWidth: 400, borderRadius: 8, width: "100%"}} />
 
 ## Can I customize this page?
 

docs/components/user-preferences.md

@@ -2,7 +2,7 @@
 
 import userpref2 from '@site/static/userpref2.png';
 
-<img src={userpref2} style={{maxWidth: 380}} /><br/><br/>
+<img src={userpref2} style={{maxWidth: 380, borderRadius: 8}} /><br/><br/>
 
 This document outlines all the features, common use-cases and best-practices for the user notification preferences widget.
 

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';
 
-<img src={img} style={{maxWidth: 480, borderRadius: 20, border: '1px solid #d9d9d9' }} />
+<img src={img} style={{maxWidth: 480, borderRadius: 8, border: '1px solid #d9d9d9', marginBottom: 20, width: "100%" }} />
 
 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.
 

docs/features/digest.md

@@ -20,9 +20,10 @@ import deliveryOptions from '@site/static/delivery_options.png';
 src={deliveryOptions}
 style={{
     maxWidth: 480,
-    borderRadius: 20,
+    borderRadius: 8,
     border: '1px solid #d9d9d9',
-    marginBottom: 20
+    marginBottom: 20,
+    width: "100%"
   }}
 />
 
@@ -36,7 +37,8 @@ import userPreference from '@site/static/UserPreferencesEmailBatching.png';
 src={userPreference}
 style={{
     maxWidth: 480,
-    borderRadius: 2
+    borderRadius: 8,
+    width: "100%"
   }}
 />
 
@@ -66,7 +68,8 @@ import EmailEditorBatching from '@site/static/EmailEditorBatching.png';
 src={EmailEditorBatching}
 style={{
     maxWidth: 800,
-    borderRadius: 2
+    borderRadius: 8,
+    width: "100%"
   }}
 />
 
@@ -90,7 +93,8 @@ import InAppEditorBatched from '@site/static/InAppEditorBatched.png';
 src={InAppEditorBatched}
 style={{
     maxWidth: 600,
-    borderRadius: 2
+    borderRadius: 8,
+    width: "100%"
   }}
 />
 

docs/features/environments.md

@@ -8,12 +8,12 @@ To create a testing environment, navigate to the "Environments" page. Then click
 
 import environments_add_testing from '@site/static/environments_add_testing.png';
 
-<img src={environments_add_testing} />
+<img src={environments_add_testing} style={{ borderRadius: 8 }} />
 
 ## Environment Channels
 
 On the "Environments" page, you can enable or disable specific channels per environment. Channels are enabled by default. Notifications are still processed and can be inspected via the "Logs" page. Disabling channels allows you to test and inspect notifications without actually delivering them to end-users.
 
 import environments_enable_channels from '@site/static/environments_enable_channels.png';
 
-<img src={environments_enable_channels} />
+<img src={environments_enable_channels} style={{ borderRadius: 8 }} />

docs/features/logs.md

@@ -12,7 +12,7 @@ To programmatically access the log of your requests, you can use the [queryLogs]
 
 :::
 
-<img src={logs} style={{maxWidth: 800}} />
+<img src={logs} style={{maxWidth: 800, borderRadius: 8, marginTop: 16, width: "100%"}} />
 
 ## Notification States
 

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';
 
-<img src={img} style={{maxWidth: 480, borderRadius: 20, border: '1px solid #d9d9d9' }} />
+<img src={img} style={{maxWidth: 480, borderRadius: 8, border: '1px solid #d9d9d9', marginBottom: 20, width: "100%"}} />
 
 For example, if you configure throttling to allow 5 `delivery_tracking` notifications within one hour, it means that:
 

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.
 
-<img src={mailfrom} style={{maxWidth: "600px"}} />
+<img src={mailfrom} style={{maxWidth: 600, borderRadius: 8, width: "100%"}} />

docs/quick-start/display-inapp-notifications.md

@@ -17,8 +17,8 @@ We provide an <strong>in-app notification widget</strong> compatible with most f
 
 import InAppPNG from '@site/static/inapp.png';
 
-<div style={{display: "flex", justifyContent: "center"}}>
-  <img src={InAppPNG} style={{maxWidth: 400}} />
+<div style={{display: "flex", justifyContent: "start"}}>
+  <img src={InAppPNG} style={{maxWidth: 500, borderRadius: 8, width: "100%"}} />
 </div>
 
 ## Playground

docs/quick-start/how-does-it-work.md

@@ -2,7 +2,7 @@
 
 import diagram from '@site/static/diagram.png';
 
-<img src={diagram} width="600" />
+<img src={diagram} style={{maxWidth: 600, borderRadius: 8, width: "100%"}} />
 
 <p></p>
 

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';
 
-<img src={UserPref} style={{maxWidth: 300, marginBottom: 30}} />
+<img src={UserPref} style={{maxWidth: 500, marginBottom: 24, borderRadius: 8, width: "100%"}} />
 
 There are 2 ways to access the widget:
 

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';
 
-<img src={IosRequestAuth
-} />
+<img src={IosRequestAuth} style={{ borderRadius: 8}} />
 
 #### Parameters
 

docs/reference/react-sdk.md

@@ -28,11 +28,7 @@ The React SDK is mainly used for displaying **In-App** Notifications and allowin
 
 ## Setup
 
-<div 
-  style={{    
-    padding: 24,
-  }}
->
+<div>
   <NotificationAPIProvider
     userId="[email protected]"
     clientId="6ok6imq9ucn2budgiebjdaa6oi"
@@ -129,7 +125,7 @@ Apply the same counter badge on an existing element to notify users of unread me
 </NotificationCounter>
 ```
 
-<img src={ElementCounter} style={{maxWidth: 300}} />
+<img src={ElementCounter} style={{maxWidth: 300, borderRadius: 8, marginBottom: 20}} />
 
 ### Feed
 
@@ -141,7 +137,7 @@ The feed component provides a larger feed for browsing notifications. Notificati
 
 Example:
 
-<NotificationFeed infiniteScrollHeight={300} />
+<NotificationFeed infiniteScrollHeight={300} style={{ borderRadius: 8}} />
 
 <br/><br/>
 
@@ -164,7 +160,7 @@ const [preferencesPopupVisibility, setPreferencesPopupVisiblity] = React.useStat
 />
 ```
 
-<img src={InAppPreferences} style={{maxWidth: 600}} />
+<img src={InAppPreferences} style={{maxWidth: 600, borderRadius: 8, width: "100%"}} />
 
 <br/><br/>
 

src/css/custom.css

@@ -49,4 +49,20 @@ main .container {
 
 [data-theme='dark'] .SupportedEnvironment:hover {
   filter: grayscale(0%) brightness(100%) !important;
-}
+}
+
+[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;
+}
+
+[data-theme='dark'] .anticon-bell {
+  color: #ffffff !important;
+}