Fixed NotificationBadge color

diff --git a/src/app/atoms/badge/NotificationBadge.jsx b/src/app/atoms/badge/NotificationBadge.jsx
index 897a201019776f1d96163eb2682d9ded78762db0..c92815b775fdcf818d9b135cc2bee521c1f421b8 100644 (file)
--- 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 (
     <div className={`notification-badge${notificationClass}`}>
-      {content && <Text variant="b3">{content}</Text>}
+      {content !== null && <Text variant="b3">{content}</Text>}
     </div>
   );
 }

diff --git a/src/app/atoms/badge/NotificationBadge.scss b/src/app/atoms/badge/NotificationBadge.scss
index d40850084c30eb8c649a7586669de266dc46c32f..c876c37ac97c897ebac3c2625990bf61272f8e04 100644 (file)
--- 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 678bb65a38d961d03b2bdc0c109b77f96b676309..552e9b083e86eb7ed8dddac667d03a1e5b363941 100644 (file)
--- 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%);