🐛 fix coloring bug for arrows on main campaign stats data

Tincre · Mar 27, 2024 · 45b0668 · 45b0668
1 parent ef1ec78
commit 45b0668
Showing 1 changed file with 24 additions and 8 deletions.
diff --git a/src/components/CampaignsStatsHighlights.tsx b/src/components/CampaignsStatsHighlights.tsx
@@ -7,6 +7,8 @@
 import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/20/solid';
 import { CampaignStatsData } from '@tincre/promo-types';
 import { YouTubeIcon } from './YouTubeIcon';
+
+const costBasedMetrics = ['CPM', 'CPC', 'CPV'];
 /* @ts-ignore */
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
@@ -83,15 +85,29 @@ export function CampaignsStatsHighlights({
                   )}
                 >
                   {item.changeType === 'increase' ? (
-                    <ArrowUpIcon
-                      className="h-3 w-3 flex-shrink-0 self-center text-green-600 dark:text-green-400"
-                      aria-hidden="true"
-                    />
+                    !costBasedMetrics.includes(item.name) ? (
+                      <ArrowUpIcon
+                        className="h-5 w-5 flex-shrink-0 self-center text-green-600 dark:text-green-400"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <ArrowDownIcon
+                        className="h-5 w-5 flex-shrink-0 self-center text-green-600 dark:text-green-400"
+                        aria-hidden="true"
+                      />
+                    )
                   ) : item.changeType !== 'same' ? (
-                    <ArrowDownIcon
-                      className="h-3 w-3 flex-shrink-0 self-center text-red-600 dark:text-red-400"
-                      aria-hidden="true"
-                    />
+                    !costBasedMetrics.includes(item.name) ? (
+                      <ArrowDownIcon
+                        className="h-5 w-5 flex-shrink-0 self-center text-red-600 dark:text-red-400"
+                        aria-hidden="true"
+                      />
+                    ) : (
+                      <ArrowUpIcon
+                        className="h-5 w-5 flex-shrink-0 self-center text-red-600 dark:text-red-400"
+                        aria-hidden="true"
+                      />
+                    )
                   ) : null}
 
                   <span className="sr-only">