update profile btn

src/pages/Profile/ProfilePage.jsx

@@ -3,10 +3,13 @@ import styles from "./ProfilePage.module.css";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import formatDate from "../../utils/date/formatDate.js";
 import Task from "../../components/Task/Task";
+import Button from "../../components/ui/button/button.jsx";
+import { useNavigate } from "react-router";
 
 function ProfilePage() {
 
     const { user } = useContext(AuthContext);
+    const navigate = useNavigate();
 
   return (
     <div className={styles.container}>
@@ -30,7 +33,9 @@ function ProfilePage() {
                 <p><strong>Mail :</strong> {user.email} </p>
                 <p><strong>Téléphone :</strong> {user.phone}</p>
               </div>
-              <button href="/../UpdateProfile.jsx">M</button>
+              <Button variant={"transparent"} onClick={() => navigate("/profile/update")}>
+                  <img src={"/icons/pen.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
+              </Button>
             </div>
 
             <h2>Vos Événements :</h2>
@@ -38,7 +43,6 @@ function ProfilePage() {
                   <Task key={index} task={task} />
               ))}
           </div>
-
         </div>
       </div>
     </div>

src/pages/Profile/ProfilePage.module.css

@@ -117,6 +117,11 @@
     
 }
 
+.modifyIcon {
+    height:50px;
+    width:50px;
+}
+
 /* Desktop (1024px et plus) */
 @media screen and (min-width: 1024px) {
   .container {