fix: changed hover and clicked color of icon (#469)

* fix: changed hover and clicked color of icon * fix: changed the component badge to bubble * fix: changed the component badge to bubble * fix: fixed bell icon position issue in discussion MFE --------- Co-authored-by: SundasNoreen <sundas.noreen@arbisoft.com>
edx · Sep 25, 2023 · 638d522 · 638d522
1 parent 5786979
commit 638d522
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/src/Notifications/index.jsx b/src/Notifications/index.jsx
@@ -7,7 +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, Button,
+  Icon, IconButton, OverlayTrigger, Popover, Hyperlink, Button, Bubble,
 } from '@edx/paragon';
 import { NotificationsNone, Settings } from '@edx/paragon/icons';
 import { selectNotificationTabsCount } from './data/selectors';
@@ -285,16 +285,17 @@ const Notifications = () => {
             data-testid="notification-bell-icon"
           />
           {notificationCounts?.count > 0 && (
-          <Badge
-            pill
-            variant="danger"
-            className="zindex-1"
+          <Bubble
+            variant="error"
             data-testid="notification-count"
-            bsPrefix="notification-badge"
+            className={classNames('notification-badge zindex-1', {
+              'notification-badge-unrounded': notificationCounts.count >= 10,
+              'notification-badge-rounded': notificationCounts.count < 10,
+            })}
           >
             {notificationCounts.count >= 100 ? <div className="d-flex">99<p className="mb-0 plus-icon">+</p></div>
               : notificationCounts.count}
-          </Badge>
+          </Bubble>
           )}
         </div>
       </OverlayTrigger>

diff --git a/src/index.scss b/src/index.scss
@@ -195,9 +195,22 @@ $white: #fff;
 .notification-button {
   width: 36px !important;
   height: 36px !important;
+
   &:focus, &:active {
     box-shadow: inset 0 0 0 2px #00262B !important;
   }
+
+  &:focus, &:active, &:hover {
+    background-color: #F2F0EF !important;
+  }
+
+  span:first-child {
+    margin: 0px !important;
+  }
+}
+
+.notification-button.btn-icon-light-active {
+    background-color: #F2F0EF !important;
 }
 
 .notification-icon {
@@ -208,21 +221,32 @@ $white: #fff;
 
 .notification-badge {
   position: absolute;
-  margin-top: 9px;
-  margin-left: -25px;
   border: 2px solid #FFFFFF;
   font-size: 11px !important;
-  min-width: 23px;
-  font-weight: 600 !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;
+  font-weight: 500 !important;
+  font-variant-numeric: lining-nums tabular-nums;
+  background: var(--text-on-light-brand-500, #D23228) !important;
+  line-height: 20px !important;
+  padding: 4px !important;
+  padding-left: 5px !important;
+  margin-left: -21px;
+}
+
+.notification-badge-unrounded {
+  margin-top: 6px !important;
+  min-width: 23px !important;
+  height: 16px;
+  min-height: 16px !important;
+  border-radius: 54px !important;
+}
+
+.notification-badge-rounded {
+  border-radius: 50%;
+  margin-top: 3px;
+  height: 20px;
+  min-height: 20px !important;
+  width: 20px !important;
+  min-width: 20px !important;
 }
 
 .popover {