updated NotificationBadge component

This commit is contained in:
unknown 2021-08-28 18:16:20 +05:30
parent 7b0aa7b770
commit 9e9ea41bdd
5 changed files with 23 additions and 30 deletions

View file

@ -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;

View file

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

View file

@ -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>

View file

@ -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);

View file

@ -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>
);