Create settings modal

src/pages/Profile/ProfilePage.jsx

@@ -3,18 +3,11 @@ 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";
-import ThemeSwitcher from "../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
+import SettingsModal from "../../components/SettingsModal/SettingsModal.jsx";
 
 function ProfilePage() {
 
-    const { user, logout } = useContext(AuthContext);
-    const navigate = useNavigate();
-
-    const handleLogout = () => {
-        logout();
-    }
+    const { user } = useContext(AuthContext);
 
   return (
     <div className={styles.container}>
@@ -30,10 +23,6 @@ function ProfilePage() {
           <div className={styles.description}>
             <div className={styles.headerProfile}>
                 <h2> {user.name} {user.lastname} </h2>
-                <div className={styles.settingsBtns}>
-                    <ThemeSwitcher />
-                    <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
-                </div>
             </div>
             <div className={styles.topDescription}>
               <div className={styles.infoBlock}>
@@ -44,9 +33,7 @@ function ProfilePage() {
                 <p><strong>Mail :</strong> {user.email} </p>
                 <p><strong>Téléphone :</strong> {user.phone}</p>
               </div>
-              <Button variant={"transparent"} onClick={() => navigate("/profile/update")}>
-                  <img src={"/icons/pen.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
-              </Button>
+                <SettingsModal />
             </div>
 
             <h2>Vos Événements :</h2>

src/pages/Profile/ProfilePage.module.css

@@ -38,10 +38,11 @@
 }
 
 .topDescription {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-bottom: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 15px;
 }
 
 .infoBlock {
@@ -122,11 +123,6 @@
     
 }
 
-.modifyIcon {
-    height:50px;
-    width:50px;
-}
-
 .headerProfile {
     display: flex;
     flex-direction: row;