Added Panel component. New color scheme.

package.json

@@ -194,9 +194,6 @@
       "esbuild",
       "prisma",
       "sharp"
-    ],
-    "overrides": {
-      "@umami/react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen"
-    }
+    ]
   }
 }

pnpm-lock.yaml

@@ -5,7 +5,6 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  react-zen: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
   '@umami/react-zen': link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
 
 importers:
@@ -174,9 +173,6 @@ importers:
       react-window:
         specifier: ^1.8.11
         version: 1.8.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      react-zen:
-        specifier: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
-        version: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen
       request-ip:
         specifier: ^3.3.0
         version: 3.3.0

src/app/(main)/App.tsx

@@ -30,25 +30,18 @@ export function App({ children }) {
   }
 
   return (
-    <Grid
-      height="100vh"
-      width="100%"
-      columns="auto 1fr"
-      rows="auto 1fr"
-      overflow="hidden"
-      backgroundColor="2"
-    >
+    <Grid height="100vh" width="100%" columns="auto 1fr" rows="auto 1fr" overflow="hidden">
       <Nav gridColumn="1 / 2" gridRow="1 / 3" />
       <NavBar gridColumn="2 / 3" gridRow="1 / 2" />
-      <Column alignItems="center" overflow="scroll">
+      <Column gridColumn="2 / 3" gridRow="2 / 3" alignItems="center" overflow="auto">
         <Page>
-          <UpdateNotice user={user} config={config} />
           {children}
           {process.env.NODE_ENV === 'production' && !pathname.includes('/share/') && (
             <Script src={`${process.env.basePath || ''}/telemetry.js`} />
           )}
         </Page>
       </Column>
+      <UpdateNotice user={user} config={config} />
     </Grid>
   );
 }

src/app/(main)/Nav.tsx

@@ -11,11 +11,10 @@ import {
 } from '@umami/react-zen';
 import { Lucide, Icons } from '@/components/icons';
 import { useMessages, useTeamUrl } from '@/components/hooks';
-import type { SideNavProps } from '@umami/react-zen/SideNav';
 
-export function Nav(props: SideNavProps) {
+export function Nav(props: any) {
   const { formatMessage, labels } = useMessages();
-  const { renderTeamUrl } = useTeamUrl();
+  const { renderTeamUrl, pathname } = useTeamUrl();
   const [isCollapsed, setCollapsed] = useState(false);
 
   const links = [
@@ -47,7 +46,7 @@ export function Nav(props: SideNavProps) {
   ].filter(n => n);
 
   return (
-    <SideNav {...props} isCollapsed={isCollapsed} variant="3" showBorder={false}>
+    <SideNav {...props} isCollapsed={isCollapsed} variant="3" showBorder={true}>
       <SideNavSection>
         <SideNavHeader label="umami" icon={<Icons.Logo />} />
       </SideNavSection>
@@ -55,7 +54,7 @@ export function Nav(props: SideNavProps) {
         {links.map(({ href, label, icon }) => {
           return (
             <Link key={href} href={href}>
-              <SideNavItem label={label} icon={icon} />
+              <SideNavItem label={label} icon={icon} isSelected={pathname.startsWith(href)} />
             </Link>
           );
         })}

src/app/(main)/NavBar.tsx

@@ -2,10 +2,18 @@ import { ThemeButton, Row } from '@umami/react-zen';
 import { LanguageButton } from '@/components/input/LanguageButton';
 import { ProfileButton } from '@/components/input/ProfileButton';
 import { TeamsButton } from '@/components/input/TeamsButton';
+import type { RowProps } from '@umami/react-zen/Row';
 
-export function NavBar() {
+export function NavBar(props: RowProps) {
   return (
-    <Row justifyContent="space-between" alignItems="center" paddingY="3">
+    <Row
+      {...props}
+      justifyContent="space-between"
+      alignItems="center"
+      paddingY="3"
+      paddingX="3"
+      paddingRight="5"
+    >
       <TeamsButton />
       <Row justifyContent="flex-end">
         <ThemeButton />

src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx

@@ -8,6 +8,7 @@ import { Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
 import { TeamLeaveButton } from '@/app/(main)/settings/teams/TeamLeaveButton';
 import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
+import { Panel } from '@/components/layout/Panel';
 
 export function TeamDetails({ teamId }: { teamId: string }) {
   const team = useContext(TeamContext);
@@ -30,18 +31,20 @@ export function TeamDetails({ teamId }: { teamId: string }) {
       <PageHeader title={team?.name} icon={<Icons.Users />}>
         {!isTeamOwner && <TeamLeaveButton teamId={team.id} teamName={team.name} />}
       </PageHeader>
-      <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
-        <TabList>
-          <Tab id="details">{formatMessage(labels.details)}</Tab>
-          {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
-        </TabList>
-        <TabPanel id="details">
-          <TeamEditForm teamId={teamId} allowEdit={canEdit} />
-        </TabPanel>
-        <TabPanel id="manage">
-          <TeamManage teamId={teamId} />
-        </TabPanel>
-      </Tabs>
+      <Panel>
+        <Tabs selectedKey={tab} onSelectionChange={(value: any) => setTab(value)}>
+          <TabList>
+            <Tab id="details">{formatMessage(labels.details)}</Tab>
+            {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
+          </TabList>
+          <TabPanel id="details">
+            <TeamEditForm teamId={teamId} allowEdit={canEdit} />
+          </TabPanel>
+          <TabPanel id="manage">
+            <TeamManage teamId={teamId} />
+          </TabPanel>
+        </Tabs>
+      </Panel>
     </Column>
   );
 }

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

src/styles/global.css

@@ -3,9 +3,10 @@ body {
   font-family: var(--font-family), sans-serif;
   color: var(--font-color);
   font-size: var(--font-size);
-  background-color: var(--base-color-1);
+  background-color: var(--base-color-2);
   width: 100%;
   min-height: 100vh;
+  overflow: hidden;
 }
 
 a,