Merge remote-tracking branch 'origin/dev' into dev

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>

components/metrics/MetricCard.module.css

@@ -37,3 +37,7 @@
 .change.negative {
   color: var(--red500);
 }
+
+.change.plusSign::before {
+  content: '+';
+}