mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-16 12:10:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated NotificationBadge component

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

9
src/app/atoms/badge/NotificationBadge.jsx
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;

19
src/app/atoms/badge/NotificationBadge.scss
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);
}
}