merge fixcss/profile into dev

src/pages/Profile/components/SettingsModal/SettingsModal.module.css

@@ -1,11 +1,12 @@
 .content {
     width: 100%;
-    padding: 20px;
     display: flex;
     flex-direction: column;
-    gap: 28px;
+    padding: 10px 20px 10px 20px;
+    gap: 20px;
 }
 
+
 .modifyIcon {
     height: 26px;
     width: 26px;
@@ -22,9 +23,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 +41,7 @@
 }
 
 .submitBtn {
-    width: 100%;
+    align-self: center;
     text-align: center;
     margin-top: 10px;
 }
@@ -59,40 +57,11 @@
 }
 
 @media (min-width: 640px) {
-    .content {
-        padding: 28px;
-        gap: 32px;
-    }
-
-    .section {
-        padding: 22px;
-        gap: 18px;
-    }
-
     .submitBtn {
         width: auto;
-        align-self: center;
-        min-width: 220px;
     }
 
     .section button {
         width: fit-content;
     }
-}
-
-@media (min-width: 900px) {
-    .content {
-        padding: 36px;
-        gap: 36px;
-    }
-
-    .section {
-        padding: 26px;
-        border-radius: 16px;
-    }
-
-    .modifyIcon {
-        height: 30px;
-        width: 30px;
-    }
 }

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

@@ -88,21 +88,9 @@ export default function SettingsModal() {
                 onClose={() => setOpen(false)}
             >
                 <div className={styles.content}>
-                    <div className={styles.section}>
-                        <h3>Compte</h3>
-
-                        <Button variant="danger" onClick={handleLogout}>
-                            Déconnexion
-                        </Button>
-
-                        <Button
-                            variant="danger"
-                            onClick={() => setIsDelete(true)}
-                        >
-                            Supprimer le compte
-                        </Button>
-
-                        <div className={styles.section}>
+                    <div className={`glassBorder ${styles.section}`}>
+                        <h3>Modifier les informations du compte</h3>
+                        <div className={styles.test}>
                             <h4>Changer de Prénom</h4>
                             <TextInput
                                 value={name}
@@ -111,8 +99,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 +108,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,10 +125,25 @@ export default function SettingsModal() {
                         </Button>
                     </div>
 
-                    <div className={styles.section}>
+                    <div className={`glassBorder ${styles.section}`}>
                         <h3>Apparence</h3>
                         <ThemeSwitcher/>
                     </div>
+
+                    <div className={`glassBorder ${styles.section}`}>
+                        <h3>Sécurité du compte</h3>
+
+                        <Button variant="danger" onClick={handleLogout}>
+                            Déconnexion
+                        </Button>
+
+                        <Button
+                            variant="danger"
+                            onClick={() => setIsDelete(true)}
+                        >
+                            Supprimer le compte
+                        </Button>
+                    </div>
                 </div>
             </Modal>