Panels redesign.

src/components/metrics/ChangeLabel.module.css

@@ -2,8 +2,7 @@
   display: flex;
   align-items: center;
   gap: 5px;
-  font-size: 13px;
-  font-weight: 700;
+  font-size: 12px;
   padding: 0.1em 0.5em;
   border-radius: 5px;
   color: var(--base500);
@@ -11,16 +10,16 @@
 }
 
 .positive {
-  color: var(--green700);
-  background: var(--green100);
+  color: var(--success-color);
+  background: color-mix(in srgb, var(--success-color), var(--background-color) 85%);
 }
 
 .negative {
-  color: var(--red700);
-  background: var(--red100);
+  color: var(--danger-color);
+  background: color-mix(in srgb, var(--danger-color), var(--background-color) 85%);
 }
 
 .neutral {
-  color: var(--base700);
-  background: var(--base100);
+  color: var(--font-color-muted);
+  background: var(--base-color-2);
 }

src/components/metrics/ListTable.module.css

@@ -43,7 +43,7 @@
 }
 
 .row:hover {
-  background-color: var(--base75);
+  background-color: var(--base-color-2);
 }
 
 .label {
@@ -60,7 +60,7 @@
 }
 
 .label a:hover {
-  color: var(--primary400);
+  color: var(--primary-color);
 }
 
 .label:empty {
@@ -83,8 +83,8 @@
 .percent {
   position: relative;
   width: 50px;
-  color: var(--base600);
-  border-inline-start: 1px solid var(--base600);
+  color: var(--base-color-9);
+  border-inline-start: 1px solid var(--base-color-9);
   padding-inline-start: 10px;
   z-index: 1;
 }
@@ -95,7 +95,7 @@
   left: 0;
   height: 30px;
   opacity: 0.1;
-  background: var(--primary400);
+  background: var(--primary-color);
   z-index: -1;
 }
 

src/components/metrics/ListTable.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useSpring, config } from '@react-spring/web';
 import classNames from 'classnames';
@@ -6,7 +7,6 @@ import { Empty } from '@/components/common/Empty';
 import { formatLongNumber } from '@/lib/format';
 import { useMessages } from '@/components/hooks';
 import styles from './ListTable.module.css';
-import { ReactNode } from 'react';
 
 const ITEM_SIZE = 30;
 

src/components/metrics/MetricsTable.module.css

@@ -1,38 +0,0 @@
-.container {
-  position: relative;
-  min-height: 430px;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.actions {
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.footer {
-  display: flex;
-  justify-content: center;
-}
-
-.search {
-  max-width: 300px;
-}
-
-@media only screen and (max-width: 992px) {
-  .container {
-    min-height: auto;
-  }
-
-  .actions {
-    flex-direction: column;
-  }
-
-  .search {
-    max-width: 100%;
-  }
-}

src/components/metrics/MetricsTable.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useMemo, useState } from 'react';
-import { Loading, Icon, Text, SearchField, Row } from '@umami/react-zen';
+import { Loading, Icon, Text, SearchField, Row, Column } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
 import { LinkButton } from '@/components/common/LinkButton';
 import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
@@ -7,8 +7,6 @@ import { percentFilter } from '@/lib/filters';
 import { useNavigation, useWebsiteMetricsQuery, useMessages, useFormat } from '@/components/hooks';
 import { Icons } from '@/components/icons';
 import { ListTable, ListTableProps } from './ListTable';
-import styles from './MetricsTable.module.css';
-import { Panel } from '@/components/layout/Panel';
 
 export interface MetricsTableProps extends ListTableProps {
   websiteId: string;
@@ -85,20 +83,12 @@ export function MetricsTable({
   }, [data, dataFilter, search, limit, formatValue, type]);
 
   return (
-    <Panel>
+    <Column gap="3" justifyContent="space-between">
       {error && <ErrorMessage />}
-      <div className={styles.actions}>
-        {allowSearch && (
-          <SearchField
-            className={styles.search}
-            value={search}
-            onSearch={setSearch}
-            delay={300}
-            autoFocus={true}
-          />
-        )}
+      <Row alignItems="center" justifyContent="space-between">
+        {allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
         {children}
-      </div>
+      </Row>
       {data && !error && (
         <ListTable {...(props as ListTableProps)} data={filteredData} className={className} />
       )}
@@ -113,6 +103,6 @@ export function MetricsTable({
           </LinkButton>
         )}
       </Row>
-    </Panel>
+    </Column>
   );
 }

src/components/metrics/PageviewsChart.tsx

@@ -2,7 +2,6 @@ import { useMemo } from 'react';
 import { BarChart, BarChartProps } from '@/components/charts/BarChart';
 import { useLocale, useTheme, useMessages } from '@/components/hooks';
 import { renderDateLabels } from '@/lib/charts';
-import { Panel } from '@/components/layout/Panel';
 
 export interface PageviewsChartProps extends BarChartProps {
   data: {
@@ -77,15 +76,13 @@ export function PageviewsChart({
   }, [data, locale]);
 
   return (
-    <Panel>
-      <BarChart
-        {...props}
-        data={chartData}
-        unit={unit}
-        isLoading={isLoading}
-        isAllTime={isAllTime}
-        renderXLabel={renderDateLabels(unit, locale)}
-      />
-    </Panel>
+    <BarChart
+      {...props}
+      data={chartData}
+      unit={unit}
+      isLoading={isLoading}
+      isAllTime={isAllTime}
+      renderXLabel={renderDateLabels(unit, locale)}
+    />
   );
 }

src/components/metrics/QueryParametersTable.module.css

@@ -6,7 +6,7 @@
 
 .param {
   padding: 0 8px;
-  color: var(--primary400);
+  color: var(--primary-color);
   background: var(--blue100);
   border-radius: 4px;
 }

src/components/metrics/ReferrersTable.tsx

@@ -40,7 +40,7 @@ export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
         return `(${formatMessage(labels.other)})`;
       } else {
         return (
-          <Flexbox alignItems="center" gap={10}>
+          <Flexbox alignItems="center" gap="3">
             <Favicon domain={referrer} />
             {GROUPED_DOMAINS.find(({ domain }) => domain === referrer)?.name}
           </Flexbox>

src/components/metrics/WorldMap.tsx

@@ -1,16 +1,20 @@
+import { FloatingTooltip, Column } from '@umami/react-zen';
 import { useState, useMemo, HTMLAttributes } 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 { useDateRange, useTheme, useWebsiteMetricsQuery } from '@/components/hooks';
-import { useCountryNames } from '@/components/hooks';
-import { useLocale } from '@/components/hooks';
-import { useMessages } from '@/components/hooks';
+import {
+  useDateRange,
+  useTheme,
+  useWebsiteMetricsQuery,
+  useCountryNames,
+  useLocale,
+  useMessages,
+} from '@/components/hooks';
 import { formatLongNumber } from '@/lib/format';
 import { percentFilter } from '@/lib/filters';
 import styles from './WorldMap.module.css';
-import { FloatingTooltip } from '@umami/react-zen';
 
 export function WorldMap({
   websiteId,
@@ -70,7 +74,7 @@ export function WorldMap({
   };
 
   return (
-    <div
+    <Column
       {...props}
       className={classNames(styles.container, className)}
       data-tip=""
@@ -105,6 +109,6 @@ export function WorldMap({
         </ZoomableGroup>
       </ComposableMap>
       {tooltip && <FloatingTooltip>{tooltip}</FloatingTooltip>}
-    </div>
+    </Column>
   );
 }