From 08f4926fb83c0aedd9786ca0854dc8b69dff83e9 Mon Sep 17 00:00:00 2001
From: ORDONNEAU Antoine <antoine.ordonneau@etu.univ-lyon1.fr>
Date: Tue, 17 Mar 2026 08:36:33 +0100
Subject: [PATCH] correction css modal

---
 src/components/ui/Modal/Modal.module.css      |  1 -
 src/components/ui/Modal/Modal.tsx             | 32 -------------------
 src/index.css                                 | 24 ++++++++++----
 .../SettingsModal/SettingsModal.module.css    | 13 ++------
 .../SettingsModal/SettingsModal.tsx           | 15 ++++-----
 5 files changed, 27 insertions(+), 58 deletions(-)

diff --git a/src/components/ui/Modal/Modal.module.css b/src/components/ui/Modal/Modal.module.css
index cdb564a..5d38f53 100644
--- a/src/components/ui/Modal/Modal.module.css
+++ b/src/components/ui/Modal/Modal.module.css
@@ -34,5 +34,4 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: 20px;
 }
diff --git a/src/components/ui/Modal/Modal.tsx b/src/components/ui/Modal/Modal.tsx
index 3c1ecea..772b6dc 100644
--- a/src/components/ui/Modal/Modal.tsx
+++ b/src/components/ui/Modal/Modal.tsx
@@ -1,35 +1,3 @@
-/*import { createPortal } from "react-dom";
-import styles from "./modal.module.css";
-import Button from "../button/button.jsx";
-
-const Modal = ({ open, onClose, children, title }) => {
-
-    if (!open) return null;
-
-    const handleOverlayClick = () => {
-        onClose();
-    };
-
-    const handleModalClick = (e) => {
-        e.stopPropagation();
-    };
-
-    return createPortal(
-        <div className={styles.overlay} onClick={handleOverlayClick}>
-            <div className={styles.modal} onClick={handleModalClick}>
-                {title && <h2>{title}</h2>}
-                {children}
-                <div className={styles.modalFooter}>
-                    <Button onClick={onClose}>Fermer</Button>
-                </div>
-            </div>
-        </div>,
-        document.body
-    );
-};
-
-export default Modal;*/
-
 import { createPortal } from "react-dom";
 import styles from "./Modal.module.css";
 import Button from "../Button/Button";
diff --git a/src/index.css b/src/index.css
index c18fc90..601e888 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,6 +17,13 @@ html {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+    --glass-back: rgba(255, 255, 255, 0.54);
+    --glass-border: rgba(255, 255, 255, 0.2);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
+    inset 0 0 8px 4px rgba(255, 255, 255, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -51,18 +58,23 @@ body {
   min-height: 100vh;
 }
 
+body.dark {
+    --glass-back: rgba(191, 191, 191, 0.54);
+    --glass-border: rgba(191, 191, 191, 0.2);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(191, 191, 191, 0.3),
+    inset 0 -1px 0 rgba(191, 191, 191, 0.05),
+    inset 0 0 8px 4px rgba(191, 191, 191, 0.2);
+}
 
 .glassCard {
     padding: 10px 20px 10px 20px;
-    background: rgba(255, 255, 255, 0.54);
+    background: var(--glass-back);
     backdrop-filter: blur(3px);
     -webkit-backdrop-filter: blur(3px);
     border-radius: 20px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
-    inset 0 1px 0 rgba(255, 255, 255, 0.3),
-    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
-    inset 0 0 8px 4px rgba(255, 255, 255, 0.2);
+    border: 1px solid var(--glass-border);
+    box-shadow: var(--glass-shadow);
 }
 
 .glassBorder{
diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.module.css b/src/pages/Profile/components/SettingsModal/SettingsModal.module.css
index 7808db3..5a1b7ac 100644
--- a/src/pages/Profile/components/SettingsModal/SettingsModal.module.css
+++ b/src/pages/Profile/components/SettingsModal/SettingsModal.module.css
@@ -3,9 +3,9 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
-    gap: 28px;
 }
 
+
 .modifyIcon {
     height: 26px;
     width: 26px;
@@ -22,9 +22,6 @@
     flex-direction: column;
     gap: 16px;
     padding: 18px;
-    border-radius: 12px;
-    background: var(--glass-bg, rgba(255, 255, 255, 0.25));
-    backdrop-filter: blur(6px);
 }
 
 .section h3 {
@@ -43,7 +40,7 @@
 }
 
 .submitBtn {
-    width: 100%;
+    align-self: center;
     text-align: center;
     margin-top: 10px;
 }
@@ -65,14 +62,10 @@
     }
 
     .section {
-        padding: 22px;
-        gap: 18px;
     }
 
     .submitBtn {
         width: auto;
-        align-self: center;
-        min-width: 220px;
     }
 
     .section button {
@@ -87,8 +80,6 @@
     }
 
     .section {
-        padding: 26px;
-        border-radius: 16px;
     }
 
     .modifyIcon {
diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.tsx b/src/pages/Profile/components/SettingsModal/SettingsModal.tsx
index bec3d67..6bb2320 100644
--- a/src/pages/Profile/components/SettingsModal/SettingsModal.tsx
+++ b/src/pages/Profile/components/SettingsModal/SettingsModal.tsx
@@ -88,7 +88,7 @@ export default function SettingsModal() {
                 onClose={() => setOpen(false)}
             >
                 <div className={styles.content}>
-                    <div className={styles.section}>
+                    <div className={`glassBorder ${styles.section}`}>
                         <h3>Compte</h3>
 
                         <Button variant="danger" onClick={handleLogout}>
@@ -101,8 +101,7 @@ export default function SettingsModal() {
                         >
                             Supprimer le compte
                         </Button>
-
-                        <div className={styles.section}>
+                        <div className={styles.test}>
                             <h4>Changer de Prénom</h4>
                             <TextInput
                                 value={name}
@@ -111,8 +110,8 @@ export default function SettingsModal() {
                             />
                         </div>
 
-                        <div className={styles.section}>
-                            <h4>Changer de nom</h4>
+                        <div className={styles.test}>
+                        <h4>Changer de nom</h4>
                             <TextInput
                                 value={lastname}
                                 onChange={handleLastnameChange}
@@ -120,8 +119,8 @@ export default function SettingsModal() {
                             />
                         </div>
 
-                        <div className={styles.section}>
-                            <h4>Changer de numéro de téléphone</h4>
+                        <div className={styles.test}>
+                        <h4>Changer de numéro de téléphone</h4>
                             <TextInput
                                 value={phone}
                                 onChange={handlePhoneChange}
@@ -137,7 +136,7 @@ export default function SettingsModal() {
                         </Button>
                     </div>
 
-                    <div className={styles.section}>
+                    <div className={`glassBorder ${styles.section}`}>
                         <h3>Apparence</h3>
                         <ThemeSwitcher/>
                     </div>