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 && (