feat: standardize page titles and headers across UI (#588)

Author: Sumabhat11

view/app/containers/page.tsx

@@ -79,7 +79,8 @@ export default function ContainersPage() {
       <PageLayout maxWidth="6xl" padding="md" spacing="lg" className="relative z-10">
         <div className="flex items-center justify-between mb-6 flex-wrap gap-4">
           <span>
-            <TypographyH1 className="text-2xl font-bold">{t('containers.title')}</TypographyH1>
+            <TypographyH1>{t('containers.title')}</TypographyH1>
+            <TypographyMuted>{t('containers.description')}</TypographyMuted>
           </span>
           <div className="flex items-center gap-2 flex-wrap">
             <Button

view/app/extensions/components/extensions-hero.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/components/ui/button';
 import { ExternalLink } from 'lucide-react';
 import { Skeleton } from '@/components/ui/skeleton';
 import Image from 'next/image';
+import { TypographyH1, TypographyMuted } from '@/components/ui/typography';
 
 interface ExtensionsHeroProps {
   isLoading?: boolean;
@@ -25,10 +26,8 @@ function ExtensionsHero({ isLoading = false }: ExtensionsHeroProps) {
           <div className="inline-flex items-center rounded-full bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
             {t('extensions.beta')}
           </div>
-          <h1 className="text-xl font-bold tracking-tight md:text-2xl lg:text-3xl">
-            {t('extensions.title')}
-          </h1>
-          <p className="text-sm text-muted-foreground md:text-base">{t('extensions.subtitle')}</p>
+          <TypographyH1>{t('extensions.title')}</TypographyH1>
+          <TypographyMuted>{t('extensions.subtitle')}</TypographyMuted>
         </div>
         <div className="flex-1">
           <div className="relative mx-auto max-w-xs">

view/app/file-manager/components/layout/Header.tsx

@@ -1,19 +1,15 @@
 import React from 'react';
 import { useTranslation } from '@/hooks/use-translation';
-import { TypographyMuted } from '@/components/ui/typography';
+import DashboardPageHeader from '@/components/layout/dashboard-page-header';
 
 function FileManagerHeader() {
   const { t } = useTranslation();
 
   return (
-    <div>
-      <div className="">
-        <h1 className="text-md font-bold capitalize leading-normal text-primary sm:text-lg md:text-xl lg:text-3xl">
-          {t('fileManager.header.title')}
-        </h1>
-        <TypographyMuted>{t('fileManager.header.subtitle')}</TypographyMuted>
-      </div>
-    </div>
+    <DashboardPageHeader
+      label={t('fileManager.header.title')}
+      description={t('fileManager.header.subtitle')}
+    />
   );
 }
 

view/app/self-host/page.tsx

@@ -5,7 +5,7 @@ import ListRepositories from './components/github-repositories/list-repositories
 import AppItem, { AppItemSkeleton } from './components/application';
 import useGetDeployedApplications from './hooks/use_get_deployed_applications';
 import PaginationWrapper from '@/components/ui/pagination';
-import { DahboardUtilityHeader } from '@/components/layout/dashboard-page-header';
+import DashboardPageHeader, { DahboardUtilityHeader } from '@/components/layout/dashboard-page-header';
 import { Application } from '@/redux/types/applications';
 import { Button } from '@/components/ui/button';
 import { useTranslation } from '@/hooks/use-translation';
@@ -81,6 +81,10 @@ function page() {
       }
     >
       <PageLayout maxWidth="6xl" padding="md" spacing="lg">
+        <DashboardPageHeader
+          label={t('selfHost.page.title')}
+          description={t('selfHost.page.description')}
+        />
         {renderContent()}
 
         {showApplications && (

view/app/settings/teams/page.tsx

@@ -8,7 +8,7 @@ import TeamMembers from './components/TeamMembers';
 import EditTeam from './components/EditTeam';
 import { useTranslation } from '@/hooks/use-translation';
 import { ResourceGuard } from '@/components/rbac/PermissionGuard';
-import { TypographyH2, TypographyMuted } from '@/components/ui/typography';
+import { TypographyH1, TypographyMuted } from '@/components/ui/typography';
 import PageLayout from '@/components/layout/page-layout';
 
 function Page() {
@@ -40,7 +40,7 @@ function Page() {
         <div className={'flex items-center justify-between space-y-2'}>
           <div className="flex items-center">
             <span className="">
-              <TypographyH2>{teamName}</TypographyH2>
+              <TypographyH1>{teamName}</TypographyH1>
               <TypographyMuted>{teamDescription}</TypographyMuted>
             </span>
 

view/lib/i18n/locales/en.json

@@ -25,7 +25,7 @@
   },
   "containers": {
     "title": "Containers",
-    "description": "Preview all the containers",
+    "description": "Manage and monitor your containers",
     "list": "Container List",
     "name": "Name",
     "image": "Image",