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 (
- {children} + {content && {content}}
); } 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({ {children}
- { - notificationCount !== 0 - ? unread && ( - - {notificationCount} - - ) - : unread &&
- } + { unread && ( + + )}
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 && {notifyCount} } + { notifyCount !== null && } );