feat(ui): establish Settings page layout primitives

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

@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from "react";
 
-import { Box, Button, Paper, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 
 import { api } from "../api";
 import { Company, JobApplication } from "../types";
@@ -248,13 +249,7 @@ export default function ImportExportJobs() {
   const helper = useMemo(() => t("importExportBody"), [t]);
 
   return (
-    <Paper sx={{ mt: 2, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        {t("importExportTitle")}
-      </Typography>
-      <Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>
-        {helper}
-      </Typography>
+    <PageSection level="h3" title={t("importExportTitle")} description={helper}>
 
       <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center" }}>
         <Button variant="outlined" onClick={() => void exportAll("json")}>{t("exportJson")}</Button>
@@ -276,6 +271,6 @@ export default function ImportExportJobs() {
           </Typography>
         )}
       </Box>
-    </Paper>
+    </PageSection>
   );
 }