fix(studio): update page layout for remaining account views (#41349)

fix: page layouts for other account areas

apps/studio/pages/account/audit.tsx

@@ -3,24 +3,32 @@ import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
-import { ScaffoldContainer } from 'components/layouts/Scaffold'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
 import type { NextPageWithLayout } from 'types'
-import { cn } from 'ui'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderMeta,
+  PageHeaderSummary,
+  PageHeaderTitle,
+} from 'ui-patterns/PageHeader'
 
 const Audit: NextPageWithLayout = () => {
   return (
     <>
-      <ScaffoldContainer>
-        <FormHeader
-          title="Audit Logs"
-          description="View a detailed history of account activities and security events."
-        />
-      </ScaffoldContainer>
-
-      <ScaffoldContainer className={cn('[&>div]:mt-8')} bottomPadding>
+      <PageHeader size="small">
+        <PageHeaderMeta>
+          <PageHeaderSummary>
+            <PageHeaderTitle>Audit Logs</PageHeaderTitle>
+            <PageHeaderDescription>
+              View a detailed history of account activities and security events.
+            </PageHeaderDescription>
+          </PageHeaderSummary>
+        </PageHeaderMeta>
+      </PageHeader>
+      <PageContainer size="small" className="mt-8">
         <AuditLogs />
-      </ScaffoldContainer>
+      </PageContainer>
     </>
   )
 }

apps/studio/pages/account/security.tsx

@@ -5,11 +5,6 @@ import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
-import {
-  ScaffoldContainer,
-  ScaffoldHeader,
-  ScaffoldSectionTitle,
-} from 'components/layouts/Scaffold'
 import { UnknownInterface } from 'components/ui/UnknownInterface'
 import { useMfaListFactorsQuery } from 'data/profile/mfa-list-factors-query'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
@@ -21,6 +16,14 @@ import {
   CollapsibleContent_Shadcn_,
   CollapsibleTrigger_Shadcn_,
 } from 'ui'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderMeta,
+  PageHeaderSummary,
+  PageHeaderTitle,
+} from 'ui-patterns/PageHeader'
 
 const collapsibleClasses = [
   'bg-surface-100',
@@ -46,13 +49,18 @@ const Security: NextPageWithLayout = () => {
 
   return (
     <>
-      <ScaffoldContainer>
-        <ScaffoldHeader className="pt-0">
-          <ScaffoldSectionTitle>Security</ScaffoldSectionTitle>
-        </ScaffoldHeader>
-      </ScaffoldContainer>
-      <ScaffoldContainer bottomPadding>
-        <Collapsible_Shadcn_ className={cn(collapsibleClasses)}>
+      <PageHeader size="small">
+        <PageHeaderMeta>
+          <PageHeaderSummary>
+            <PageHeaderTitle>Security</PageHeaderTitle>
+            <PageHeaderDescription>
+              Manage your account security settings and authentication methods.
+            </PageHeaderDescription>
+          </PageHeaderSummary>
+        </PageHeaderMeta>
+      </PageHeader>
+      <PageContainer size="small">
+        <Collapsible_Shadcn_ className={cn('mt-8', collapsibleClasses)}>
           <CollapsibleTrigger_Shadcn_ asChild>
             <button
               type="button"
@@ -74,7 +82,7 @@ const Security: NextPageWithLayout = () => {
             <TOTPFactors />
           </CollapsibleContent_Shadcn_>
         </Collapsible_Shadcn_>
-      </ScaffoldContainer>
+      </PageContainer>
     </>
   )
 }

apps/studio/pages/account/tokens.tsx

@@ -8,16 +8,19 @@ import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
 import AppLayout from 'components/layouts/AppLayout/AppLayout'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import OrganizationLayout from 'components/layouts/OrganizationLayout'
-import {
-  ScaffoldContainer,
-  ScaffoldHeader,
-  ScaffoldSectionTitle,
-} from 'components/layouts/Scaffold'
 import { NewAccessToken } from 'data/access-tokens/access-tokens-create-mutation'
 import { DOCS_URL } from 'lib/constants'
 import type { NextPageWithLayout } from 'types'
 import { Button } from 'ui'
 import { Input } from 'ui-patterns/DataInputs/Input'
+import { PageContainer } from 'ui-patterns/PageContainer'
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderMeta,
+  PageHeaderSummary,
+  PageHeaderTitle,
+} from 'ui-patterns/PageHeader'
 
 const UserAccessTokens: NextPageWithLayout = () => {
   const [newToken, setNewToken] = useState<NewAccessToken | undefined>()
@@ -25,12 +28,17 @@ const UserAccessTokens: NextPageWithLayout = () => {
 
   return (
     <>
-      <ScaffoldContainer>
-        <ScaffoldHeader className="pt-0">
-          <ScaffoldSectionTitle>Access Tokens</ScaffoldSectionTitle>
-        </ScaffoldHeader>
-      </ScaffoldContainer>
-      <ScaffoldContainer bottomPadding>
+      <PageHeader size="small">
+        <PageHeaderMeta>
+          <PageHeaderSummary>
+            <PageHeaderTitle>Access Tokens</PageHeaderTitle>
+            <PageHeaderDescription>
+              Create and manage personal access tokens for API authentication.
+            </PageHeaderDescription>
+          </PageHeaderSummary>
+        </PageHeaderMeta>
+      </PageHeader>
+      <PageContainer size="small" className="mt-8">
         <div className="space-y-4">
           {newToken && <NewTokenBanner token={newToken} onClose={() => setNewToken(undefined)} />}
           <div className="flex items-center justify-between gap-x-2 mb-3">
@@ -65,7 +73,7 @@ const UserAccessTokens: NextPageWithLayout = () => {
             }}
           />
         </div>
-      </ScaffoldContainer>
+      </PageContainer>
     </>
   )
 }