From bbbf0d1217d23f02a81f88b6fc62202ec118317f Mon Sep 17 00:00:00 2001 From: Antoine Dewez <44063631+Zewed@users.noreply.github.com> Date: Thu, 27 Jun 2024 16:14:52 +0200 Subject: [PATCH] fix(frontend): UI Notification Ring and Fix Page Header Display on Mobile (#2771) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit …y and responsiveness. # Description Please include a summary of the changes and the related issue. Please also include relevant motivation and context. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate): --- .../Notification/Notification.module.scss | 6 +----- .../Notifications/Notifications.module.scss | 14 +++++++------- .../PageHeader/Notifications/Notifications.tsx | 6 +++++- .../components/PageHeader/PageHeader.module.scss | 15 ++++++++++----- 4 files changed, 23 insertions(+), 18 deletions(-) diff --git a/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss b/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss index 26a3282d7..60819d828 100644 --- a/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss +++ b/frontend/lib/components/PageHeader/Notifications/Notification/Notification.module.scss @@ -14,10 +14,6 @@ border-bottom: none; } - &.read { - opacity: 0.4; - } - .header { display: flex; justify-content: space-between; @@ -76,4 +72,4 @@ font-size: Typography.$tiny; color: var(--text-2); } -} \ No newline at end of file +} diff --git a/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss b/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss index 7b99c4f49..04a5821cb 100644 --- a/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss +++ b/frontend/lib/components/PageHeader/Notifications/Notifications.module.scss @@ -11,16 +11,16 @@ .badge { position: absolute; color: var(--white-0); - background-color: var(--accent); - border-radius: Radius.$circle; - width: 14px; - height: 14px; + background-color: var(--dangerous-dark); + border-radius: Radius.$normal; + width: 16px; + height: 16px; display: flex; justify-content: center; align-items: center; font-size: Typography.$very_tiny; - top: -(Spacings.$spacing02); - right: -(Spacings.$spacing01); + top: -(Spacings.$spacing03); + right: -(Spacings.$spacing02); } .notifications_panel { @@ -59,4 +59,4 @@ color: var(--text-2); } } -} \ No newline at end of file +} diff --git a/frontend/lib/components/PageHeader/Notifications/Notifications.tsx b/frontend/lib/components/PageHeader/Notifications/Notifications.tsx index 613b2fb38..e7ef74fc0 100644 --- a/frontend/lib/components/PageHeader/Notifications/Notifications.tsx +++ b/frontend/lib/components/PageHeader/Notifications/Notifications.tsx @@ -104,7 +104,11 @@ export const Notifications = (): JSX.Element => { color="black" handleHover={true} /> - {unreadNotifications} + {!!unreadNotifications && ( + + {unreadNotifications > 9 ? "9+" : unreadNotifications} + + )} {panelOpened && (