feat(ui): establish Settings page layout primitives

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 
-import { Box, Paper, TextField, Typography } from "@mui/material";
+import { Box, TextField, Typography } from "@mui/material";
+import { PageSection } from "../layout/PageLayout";
 
 import { useI18n } from "../i18n/I18nProvider";
 import { useToast } from "../toast";
@@ -24,9 +25,7 @@ export default function QuickCaptureCard() {
   }, [bookmarklet]);
 
   return (
-    <Paper sx={{ p: 2 }}>
-      <Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsQuickCaptureTitle")}</Typography>
-      <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsQuickCaptureSubtitle")}</Typography>
+    <PageSection surface title={t("settingsQuickCaptureTitle")} description={t("settingsQuickCaptureSubtitle")}>
 
       <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap", mb: 1.5 }}>
         <Box
@@ -64,6 +63,6 @@ export default function QuickCaptureCard() {
         InputProps={{ readOnly: true }}
         onFocus={(e) => e.target.select()}
       />
-    </Paper>
+    </PageSection>
   );
 }