fix: fixed UI of bell icon badge (#420)

* fix: fixed UI of bell icon badge * fix: added 99+ if count is greater than 99 --------- Co-authored-by: SundasNoreen <[email protected]>
edx · Jul 31, 2023 · c7ed86b · c7ed86b
1 parent 8406201
commit c7ed86b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/src/Notifications/index.jsx b/src/Notifications/index.jsx
@@ -7,8 +7,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import classNames from 'classnames';
 import {
-  Badge, Icon, IconButton, OverlayTrigger, Popover,
-  Hyperlink,
+  Badge, Icon, IconButton, OverlayTrigger, Popover, Hyperlink,
 } from '@edx/paragon';
 import { NotificationsNone, Settings } from '@edx/paragon/icons';
 import { selectNotificationTabsCount } from './data/selectors';
@@ -116,10 +115,12 @@ const Notifications = () => {
           <Badge
             pill
             variant="danger"
-            className="px-1 notification-badge zindex-1"
+            className="zindex-1"
             data-testid="notification-count"
+            bsPrefix="notification-badge"
           >
-            {notificationCounts.count}
+            {notificationCounts.count >= 100 ? <div className="d-flex">99<p className="mb-0 plus-icon">+</p></div>
+              : notificationCounts.count}
           </Badge>
         )}
       </div>

diff --git a/src/index.scss b/src/index.scss
@@ -166,6 +166,9 @@ $white: #fff;
   width: 20px !important;
   height: 20px !important;
 }
+.plus-icon {
+  margin-top: -0.5px;
+}
 
 .cursor-pointer {
   cursor: pointer;
@@ -183,14 +186,21 @@ $white: #fff;
 
 .notification-badge {
   position: absolute;
-  margin-top: 26px;
-  margin-left: -25px;
+  margin-top: 9px;
+  margin-left: -26px;
   border: 2px solid #FFFFFF;
   font-size: 8px !important;
   min-width: 23px;
   font-weight: 600 !important;
-  line-height: 12px;
-  padding: 0px 8px !important;
+  line-height: 9px !important;
+  padding: 2px 4px !important;
+  color: #FFFFFF;
+  background-color: #C32D3A;
+  border-radius: 10rem;
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
 }
 
 .popover {