Added Panel component. New color scheme.

src/components/common/DataGrid.tsx

@@ -3,6 +3,7 @@ import { Loading, SearchField, Row, Column } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Empty } from '@/components/common/Empty';
 import { Pager } from '@/components/common/Pager';
+import { Panel } from '@/components/layout/Panel';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PagedQueryResult } from '@/lib/types';
 
@@ -59,12 +60,14 @@ export function DataGrid({
         </Row>
       )}
       <LoadingPanel data={data} isLoading={isLoading} isFetched={isFetched} error={error}>
-        <Column>
-          {hasData ? (typeof children === 'function' ? children(result) : children) : null}
-          {isLoading && <Loading position="page" />}
-          {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
-          {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
-        </Column>
+        <Panel>
+          <Column>
+            {hasData ? (typeof children === 'function' ? children(result) : children) : null}
+            {isLoading && <Loading position="page" />}
+            {!isLoading && !hasData && !search && (renderEmpty ? renderEmpty() : <Empty />)}
+            {!isLoading && noResults && <Empty message={formatMessage(messages.noResultsFound)} />}
+          </Column>
+        </Panel>
         {allowPaging && hasData && (
           <Row marginTop="6">
             <Pager page={page} pageSize={pageSize} count={count} onPageChange={handlePageChange} />

src/components/hooks/useTeamUrl.ts

@@ -1,9 +1,6 @@
 import { usePathname } from 'next/navigation';
 
-export function useTeamUrl(): {
-  teamId?: string;
-  renderTeamUrl: (url: string) => string;
-} {
+export function useTeamUrl() {
   const pathname = usePathname();
   const [, teamId] = pathname.match(/^\/teams\/([a-f0-9-]+)/) || [];
 
@@ -11,5 +8,5 @@ export function useTeamUrl(): {
     return teamId ? `/teams/${teamId}${url}` : url;
   }
 
-  return { teamId, renderTeamUrl };
+  return { teamId, renderTeamUrl, pathname };
 }

src/components/layout/Page.tsx

@@ -35,12 +35,6 @@ export function Page({
       maxWidth="1320px"
       minHeight="600px"
       margin="auto"
-      backgroundColor="1"
-      overflow="auto"
-      borderRadius="3"
-      borderSize="1"
-      paddingX="8"
-      paddingY="4"
     >
       {children}
     </Column>

src/components/layout/Panel.tsx

@@ -0,0 +1,6 @@
+import { Box } from '@umami/react-zen';
+import type { BoxProps } from '@umami/react-zen/Box';
+
+export function Panel(props: BoxProps) {
+  return <Box padding="6" borderSize="1" borderRadius="3" backgroundColor="solid" {...props} />;
+}

src/components/metrics/MetricsTable.tsx

@@ -91,7 +91,7 @@ export function MetricsTable({
         background: 'var(--background-color)',
         border: '1px solid var(--border-color)',
         borderRadius: 'var(--border-radius)',
-        padding: '10px',
+        padding: '16px',
       }}
     >
       {error && <ErrorMessage />}

src/components/metrics/PageviewsChart.tsx

@@ -2,6 +2,7 @@ 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: {
@@ -76,13 +77,15 @@ export function PageviewsChart({
   }, [data, locale]);
 
   return (
-    <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)}
+      />
+    </Panel>
   );
 }