TopbarMobileMenu uses NotificationBadge

src/components/TopbarMobileMenu/TopbarMobileMenu.css

@@ -60,22 +60,7 @@
   margin-bottom: 24px;
 }
 
-.notificationCount {
-  /* Font */
-  @apply --marketplaceH6FontStyles;
-  color: var(--matterColorLight);
-  text-align: center;
-
-  background-color: var(--failColor);
-
-  /* Layout of a red dot */
-  display: inline-block;
-  width: auto;
-  min-width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  padding-right: 6px;
-  padding-left: 6px;
+.notificationBadge {
   position: absolute;
   top: 4px;
   right: -26px;
@@ -84,15 +69,6 @@
   &:hover {
     text-decoration: none;
   }
-
-  /* Font margins off */
-  margin-top: 0;
-  margin-bottom: 0;
-
-  @media (--desktopViewport) {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
 }
 
 .createNewListingLink {

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -4,7 +4,7 @@
  */
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { AvatarLarge, InlineTextButton, NamedLink } from '../../components';
+import { AvatarLarge, InlineTextButton, NamedLink, NotificationBadge } from '../../components';
 
 import css from './TopbarMobileMenu.css';
 
@@ -56,7 +56,7 @@ const TopbarMobileMenu = props => {
   }
 
   const notificationCountBadge = notificationCount > 0
-    ? <span className={css.notificationCount}>{notificationCount}</span>
+    ? <NotificationBadge className={css.notificationBadge} count={notificationCount} />
     : null;
   const inboxLink = (
     <NamedLink