From 5d2c1e27c215c25502e551c59eed68481cf47048 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Thu, 20 Mar 2025 23:12:56 -0700
Subject: [PATCH] Added Panel component. New color scheme.

---
 package.json                                  |  5 +---
 pnpm-lock.yaml                                |  4 ---
 src/app/(main)/App.tsx                        | 13 +++------
 src/app/(main)/Nav.tsx                        |  9 +++----
 src/app/(main)/NavBar.tsx                     | 12 +++++++--
 .../[teamId]/settings/team/TeamDetails.tsx    | 27 ++++++++++---------
 src/components/common/DataGrid.tsx            | 15 ++++++-----
 src/components/hooks/useTeamUrl.ts            |  7 ++---
 src/components/layout/Page.tsx                |  6 -----
 src/components/layout/Panel.tsx               |  6 +++++
 src/components/metrics/MetricsTable.tsx       |  2 +-
 src/components/metrics/PageviewsChart.tsx     | 19 +++++++------
 src/styles/global.css                         |  3 ++-
 13 files changed, 64 insertions(+), 64 deletions(-)
 create mode 100644 src/components/layout/Panel.tsx

diff --git a/package.json b/package.json
index 73304ec4..f7d13b96 100644
--- a/package.json
+++ b/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"
-    }
+    ]
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f71aa92..fec244eb 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/app/(main)/App.tsx b/src/app/(main)/App.tsx
index 90e0eef9..539e3715 100644
--- a/src/app/(main)/App.tsx
+++ b/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>
   );
 }
diff --git a/src/app/(main)/Nav.tsx b/src/app/(main)/Nav.tsx
index e2fc2d60..71b5fa68 100644
--- a/src/app/(main)/Nav.tsx
+++ b/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>
           );
         })}
diff --git a/src/app/(main)/NavBar.tsx b/src/app/(main)/NavBar.tsx
index fdcff123..691c9c5a 100644
--- a/src/app/(main)/NavBar.tsx
+++ b/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 />
diff --git a/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx b/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
index c23f4bfe..18c53c34 100644
--- a/src/app/(main)/teams/[teamId]/settings/team/TeamDetails.tsx
+++ b/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>
   );
 }
diff --git a/src/components/common/DataGrid.tsx b/src/components/common/DataGrid.tsx
index 04d51e61..1e80bd33 100644
--- a/src/components/common/DataGrid.tsx
+++ b/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} />
diff --git a/src/components/hooks/useTeamUrl.ts b/src/components/hooks/useTeamUrl.ts
index 65678d21..fcbb5d21 100644
--- a/src/components/hooks/useTeamUrl.ts
+++ b/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 };
 }
diff --git a/src/components/layout/Page.tsx b/src/components/layout/Page.tsx
index 5ab787a6..d259113b 100644
--- a/src/components/layout/Page.tsx
+++ b/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>
diff --git a/src/components/layout/Panel.tsx b/src/components/layout/Panel.tsx
new file mode 100644
index 00000000..7aad3c0c
--- /dev/null
+++ b/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} />;
+}
diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx
index 80cac8ec..c4179596 100644
--- a/src/components/metrics/MetricsTable.tsx
+++ b/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 />}
diff --git a/src/components/metrics/PageviewsChart.tsx b/src/components/metrics/PageviewsChart.tsx
index c25b7dd2..c5b7ca7b 100644
--- a/src/components/metrics/PageviewsChart.tsx
+++ b/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>
   );
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index b8850539..4bb20c68 100644
--- a/src/styles/global.css
+++ b/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,