merge fixcss/profile into dev

src/components/ui/Modal/Modal.module.css

@@ -14,19 +14,14 @@
 }
 
 .modal {
-    padding: 20px 20px 20px 20px;
+    border-radius: 20px;
-    border-radius: 8px;
     min-width: 300px;
     max-width: 70%;
     max-height: none;
     position: relative;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
     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);
     -webkit-backdrop-filter: blur(10px);
-    color: #000;
     outline: none;
 }
 
@@ -34,5 +29,4 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-top: 20px;
 }

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";
@@ -55,11 +23,11 @@ const Modal = ({ open, onClose, children, title }: ModalProps) => {
 
   return createPortal(
     <div className={styles.overlay} onClick={handleOverlayClick}>
-      <div className={styles.modal} onClick={handleModalClick}>
+      <div className={`glassCard ${styles.modal}`} onClick={handleModalClick}>
         {title && <h2>{title}</h2>}
         {children}
         <div className={styles.modalFooter}>
-          <Button onClick={onClose}>Fermer</Button>
+          <Button variant={"default"} onClick={onClose}>Fermer</Button>
         </div>
       </div>
     </div>,

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);
+    border: 1px solid var(--glass-border);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
+    box-shadow: var(--glass-shadow);
-    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);
 }
 
 .glassBorder{

src/pages/EventDetail/components/CreateTaskBtn/CreateTaskBtn.jsx

@@ -0,0 +1,116 @@
+import styles from "../../EventDetailPage.module.css";
+import Button from "../../../../components/ui/Button/Button";
+import {useContext, useState} from "react";
+import TextInput from "../../../../components/ui/Input/Input";
+import Modal from "../../../../components/ui/Modal/Modal";
+import createTaskApi from "../../../../utils/tasks/createTask.js";
+import {EventDetailContext} from "../../../../contexts/EventDetail/EventDetailContext.js";
+
+export default function CreateTaskBtn({ id }) {
+
+    const [openTaskModal, setOpenTaskModal] = useState(false);
+
+    const [taskName, setTaskName] = useState("");
+    const [taskDescription, setTaskDescription] = useState("");
+    const [taskLocation, setTaskLocation] = useState("");
+    const [maxParticipants, setMaxParticipants] = useState("");
+    const [startTime, setStartTime] = useState("");
+    const [endTime, setEndTime] = useState("");
+
+    const { updateEventInfo } = useContext(EventDetailContext)
+
+    const createTask = async () => {
+        const data = await createTaskApi({
+            eventId: id,
+            name: taskName,
+            description: taskDescription,
+            start: startTime,
+            end: endTime,
+            location: taskLocation,
+            maxParticipants,
+        });
+
+        if (data?.status === 200) {
+            setOpenTaskModal(false);
+            setTaskName("");
+            setTaskDescription("");
+            setTaskLocation("");
+            setMaxParticipants("");
+            setStartTime("");
+            setEndTime("");
+
+            updateEventInfo(id)
+        } else {
+            console.log("⚠️ Échec de la création de la task");
+        }
+    };
+
+    return <>
+
+        <Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>
+
+        <Modal open={openTaskModal} onClose={() => setOpenTaskModal(false)} title={"Créer tâche"}>
+            <div className={styles.modalContent}>
+
+                <div>
+                    <p>Nom de la tâche</p>
+                    <TextInput
+                        value={taskName}
+                        onChange={(e) => setTaskName(e.target.value)}
+                        placeholder="Nom de la tâche"
+                    />
+                </div>
+
+                <div>
+                    <p>Description</p>
+                    <TextInput
+                        value={taskDescription}
+                        onChange={(e) => setTaskDescription(e.target.value)}
+                        placeholder="Description de la tâche"
+                    />
+                </div>
+
+                <div>
+                    <p>Lieu</p>
+                    <TextInput
+                        value={taskLocation}
+                        onChange={(e) => setTaskLocation(e.target.value)}
+                        placeholder="Lieu"
+                    />
+                </div>
+
+                <div>
+                    <p>Nombre de participants max</p>
+                    <TextInput
+                        type="number"
+                        value={maxParticipants}
+                        onChange={(e) => setMaxParticipants(e.target.value)}
+                        placeholder="Participants max"
+                    />
+                </div>
+
+                <div>
+                    <p>Heure de début</p>
+                    <TextInput
+                        type="datetime-local"
+                        value={startTime}
+                        onChange={(e) => setStartTime(e.target.value)}
+                    />
+                </div>
+
+                <div>
+                    <p>Heure de fin</p>
+                    <TextInput
+                        type="datetime-local"
+                        value={endTime}
+                        onChange={(e) => setEndTime(e.target.value)}
+                    />
+                </div>
+
+                <Button variant="primary" onClick={createTask}> Créer la tâche </Button>
+
+            </div>
+        </Modal>
+
+    </>
+}

src/pages/Profile/ProfilePage.module.css

@@ -12,7 +12,7 @@
     box-sizing: border-box;
 }
 
-.settingImage {
+.settingAccount {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -126,7 +126,7 @@
   box-sizing: border-box;
 }
 
-.settingImage {
+.settingAcount {
   width: 100%;
   display: flex;
   justify-content: center;

src/pages/Profile/ProfilePage.tsx

@@ -144,6 +144,11 @@ function ProfilePage() {
               {user?.isAdmin && profileUser && !isOwnProfile && (
                 <ManageMember userToManage={profileUser} />
               )}
+              {isOwnProfile && (
+                  <div className={styles.settingAccount}>
+                    <SettingsModal />
+                  </div>
+              )}
             </div>
 
             <div className={styles.topDescription}>
@@ -157,11 +162,6 @@ function ProfilePage() {
                 <p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
               </div>
 
-              {isOwnProfile && (
-                <div className={styles.settingImage}>
-                  <SettingsModal />
-                </div>
-              )}
             </div>
 
             <h2>Tâches :</h2>

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}>
+                    <div className={`glassBorder ${styles.section}`}>
-                        <h3>Compte</h3>
+                        <h3>Modifier les informations du compte</h3>
-
+                        <div className={styles.test}>
-                        <Button variant="danger" onClick={handleLogout}>
-                            Déconnexion
-                        </Button>
-
-                        <Button
-                            variant="danger"
-                            onClick={() => setIsDelete(true)}
-                        >
-                            Supprimer le compte
-                        </Button>
-
-                        <div className={styles.section}>
                             <h4>Changer de Prénom</h4>
                             <TextInput
                                 value={name}
@@ -111,8 +99,8 @@ export default function SettingsModal() {
                             />
                         </div>
 
-                        <div className={styles.section}>
+                        <div className={styles.test}>
-                            <h4>Changer de nom</h4>
+                        <h4>Changer de nom</h4>
                             <TextInput
                                 value={lastname}
                                 onChange={handleLastnameChange}
@@ -120,8 +108,8 @@ export default function SettingsModal() {
                             />
                         </div>
 
-                        <div className={styles.section}>
+                        <div className={styles.test}>
-                            <h4>Changer de numéro de téléphone</h4>
+                        <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>