Display badges as not inverted

[MAILPOET-2791]

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) {
+function Badge({
-  const tooltip = props.tooltip || false;
+  name,
-  // tooltip ID must be unique, defaults to tooltip text
+  tooltip,
-  const tooltipId = props.tooltipId || tooltip.toString();
+  tooltipId,
-
+  type,
+  isInverted,
+}: BadgeProps) {
   return (
     <span>
       <Tag
-        isInverted
+        isInverted={isInverted}
-        variant={props.type}
+        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;

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,
+};

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'}`}