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 && }
);