fix: Unify the design for account pages (#30891)

Refactor all account pages to use ScaffoldContainer and have the same design.

apps/studio/pages/account/audit.tsx

@@ -1,20 +1,24 @@
 import { AuditLogs } from 'components/interfaces/Account'
 import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
-import { ScaffoldContainerLegacy } from 'components/layouts/Scaffold'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
+import {
+  ScaffoldContainer,
+  ScaffoldDescription,
+  ScaffoldHeader,
+  ScaffoldTitle,
+} from 'components/layouts/Scaffold'
 import type { NextPageWithLayout } from 'types'
 
 const User: NextPageWithLayout = () => {
   return (
-    <ScaffoldContainerLegacy className="gap-0">
-      <div className="flex items-center justify-between">
-        <FormHeader
-          title="Account audit logs"
-          description="View the audit log trail of actions made from your account"
-        />
-      </div>
+    <ScaffoldContainer>
+      <ScaffoldHeader>
+        <ScaffoldTitle>Account Audit Logs</ScaffoldTitle>
+        <ScaffoldDescription>
+          View the audit log trail of actions made from your account
+        </ScaffoldDescription>
+      </ScaffoldHeader>
       <AuditLogs />
-    </ScaffoldContainerLegacy>
+    </ScaffoldContainer>
   )
 }
 

apps/studio/pages/account/me.tsx

@@ -6,6 +6,12 @@ import {
 import { AccountDeletion } from 'components/interfaces/Account/Preferences/AccountDeletion'
 import { ProfileInformation } from 'components/interfaces/Account/Preferences/ProfileInformation'
 import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
+import {
+  ScaffoldContainer,
+  ScaffoldDescription,
+  ScaffoldHeader,
+  ScaffoldTitle,
+} from 'components/layouts/Scaffold'
 import AlertError from 'components/ui/AlertError'
 import Panel from 'components/ui/Panel'
 import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
@@ -15,9 +21,15 @@ import type { NextPageWithLayout } from 'types'
 
 const User: NextPageWithLayout = () => {
   return (
-    <div className="my-2">
+    <ScaffoldContainer>
+      <ScaffoldHeader>
+        <ScaffoldTitle>User Preferences</ScaffoldTitle>
+        <ScaffoldDescription>
+          Manage your profile, account settings, and preferences for your Supabase experience
+        </ScaffoldDescription>
+      </ScaffoldHeader>
       <ProfileCard />
-    </div>
+    </ScaffoldContainer>
   )
 }
 
@@ -42,7 +54,7 @@ const ProfileCard = () => {
   const { profile, error, isLoading, isError, isSuccess } = useProfile()
 
   return (
-    <article className="max-w-4xl p-4">
+    <article>
       {isLoading && (
         <Panel>
           <div className="p-4">

apps/studio/pages/account/security.tsx

@@ -1,8 +1,14 @@
+import { Smartphone } from 'lucide-react'
+
 import { TOTPFactors } from 'components/interfaces/Account'
 import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
+import {
+  ScaffoldContainer,
+  ScaffoldDescription,
+  ScaffoldHeader,
+  ScaffoldTitle,
+} from 'components/layouts/Scaffold'
 import { useMfaListFactorsQuery } from 'data/profile/mfa-list-factors-query'
-import { Smartphone } from 'lucide-react'
 import type { NextPageWithLayout } from 'types'
 import { Badge, cn, Collapsible } from 'ui'
 
@@ -23,13 +29,14 @@ const Security: NextPageWithLayout = () => {
   const { data } = useMfaListFactorsQuery()
 
   return (
-    <div className="1xl:px-28 mx-auto flex flex-col px-5 pt-6 pb-14 lg:px-16 xl:px-24 2xl:px-32">
-      <div className="flex items-center justify-between">
-        <FormHeader
-          title="Multi-factor authentication"
-          description="Add an additional layer of security to your account by requiring more than just a password to sign in."
-        />
-      </div>
+    <ScaffoldContainer>
+      <ScaffoldHeader>
+        <ScaffoldTitle>Multi-Factor Authentication</ScaffoldTitle>
+        <ScaffoldDescription>
+          Add an additional layer of security to your account by requiring more than just a password
+          to sign in.
+        </ScaffoldDescription>
+      </ScaffoldHeader>
       <Collapsible className={cn(collapsibleClasses)}>
         <Collapsible.Trigger asChild>
           <button
@@ -52,7 +59,7 @@ const Security: NextPageWithLayout = () => {
           <TOTPFactors />
         </Collapsible.Content>
       </Collapsible>
-    </div>
+    </ScaffoldContainer>
   )
 }
 

apps/studio/pages/account/tokens.tsx

@@ -1,3 +1,4 @@
+import { ExternalLink } from 'lucide-react'
 import Link from 'next/link'
 import { useState } from 'react'
 
@@ -7,26 +8,30 @@ import {
   NewTokenBanner,
 } from 'components/interfaces/Account'
 import AccountLayout from 'components/layouts/AccountLayout/AccountLayout'
-import { FormHeader } from 'components/ui/Forms/FormHeader'
+import {
+  ScaffoldContainer,
+  ScaffoldDescription,
+  ScaffoldHeader,
+  ScaffoldTitle,
+} from 'components/layouts/Scaffold'
 import { NewAccessToken } from 'data/access-tokens/access-tokens-create-mutation'
 import type { NextPageWithLayout } from 'types'
 import { Button } from 'ui'
-import { ExternalLink } from 'lucide-react'
 import { Admonition } from 'ui-patterns'
 
 const UserAccessTokens: NextPageWithLayout = () => {
   const [newToken, setNewToken] = useState<NewAccessToken | undefined>()
 
   return (
-    <div className="1xl:px-28 mx-auto flex flex-col px-5 pt-6 pb-14 lg:px-16 xl:px-24 2xl:px-32">
-      <div className="flex items-center justify-between">
-        <div>
-          <FormHeader
-            title="Access Tokens"
-            description="Personal access tokens can be used with our Management API or CLI."
-          />
+    <ScaffoldContainer>
+      <ScaffoldHeader className="flex flex-row justify-between">
+        <div className="flex flex-col">
+          <ScaffoldTitle>Access Tokens</ScaffoldTitle>
+          <ScaffoldDescription>
+            Personal access tokens can be used with our Management API or CLI.
+          </ScaffoldDescription>
         </div>
-        <div className="flex items-center space-x-4 mb-6">
+        <div className="flex items-center space-x-4">
           <div className="flex items-center space-x-2">
             <Button asChild type="default" icon={<ExternalLink strokeWidth={1.5} />}>
               <Link
@@ -49,19 +54,21 @@ const UserAccessTokens: NextPageWithLayout = () => {
           </div>
           <NewAccessTokenButton onCreateToken={setNewToken} />
         </div>
+      </ScaffoldHeader>
+      <div className="flex flex-col">
+        <div className="flex items-center justify-between">
+          <Admonition
+            type="warning"
+            title="Personal access tokens can be used to control your whole account and use features added in the future. Be careful when sharing them!"
+            className="mb-6 w-full"
+          />
+        </div>
+        <div className="space-y-4">
+          {newToken && <NewTokenBanner token={newToken} />}
+          <AccessTokenList />
+        </div>
       </div>
-      <div className="flex items-center justify-between">
-        <Admonition
-          type="warning"
-          title="Personal access tokens can be used to control your whole account and use features added in the future. Be careful when sharing them!"
-          className="mb-6 w-full"
-        />
-      </div>
-      <div className="space-y-4">
-        {newToken && <NewTokenBanner token={newToken} />}
-        <AccessTokenList />
-      </div>
-    </div>
+    </ScaffoldContainer>
   )
 }