From 6d8899c7deeb7d1e6ae1ccbc63ff33fa72fb6ab3 Mon Sep 17 00:00:00 2001
From: T'JAMPENS QUENTIN p2406187 <pyramond69@gmail.com>
Date: Tue, 9 Dec 2025 09:40:20 +0100
Subject: [PATCH] Create settings modal

---
 public/icons/settings-wheel.svg               |  4 ++
 .../SettingsModal/SettingsModal.jsx           | 41 +++++++++++++++++++
 .../SettingsModal/SettingsModal.module.css    | 18 ++++++++
 src/components/ui/modal/modal.module.css      |  2 +-
 src/pages/Profile/ProfilePage.jsx             | 19 ++-------
 src/pages/Profile/ProfilePage.module.css      | 14 +++----
 6 files changed, 72 insertions(+), 26 deletions(-)
 create mode 100644 public/icons/settings-wheel.svg
 create mode 100644 src/components/SettingsModal/SettingsModal.jsx
 create mode 100644 src/components/SettingsModal/SettingsModal.module.css

diff --git a/public/icons/settings-wheel.svg b/public/icons/settings-wheel.svg
new file mode 100644
index 0000000..9a4e19b
--- /dev/null
+++ b/public/icons/settings-wheel.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path d="M30.015 12.97l-2.567-0.569c-0.2-0.64-0.462-1.252-0.762-1.841l1.389-2.313c0.518-0.829 0.78-2.047 0-2.829l-1.415-1.414c-0.78-0.781-2.098-0.64-2.894-0.088l-2.251 1.434c-0.584-0.303-1.195-0.563-1.829-0.768l-0.576-2.598c-0.172-0.953-1.005-1.984-2.11-1.984h-2c-1.104 0-1.781 1.047-2 2l-0.642 2.567c-0.678 0.216-1.328 0.492-1.948 0.819l-2.308-1.47c-0.795-0.552-2.114-0.692-2.894 0.088l-1.415 1.414c-0.781 0.782-0.519 2 0 2.828l1.461 2.435c-0.274 0.552-0.517 1.123-0.705 1.72l-2.566 0.569c-0.953 0.171-1.984 1.005-1.984 2.109v2c0 1.105 1.047 1.782 2 2l2.598 0.649c0.179 0.551 0.404 1.080 0.658 1.593l-1.462 2.438c-0.518 0.828-0.78 2.047 0 2.828l1.415 1.414c0.78 0.782 2.098 0.64 2.894 0.089l2.313-1.474c0.623 0.329 1.277 0.608 1.96 0.823l0.64 2.559c0.219 0.953 0.896 2 2 2h2c1.105 0 1.938-1.032 2.11-1.985l0.577-2.604c0.628-0.203 1.23-0.459 1.808-0.758l2.256 1.438c0.796 0.552 2.114 0.692 2.895-0.089l1.415-1.414c0.78-0.782 0.518-2 0-2.828l-1.39-2.317c0.279-0.549 0.521-1.12 0.716-1.714l2.599-0.649c0.953-0.219 2-0.895 2-2v-2c0-1.104-1.031-1.938-1.985-2.11zM30.001 16.939c-0.085 0.061-0.245 0.145-0.448 0.192l-3.708 0.926-0.344 1.051c-0.155 0.474-0.356 0.954-0.597 1.428l-0.502 0.986 1.959 3.267c0.125 0.2 0.183 0.379 0.201 0.485l-1.316 1.314c-0.127-0.040-0.271-0.092-0.341-0.14l-3.292-2.099-1.023 0.529c-0.493 0.256-0.999 0.468-1.503 0.631l-1.090 0.352-0.824 3.723c-0.038 0.199-0.145 0.36-0.218 0.417h-1.8c-0.061-0.085-0.145-0.245-0.191-0.448l-0.921-3.681-1.066-0.338c-0.549-0.173-1.097-0.404-1.63-0.684l-1.028-0.543-3.293 2.099c-0.135 0.091-0.279 0.143-0.409 0.143l-1.311-1.276c0.018-0.104 0.072-0.274 0.181-0.449l2.045-3.408-0.487-0.98c-0.227-0.462-0.407-0.895-0.547-1.325l-0.343-1.052-3.671-0.918c-0.231-0.052-0.398-0.139-0.485-0.2v-1.86c0.001 0.001 0.002 0.001 0.005 0.001 0.034 0 0.198-0.117 0.335-0.142l3.772-0.835 0.346-1.103c0.141-0.449 0.333-0.917 0.588-1.43l0.487-0.98-2.024-3.373c-0.125-0.201-0.184-0.38-0.201-0.485l1.315-1.314c0.128 0.041 0.271 0.093 0.34 0.14l3.354 2.138 1.027-0.542c0.527-0.278 1.073-0.507 1.622-0.682l1.063-0.338 0.912-3.649c0.053-0.231 0.138-0.398 0.2-0.485h1.859c-0.014 0.020 0.115 0.195 0.142 0.339l0.84 3.794 1.089 0.352c0.511 0.165 1.023 0.38 1.523 0.639l1.023 0.532 3.224-2.053c0.135-0.092 0.279-0.143 0.409-0.143l1.313 1.276c-0.017 0.104-0.072 0.276-0.181 0.45l-1.98 3.296 0.505 0.988c0.273 0.533 0.48 1.033 0.635 1.529l0.346 1.104 3.697 0.82c0.224 0.041 0.398 0.171 0.434 0.241zM16.013 9.99c-3.321 0-6.023 2.697-6.023 6.010s2.702 6.010 6.023 6.010 6.023-2.697 6.023-6.009c0-3.313-2.702-6.010-6.023-6.010zM16 20c-2.205 0-4-1.794-4-4s1.794-4 4-4c2.206 0 4 1.794 4 4s-1.794 4-4 4z"></path>
+</svg>
\ No newline at end of file
diff --git a/src/components/SettingsModal/SettingsModal.jsx b/src/components/SettingsModal/SettingsModal.jsx
new file mode 100644
index 0000000..8b78d86
--- /dev/null
+++ b/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>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/SettingsModal/SettingsModal.module.css b/src/components/SettingsModal/SettingsModal.module.css
new file mode 100644
index 0000000..d9d27ff
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/ui/modal/modal.module.css b/src/components/ui/modal/modal.module.css
index 76b108a..faf857f 100644
--- a/src/components/ui/modal/modal.module.css
+++ b/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);
diff --git a/src/pages/Profile/ProfilePage.jsx b/src/pages/Profile/ProfilePage.jsx
index 0271d42..aaa1338 100644
--- a/src/pages/Profile/ProfilePage.jsx
+++ b/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>
diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css
index e4e467b..1e7913f 100644
--- a/src/pages/Profile/ProfilePage.module.css
+++ b/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;