diff --git a/index.html b/index.html index 764759f..7ecd944 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - sae-front + Comité des fêtes de Beaupont
diff --git a/public/bell.svg b/public/bell.svg index 54defaf..1e80c60 100644 --- a/public/bell.svg +++ b/public/bell.svg @@ -1,3 +1,3 @@ - + diff --git a/public/filter.svg b/public/filter.svg new file mode 100644 index 0000000..6096a31 --- /dev/null +++ b/public/filter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/logoIcone.png b/public/logoIcone.png new file mode 100644 index 0000000..b8baa92 Binary files /dev/null and b/public/logoIcone.png differ diff --git a/public/sortByAntiAlpha.svg b/public/sortByAntiAlpha.svg index f74e5d8..adea5c6 100644 --- a/public/sortByAntiAlpha.svg +++ b/public/sortByAntiAlpha.svg @@ -1,4 +1,4 @@ - + diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx index 6e70259..3dcf4ae 100644 --- a/src/components/Filter/Filter.jsx +++ b/src/components/Filter/Filter.jsx @@ -20,38 +20,28 @@ function Filter({isFilterVisible, filters, setFilters}){ Tri alphabétique croissant (A à Z) diff --git a/src/components/Filter/Filter.module.css b/src/components/Filter/Filter.module.css index 38902fc..030dbe5 100644 --- a/src/components/Filter/Filter.module.css +++ b/src/components/Filter/Filter.module.css @@ -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){ diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 14043a7..03a1161 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -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); }} > - - - + notifications {unreadNotification && } - - - + profile @@ -109,7 +105,7 @@ function Header() { className={`${styles.notificationDiv} glassCard ${notificationMenu ? styles.activeNotificationDiv : ""}`} > {notifications.length === 0 ? ( -

Vous n'avez aucune notification !

+

Vous n'avez aucune notification !

) : ( notifications.map((notification, index) => (
@@ -118,9 +114,7 @@ function Header() { className={styles.closeBtn} onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))} > - - - + supprimer la notification
)) diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index 4aba8b2..87867ea 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -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 { diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx index ddd0521..d39f095 100644 --- a/src/components/SearchBar/SearchBar.jsx +++ b/src/components/SearchBar/SearchBar.jsx @@ -47,10 +47,7 @@ function SearchBar() { return (
element.preventDefault()}> - - - + Rechercher
diff --git a/src/components/ToolBar/ToolBar.module.css b/src/components/ToolBar/ToolBar.module.css index 1b53950..1d86e23 100644 --- a/src/components/ToolBar/ToolBar.module.css +++ b/src/components/ToolBar/ToolBar.module.css @@ -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{