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