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'; import Text from '../text/Text';
function NotificationBadge({ alert, children }) { function NotificationBadge({ alert, content }) {
const notificationClass = alert ? ' notification-badge--alert' : ''; const notificationClass = alert ? ' notification-badge--alert' : '';
return ( return (
<div className={`notification-badge${notificationClass}`}> <div className={`notification-badge${notificationClass}`}>
<Text variant="b3">{children}</Text> {content && <Text variant="b3">{content}</Text>}
</div> </div>
); );
} }
NotificationBadge.defaultProps = { NotificationBadge.defaultProps = {
alert: false, alert: false,
content: null,
}; };
NotificationBadge.propTypes = { NotificationBadge.propTypes = {
alert: PropTypes.bool, alert: PropTypes.bool,
children: PropTypes.oneOfType([ content: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.number, PropTypes.number,
]).isRequired, ]),
}; };
export default NotificationBadge; export default NotificationBadge;

View file

@ -1,19 +1,22 @@
.notification-badge { .notification-badge {
min-width: 18px; min-width: 16px;
padding: 1px var(--sp-ultra-tight); min-height: 8px;
padding: 0 var(--sp-ultra-tight);
background-color: var(--tc-surface-low); background-color: var(--tc-surface-low);
border-radius: 9px; border-radius: var(--bo-radius);
.text { .text {
color: var(--bg-surface-low); color: white;
text-align: center; text-align: center;
font-weight: 700; font-weight: 700;
} }
&--alert { &--alert {
background-color: var(--bg-positive); background-color: var(--bg-danger);
.text { }
color: white;
} &:empty {
min-width: 8px;
margin: 0 var(--sp-ultra-tight);
} }
} }

View file

@ -34,15 +34,12 @@ function ChannelSelector({
<Text variant="b1">{children}</Text> <Text variant="b1">{children}</Text>
</div> </div>
<div className="channel-selector__badge-container"> <div className="channel-selector__badge-container">
{ { unread && (
notificationCount !== 0 <NotificationBadge
? unread && ( alert={alert}
<NotificationBadge alert={alert}> content={notificationCount !== 0 ? notificationCount : null}
{notificationCount} />
</NotificationBadge> )}
)
: unread && <div className="channel-selector--unread" />
}
</div> </div>
</div> </div>
</button> </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 { .channel-selector--selected {
background-color: var(--bg-surface); background-color: var(--bg-surface);
border-color: var(--bg-surface-border); border-color: var(--bg-surface-border);

View file

@ -40,7 +40,7 @@ const SidebarAvatar = React.forwardRef(({
iconSrc={iconSrc} iconSrc={iconSrc}
size="normal" size="normal"
/> />
{ notifyCount !== null && <NotificationBadge alert>{notifyCount}</NotificationBadge> } { notifyCount !== null && <NotificationBadge alert content={notifyCount} /> }
</button> </button>
</Tippy> </Tippy>
); );