merge fixcss/profile into dev

2026-03-17 11:46:54 +01:00
parent 16b6580842 bed21f834e
commit 97afa7f8ff
8 changed files with 171 additions and 109 deletions
@@ -14,19 +14,14 @@
 }

 .modal {
-    padding: 20px 20px 20px 20px;
-    border-radius: 8px;
+    border-radius: 20px;
    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;
 }
@@ -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>,
@@ -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{
@@ -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>
+
+    </>
+}
@@ -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;
@@ -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>
@@ -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;
-    }
-}
@@ -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,7 +99,7 @@ export default function SettingsModal() {
                            />
                        </div>

-                        <div className={styles.section}>
+                        <div className={styles.test}>
                        <h4>Changer de nom</h4>
                            <TextInput
                                value={lastname}
@@ -120,7 +108,7 @@ export default function SettingsModal() {
                            />
                        </div>

-                        <div className={styles.section}>
+                        <div className={styles.test}>
                        <h4>Changer de numéro de téléphone</h4>
                            <TextInput
                                value={phone}
@@ -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>