From 1a5c7df6712d9294bcc72ff097ae38be565a3c0c Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Tue, 23 Sep 2025 13:55:27 -0700
Subject: [PATCH] Fix broken icons, remove showActions from TeamsTable, fix
 margins for pixel/link overview

---
 pnpm-lock.yaml                                |  2 --
 src/app/(main)/links/[linkId]/LinkPage.tsx    | 23 +++++++++++--------
 src/app/(main)/pixels/[pixelId]/PixelPage.tsx | 23 +++++++++++--------
 src/app/(main)/teams/TeamsDataTable.tsx       | 15 ++++--------
 src/app/(main)/teams/TeamsJoinButton.tsx      |  4 ++--
 src/app/(main)/teams/TeamsTable.tsx           |  6 ++---
 .../(main)/teams/[teamId]/TeamSettings.tsx    |  6 ++---
 src/components/icons.ts                       |  1 +
 src/lib/constants.ts                          |  8 +++----
 9 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c71a6ef7..4db6756b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -364,8 +364,6 @@ importers:
         specifier: ^5.9.2
         version: 5.9.2
 
-  dist: {}
-
 packages:
 
   '@ampproject/remapping@2.3.0':
diff --git a/src/app/(main)/links/[linkId]/LinkPage.tsx b/src/app/(main)/links/[linkId]/LinkPage.tsx
index a7751625..e0e10213 100644
--- a/src/app/(main)/links/[linkId]/LinkPage.tsx
+++ b/src/app/(main)/links/[linkId]/LinkPage.tsx
@@ -7,19 +7,24 @@ import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
 import { LinkMetricsBar } from '@/app/(main)/links/[linkId]/LinkMetricsBar';
 import { LinkControls } from '@/app/(main)/links/[linkId]/LinkControls';
 import { LinkPanels } from '@/app/(main)/links/[linkId]/LinkPanels';
+import { Column, Grid } from '@umami/react-zen';
 
 export function LinkPage({ linkId }: { linkId: string }) {
   return (
     <LinkProvider linkId={linkId}>
-      <PageBody gap>
-        <LinkHeader />
-        <LinkControls linkId={linkId} />
-        <LinkMetricsBar linkId={linkId} showChange={true} />
-        <Panel>
-          <WebsiteChart websiteId={linkId} />
-        </Panel>
-        <LinkPanels linkId={linkId} />
-      </PageBody>
+      <Grid width="100%" height="100%">
+        <Column margin="2">
+          <PageBody gap>
+            <LinkHeader />
+            <LinkControls linkId={linkId} />
+            <LinkMetricsBar linkId={linkId} showChange={true} />
+            <Panel>
+              <WebsiteChart websiteId={linkId} />
+            </Panel>
+            <LinkPanels linkId={linkId} />
+          </PageBody>
+        </Column>
+      </Grid>
     </LinkProvider>
   );
 }
diff --git a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
index 6a55a6eb..a65c821e 100644
--- a/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
+++ b/src/app/(main)/pixels/[pixelId]/PixelPage.tsx
@@ -7,19 +7,24 @@ import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
 import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar';
 import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls';
 import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels';
+import { Column, Grid } from '@umami/react-zen';
 
 export function PixelPage({ pixelId }: { pixelId: string }) {
   return (
     <PixelProvider pixelId={pixelId}>
-      <PageBody gap>
-        <PixelHeader />
-        <PixelControls pixelId={pixelId} />
-        <PixelMetricsBar pixelId={pixelId} showChange={true} />
-        <Panel>
-          <WebsiteChart websiteId={pixelId} />
-        </Panel>
-        <PixelPanels pixelId={pixelId} />
-      </PageBody>
+      <Grid width="100%" height="100%">
+        <Column margin="2">
+          <PageBody gap>
+            <PixelHeader />
+            <PixelControls pixelId={pixelId} />
+            <PixelMetricsBar pixelId={pixelId} showChange={true} />
+            <Panel>
+              <WebsiteChart websiteId={pixelId} />
+            </Panel>
+            <PixelPanels pixelId={pixelId} />
+          </PageBody>
+        </Column>
+      </Grid>
     </PixelProvider>
   );
 }
diff --git a/src/app/(main)/teams/TeamsDataTable.tsx b/src/app/(main)/teams/TeamsDataTable.tsx
index 6475c456..4bc939b1 100644
--- a/src/app/(main)/teams/TeamsDataTable.tsx
+++ b/src/app/(main)/teams/TeamsDataTable.tsx
@@ -1,16 +1,9 @@
-import { ReactNode } from 'react';
-import Link from 'next/link';
 import { DataGrid } from '@/components/common/DataGrid';
-import { TeamsTable } from './TeamsTable';
 import { useLoginQuery, useNavigation, useUserTeamsQuery } from '@/components/hooks';
+import Link from 'next/link';
+import { TeamsTable } from './TeamsTable';
 
-export function TeamsDataTable({
-  showActions,
-}: {
-  allowEdit?: boolean;
-  showActions?: boolean;
-  children?: ReactNode;
-}) {
+export function TeamsDataTable() {
   const { user } = useLoginQuery();
   const query = useUserTeamsQuery(user.id);
   const { pathname } = useNavigation();
@@ -27,7 +20,7 @@ export function TeamsDataTable({
   return (
     <DataGrid query={query}>
       {({ data }) => {
-        return <TeamsTable data={data} showActions={showActions} renderLink={renderLink} />;
+        return <TeamsTable data={data} renderLink={renderLink} />;
       }}
     </DataGrid>
   );
diff --git a/src/app/(main)/teams/TeamsJoinButton.tsx b/src/app/(main)/teams/TeamsJoinButton.tsx
index 7e1e24e7..e30ff120 100644
--- a/src/app/(main)/teams/TeamsJoinButton.tsx
+++ b/src/app/(main)/teams/TeamsJoinButton.tsx
@@ -1,5 +1,5 @@
 import { Button, Icon, Modal, DialogTrigger, Dialog, Text, useToast } from '@umami/react-zen';
-import { AddUser } from '@/components/icons';
+import { AddUserSvg } from '@/components/icons';
 import { useMessages, useModified } from '@/components/hooks';
 import { TeamJoinForm } from './TeamJoinForm';
 
@@ -17,7 +17,7 @@ export function TeamsJoinButton() {
     <DialogTrigger>
       <Button>
         <Icon>
-          <AddUser />
+          <AddUserSvg />
         </Icon>
         <Text>{formatMessage(labels.joinTeam)}</Text>
       </Button>
diff --git a/src/app/(main)/teams/TeamsTable.tsx b/src/app/(main)/teams/TeamsTable.tsx
index 2108de13..5a22bcda 100644
--- a/src/app/(main)/teams/TeamsTable.tsx
+++ b/src/app/(main)/teams/TeamsTable.tsx
@@ -20,12 +20,12 @@ export function TeamsTable({
       <DataColumn id="owner" label={formatMessage(labels.owner)}>
         {(row: any) => row?.members?.find(({ role }) => role === ROLES.teamOwner)?.user?.username}
       </DataColumn>
-      <DataColumn id="websites" label={formatMessage(labels.websites)} align="end">
-        {(row: any) => row?._count?.websites}
-      </DataColumn>
       <DataColumn id="members" label={formatMessage(labels.members)} align="end">
         {(row: any) => row?._count?.members}
       </DataColumn>
+      <DataColumn id="websites" label={formatMessage(labels.websites)} align="end">
+        {(row: any) => row?._count?.websites}
+      </DataColumn>
     </DataTable>
   );
 }
diff --git a/src/app/(main)/teams/[teamId]/TeamSettings.tsx b/src/app/(main)/teams/[teamId]/TeamSettings.tsx
index c5994c0d..c186a1a0 100644
--- a/src/app/(main)/teams/[teamId]/TeamSettings.tsx
+++ b/src/app/(main)/teams/[teamId]/TeamSettings.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { Column, Icon, Text, Row } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useNavigation, useTeam } from '@/components/hooks';
 import { ROLES } from '@/lib/constants';
-import { Users, Arrow } from '@/components/icons';
+import { Users, ArrowLeft } from '@/components/icons';
 import { TeamLeaveButton } from '@/app/(main)/teams/TeamLeaveButton';
 import { TeamManage } from './TeamManage';
 import { TeamEditForm } from './TeamEditForm';
@@ -34,8 +34,8 @@ export function TeamSettings({ teamId }: { teamId: string }) {
     <>
       <Link href="/settings/teams">
         <Row marginTop="2" alignItems="center" gap>
-          <Icon rotate={180}>
-            <Arrow />
+          <Icon>
+            <ArrowLeft />
           </Icon>
           <Text>{formatMessage(labels.teams)}</Text>
         </Row>
diff --git a/src/components/icons.ts b/src/components/icons.ts
index 0280c31a..a4c180ff 100644
--- a/src/components/icons.ts
+++ b/src/components/icons.ts
@@ -14,4 +14,5 @@ export {
   Path as PathSvg,
   Tag as TagSvg,
   Target as TargetSvg,
+  AddUser as AddUserSvg,
 } from '@/components/svg';
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index c6c63c70..c5ec469c 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -127,12 +127,12 @@ export const DATA_TYPES = {
 
 export const ROLES = {
   admin: 'admin',
-  teamManager: 'team-manager',
-  teamMember: 'team-member',
-  teamOwner: 'team-owner',
-  teamViewOnly: 'team-view-only',
   user: 'user',
   viewOnly: 'view-only',
+  teamOwner: 'team-owner',
+  teamManager: 'team-manager',
+  teamMember: 'team-member',
+  teamViewOnly: 'team-view-only',
 } as const;
 
 export const PERMISSIONS = {