fix checkbox css

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

@@ -5,6 +5,51 @@
     gap: 20px;
 }
 
+.divNotif {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.checkboxLabel {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.checkboxLabel input {
+    display: none;
+}
+
+.checkmark {
+    width: 30px;
+    height: 30px;
+    border-radius: 6px;
+    border: 2px solid #019AFF;
+    background-color: transparent;
+    transition: all 0.2s ease;
+    position: relative;
+}
+.checkboxLabel input:checked + .checkmark {
+    background-color: #019AFF;
+}
+
+.checkmark::after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+.checkboxLabel input:checked + .checkmark::after {
+    display: block;
+    left: 8px;
+    top: 4px;
+    width: 6px;
+    height: 12px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    transform: rotate(45deg);
+}
 .modifyIcon {
     height: 26px;
     width: 26px;

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

@@ -225,22 +225,30 @@ export default function SettingsModal() {
                     <div className={`glassBorder ${styles.section}`}>
                         <h3>Notifications</h3>
 
-                        <div>
+                        <div className={styles.divNotif}>
-                            <h4>Notifications par email</h4>
+                            <h4>Notifications sur le site</h4>
-                            <input
+
-                                type="checkbox"
+                            <label className={styles.checkboxLabel}>
-                                checked={emailNotifications === 1}
+                                <input
-                                onChange={handleEmailToggle}
+                                    type="checkbox"
-                            />
+                                    checked={emailNotifications === 1}
+                                    onChange={handleEmailToggle}
+                                />
+                                <span className={styles.checkmark}></span>
+                            </label>
                         </div>
 
-                        <div>
+                        <div className={styles.divNotif}>
                             <h4>Notifications sur le site</h4>
-                            <input
+
-                                type="checkbox"
+                            <label className={styles.checkboxLabel}>
-                                checked={webNotifications === 1}
+                                <input
-                                onChange={handleWebToggle}
+                                    type="checkbox"
-                            />
+                                    checked={webNotifications === 1}
+                                    onChange={handleWebToggle}
+                                />
+                                <span className={styles.checkmark}></span>
+                            </label>
                         </div>
                     </div>