Merge pull request #4110 from RedisInsight/fe/feature/RI-6287

#RI-6287 - update notification icon

Author: vlad-dargel

redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.spec.tsx

@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/react'
 import { cloneDeep } from 'lodash'
 import React from 'react'
-import { setIsCenterOpen } from 'uiSrc/slices/app/notifications'
+import { notificationCenterSelector, setIsCenterOpen } from 'uiSrc/slices/app/notifications'
 import { cleanup, mockedStore, render, screen } from 'uiSrc/utils/test-utils'
 import NotificationMenu from './NotificationMenu'
 
@@ -41,4 +41,15 @@ describe('NotificationMenu', () => {
     expect(screen.getByTestId('total-unread-badge')).toBeInTheDocument()
     expect(screen.getByTestId('total-unread-badge')).toHaveTextContent('1')
   })
+
+  it('should show badge with count 9+ of unread messages', async () => {
+    (notificationCenterSelector as jest.Mock).mockReturnValueOnce({
+      notifications: [],
+      totalUnread: 13,
+      isCenterOpen: false,
+    })
+    render(<NotificationMenu />)
+
+    expect(screen.getByTestId('total-unread-badge')).toHaveTextContent('9+')
+  })
 })

redisinsight/ui/src/components/navigation-menu/components/notifications-center/NotificationMenu.tsx

@@ -33,7 +33,11 @@ const NavButton = () => {
   return (
     <div className={styles.navBtnWrapper}>
       {!isCenterOpen && !isNotificationOpen ? (<EuiToolTip content="Notification Center" position="right">{Btn}</EuiToolTip>) : Btn}
-      {(totalUnread > 0 && !isCenterOpen) && (<div className={styles.badgeUnreadCount} data-testid="total-unread-badge">{totalUnread}</div>)}
+      {(totalUnread > 0 && !isCenterOpen) && (
+        <div className={styles.badgeUnreadCount} data-testid="total-unread-badge">
+          {totalUnread > 9 ? '9+' : totalUnread}
+        </div>
+      )}
     </div>
   )
 }

redisinsight/ui/src/components/navigation-menu/components/notifications-center/styles.module.scss

@@ -12,18 +12,18 @@
     .badgeUnreadCount {
       position: absolute;
 
-      top: 8px;
-      right: 8px;
-      width: 24px;
+      top: 12px;
+      right: 12px;
+      width: 16px;
       height: 16px;
       border-radius: 22px;
 
-      background: #9E2A28;
+      background: #8BA2FF;
 
       text-align: center;
-      line-height: 14px;
-      font-size: 12px;
-      color: #fff;
+      line-height: 15px;
+      font-size: 10px;
+      color: #000;
     }
   }