Create settings modal

src/components/SettingsModal/SettingsModal.jsx

@@ -0,0 +1,41 @@
+import Modal from "../ui/modal/modal.jsx";
+import Button from "../ui/button/button.jsx";
+import styles from "./SettingsModal.module.css"
+import { useContext, useState } from "react";
+import ThemeSwitcher from "../ui/themeSwitcher/ThemeSwitcher.jsx";
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+
+
+export default function SettingsModal() {
+
+    const [open, setOpen] = useState(false);
+
+    const { logout } = useContext(AuthContext);
+
+    const handleLogout = () => {
+        logout();
+    }
+
+    return (
+        <>
+            <Button variant={"transparent"} onClick={() => setOpen(!open)}>
+                <img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
+            </Button>
+
+            <Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
+                <div className={styles.content}>
+
+                    <div className={styles.section}>
+                        <h3>Compte</h3>
+                        <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+                    </div>
+
+                    <div className={styles.section}>
+                        <h3>Apparence</h3>
+                        <ThemeSwitcher />
+                    </div>
+                </div>
+            </Modal>
+        </>
+    )
+}

src/components/SettingsModal/SettingsModal.module.css

@@ -0,0 +1,18 @@
+.content {
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+}
+
+.modifyIcon {
+    height: 30px;
+    width: 30px;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 30px;
+}

src/components/ui/modal/modal.module.css

@@ -18,7 +18,7 @@
     max-width: 70%;
     position: relative;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-    width: fit-content;
+    width: clamp(300px, 50vw, 600px);
     border: 1px solid rgba(200, 200, 200, 0.3);
     background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);

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;