Fix broken icons, remove showActions from TeamsTable, fix margins for pixel/link overview

pnpm-lock.yaml

@@ -364,8 +364,6 @@ importers:
         specifier: ^5.9.2
         version: 5.9.2
 
-  dist: {}
-
 packages:
 
   '@ampproject/remapping@2.3.0':

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

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

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

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>

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

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>

src/components/icons.ts

@@ -14,4 +14,5 @@ export {
   Path as PathSvg,
   Tag as TagSvg,
   Target as TargetSvg,
+  AddUser as AddUserSvg,
 } from '@/components/svg';

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 = {