Added Panel component. New color scheme.

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