feat(auth): migrate account security presentation

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

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
 
-import { Box, Button, Chip, Paper, Typography } from "@mui/material";
+import { Box, Button, Chip, Typography } from "@mui/material";
 
 import { api, getApiErrorMessage } from "../api";
 import { clearAuthClientState, getAuthPersistencePreference } from "../auth";
 import TwoFactorChallenge from "./TwoFactorChallenge";
 import { useToast } from "../toast";
 import { useI18n } from "../i18n/I18nProvider";
+import { PageSection } from "../layout/PageLayout";
 
 declare global {
   interface Window {
@@ -77,7 +78,7 @@ function loadGoogleScript(): Promise<void> {
 
 export default function GoogleAuthCard({ onSignedIn, presentation = "account" }: { onSignedIn?: () => void; presentation?: "account" | "sign-in" }) {
   const { toast } = useToast();
-  const { t } = useI18n();
+  const { t, language } = useI18n();
   const [me, setMe] = useState<MeResponse | null>(null);
   const [working, setWorking] = useState(false);
   const [allowRegistration, setAllowRegistration] = useState(false);
@@ -197,11 +198,7 @@ export default function GoogleAuthCard({ onSignedIn, presentation = "account" }:
   }
 
   return (
-    <Paper sx={{ mt: 2, p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 1 }}>
-        {t("googleAccountTitle")}
-      </Typography>
-
+    <PageSection title={t("googleAccountTitle")} surface>
       {!clientId && (
         <Typography sx={{ color: "text.secondary" }}>
           {t("googleSetupHint")}
@@ -225,7 +222,7 @@ export default function GoogleAuthCard({ onSignedIn, presentation = "account" }:
         <Box sx={{ display: "flex", flexDirection: "column", gap: 1.25 }}>
           <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
             <Chip size="small" label={me?.googleLink?.linked ? t("googleLinked") : t("googleAvailableToLink")} color={me?.googleLink?.linked ? "success" : "default"} variant={me?.googleLink?.linked ? "filled" : "outlined"} />
-            {me?.googleLink?.linkedAt ? <Chip size="small" variant="outlined" label={t("googleLinkedDate", { date: new Date(me.googleLink.linkedAt).toLocaleDateString() })} /> : null}
+            {me?.googleLink?.linkedAt ? <Chip size="small" variant="outlined" label={t("googleLinkedDate", { date: new Date(me.googleLink.linkedAt).toLocaleDateString(language === "nb" ? "nb-NO" : "en") })} /> : null}
           </Box>
 
           {!signedIn ? (
@@ -295,6 +292,6 @@ export default function GoogleAuthCard({ onSignedIn, presentation = "account" }:
           ) : null}
         </Box>
       )}
-    </Paper>
+    </PageSection>
   );
 }