diff --git a/txclient/src/app/components/Header/Header.tsx b/txclient/src/app/components/Header/Header.tsx
index b083d1f..213d51e 100644
--- a/txclient/src/app/components/Header/Header.tsx
+++ b/txclient/src/app/components/Header/Header.tsx
@@ -21,6 +21,7 @@ import {
} from "@core/Models/SystemNotifications.model";
import {
findSystemNotifications,
+ setStateNotificationByUser,
updateSystemNotification,
} from "@core/app/user/profile/notifications/Notifications.Service";
import {
@@ -214,6 +215,29 @@ export default function Header(): React.ReactElement {
goTo(NOTIFICATIONS_ROUTE);
};
+ const markNotificationsAsRead = async () => {
+ if (!SessionInfo.userId || headerState.notificationsCount === 0) {
+ return;
+ }
+
+ try {
+ await setStateNotificationByUser({
+ state: true,
+ sessionUser: SessionInfo.userId,
+ });
+
+ setNotifications((currentNotifications) =>
+ currentNotifications.map((notification) => ({
+ ...notification,
+ readed: true,
+ }))
+ );
+ headerState.setNotificationsCount(0);
+ } catch (error) {
+ console.error("Error marking notifications as read", error);
+ }
+ };
+
const openNotification = async (notification: ISystemNotification) => {
setNotificationsOpen(false);
@@ -392,13 +416,23 @@ export default function Header(): React.ReactElement {
))}
-
+
+
+
+
)}
diff --git a/txclient/src/app/components/Header/header.module.css b/txclient/src/app/components/Header/header.module.css
index 4c49d2a..88cc9b9 100644
--- a/txclient/src/app/components/Header/header.module.css
+++ b/txclient/src/app/components/Header/header.module.css
@@ -185,11 +185,16 @@
font-weight: 600;
}
+.notificationsFooterActions {
+ display: flex;
+ border-top: 1px solid var(--gray-lighter);
+ background: var(--white);
+}
+
.notificationsFooter {
width: 100%;
padding: 14px 18px;
border: 0;
- border-top: 1px solid var(--gray-lighter);
background: var(--white);
color: var(--wine-dark);
cursor: pointer;
@@ -198,11 +203,21 @@
transition: background-color 0.18s ease, color 0.18s ease;
}
-.notificationsFooter:hover {
+.notificationsFooter + .notificationsFooter {
+ border-left: 1px solid var(--gray-lighter);
+}
+
+.notificationsFooter:hover:not(:disabled) {
background: var(--wine-lighterX2);
color: var(--wine-darkest);
}
+.notificationsFooter:disabled {
+ color: var(--gray-dark);
+ cursor: default;
+ opacity: 0.65;
+}
+
@media (max-width: 600px) {
.header {
padding-left: 18px;
@@ -212,4 +227,13 @@
.notificationsMenu {
right: -48px;
}
+
+ .notificationsFooterActions {
+ flex-direction: column;
+ }
+
+ .notificationsFooter + .notificationsFooter {
+ border-left: 0;
+ border-top: 1px solid var(--gray-lighter);
+ }
}