From 71dc444fc4bcb6555ee32a0b0e3f1b14c6cc4e4d Mon Sep 17 00:00:00 2001
From: Awais Ansari <awais.ansari63@gmail.com>
Date: Mon, 17 Nov 2025 15:49:21 +0500
Subject: [PATCH] fix: made margin dynamic using props

---
 src/Notification/index.jsx | 12 +++++-------
 src/index.jsx              |  4 ++--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/Notification/index.jsx b/src/Notification/index.jsx
index 45b1b25..e1cbdd2 100644
--- a/src/Notification/index.jsx
+++ b/src/Notification/index.jsx
@@ -23,7 +23,7 @@ import { notificationsContext } from './context/notificationsContext';
 
 import './notification.scss';
 
-const Notifications = ({ notificationAppData, showLeftMargin }) => {
+const Notifications = ({ notificationAppData, margins }) => {
   const intl = useIntl();
   const popoverRef = useRef(null);
   const headerRef = useRef(null);
@@ -178,7 +178,7 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
           </Popover>
         )}
       >
-        <div ref={buttonRef} id="notificationIcon" className="mr-4">
+        <div ref={buttonRef} id="notificationIcon">
           <IconButton
             isActive={enableNotificationTray}
             alt={intl.formatMessage(messages.notificationBellIconAltMessage)}
@@ -188,9 +188,7 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
             variant="light"
             iconClassNames="text-primary-500"
             size="inline"
-            className={classNames('mr-1 notification-button', {
-              'ml-4': showLeftMargin,
-            })}
+            className={`notification-button ${margins}`}
             data-testid="notification-bell-icon"
           />
           {tabsCount?.count > 0 && (
@@ -215,7 +213,7 @@ const Notifications = ({ notificationAppData, showLeftMargin }) => {
 };
 
 Notifications.propTypes = {
-  showLeftMargin: PropTypes.bool,
+  margins: PropTypes.string,
   notificationAppData: PropTypes.shape({
     apps: PropTypes.objectOf(
       PropTypes.arrayOf(PropTypes.string),
@@ -232,7 +230,7 @@ Notifications.propTypes = {
 };
 
 Notifications.defaultProps = {
-  showLeftMargin: true,
+  margins: 'mx-4',
   notificationAppData: {
     apps: {},
     tabsCount: { count: 0 },
diff --git a/src/index.jsx b/src/index.jsx
index c2d2149..3200f20 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -2,10 +2,10 @@ import React, { StrictMode } from 'react';
 import Notifications from './Notification';
 import { useAppNotifications, useNotification } from './Notification/data/hook';
 
-export const NotificationsTray = () => {
+export const NotificationsTray = (props) => {
   const { notificationAppData } = useAppNotifications();
   return notificationAppData?.showNotificationsTray
-    ? <StrictMode><Notifications notificationAppData={notificationAppData} /></StrictMode>
+    ? <StrictMode><Notifications notificationAppData={notificationAppData} {...props} /></StrictMode>
     : '';
 };