diff --git a/src/main/web/package-lock.json b/src/main/web/package-lock.json index ee289389..f2b90ca6 100644 --- a/src/main/web/package-lock.json +++ b/src/main/web/package-lock.json @@ -25203,4 +25203,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/main/web/src/organisms/header/Notifications.css b/src/main/web/src/organisms/header/Notifications.css index 0fc48272..4cdde929 100644 --- a/src/main/web/src/organisms/header/Notifications.css +++ b/src/main/web/src/organisms/header/Notifications.css @@ -1,7 +1,7 @@ .notifications { position: absolute; - top: 67px; - right: 115px; + top: 76px; + right: 95px; background-color: var(--grey); color: white; border-radius: 12px; @@ -18,7 +18,7 @@ align-content: center; font-weight: bold; padding: 15px; - border-bottom: 1px solid #444; + border-bottom: 1px solid var(--lighter-grey); display: flex; justify-content: center; } @@ -26,26 +26,30 @@ .notifications ul { list-style: none; padding: 0; - margin: 10px 0 0 0; + margin: 0; } .notification-item { display: flex; justify-content: space-between; align-items: center; - border-bottom: 1px solid #444; + border-bottom: 1px solid var(--lighter-grey); padding: 10px 15px; cursor: pointer; transition: background-color 0.3s; } +.notification-item:last-child { + border-bottom: none; +} + .notification-item:hover { - background-color: #444; + background-color: var(--lighter-grey); } .notification-item a { text-decoration: none; - color: white; + color: var(--white); flex-grow: 1; word-break: break-word; white-space: normal; @@ -54,7 +58,7 @@ .remove-notification { background: none; border: none; - color: white; + color: var(--white); font-size: 16px; cursor: pointer; margin-left: 10px; @@ -63,7 +67,7 @@ } .remove-notification:hover { - color: red; + color: var(--red); } .view-more a { diff --git a/src/main/web/src/organisms/header/Notifications.tsx b/src/main/web/src/organisms/header/Notifications.tsx index 7228c854..b44afc43 100644 --- a/src/main/web/src/organisms/header/Notifications.tsx +++ b/src/main/web/src/organisms/header/Notifications.tsx @@ -1,4 +1,4 @@ -import React, {Dispatch, SetStateAction, useEffect, useMemo, useState} from "react"; +import React, {Dispatch, SetStateAction, useMemo} from "react"; import { NavigateFunction, useNavigate } from "react-router-dom"; import "./Notifications.css"; import config from "../../config/config"; @@ -12,8 +12,7 @@ interface NotificationsProps { setNotifications: Dispatch>; } -export const Notifications: React.FC = ({ showNotifications, notifications, setNotifications}) => { - const [notificationShown, setNotificationShown] = useState(true); +export const Notifications: React.FC = ({ notifications, setNotifications}) => { let navigate: NavigateFunction = useNavigate(); const jwt: string | null = getJWT(); const headersWithJwt = useMemo(() => ({ @@ -27,7 +26,7 @@ export const Notifications: React.FC = ({ showNotifications, }; const handleRemoveNotification = async (notification: NotificationModel): Promise => { - const confirmed = window.confirm("Are you sure you want to delete this notification?"); + const confirmed: boolean = window.confirm("Are you sure you want to delete this notification?"); if (confirmed) { try { const deleteNotification: DeleteNotificationModel = { @@ -43,7 +42,7 @@ export const Notifications: React.FC = ({ showNotifications, }); if (response.ok) { - const updatedNotifications = notifications.filter(n => n.notificationId !== notification.notificationId); + const updatedNotifications: NotificationModel[] = notifications.filter(n => n.notificationId !== notification.notificationId); setNotifications(updatedNotifications); } else { console.error("Failed to delete notification:", response.statusText); @@ -58,7 +57,7 @@ export const Notifications: React.FC = ({ showNotifications,
Notifications
    - {notifications.map((notification) => ( + {notifications.map((notification: NotificationModel) => (
  • handleClick(notification.link)}>{notification.text}
); -}; +}; \ No newline at end of file