add page titles

pages/settings/profile/index.js

@@ -1,10 +1,12 @@
 import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import ProfileSettings from 'components/pages/settings/profile/ProfileSettings';
+import useMessages from 'hooks/useMessages';
 
 export default function ProfilePage() {
+  const { formatMessage, labels } = useMessages();
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.profile)}>
       <SettingsLayout>
         <ProfileSettings />
       </SettingsLayout>

pages/settings/teams/[id]/index.js

@@ -2,17 +2,19 @@ import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import TeamSettings from 'components/pages/settings/teams/TeamSettings';
 import { useRouter } from 'next/router';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamDetailPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
 
   if (!id || disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.teams)}>
       <SettingsLayout>
         <TeamSettings teamId={id} />
       </SettingsLayout>

pages/settings/teams/index.js

@@ -1,14 +1,16 @@
 import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import TeamsList from 'components/pages/settings/teams/TeamsList';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamsPage({ disabled }) {
+  const { formatMessage, labels } = useMessages();
   if (disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.teams)}>
       <SettingsLayout>
         <TeamsList />
       </SettingsLayout>

pages/settings/users/[id]/index.js

@@ -2,17 +2,19 @@ import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import UserSettings from 'components/pages/settings/users/UserSettings';
 import { useRouter } from 'next/router';
+import useMessages from 'hooks/useMessages';
 
 export default function TeamDetailPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
 
   if (!id || disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.users)}>
       <SettingsLayout>
         <UserSettings userId={id} />
       </SettingsLayout>

pages/settings/users/index.js

@@ -1,14 +1,16 @@
 import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import UsersList from 'components/pages/settings/users/UsersList';
+import useMessages from 'hooks/useMessages';
 
 export default function UsersPage({ disabled }) {
+  const { formatMessage, labels } = useMessages();
   if (disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.users)}>
       <SettingsLayout>
         <UsersList />
       </SettingsLayout>

pages/settings/websites/[id]/index.js

@@ -2,17 +2,19 @@ import AppLayout from 'components/layout/AppLayout';
 import { useRouter } from 'next/router';
 import WebsiteSettings from 'components/pages/settings/websites/WebsiteSettings';
 import SettingsLayout from 'components/layout/SettingsLayout';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsiteSettingsPage({ disabled }) {
   const router = useRouter();
   const { id } = router.query;
+  const { formatMessage, labels } = useMessages();
 
   if (!id || disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.websites)}>
       <SettingsLayout>
         <WebsiteSettings websiteId={id} />
       </SettingsLayout>

pages/settings/websites/index.js

@@ -1,14 +1,16 @@
 import AppLayout from 'components/layout/AppLayout';
 import SettingsLayout from 'components/layout/SettingsLayout';
 import WebsitesList from 'components/pages/settings/websites/WebsitesList';
+import useMessages from 'hooks/useMessages';
 
 export default function WebsitesPage({ disabled }) {
+  const { formatMessage, labels } = useMessages();
   if (disabled) {
     return null;
   }
 
   return (
-    <AppLayout>
+    <AppLayout title={formatMessage(labels.websites)}>
       <SettingsLayout>
         <WebsitesList />
       </SettingsLayout>