Export metrics components.

src/components/metrics/ChangeLabel.module.css

@@ -1,25 +0,0 @@
-.label {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: var(--font-size);
-  padding: 0.1em 0.5em;
-  border-radius: 5px;
-  color: var(--base500);
-  align-self: flex-start;
-}
-
-.positive {
-  color: var(--success-color);
-  background: color-mix(in srgb, var(--success-color), var(--background-color) 95%);
-}
-
-.negative {
-  color: var(--danger-color);
-  background: color-mix(in srgb, var(--danger-color), var(--background-color) 95%);
-}
-
-.neutral {
-  color: var(--font-color-muted);
-  background: var(--base-color-2);
-}

src/components/metrics/ChangeLabel.tsx

@@ -1,14 +1,26 @@
-import classNames from 'classnames';
-import { Icon, Text } from '@umami/react-zen';
-import { HTMLAttributes, ReactNode } from 'react';
+import { Icon, Text, Row, RowProps } from '@umami/react-zen';
+import { ReactNode } from 'react';
 import { Arrow } from '@/components/icons';
-import styles from './ChangeLabel.module.css';
+
+const STYLES = {
+  positive: {
+    color: `var(--success-color)`,
+    background: `color-mix(in srgb, var(--success-color), var(--background-color) 95%)`,
+  },
+  negative: {
+    color: `var(--danger-color)`,
+    background: `color-mix(in srgb, var(--danger-color), var(--background-color) 95%)`,
+  },
+  neutral: {
+    color: `var(--font-color-muted)`,
+    background: `var(--base-color-2)`,
+  },
+};
 
 export function ChangeLabel({
   value,
   size,
   reverseColors,
-  className,
   children,
   ...props
 }: {
@@ -17,29 +29,24 @@ export function ChangeLabel({
   title?: string;
   reverseColors?: boolean;
   showPercentage?: boolean;
-  className?: string;
   children?: ReactNode;
-} & HTMLAttributes<HTMLDivElement>) {
+} & RowProps) {
   const positive = value >= 0;
   const negative = value < 0;
   const neutral = value === 0 || isNaN(value);
   const good = reverseColors ? negative : positive;
 
+  const style =
+    STYLES[good && 'positive'] || STYLES[!good && 'negative'] || STYLES[neutral && 'neutral'];
+
   return (
-    <div
-      {...props}
-      className={classNames(styles.label, className, {
-        [styles.positive]: good,
-        [styles.negative]: !good,
-        [styles.neutral]: neutral,
-      })}
-    >
+    <Row {...props} style={style} alignSelf="flex-start" paddingX="2" paddingY="1">
       {!neutral && (
         <Icon rotate={positive ? -90 : 90} size={size}>
           <Arrow />
         </Icon>
       )}
       <Text>{children || value}</Text>
-    </div>
+    </Row>
   );
 }

src/components/metrics/EventsChart.module.css

@@ -1,3 +0,0 @@
-.chart {
-  display: flex;
-}

src/components/metrics/WorldMap.module.css

@@ -1,4 +0,0 @@
-.container {
-  overflow: hidden;
-  position: relative;
-}

src/components/metrics/WorldMap.tsx

@@ -1,7 +1,6 @@
 import { FloatingTooltip, Column, useTheme, ColumnProps } from '@umami/react-zen';
 import { useState, useMemo } from 'react';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
-import classNames from 'classnames';
 import { colord } from 'colord';
 import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
 import {
@@ -12,7 +11,6 @@ import {
 } from '@/components/hooks';
 import { formatLongNumber } from '@/lib/format';
 import { percentFilter } from '@/lib/filters';
-import styles from './WorldMap.module.css';
 import { getThemeColors } from '@/lib/colors';
 
 export interface WorldMapProps extends ColumnProps {
@@ -20,7 +18,7 @@ export interface WorldMapProps extends ColumnProps {
   data?: any[];
 }
 
-export function WorldMap({ websiteId, data, className, ...props }: WorldMapProps) {
+export function WorldMap({ websiteId, data, ...props }: WorldMapProps) {
   const [tooltip, setTooltipPopup] = useState();
   const { theme } = useTheme();
   const { colors } = getThemeColors(theme);
@@ -67,12 +65,7 @@ export function WorldMap({ websiteId, data, className, ...props }: WorldMapProps
   };
 
   return (
-    <Column
-      {...props}
-      className={classNames(styles.container, className)}
-      data-tip=""
-      data-for="world-map-tooltip"
-    >
+    <Column {...props} data-tip="" data-for="world-map-tooltip" style={{ margin: 'auto 0' }}>
       <ComposableMap projection="geoMercator">
         <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
           <Geographies geography={`${process.env.basePath || ''}${MAP_FILE}`}>