Merge pull request #904 from SE-TINF22B6/frontend

Notifications: style adaptions
SE-TINF22B6 · Jun 10, 2024 · 343e329 · 343e329
2 parents e288dbb + 7a58ef1
commit 343e329
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/src/main/web/package-lock.json b/src/main/web/package-lock.json
diff --git 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,34 +18,38 @@
     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;
 }
 
 .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
@@ -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<SetStateAction<NotificationModel[]>>;
 }
 
-export const Notifications: React.FC<NotificationsProps> = ({ showNotifications, notifications, setNotifications}) => {
-  const [notificationShown, setNotificationShown] = useState(true);
+export const Notifications: React.FC<NotificationsProps> = ({ notifications, setNotifications}) => {
   let navigate: NavigateFunction = useNavigate();
   const jwt: string | null = getJWT();
   const headersWithJwt = useMemo(() => ({
@@ -27,7 +26,7 @@ export const Notifications: React.FC<NotificationsProps> = ({ showNotifications,
   };
 
   const handleRemoveNotification = async (notification: NotificationModel): Promise<void> => {
-    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<NotificationsProps> = ({ 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<NotificationsProps> = ({ showNotifications,
       <div className="notifications">
         <span className="notifications-title"> Notifications </span>
         <ul>
-          {notifications.map((notification) => (
+          {notifications.map((notification: NotificationModel) => (
               <li key={notification.notificationId} className="notification-item">
                 <a onClick={() => handleClick(notification.link)}>{notification.text}</a>
                 <button className="remove-notification" onClick={() => handleRemoveNotification(notification)}>
@@ -69,4 +68,4 @@ export const Notifications: React.FC<NotificationsProps> = ({ showNotifications,
         </ul>
       </div>
   );
-};
+};