diff --git a/src/app/atoms/badge/NotificationBadge.jsx b/src/app/atoms/badge/NotificationBadge.jsx index 897a201..c92815b 100644 --- a/src/app/atoms/badge/NotificationBadge.jsx +++ b/src/app/atoms/badge/NotificationBadge.jsx @@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) { const notificationClass = alert ? ' notification-badge--alert' : ''; return (
- {content && {content}} + {content !== null && {content}}
); } diff --git a/src/app/atoms/badge/NotificationBadge.scss b/src/app/atoms/badge/NotificationBadge.scss index d408500..c876c37 100644 --- a/src/app/atoms/badge/NotificationBadge.scss +++ b/src/app/atoms/badge/NotificationBadge.scss @@ -2,17 +2,18 @@ min-width: 16px; min-height: 8px; padding: 0 var(--sp-ultra-tight); - background-color: var(--tc-surface-low); + background-color: var(--bg-badge); border-radius: var(--bo-radius); .text { - color: white; + color: var(--tc-badge); text-align: center; font-weight: 700; } &--alert { background-color: var(--bg-danger); + & .text { color: white } } &:empty { diff --git a/src/index.scss b/src/index.scss index 678bb65..552e9b0 100644 --- a/src/index.scss +++ b/src/index.scss @@ -32,6 +32,7 @@ --bg-danger-border: rgba(240, 71, 71, 20%); --bg-tooltip: #353535; + --bg-badge: #989898; /* text color | --tc-[background type]-[priority]: value */ --tc-surface-high: #000000; @@ -57,6 +58,7 @@ --tc-code: #e62498; --tc-tooltip: white; + --tc-badge: white; /* system icons | --ic-[background type]-[priority]: value */ @@ -179,6 +181,7 @@ --bg-primary-border: rgba(59, 119, 191, 38%); --bg-tooltip: #000; + --bg-badge: hsl(0, 0%, 75%); /* text color | --tc-[background type]-[priority]: value */ --tc-surface-high: rgba(255, 255, 255, 94%); @@ -190,6 +193,7 @@ --tc-primary-low: rgba(255, 255, 255, 0.4); --tc-code: #e565b1; + --tc-badge: black; /* system icons | --ic-[background type]-[priority]: value */ --ic-surface-normal: rgba(255, 255, 255, 68%);