From a7c2029c093a00a8062ec1eb64aae222cf4f456b Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Thu, 15 Oct 2020 13:49:00 +0200
Subject: [PATCH] Display badges as not inverted

[MAILPOET-2791]
---
 .../listings/newsletter_stats/badge.tsx       | 25 ++++++++++++-------
 .../listings/newsletter_stats/stats.tsx       |  6 +++++
 .../newsletter_general_stats.tsx              |  3 +++
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/assets/js/src/common/listings/newsletter_stats/badge.tsx b/assets/js/src/common/listings/newsletter_stats/badge.tsx
index 42050401df..2d532c0ef1 100644
--- a/assets/js/src/common/listings/newsletter_stats/badge.tsx
+++ b/assets/js/src/common/listings/newsletter_stats/badge.tsx
@@ -7,28 +7,31 @@ type BadgeProps = {
   tooltip?: string | React.ReactNode,
   tooltipId?: string,
   type?: 'average' | 'good' | 'excellent',
+  isInverted?: boolean,
 }
 
-function Badge(props: BadgeProps) {
-  const tooltip = props.tooltip || false;
-  // tooltip ID must be unique, defaults to tooltip text
-  const tooltipId = props.tooltipId || tooltip.toString();
-
+function Badge({
+  name,
+  tooltip,
+  tooltipId,
+  type,
+  isInverted,
+}: BadgeProps) {
   return (
     <span>
       <Tag
-        isInverted
-        variant={props.type}
+        isInverted={isInverted}
+        variant={type}
         data-tip
         data-for={tooltipId}
       >
-        {props.name}
+        {name}
       </Tag>
       { tooltip && (
         <Tooltip
           place="top"
           multiline
-          id={tooltipId}
+          id={tooltipId || tooltip.toString()}
         >
           {tooltip}
         </Tooltip>
@@ -37,4 +40,8 @@ function Badge(props: BadgeProps) {
   );
 }
 
+Badge.defaultProps = {
+  isInverted: true,
+};
+
 export default Badge;
diff --git a/assets/js/src/common/listings/newsletter_stats/stats.tsx b/assets/js/src/common/listings/newsletter_stats/stats.tsx
index 322312bf60..574c39edc9 100644
--- a/assets/js/src/common/listings/newsletter_stats/stats.tsx
+++ b/assets/js/src/common/listings/newsletter_stats/stats.tsx
@@ -6,6 +6,7 @@ type StatsBadgeProps = {
   stat: string,
   rate: number,
   tooltipId?: string,
+  isInverted?: boolean,
 }
 
 const stats = {
@@ -116,6 +117,7 @@ export const StatsBadge = (props: StatsBadgeProps) => {
 
   const content = (
     <Badge
+      isInverted={props.isInverted}
       type={badgeType}
       name={badge.name}
       tooltip={tooltipText}
@@ -125,3 +127,7 @@ export const StatsBadge = (props: StatsBadgeProps) => {
 
   return content;
 };
+
+StatsBadge.defaultProps = {
+  isInverted: true,
+};
diff --git a/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx b/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
index f0a3c1da6c..1c7f6a9c50 100644
--- a/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
+++ b/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
@@ -51,6 +51,7 @@ export const NewsletterGeneralStats = ({
       </div>
       {displayBadges && (
         <StatsBadge
+          isInverted={false}
           stat="opened"
           rate={percentageOpened}
           tooltipId={`opened-${newsletter.id || '0'}`}
@@ -70,6 +71,7 @@ export const NewsletterGeneralStats = ({
       </div>
       {displayBadges && (
         <StatsBadge
+          isInverted={false}
           stat="unsubscribed"
           rate={percentageUnsubscribed}
           tooltipId={`unsubscribed-${newsletter.id || '0'}`}
@@ -90,6 +92,7 @@ export const NewsletterGeneralStats = ({
       </div>
       {displayBadges && (
         <StatsBadge
+          isInverted={false}
           stat="clicked"
           rate={percentageClicked}
           tooltipId={`clicked-${newsletter.id || '0'}`}