change header svg by img tag

src/components/Header/Header.jsx

@@ -7,7 +7,7 @@ function Header() {
     const [notificationMenu, setnotificationMenu] = useState(false);
     const [unreadNotification, setunreadNotification] = useState(true);
     const [mobileMenu, setMobileMenu] = useState(false);
-    const [notifications, setNotifications] = useState([]);
+    const [notifications, setNotifications] = useState([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]);
     const notificationRef = useRef(null);
 
 
@@ -15,7 +15,10 @@ function Header() {
     useEffect(() => {
         async function loadNotifications() {
             const notifData = await getUserNotifications();
+            /*
             setNotifications(notifData || []);
+            */
+
         }
 
         //loadNotifications();
@@ -105,7 +108,7 @@ function Header() {
                 className={`${styles.notificationDiv} glassCard ${notificationMenu ? styles.activeNotificationDiv : ""}`}
             >
                 {notifications.length === 0 ? (
-                    <p>Vous n'avez aucune notification !</p>
+                    <p className={styles.notification}>Vous n'avez aucune notification !</p>
                 ) : (
                     notifications.map((notification, index) => (
                         <div className={styles.notification} key={index}>
@@ -114,9 +117,7 @@ function Header() {
                                 className={styles.closeBtn}
                                 onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
                             >
-                                <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px">
+                                <img src="close.svg" alt="supprimer la notification"/>
-                                    <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
-                                </svg>
                             </button>
                         </div>
                     ))

src/components/Header/Header.module.css

@@ -175,10 +175,11 @@
 }
 
 .notification{
-    margin-bottom: 7%;
+    padding: 0.5em 1em;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    border-radius: 15px;
 }
 
 .notificationBadge {

src/components/SearchBar/SearchBar.module.css

@@ -31,7 +31,6 @@
 .searchedEvent{
     display: flex;
     padding: 0.5rem;
-    border-radius: 15px;
     align-items: center;
 }