feature/IO-3499-React-19 - Checkpoint

client/src/components/notification-center/notification-center.component.jsx

@@ -24,6 +24,7 @@ const NotificationCenterComponent = ({
   onNotificationClick,
   unreadCount,
   isEmployee,
+  isDarkMode,
   ref
 }) => {
     const { t } = useTranslation();
@@ -112,14 +113,16 @@ const NotificationCenterComponent = ({
             <Alert title={t("notifications.labels.employee-notification")} type="warning" />
           </div>
         ) : (
-          <Virtuoso
-            ref={virtuosoRef}
-            style={{ height: "400px", width: "100%" }}
-            data={notifications}
-            totalCount={notifications.length}
-            endReached={loadMore}
-            itemContent={renderNotification}
-          />
+          <div className={isDarkMode ? "notification-center--dark" : "notification-center--light"} style={{ height: "400px", width: "100%" }}>
+            <Virtuoso
+              ref={virtuosoRef}
+              style={{ height: "100%", width: "100%" }}
+              data={notifications}
+              totalCount={notifications.length}
+              endReached={loadMore}
+              itemContent={renderNotification}
+            />
+          </div>
         )}
       </div>
     );