lick on profile picture to update it

src/pages/Profile/ProfilePage.module.css

@@ -133,6 +133,29 @@
   margin-top: 16px;
 }
 
+.profilePictureContainer {
+    position: relative;
+}
+
+.pictureOverlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.5);
+    color: white;
+    text-align: center;
+    padding: 2px;
+    border-radius: 0 0 90% 90%;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+.clickable {
+    cursor: pointer;
+}
+.profilePictureContainer:hover .pictureOverlay {
+    opacity: 1;
+}
 @media (min-width: 768px) {
   .contentWrapper {
     flex-direction: row;
@@ -172,7 +195,6 @@
   }
 }
 
-/* Adaptation pour grand écran */
 @media (min-width: 1024px) {
   .container {
     max-width: 1200px;

src/pages/Profile/ProfilePage.tsx

@@ -1,7 +1,6 @@
-import getXSRFToken from "../../utils/getXSRF.js";
 import {useContext, useEffect, useState} from "react";
 import styles from "./ProfilePage.module.css";
-import {AuthContext} from "../../../src/contexts/Auth/AuthContext.js";
+import {AuthContext} from "../../contexts/Auth/AuthContext";
 import formatDate from "../../utils/date/formatDate";
 import Task from "../../components/Task/Task";
 import SettingsModal from "./components/SettingsModal/SettingsModal";
@@ -63,7 +62,7 @@ function ProfilePage() {
     (async () => {
       console.log(JSON.stringify(import.meta.env.VITE_API_URL));
       if (!isOwnProfile && id) {
-        const res = await getUserById(id);
+        const res = await getUserById(Number(id));
         if (res.status === 404) {
           navigate("/404");
           return;
@@ -107,7 +106,7 @@ function ProfilePage() {
   };
   const handleDeletePicture = async () => {
     
-       deleteProfilePhoto();
+       await deleteProfilePhoto();
        setProfilePicture(null);
   };
 
@@ -115,27 +114,27 @@ function ProfilePage() {
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
         <div className={styles.contentWrapper}>
-          <div className={styles.profilePictureContainer}>
+          {/*<div className={styles.profilePictureContainer}>
             <img
               src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
               alt="Photo de profil"
               className={styles.profilePicture}
             />
+          </div>*/}
+          <div className={styles.profilePictureContainer} onClick={isOwnProfile ? handleEditPictureClick : undefined} style={isOwnProfile ? { cursor: "pointer" } : {}}>
+            <img
+                src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
+                alt="Photo de profil"
+                className={styles.profilePicture}
+            />
+            {isOwnProfile && (
+                <div className={styles.pictureOverlay}>
+                  Modifier
+                </div>
+            )}
           </div>
 
-          {isOwnProfile && (
-            <div className={styles.pictureButtons}>
-              <button onClick={handleEditPictureClick} className={styles.editPictureButton}>
-                Modifier la photo
-              </button>
-              {user?.profile_photo_path && (
-                <button onClick={handleDeletePicture} className={styles.editPictureButton}>
-                  Supprimer
-                </button>
-              )}
-            </div>
-          )}
-
+          <input type="file" ref={fileInputRef} onChange={handleFileChange} accept="image/*" style={{ display: "none" }}/>
           <input
             type="file"
             ref={fileInputRef}

src/pages/Profile/components/SettingsModal/SettingsModal.tsx

@@ -35,7 +35,7 @@ interface AuthContextType {
 }
 
 export default function SettingsModal() {
-    const {user, logout, update} = useContext(AuthContext) as AuthContextType;
+    const {user, logout, update} = useContext(AuthContext) as unknown as AuthContextType;
 
     const [open, setOpen] = useState<boolean>(false);
     const [isDelete, setIsDelete] = useState<boolean>(false);