From e91bfed6be667b0445ca0aa62db68756bdc44ed4 Mon Sep 17 00:00:00 2001
From: Guillermo Grau <guigrpa@gmail.com>
Date: Fri, 26 Aug 2022 16:40:32 +0200
Subject: [PATCH] Fixed bug in MetricCard: plus sign disappears on click.

---
 components/metrics/MetricCard.js         | 4 ++--
 components/metrics/MetricCard.module.css | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/metrics/MetricCard.js b/components/metrics/MetricCard.js
index 429a37d6..eb16904c 100644
--- a/components/metrics/MetricCard.js
+++ b/components/metrics/MetricCard.js
@@ -29,9 +29,9 @@ const MetricCard = ({
                 : !reverseColors
                 ? styles.negative
                 : styles.positive
-            }`}
+            } ${change >= 0 ? styles.plusSign : ''}`}
           >
-            {changeProps.x.interpolate(x => `${change >= 0 ? '+' : ''}${format(x)}`)}
+            {changeProps.x.interpolate(x => format(x))}
           </animated.span>
         )}
       </div>
diff --git a/components/metrics/MetricCard.module.css b/components/metrics/MetricCard.module.css
index 76a69609..a79385aa 100644
--- a/components/metrics/MetricCard.module.css
+++ b/components/metrics/MetricCard.module.css
@@ -37,3 +37,7 @@
 .change.negative {
   color: var(--red500);
 }
+
+.change.plusSign::before {
+  content: '+';
+}