use NotificationBadge instead of Badge on header

awx/ui/src/components/AppContainer/PageHeaderToolbar.js

@@ -5,7 +5,6 @@ import { t } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import {
-  Badge,
   Dropdown,
   DropdownItem,
   DropdownToggle,
@@ -14,12 +13,10 @@ import {
   PageHeaderToolsGroup,
   PageHeaderToolsItem,
   Tooltip,
+  NotificationBadge,
+  NotificationBadgeVariant,
 } from '@patternfly/react-core';
-import {
-  BellIcon,
-  QuestionCircleIcon,
-  UserIcon,
-} from '@patternfly/react-icons';
+import { QuestionCircleIcon, UserIcon } from '@patternfly/react-icons';
 import { WorkflowApprovalsAPI } from 'api';
 import useRequest from 'hooks/useRequest';
 import getDocsBaseUrl from 'util/getDocsBaseUrl';
@@ -33,10 +30,6 @@ const PendingWorkflowApprovals = styled.div`
   margin-right: 10px;
 `;
 
-const PendingWorkflowApprovalBadge = styled(Badge)`
-  margin-left: 10px;
-`;
-
 function PageHeaderToolbar({
   isAboutDisabled,
   onAboutClick,
@@ -84,13 +77,15 @@ function PageHeaderToolbar({
           <PageHeaderToolsItem>
             <Link to="/workflow_approvals?workflow_approvals.status=pending">
               <PendingWorkflowApprovals>
-                <BellIcon color="white" />
-                <PendingWorkflowApprovalBadge
+                <NotificationBadge
                   id="toolbar-workflow-approval-badge"
-                  isRead={pendingApprovalsCount === 0}
-                >
-                  {pendingApprovalsCount}
-                </PendingWorkflowApprovalBadge>
+                  count={pendingApprovalsCount}
+                  variant={
+                    pendingApprovalsCount === 0
+                      ? NotificationBadgeVariant.read
+                      : NotificationBadgeVariant.unread
+                  }
+                />
               </PendingWorkflowApprovals>
             </Link>
           </PageHeaderToolsItem>

awx/ui/src/components/AppContainer/PageHeaderToolbar.test.js

@@ -80,7 +80,7 @@ describe('PageHeaderToolbar', () => {
     });
 
     expect(
-      wrapper.find('Badge#toolbar-workflow-approval-badge').text()
+      wrapper.find('NotificationBadge#toolbar-workflow-approval-badge').text()
     ).toEqual('20');
   });
 });