From 24af06f3aa9d763be3c4e3f6a7308a3bdf5f5bd3 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Thu, 23 May 2024 00:58:31 -0700
Subject: [PATCH] Metrics bar styling.

---
 src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx       | 2 +-
 src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx  | 5 ++---
 .../(main)/websites/[websiteId]/WebsiteMetricsBar.module.css | 5 ++---
 src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx    | 3 +++
 .../websites/[websiteId]/compare/WebsiteComparePage.tsx      | 2 ++
 src/components/metrics/MetricCard.module.css                 | 4 ++++
 src/components/metrics/MetricCard.tsx                        | 3 ++-
 7 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx b/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx
index 8c8ab2f2..1fd6992f 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteDetails.tsx
@@ -34,7 +34,7 @@ export default function WebsiteDetails({ websiteId }: { websiteId: string }) {
     <>
       <WebsiteHeader websiteId={websiteId} showLinks={showLinks} />
       <FilterTags websiteId={websiteId} params={params} />
-      <WebsiteMetricsBar websiteId={websiteId} />
+      <WebsiteMetricsBar websiteId={websiteId} showChange={true} sticky={true} />
       <WebsiteChart websiteId={websiteId} />
       {!website && <Loading icon="dots" style={{ minHeight: 300 }} />}
       {website && (
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx b/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
index 1d0c7a6a..785f0f36 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteFilterButton.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { Button, Icon, Icons, Popup, PopupTrigger, Text } from 'react-basics';
 import PopupForm from 'app/(main)/reports/[reportId]/PopupForm';
 import FilterSelectForm from 'app/(main)/reports/[reportId]/FilterSelectForm';
@@ -31,8 +30,8 @@ export function WebsiteFilterButton({
   };
 
   return (
-    <PopupTrigger>
-      <Button className={classNames(className, styles.button)} variant="quiet">
+    <PopupTrigger className={className}>
+      <Button className={styles.button} variant="quiet">
         <Icon>
           <Icons.Plus />
         </Icon>
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css
index 4d40edf8..6c5a0e56 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css
@@ -11,9 +11,8 @@
 
 .actions {
   display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: flex-end;
+  flex-direction: column;
+  align-items: flex-end;
   gap: 10px;
   flex-wrap: wrap;
 }
diff --git a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
index 11c85685..1b00ed1a 100644
--- a/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
+++ b/src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.tsx
@@ -13,10 +13,12 @@ import { Dropdown, Item } from 'react-basics';
 export function WebsiteMetricsBar({
   websiteId,
   sticky,
+  showChange = false,
   compareMode = false,
 }: {
   websiteId: string;
   sticky?: boolean;
+  showChange?: boolean;
   compareMode?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
@@ -88,6 +90,7 @@ export function WebsiteMetricsBar({
                 change={change}
                 format={format}
                 reverseColors={reverseColors}
+                showChange={compareMode || showChange}
                 showPrevious={compareMode}
               />
             );
diff --git a/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx b/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
index eb893a05..b9a214f8 100644
--- a/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
+++ b/src/app/(main)/websites/[websiteId]/compare/WebsiteComparePage.tsx
@@ -4,6 +4,7 @@ import WebsiteMetricsBar from '../WebsiteMetricsBar';
 import FilterTags from 'components/metrics/FilterTags';
 import { useNavigation } from 'components/hooks';
 import { FILTER_COLUMNS } from 'lib/constants';
+import WebsiteChart from '../WebsiteChart';
 
 export function WebsiteComparePage({ websiteId }) {
   const { query } = useNavigation();
@@ -20,6 +21,7 @@ export function WebsiteComparePage({ websiteId }) {
       <WebsiteHeader websiteId={websiteId} />
       <FilterTags websiteId={websiteId} params={params} />
       <WebsiteMetricsBar websiteId={websiteId} compareMode={true} />
+      <WebsiteChart websiteId={websiteId} />
     </>
   );
 }
diff --git a/src/components/metrics/MetricCard.module.css b/src/components/metrics/MetricCard.module.css
index 92c5712c..1498c38a 100644
--- a/src/components/metrics/MetricCard.module.css
+++ b/src/components/metrics/MetricCard.module.css
@@ -61,3 +61,7 @@
   color: var(--red700);
   background: var(--red100);
 }
+
+.hide {
+  visibility: hidden;
+}
diff --git a/src/components/metrics/MetricCard.tsx b/src/components/metrics/MetricCard.tsx
index 2bb38fba..e727f925 100644
--- a/src/components/metrics/MetricCard.tsx
+++ b/src/components/metrics/MetricCard.tsx
@@ -24,7 +24,7 @@ export const MetricCard = ({
   reverseColors = false,
   format = formatNumber,
   showLabel = true,
-  showChange = true,
+  showChange = false,
   showPrevious = false,
   className,
 }: MetricCardProps) => {
@@ -45,6 +45,7 @@ export const MetricCard = ({
           className={classNames(styles.change, {
             [styles.positive]: positive,
             [styles.negative]: negative,
+            [styles.hide]: ~~change === 0,
           })}
         >
           <Icon rotate={positive ? -45 : 45} size={showPrevious ? 'sm' : 'xs'}>