Metrics bar styling.

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 && (

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>
+    <PopupTrigger className={className}>
-      <Button className={classNames(className, styles.button)} variant="quiet">
+      <Button className={styles.button} variant="quiet">
         <Icon>
           <Icons.Plus />
         </Icon>

src/app/(main)/websites/[websiteId]/WebsiteMetricsBar.module.css

@@ -11,9 +11,8 @@
 
 .actions {
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  flex-direction: row;
+  align-items: flex-end;
-  justify-content: flex-end;
   gap: 10px;
   flex-wrap: wrap;
 }

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}
               />
             );

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} />
     </>
   );
 }

src/components/metrics/MetricCard.module.css

@@ -61,3 +61,7 @@
   color: var(--red700);
   background: var(--red100);
 }
+
+.hide {
+  visibility: hidden;
+}

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'}>