feat(settings): preserve drafts and connection recovery

job-tracker-ui/src/views/ConnectedAccountsPage.tsx

@@ -1,24 +1,20 @@
 import React from "react";
 
-import { Box, Button, Paper, Typography } from "@mui/material";
+import { Box, Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 
 import EmailProviderConnections from "../components/EmailProviderConnections";
 import { useI18n } from "../i18n/I18nProvider";
+import { PageHeader } from "../layout/PageLayout";
 
 export default function ConnectedAccountsPage() {
   const navigate = useNavigate();
   const { t } = useI18n();
 
   return (
-    <Box sx={{ display: "grid", gap: 2 }}>
-      <Paper sx={{ p: 2.5, borderRadius: 4, boxShadow: "0px 8px 24px -12px rgba(15,23,42,0.12)" }}>
-        <Typography variant="h5" sx={{ fontWeight: 900, mb: 0.5 }}>{t("connectedAccounts")}</Typography>
-        <Typography sx={{ color: "text.secondary", maxWidth: 720 }}>
-          {t("connectedAccountsBody")}
-        </Typography>
-        <Button sx={{ mt: 1 }} onClick={() => navigate("/settings")}>{t("connectedAccountsBack")}</Button>
-      </Paper>
+    <Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
+      <PageHeader level="h2" title={t("connectedAccounts")} description={t("connectedAccountsBody")}
+        actions={<Button variant="outlined" onClick={() => navigate("/settings")}>{t("connectedAccountsBack")}</Button>} />
       <EmailProviderConnections />
     </Box>
   );