From b0d7d3c0af8d8933f4f262378fac3e7ee02bef3e Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 11 Jan 2026 20:05:20 +0100 Subject: [PATCH] update notifications css --- src/components/Header/Header.jsx | 14 ++---- src/components/Header/Header.module.css | 12 +---- .../NotificationCard/NotificationCard.jsx | 34 ++++++++++++++ .../NotificationCard.module.css | 46 +++++++++++++++++++ src/utils/date/formatTime.js | 8 ++++ .../listeners/userNotificationsListener.js | 6 +++ 6 files changed, 98 insertions(+), 22 deletions(-) create mode 100644 src/components/NotificationCard/NotificationCard.jsx create mode 100644 src/components/NotificationCard/NotificationCard.module.css create mode 100644 src/utils/date/formatTime.js diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 3402bd2..72d7264 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -11,6 +11,8 @@ import readNotifications from "../../utils/notifications/readNotifications.js"; import getUser from "../../utils/getUser.js"; import { userCreatedListener } from "../../utils/echo/listeners/userCreatedListener"; import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js"; +import NotificationCard from "../NotificationCard/NotificationCard.jsx"; + @@ -176,17 +178,7 @@ function Header() { {notifications.length === 0 ? (

Vous n'avez aucune notification !

) : ( - notifications.map((notification, index) => ( -
-

{notification.content}

- -
- )) + )} diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index e684823..952529d 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -150,7 +150,7 @@ .notificationDiv { position: absolute; - width: 250px; + width: 300px; top: 105%; right: 2rem; opacity: 0; @@ -186,16 +186,6 @@ border-radius: 50%; } -.closeBtn { - display: flex; - align-items: center; - justify-content: center; - border: none; - cursor: pointer; - background: none; - margin: 0; - width: fit-content; -} .closeBtn:focus { outline: none; diff --git a/src/components/NotificationCard/NotificationCard.jsx b/src/components/NotificationCard/NotificationCard.jsx new file mode 100644 index 0000000..50774b4 --- /dev/null +++ b/src/components/NotificationCard/NotificationCard.jsx @@ -0,0 +1,34 @@ +import formatDate from "../../utils/date/formatDate.js"; +import formatTime from "../../utils/date/formatTime.js"; + +import styles from "./NotificationCard.module.css" + + +function NotificationCard({notifications, deleteNotification}) { + return ( + notifications.map((notification, index) => ( +
+
+ + Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)} + + +
+ +
+

+ {notification.content} +

+
+
+ )) + ); +} + +export default NotificationCard; \ No newline at end of file diff --git a/src/components/NotificationCard/NotificationCard.module.css b/src/components/NotificationCard/NotificationCard.module.css new file mode 100644 index 0000000..db01e1a --- /dev/null +++ b/src/components/NotificationCard/NotificationCard.module.css @@ -0,0 +1,46 @@ +.notificationCard { + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.75rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + transition: background 0.2s ease; +} + +.cardHeader { + display: flex; + justify-content: space-between; + align-items: center; +} + +.timeTag { + font-size: 0.9rem; + font-weight: 500; + color: #019AFF; + letter-spacing: 0.2px; +} + +.message { + margin: 0; + font-size: 1.1rem; + line-height: 1.5; + color: #2c3e50; + font-weight: 400; +} + +.closeIconButton { + background: none; + border: none; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 1.1rem; + color: #2c3e50; +} + +.closeIconButton:hover { + color: #cc0000; +} \ No newline at end of file diff --git a/src/utils/date/formatTime.js b/src/utils/date/formatTime.js new file mode 100644 index 0000000..6012db2 --- /dev/null +++ b/src/utils/date/formatTime.js @@ -0,0 +1,8 @@ +export default function formatTime(d) { + const date = new Date(d); + + const hh = String(date.getUTCHours()).padStart(2, '0'); + const min = String(date.getUTCMinutes()).padStart(2, '0'); + + return `${hh}:${min}`; +} \ No newline at end of file diff --git a/src/utils/echo/listeners/userNotificationsListener.js b/src/utils/echo/listeners/userNotificationsListener.js index d51bcee..ef538ba 100644 --- a/src/utils/echo/listeners/userNotificationsListener.js +++ b/src/utils/echo/listeners/userNotificationsListener.js @@ -1,3 +1,5 @@ +import formatDateTime from '../../date/formatTime.js'; + export const userNotificationsListener = (echo, userData, setNotifications, setunreadNotification) => { if (!userData?.id) return null; @@ -8,6 +10,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `L'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`, + created_at: formatDateTime(Date.now()), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -17,6 +20,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `La tâche ${event.task.name} de l'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`, + created_at: formatDateTime(Date.now()), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -26,6 +30,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `Vous avez été assigné à la tâche ${event.task.name} de l'événement ${event.event.name}`, + created_at: formatDateTime(Date.now()), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -35,6 +40,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `Vous avez été désassigné de la tâche ${event.task.name} de l'événement ${event.event.name}`, + created_at: formatDateTime(Date.now()), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]);