feat(ui): establish Settings page layout primitives

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 
-import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
+import { Alert, Box, Button, TextField, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 
 import { api, getApiErrorMessage } from "../api";
 import { useToast } from "../toast";
@@ -50,12 +51,9 @@ export default function RulesSettingsCard() {
 
   if (!s) {
     return (
-      <Paper sx={{ mt: 2, p: 2 }}>
-        <Typography variant="h6" sx={{ mb: 1 }}>
-          {t("rulesTitle")}
-        </Typography>
+      <PageSection surface title={t("rulesTitle")}>
         {loadError ? <Alert severity="error">{loadError}</Alert> : <Typography sx={{ color: "text.secondary" }}>{t("rulesLoading")}</Typography>}
-      </Paper>
+      </PageSection>
     );
   }
 
@@ -68,13 +66,7 @@ export default function RulesSettingsCard() {
   });
 
   return (
-    <Paper sx={{ mt: 2, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        {t("rulesTitle")}
-      </Typography>
-      <Typography variant="body2" sx={{ color: "text.secondary", mb: 2 }}>
-        {t("rulesBody")}
-      </Typography>
+    <PageSection surface title={t("rulesTitle")} description={t("rulesBody")}>
 
       <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2 }}>
         <TextField label={t("rulesAppliedFollowUpDays")} {...num("appliedFollowUpDays")} />
@@ -93,6 +85,6 @@ export default function RulesSettingsCard() {
           {saving ? t("rulesSaving") : t("rulesSave")}
         </Button>
       </Box>
-    </Paper>
+    </PageSection>
   );
 }