From 9e9ea41bddda795c3f52d4cc708de8871dfec55d Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Sat, 28 Aug 2021 18:16:20 +0530
Subject: [PATCH] updated NotificationBadge component

---
 src/app/atoms/badge/NotificationBadge.jsx     |  9 +++++----
 src/app/atoms/badge/NotificationBadge.scss    | 19 +++++++++++--------
 .../channel-selector/ChannelSelector.jsx      | 15 ++++++---------
 .../channel-selector/ChannelSelector.scss     |  8 --------
 .../sidebar-avatar/SidebarAvatar.jsx          |  2 +-
 5 files changed, 23 insertions(+), 30 deletions(-)

diff --git a/src/app/atoms/badge/NotificationBadge.jsx b/src/app/atoms/badge/NotificationBadge.jsx
index 846f99a..897a201 100644
--- a/src/app/atoms/badge/NotificationBadge.jsx
+++ b/src/app/atoms/badge/NotificationBadge.jsx
@@ -4,25 +4,26 @@ import './NotificationBadge.scss';
 
 import Text from '../text/Text';
 
-function NotificationBadge({ alert, children }) {
+function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      <Text variant="b3">{children}</Text>
+      {content && <Text variant="b3">{content}</Text>}
     </div>
   );
 }
 
 NotificationBadge.defaultProps = {
   alert: false,
+  content: null,
 };
 
 NotificationBadge.propTypes = {
   alert: PropTypes.bool,
-  children: PropTypes.oneOfType([
+  content: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
-  ]).isRequired,
+  ]),
 };
 
 export default NotificationBadge;
diff --git a/src/app/atoms/badge/NotificationBadge.scss b/src/app/atoms/badge/NotificationBadge.scss
index 2f732ed..d408500 100644
--- a/src/app/atoms/badge/NotificationBadge.scss
+++ b/src/app/atoms/badge/NotificationBadge.scss
@@ -1,19 +1,22 @@
 .notification-badge {
-  min-width: 18px;
-  padding: 1px var(--sp-ultra-tight);
+  min-width: 16px;
+  min-height: 8px;
+  padding: 0 var(--sp-ultra-tight);
   background-color: var(--tc-surface-low);
-  border-radius: 9px;
+  border-radius: var(--bo-radius);
 
   .text {
-    color: var(--bg-surface-low);
+    color: white;
     text-align: center;
     font-weight: 700;
   }
 
   &--alert {
-    background-color: var(--bg-positive);
-    .text {
-      color: white;
-    }
+    background-color: var(--bg-danger);
+  }
+
+  &:empty {
+    min-width: 8px;
+    margin: 0 var(--sp-ultra-tight);
   }
 }
\ No newline at end of file
diff --git a/src/app/molecules/channel-selector/ChannelSelector.jsx b/src/app/molecules/channel-selector/ChannelSelector.jsx
index aded303..9c1a2df 100644
--- a/src/app/molecules/channel-selector/ChannelSelector.jsx
+++ b/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>
diff --git a/src/app/molecules/channel-selector/ChannelSelector.scss b/src/app/molecules/channel-selector/ChannelSelector.scss
index 1b973c3..7edf188 100644
--- a/src/app/molecules/channel-selector/ChannelSelector.scss
+++ b/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);
diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx b/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
index 47c28a2..8d57e9b 100644
--- a/src/app/molecules/sidebar-avatar/SidebarAvatar.jsx
+++ b/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>
   );