fix ui

src/pages/Volunteers/VolunteerCard.jsx

@@ -2,6 +2,8 @@ import React, {useEffect, useState} from "react";
 import styles from "./VolunteersPage.module.css";
 import getUserById from "../../utils/users/getUserById.js";
 import formatDate from "../../utils/date/formatDate.js";
+import { useNavigate } from "react-router";
+import Button from "../../components/ui/button/button.jsx";
 
 export default function VolunteerCard({ id }) {
 
@@ -19,49 +21,63 @@ export default function VolunteerCard({ id }) {
         }) ()
     }, []);
 
+    const navigate = useNavigate();
+
     return (
         <div className={`${styles.profileboard} glassCard`}>
-            <div className={styles.mainContent}>
-                {!isExpanded ? (
-                    <div className={styles.basicInfo}>
-                        <h2>{user?.name}</h2>
-                        <p><strong>Rôle :</strong> {user?.role} </p>
-                        <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)} </p>
-                    </div>
-                ) : (
-                    <div className={styles.expandedContent}>
-                        <div className={styles.profilePictureContainer}>
-                            <img src={"/react.svg"} alt={`profile photo`} className={styles.profilePicture} />
-                        </div>
-                        <div className={styles.textInfo}>
-                            <div className={styles.basicInfo}>
-                                <h2>{user?.name}</h2>
-                                <p><strong>Rôle :</strong> {user?.role} </p>
-                                <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)} </p>
-                            </div>
-                            <div className={styles.contactInfo}>
-                                <p><strong>Email :</strong> {user?.email}</p>
 
-                                {user?.phone && (
+            {/* Header : titre + bouton expand */}
-                                    <p><strong>Téléphone :</strong> {user.phone}</p>
+            <div className={styles.header}>
-                                )}
+                <h2>{user?.name}</h2>
-                            </div>
-                        </div>
-                    </div>
-                )}
                 <button
                     className={`${styles.expandButton} glassCard`}
                     onClick={toggleExpand}
                 >
                     {isExpanded ? "▼" : "▲"}
                 </button>
-                {isExpanded && (
+            </div>
-                    <div className="voirPlus">
+
-                        <a href="#" className={styles.voirPlus}>VOIR PLUS</a>
+            <div className={styles.mainContent}>
+                {!isExpanded ? (
+                    <div className={styles.basicInfo}>
+                        <p><strong>Rôle :</strong> {user?.role}</p>
+                        <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
+                    </div>
+                ) : (
+                    <div className={styles.expandedContent}>
+                        <div className={styles.profilePictureContainer}>
+                            <img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
+                        </div>
+
+                        <div className={styles.textInfo}>
+                            <div className={styles.basicInfo}>
+                                <p><strong>Rôle :</strong> {user?.role}</p>
+                                <p><strong>Membre depuis :</strong> {user?.created_at && formatDate(user.created_at)}</p>
+                            </div>
+
+                            <div className={styles.contactInfo}>
+                                <p><strong>Email :</strong> {user?.email}</p>
+                                {user?.phone && <p><strong>Téléphone :</strong> {user.phone}</p>}
+                            </div>
+                        </div>
                     </div>
                 )}
             </div>
+
+            {isExpanded && (
+                <div className={styles.bottomBar}>
+                    <Button
+                        onClick={() => navigate(`/profile/${id}`)}
+                        variant="transparent"
+                    >
+                        Voir plus
+                    </Button>
+                </div>
+            )}
+
         </div>
     );
 
+
+
 }

src/pages/Volunteers/VolunteersPage.module.css

@@ -1,25 +1,37 @@
 .container {
     width: 100%;
     padding: 10px;
-  box-sizing: border-box;
     margin-top: 50px;
+    box-sizing: border-box;
 }
 
 .profileboard {
     width: 100%;
     padding: 15px;
-  border-radius: 10px;
-  box-sizing: border-box;
     margin-top: 3%;
-  position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    box-sizing: border-box;
 }
 
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.header h2 {
+    margin: 0;
+}
+
+
 .mainContent {
     display: flex;
     flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
     width: 100%;
+    flex: 1;
 }
 
 .basicInfo {
@@ -29,23 +41,9 @@
 .expandedContent {
     display: flex;
     flex-direction: row;
-  align-items: flex-start;
     width: 100%;
 }
 
-.profilePictureContainer {
-  width: 120px;
-  height: 120px;
-  margin-right: 20px;
-}
-
-.profilePicture {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
 .textInfo {
     display: flex;
     flex-direction: column;
@@ -60,6 +58,24 @@
     margin: 5px 0;
 }
 
+.bottomBar {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.profilePictureContainer {
+    width: 120px;
+    height: 120px;
+    margin-right: 20px;
+}
+
+.profilePicture {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
 .expandButton {
     width: 30px;
     height: 30px;
@@ -70,24 +86,6 @@
     background: transparent;
     border: none;
     font-size: 16px;
-  margin-left: 10px;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-
-.voirPlus {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  color: #007bff;
-  text-decoration: none;
-  font-weight: bold;
-  cursor: pointer;
-}
-
-.voirPlus:hover {
-  text-decoration: underline;
 }
 
 @media screen and (min-width: 768px) {
@@ -95,18 +93,13 @@
         width: 150px;
         height: 150px;
     }
-  .voirPlus{
-    text-align: right;
-  }
 }
 
 @media screen and (min-width: 1024px) {
     .container {
         max-width: 1200px;
-    margin: 0 auto;
+        margin: 50px auto;
         padding: 20px;
-    margin-top:50px;
-    margin-bottom: 50px;
     }
 
     .profileboard {
@@ -118,8 +111,3 @@
         height: auto;
     }
 }
-
-
-
-
-