Reworked settings screens.

src/app/(main)/settings/teams/TeamsHeader.tsx

@@ -1,5 +1,5 @@
 import { Row } from '@umami/react-zen';
-import { PageHeader } from '@/components/common/PageHeader';
+import { SectionHeader } from '@/components/common/SectionHeader';
 import { ROLES } from '@/lib/constants';
 import { useLoginQuery, useMessages } from '@/components/hooks';
 import { TeamsJoinButton } from './TeamsJoinButton';
@@ -11,11 +11,11 @@ export function TeamsHeader({ allowCreate = true }: { allowCreate?: boolean }) {
   const cloudMode = !!process.env.cloudMode;
 
   return (
-    <PageHeader title={formatMessage(labels.teams)}>
+    <SectionHeader title={formatMessage(labels.teams)}>
       <Row gap="3">
         {!cloudMode && <TeamsJoinButton />}
         {allowCreate && user.role !== ROLES.viewOnly && <TeamsAddButton />}
       </Row>
-    </PageHeader>
+    </SectionHeader>
   );
 }

src/app/(main)/settings/teams/TeamsJoinButton.tsx

@@ -16,7 +16,7 @@ export function TeamsJoinButton() {
   return (
     <DialogTrigger>
       <Button variant="secondary">
-        <Icon>
+        <Icon fillColor="currentColor">
           <Icons.AddUser />
         </Icon>
         <Text>{formatMessage(labels.joinTeam)}</Text>

src/app/(main)/settings/teams/TeamsSettingsPage.tsx

@@ -1,12 +1,13 @@
 'use client';
 import { TeamsDataTable } from './TeamsDataTable';
 import { TeamsHeader } from './TeamsHeader';
+import { Column } from '@umami/react-zen';
 
 export function TeamsSettingsPage() {
   return (
-    <>
+    <Column gap>
       <TeamsHeader />
       <TeamsDataTable />
-    </>
+    </Column>
   );
 }