feat(ui): establish Settings page layout primitives

job-tracker-ui/src/components/BackupCard.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 
-import { Alert, Box, Button, Divider, Paper, Typography } from "@mui/material";
+import { Alert, Box, Button, Divider, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 import { api, getApiErrorMessage } from "../api";
 import { clearAuthClientState } from "../auth";
 import { useToast } from "../toast";
@@ -95,10 +96,7 @@ export default function BackupCard() {
   };
 
   return (
-    <Paper sx={{ mt: 2, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        {t("backupTitle")}
-      </Typography>
+    <PageSection surface title={t("backupTitle")}>
       <Typography sx={{ color: "text.secondary", mb: 1 }}>
         {t("accountExportBody")}
       </Typography>
@@ -109,7 +107,7 @@ export default function BackupCard() {
       </Box>
       <Alert severity="info" sx={{ mt: 1.5 }}>{t("accountExportRecentSignIn")}</Alert>
       <Divider sx={{ my: 2 }} />
-      <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 0.5 }}>{t("backupEncryptedTitle")}</Typography>
+      <Typography component="h3" variant="sectionTitle">{t("backupEncryptedTitle")}</Typography>
       <Typography sx={{ color: "text.secondary", mb: 1 }}>
         {t("backupBody")}
       </Typography>
@@ -119,7 +117,7 @@ export default function BackupCard() {
         </Button>
       </Box>
       <Divider sx={{ my: 2 }} />
-      <Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 0.5 }}>{t("accountDeleteTitle")}</Typography>
+      <Typography component="h3" variant="sectionTitle">{t("accountDeleteTitle")}</Typography>
       {lifecycle?.deletionStatus === "pending" ? (
         <Alert severity="warning">{t("accountDeletePending", { stage: lifecycle.request?.stage ?? "pending" })}</Alert>
       ) : lifecycle?.deletionEnabled ? (
@@ -132,6 +130,6 @@ export default function BackupCard() {
       ) : (
         <Alert severity="info">{t("accountDeleteDisabled")}</Alert>
       )}
-    </Paper>
+    </PageSection>
   );
 }