Merge branch 'dev' into 'features/searchBar'

# Conflicts:
#   src/components/Event/Event.jsx
#   src/index.css
#   src/pages/Events/EventsPage.jsx
#   src/utils/getUser.js
#   src/utils/getXSRF.js
#   src/utils/login.js
#   src/utils/register.js

src/components/Event/Event.jsx

@@ -1,9 +1,12 @@
 import styles from "./Event.module.css";
-import {useState, useEffect} from "react";
-import {Link} from "react-router";
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router";
 import Button from "/src/components/ui/button/button.jsx"
 
 function Event({event}){
+
+    const navigate = useNavigate();
+
     const [eventMenu, seteventMenu] = useState(false);
     const [windowSize, setWindowSize] = useState({
         width: null,
@@ -31,7 +34,7 @@ function Event({event}){
                 <div className={styles.eventContent}>
                     <div className={`${styles.eventImageDiv}`}>
                         {event.image == null ? (
-                            <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                            <img src="/empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
                         ) : (
                             <img src={event.image + `.png`} alt="Photo de l'événement" />
                         )}
@@ -57,21 +60,21 @@ function Event({event}){
                 </div>
                 {windowSize.width > 768 ? (
                     <div className={styles.eventButtons}>
-                        <button
-                            className={`${styles.moreButton} ${eventMenu ? styles.moreButtonClicked : ""}`}
-                            onClick={()=>{seteventMenu(!eventMenu)}}>
+                        <Button
+                            variant={"transparent"}
+                            onClick={()=>{seteventMenu(!eventMenu)}}
+                            className={`${eventMenu ? styles.moreButtonClicked : ""}`}
+                        >
                             {">"}
-                        </button>
+                        </Button>
                     </div>
                 ) : null}
             </div>
             <div className={styles.eventContainerBottom}>
             {(windowSize.width <= 768 || eventMenu) ? (
-                <Link
-                    to={`/event/` + event.id}
-                    className={styles.moreLink}>
-                    <Button>En savoir plus →</Button>
-                </Link>
+
+                <Button onClick={() => navigate(`/event/` + event.id)}>Voir plus</Button>
+
             ) : null}
             </div>
         </div>

src/components/Event/Event.module.css

@@ -3,6 +3,7 @@
     flex-direction: column;
     margin: 1rem 0;
     width: 80%;
+    padding: 1rem 0.5rem;
 }
 
 .eventContainerTop {
@@ -46,11 +47,6 @@
     font-size: 2rem;
 }
 
-
-
-
-
-
 .eventButtons {
     display: flex;
     flex-direction: column;
@@ -64,9 +60,6 @@
     white-space: nowrap;
 }
 
-
-
-
 .moreButton {
     background: none;
     border: none;
@@ -95,19 +88,16 @@
     rotate: 90deg;
 }
 
-
 .eventMenuOpen {
     display: flex;
+    flex-direction: column;
+    margin-left: 1.5em;
 }
 
 .eventMenuClose {
     display: none;
 }
 
-
-
-
-
 @media screen and (max-width: 768px) {
     .eventImage {
         width: 100%;