From 284ed9dea162f3ee074bf7fc5df5c364d08c6bb2 Mon Sep 17 00:00:00 2001
From: unknown <ajbura@gmail.com>
Date: Sun, 12 Sep 2021 11:20:56 +0530
Subject: [PATCH] Fixed NotificationBadge color

---
 src/app/atoms/badge/NotificationBadge.jsx  | 2 +-
 src/app/atoms/badge/NotificationBadge.scss | 5 +++--
 src/index.scss                             | 4 ++++
 3 files changed, 8 insertions(+), 3 deletions(-)

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