From fd83b63a302f80d0cf96539cf280c8624f92e4ea Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Thu, 9 Mar 2023 20:42:55 -0800
Subject: [PATCH] Updated metrics logic.

---
 components/metrics/MetricCard.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/components/metrics/MetricCard.js b/components/metrics/MetricCard.js
index a846cd2b..d4d4e33b 100644
--- a/components/metrics/MetricCard.js
+++ b/components/metrics/MetricCard.js
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { useSpring, animated } from 'react-spring';
 import { formatNumber } from 'lib/format';
 import styles from './MetricCard.module.css';
@@ -20,15 +21,11 @@ const MetricCard = ({
         {label}
         {~~change !== 0 && !hideComparison && (
           <animated.span
-            className={`${styles.change} ${
-              change >= 0
-                ? !reverseColors
-                  ? styles.positive
-                  : styles.negative
-                : !reverseColors
-                ? styles.negative
-                : styles.positive
-            } ${change >= 0 ? styles.plusSign : ''}`}
+            className={classNames(styles.change, {
+              [styles.positive]: change * (reverseColors ? -1 : 1) >= 0,
+              [styles.negative]: change * (reverseColors ? -1 : 1) < 0,
+              [styles.plusSign]: change > 0,
+            })}
           >
             {changeProps.x.to(x => format(x))}
           </animated.span>