Reworked settings screens.

src/app/(main)/reports/ReportsHeader.tsx

@@ -1,4 +1,4 @@
-import { PageHeader } from '@/components/common/PageHeader';
+import { SectionHeader } from '@/components/common/SectionHeader';
 import { Icon, Icons, Text } from '@umami/react-zen';
 import { useLoginQuery, useMessages, useNavigation } from '@/components/hooks';
 import { LinkButton } from '@/components/common/LinkButton';
@@ -11,7 +11,7 @@ export function ReportsHeader() {
   const canEdit = user.role !== ROLES.viewOnly;
 
   return (
-    <PageHeader title={formatMessage(labels.reports)}>
+    <SectionHeader title={formatMessage(labels.reports)}>
       {canEdit && (
         <LinkButton href={renderTeamUrl('/reports/create')} variant="primary">
           <Icon>
@@ -20,6 +20,6 @@ export function ReportsHeader() {
           <Text>{formatMessage(labels.createReport)}</Text>
         </LinkButton>
       )}
-    </PageHeader>
+    </SectionHeader>
   );
 }

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -1,7 +1,7 @@
 import { Icon, Text, Row, Column, Grid } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { Icons } from '@/components/icons';
-import { PageHeader } from '@/components/common/PageHeader';
+import { SectionHeader } from '@/components/common/SectionHeader';
 import { LinkButton } from '@/components/common/LinkButton';
 
 export function ReportTemplates({ showHeader = true }: { showHeader?: boolean }) {
@@ -61,7 +61,7 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
 
   return (
     <>
-      {showHeader && <PageHeader title={formatMessage(labels.reports)} />}
+      {showHeader && <SectionHeader title={formatMessage(labels.reports)} />}
       <Grid columns="repeat(3, minmax(200px, 1fr))" gap="3">
         {reports.map(({ title, description, url, icon }) => {
           return (