From 642be093c7341a65e35b8b6faf9261d5a2d6e726 Mon Sep 17 00:00:00 2001
From: Awais Ansari <awais.ansari63@gmail.com>
Date: Fri, 26 May 2023 20:52:18 +0500
Subject: [PATCH] fix: bell icon design change

---
 src/Header.jsx                                |  1 +
 src/Notifications/Notifications.jsx           | 97 +++++++++++--------
 .../AuthenticatedUserDropdown.jsx             |  2 +-
 src/learning-header/LearningHeader.jsx        | 33 +++----
 4 files changed, 72 insertions(+), 61 deletions(-)

diff --git a/src/Header.jsx b/src/Header.jsx
index 97c094e..c0db257 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -9,6 +9,7 @@ import {
   getConfig,
   subscribe,
 } from '@edx/frontend-platform';
+
 import DesktopHeader from './DesktopHeader';
 import MobileHeader from './MobileHeader';
 
diff --git a/src/Notifications/Notifications.jsx b/src/Notifications/Notifications.jsx
index a9f4ddc..76f1072 100644
--- a/src/Notifications/Notifications.jsx
+++ b/src/Notifications/Notifications.jsx
@@ -49,55 +49,68 @@ const Notifications = () => {
   }, []);
 
   return (
-    <div className="mx-4 my-3 bell-container">
-      <OverlayTrigger
-        trigger="click"
-        key="bottom"
-        placement="bottom"
-        show={showNotificationTray}
-        overlay={(
-          <Popover
-            id="popover-positioned-bottom"
-            className="notification-tray-container pt-4.5 pb-4 px-4 overflow-auto d-flex flex-column
+    <OverlayTrigger
+      trigger="click"
+      key="bottom"
+      placement="bottom"
+      show={showNotificationTray}
+      overlay={(
+        <Popover
+          id="popover-positioned-bottom"
+          className="notification-tray-container pt-4.5 pb-4 px-4 overflow-auto d-flex flex-column
             align-items-start position-absolute mt-2"
-          >
-            <div ref={popoverRef}>
-              <Popover.Title
-                as="h3"
-                style={{ border: 'none' }}
-                className="d-flex flex-row justify-content-between py-0 px-0 mb-4"
-              >
-                <h2 className="text-primary-500 font-size-18 line-height-24">
-                  {intl.formatMessage(messages.notificationTitle)}
-                </h2>
-                <Icon src={Settings} className="icon-size-20" />
-              </Popover.Title>
-              <Popover.Content className="notification-content p-0">
-                <NotificationTabs />
-              </Popover.Content>
-            </div>
-          </Popover>
+        >
+          <div ref={popoverRef}>
+            <Popover.Title
+              as="h3"
+              style={{ border: 'none' }}
+              className="d-flex flex-row justify-content-between py-0 px-0 mb-4"
+            >
+              <h2 className="text-primary-500 font-size-18 line-height-24">
+                {intl.formatMessage(messages.notificationTitle)}
+              </h2>
+              <Icon src={Settings} className="icon-size-20" />
+            </Popover.Title>
+            <Popover.Content className="notification-content p-0">
+              <NotificationTabs />
+            </Popover.Content>
+          </div>
+        </Popover>
       )}
-      >
-        <>
-          {notificationCounts?.Total > 0 && (
+    >
+      <>
+        {/* {notificationCounts?.Total > 0 && (
           <Badge variant="danger position-absolute px-1.5 py-1.5 d-flex flex-row justify-content-center
            align-items-center zindex-1"
           >
             <Form.Label className="count font-size-9 mt-2">{notificationCounts?.Total}</Form.Label>
           </Badge>
-          )}
-          <div className="bell-icon-container rounded-circle" ref={buttonRef}>
-            <IconButton
-              onClick={() => { handleNotificationTray(!showNotificationTray); }}
-              src={NotificationsNone}
-              iconAs={Icon}
-              className="d-inline-block align-bottom ml-1 ml-n1 shadow-none bg-transparent text-primary-500"
-            />
-          </div>
-        </>
-      </OverlayTrigger>
-    </div>
+          )} */}
+        <div className="" ref={buttonRef}>
+          <IconButton
+            isActive={showNotificationTray}
+            alt="notification bell icon"
+            onClick={() => { handleNotificationTray(!showNotificationTray); }}
+            src={NotificationsNone}
+            iconAs={Icon}
+            variant="light"
+            iconClassNames="text-primary-500"
+            className="ml-4 mr-1 my-3"
+            style={{ width: '36px', height: '36px' }}
+          />
+          <Badge
+            variant="danger"
+            pill
+            className="font-weight-normal px-1"
+            style={{
+              fontSize: '9px', border: '2px solid white', right: '-3px', top: '18px', fontWeight: '600',
+            }}
+          >
+            { notificationCounts?.Total > 0 && notificationCounts?.Total}
+          </Badge>
+        </div>
+      </>
+    </OverlayTrigger>
   );
 };
 
diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx
index e48155f..a720516 100644
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -22,7 +22,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
     <>
       <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
       <Notifications />
-      <Dropdown className="user-dropdown">
+      <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
           <span data-hj-suppress className="d-none d-md-inline">
diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
index 7224d4d..32356f0 100644
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -39,30 +39,27 @@ const LearningHeader = ({
       alt={getConfig().SITE_NAME}
     />
   );
-  const value = useMemo(() => ({ authenticatedUser }), [authenticatedUser]);
 
   return (
     <AppProvider store={store}>
-      <AppContext.Provider value={value}>
-        <header className="learning-header">
-          <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
-          <div className="container-xl py-2 d-flex align-items-center">
-            {headerLogo}
-            <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-              <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
-              <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
-            </div>
-            {showUserDropdown && authenticatedUser && (
+      <header className="learning-header">
+        <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+        <div className="container-xl py-2 d-flex align-items-center">
+          {headerLogo}
+          <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
+            <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+            <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+          </div>
+          {showUserDropdown && authenticatedUser && (
             <AuthenticatedUserDropdown
               username={authenticatedUser.username}
             />
-            )}
-            {showUserDropdown && !authenticatedUser && (
+          )}
+          {showUserDropdown && !authenticatedUser && (
             <AnonymousUserMenu />
-            )}
-          </div>
-        </header>
-      </AppContext.Provider>
+          )}
+        </div>
+      </header>
     </AppProvider>
   );
 };