updated NotificationBadge component

src/app/molecules/channel-selector/ChannelSelector.jsx

@@ -34,15 +34,12 @@ function ChannelSelector({
           <Text variant="b1">{children}</Text>
         </div>
         <div className="channel-selector__badge-container">
-          {
-            notificationCount !== 0
-              ? unread && (
-                <NotificationBadge alert={alert}>
-                  {notificationCount}
-                </NotificationBadge>
-              )
-              : unread && <div className="channel-selector--unread" />
-          }
+          { unread && (
+            <NotificationBadge
+              alert={alert}
+              content={notificationCount !== 0 ? notificationCount : null}
+            />
+          )}
         </div>
       </div>
     </button>

src/app/molecules/channel-selector/ChannelSelector.scss

@@ -54,14 +54,6 @@
   }
 }
 
-.channel-selector--unread {
-  margin: 0 var(--sp-ultra-tight);
-  height: 8px;
-  width: 8px;
-  background-color: var(--tc-surface-normal);
-  border-radius: 50%;
-  opacity: .4;
-}
 .channel-selector--selected {
   background-color: var(--bg-surface);
   border-color: var(--bg-surface-border);

src/app/molecules/sidebar-avatar/SidebarAvatar.jsx

@@ -40,7 +40,7 @@ const SidebarAvatar = React.forwardRef(({
           iconSrc={iconSrc}
           size="normal"
         />
-        { notifyCount !== null && <NotificationBadge alert>{notifyCount}</NotificationBadge> }
+        { notifyCount !== null && <NotificationBadge alert content={notifyCount} /> }
       </button>
     </Tippy>
   );