updated NotificationBadge component

diff --git a/src/app/atoms/badge/NotificationBadge.jsx b/src/app/atoms/badge/NotificationBadge.jsx
index 846f99a92d5e8d7c7e3983290fc6d5bc81d7e094..897a201019776f1d96163eb2682d9ded78762db0 100644 (file)
--- 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 2f732ed8edaf8dbe2e07188e2f04c9bf7f0ee79a..d40850084c30eb8c649a7586669de266dc46c32f 100644 (file)
--- 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 aded303f449d505a3d97619dd21bf9cedd1f793b..9c1a2df1c4c96a85cd66422cffdba34cc37d9f62 100644 (file)
--- 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 1b973c371ea49259a949f7610d37d87df51614c4..7edf1888276168c8cc843c3097bee41418bcc5ea 100644 (file)
--- 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 47c28a2762010bda8bd27267771de1bf032e5089..8d57e9bd41b5e02dbe560cb5ec1fd15d15cb1b33 100644 (file)
--- 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>
   );