Merge branch 'features/images' into 'dev'

Features/images See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!40
2025-12-10 14:46:05 +00:00
parent 0027bfc5f2 2b1d4aa8ba
commit c205fc191a
13 changed files with 33 additions and 97 deletions
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="logoIcone.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>sae-front</title>
+    <title>Comité des fêtes de Beaupont</title>
  </head>
  <body>
    <div id="root"></div>
@@ -1,3 +1,3 @@
-<svg width="60px" height="60px" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M34.325 52.5C33.8855 53.2577 33.2546 53.8866 32.4956 54.3238C31.7365 54.761 30.8759 54.9911 30 54.9911C29.1241 54.9911 28.2635 54.761 27.5044 54.3238C26.7454 53.8866 26.1145 53.2577 25.675 52.5M45 20C45 16.0218 43.4196 12.2064 40.6066 9.3934C37.7936 6.58035 33.9782 5 30 5C26.0218 5 22.2064 6.58035 19.3934 9.3934C16.5804 12.2064 15 16.0218 15 20C15 37.5 7.5 42.5 7.5 42.5H52.5C52.5 42.5 45 37.5 45 20Z" stroke="#1E1E1E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" fill="currentColor">
  <path d="M 480,-880 360,-760 H 600 Z M 360,-200 480,-80 600,-200 Z" />
  <path d="M 71.679924,-674.40094 H 398.50264 v 60.67705 l -208.59362,252.3436 h 214.5832 v 75.7812 H 65.690344 v -60.67705 L 274.28397,-598.61973 H 71.679924 Z" />
  <path d="M 769.04932,-356.43238 H 612.27858 l -24.73957,70.83329 H 486.75782 l 144.01033,-388.80185 h 119.53118 l 144.01033,388.80185 H 793.52847 Z m -131.77076,-72.13537 h 106.51035 l -53.12496,-154.68741 z" />
@@ -20,38 +20,28 @@ function Filter({isFilterVisible, filters, setFilters}){
            <abbr title="Tri alphabétique croissant (A à Z)">
                <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "asc" ? "" : styles.active}`}
                        onClick={() => setAlphabeticalOrder("asc")}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                        <path d="m80-280 150-400h86l150 400h-82l-34-96H196l-32 96H80Zm140-164h104l-48-150h-6l-50 150Zm328 164v-76l202-252H556v-72h282v76L638-352h202v72H548ZM360-760l120-120 120 120H360ZM480-80 360-200h240L480-80Z"/>
-                    </svg>
+                    <img src={"sortByAlpha.svg"} alt="Tri alphabétique croissant (A à Z)"/>
                </button>
            </abbr>

            <abbr title="Tri alphabétique décroissant (Z à A)">
                <button className={`${styles.filterTag} glassCard ${filters.alphabetical !== "desc" ? "" : styles.active}`}
                        onClick={() => setAlphabeticalOrder("desc")}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                        <path d="M 480,-880 360,-760 H 600 Z M 360,-200 480,-80 600,-200 Z" />
-                        <path d="M 71.679924,-674.40094 H 398.50264 v 60.67705 l -208.59362,252.3436 h 214.5832 v 75.7812 H 65.690344 v -60.67705 L 274.28397,-598.61973 H 71.679924 Z" />
-                        <path d="M 769.04932,-356.43238 H 612.27858 l -24.73957,70.83329 H 486.75782 l 144.01033,-388.80185 h 119.53118 l 144.01033,388.80185 H 793.52847 Z m -131.77076,-72.13537 h 106.51035 l -53.12496,-154.68741 z" />
-                    </svg>
+                    <img src={"sortByAntiAlpha.svg"} alt="Tri alphabétique décroissant (Z à A)"/>
                </button>
            </abbr>

            <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
                        onClick={() => setYearOrder("desc")}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                        <path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm400 0v-488l-44 44-56-56 140-140 140 140-57 56-43-43v487h-80ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
-                    </svg>
+                    <img src={"timerArrowUp.svg"} alt="Tri chronologique décroissant (du plus récent au plus ancien)"/>
                </button>
            </abbr>

            <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
                        onClick={() => setYearOrder("asc")}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                        <path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm440 0L640-300l56-56 44 44v-488h80v487l43-43 57 56-140 140ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
-                    </svg>
+                    <img src={"timerArrowDown.svg"} alt="Tri chronologique croissant (du plus ancien au plus récent)"/>
                </button>
            </abbr>
        </div>
@@ -35,31 +35,14 @@
 .filterTag:focus {
    outline: none;
 }
-.filterTag:focus-visible {
-    outline: 2px solid black;
-}

 .filterTag:hover {
    cursor: pointer;
-    svg{
-        fill: #019AFF;
-    }
-}
-
-
-.filterTag svg {
-    transform: scale(0.7);
-    color: black;
 }


 .active {
-    border: 1px solid #019AFF;
-}
-
-.active svg {
-    fill: #019AFF;
-    transform: scale(0.8);
+    border: 2px solid #019AFF;
 }

@media screen and (max-width: 768px){
@@ -7,7 +7,7 @@ function Header() {
    const [notificationMenu, setnotificationMenu] = useState(false);
    const [unreadNotification, setunreadNotification] = useState(true);
    const [mobileMenu, setMobileMenu] = useState(false);
-    const [notifications, setNotifications] = useState([]);
+    const [notifications, setNotifications] = useState([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]);
    const notificationRef = useRef(null);


@@ -64,16 +64,12 @@ function Header() {
                                setunreadNotification(false);
                            }}
                        >
-                            <svg width="auto" height="30" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M34.325 52.5C33.8855 53.2577 33.2546 53.8866 32.4956 54.3238C31.7365 54.761 30.8759 54.9911 30 54.9911C29.1241 54.9911 28.2635 54.761 27.5044 54.3238C26.7454 53.8866 26.1145 53.2577 25.675 52.5M45 20C45 16.0218 43.4196 12.2064 40.6066 9.3934C37.7936 6.58035 33.9782 5 30 5C26.0218 5 22.2064 6.58035 19.3934 9.3934C16.5804 12.2064 15 16.0218 15 20C15 37.5 7.5 42.5 7.5 42.5H52.5C52.5 42.5 45 37.5 45 20Z" stroke="currentStroke" />
-                            </svg>
+                            <img className={styles.notificationsImg} src="bell.svg" alt="notifications"/>
                            {unreadNotification && <span className={styles.notificationBadge}></span>}
                        </button>

                        <Link to="/profile" className={styles.profileLink}>
-                            <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="auto" fill="currentFill">
-                                <path d="M480-492.31q-57.75 0-98.87-41.12Q340-574.56 340-632.31q0-57.75 41.13-98.87 41.12-41.13 98.87-41.13 57.75 0 98.87 41.13Q620-690.06 620-632.31q0 57.75-41.13 98.88-41.12 41.12-98.87 41.12ZM180-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v88.93H180Z" />
-                            </svg>
+                            <img className={styles.profileImg} src="person.svg" alt="profile"/>
                        </Link>
                    </div>
                </nav>
@@ -109,7 +105,7 @@ function Header() {
                className={`${styles.notificationDiv} glassCard ${notificationMenu ? styles.activeNotificationDiv : ""}`}
            >
                {notifications.length === 0 ? (
-                    <p>Vous n'avez aucune notification !</p>
+                    <p className={styles.notification}>Vous n'avez aucune notification !</p>
                ) : (
                    notifications.map((notification, index) => (
                        <div className={styles.notification} key={index}>
@@ -118,9 +114,7 @@ function Header() {
                                className={styles.closeBtn}
                                onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
                            >
-                                <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px">
-                                    <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
-                                </svg>
+                                <img src="close.svg" alt="supprimer la notification"/>
                            </button>
                        </div>
                    ))
@@ -26,25 +26,16 @@
    pointer-events: auto;
 }
 .inactiveHeaderContent{
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease;
-    position: absolute;
-    top: 0.8rem;
-    left: 0.8rem;
+    display: none;
 }


 .inactiveMobileMenu{
-    max-height: 0;
-    position: absolute;
-    top: 100%;
-    left: 0;
+    display: none;
 }

 .activeMobileMenu{
-    transition: max-height 3s ease;
-    max-height: 500px;
+    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: start;
@@ -105,10 +96,6 @@
    border-bottom: 2px solid #019AFF;
 }

-svg {
-    width: fit-content;
-}
-
 .bellBtn, .profileLink {
    display: flex;
    align-items: center;
@@ -124,11 +111,12 @@ svg {
    position: relative;
 }

-.bellBtn svg {
+.notificationsImg {
    stroke: black;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
+    height: 28px;
 }

 .bellBtn:focus {
@@ -141,33 +129,22 @@ svg {
 .activeBellBtn {
    transform: translateY(-4px);
    background: rgba(191, 191, 191, 0.5);
-    svg {
-        stroke: #019AFF;
-    }
 }

+
 .bellBtn:hover {
    transform: translateY(-4px);
    background: rgba(191, 191, 191, 0.5);
-    svg {
-        stroke: #019AFF;
-    }
 }


 .profileLink:hover {
    transform: translateY(-4px);
    background: rgba(191, 191, 191, 0.5);
-    svg {
-        fill: #019AFF;
-    }
 }

-.bellBtn svg {
-    height: 28px;
-}

-.profileLink svg {
+.profileImg {
    height: 40px;
 }

@@ -188,12 +165,12 @@ svg {
    z-index: 3;
 }

-
 .notification{
-    margin-bottom: 7%;
+    padding: 0.5em 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
+    border-radius: 15px;
 }

 .notificationBadge {
@@ -233,6 +210,7 @@ svg {
    cursor: pointer;
    display: none;
    z-index: 10;
+    background: none;
 }

 .burgerBar {
@@ -47,10 +47,7 @@ function SearchBar() {
    return (
        <div className={`${styles.searchBarContainer} glassCard`}>
            <form className={styles.searchBarForm} onSubmit={(element) => element.preventDefault()}>
-                <svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 -960 960 960" fill="#currentColor">
-                    <path
-                        d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
-                </svg>
+                <img src="search.svg" alt="Rechercher"/>
                <input
                    type="text"
                    placeholder="Rechercher un événement"
@@ -31,7 +31,6 @@
 .searchedEvent{
    display: flex;
    padding: 0.5rem;
-    border-radius: 15px;
    align-items: center;
 }

@@ -43,16 +43,12 @@ function ToolBar({setFilters, filters}) {
                </Link>

                <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#currentColor">
-                        <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
-                    </svg>
+                    <img src="search.svg" alt="Rechercher"/>
                </button>

                <div className={`${styles.filterContainer} ${isFilterVisible ? "glassCard" : ""}`}>
                    <button className={`${isFilterVisible ? "" : styles.mobileFilter} ${styles.sortButton} glassCard`} onClick={toggleFilters}>
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
-                            <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
-                        </svg>
+                        <img src="filter.svg" alt="Filtrer"/>
                    </button>
                    <div className={styles.filterMenu}>
                        <Filter isFilterVisible={isFilterVisible} filters={filters} setFilters={setFilters}/>
@@ -16,6 +16,9 @@
    padding: 0;
    border-radius: 30px;
    overflow: visible;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }

 .filterMenu{
@@ -36,7 +39,7 @@

 .createButton {
    font-size: 2rem;
-    color: #019AFF;
+    color: black;
 }

 .createButton:hover, .searchButton:hover, .mobileFilter:hover {
@@ -60,11 +63,6 @@
    justify-content: center;
 }

-.sortButton svg, .searchButton svg {
-    transform: scale(0.5);
-    fill: #019AFF;
-}
-

 .sortButton:focus, .searchButton:focus {
    outline: none;
@@ -93,8 +91,8 @@
    }

    .filterContainer{
-        display: flex;
        width: fit-content;
+        flex-direction: row;
    }

    .filterMenu{
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>`