Fix mail layouts, /invite form-reset, profile validation

Mail templates (6 templates touched): - New shared `_styles.ts` exports a robust font stack starting with Arial/Helvetica so mail readers that lack -apple-system and BlinkMacSystemFont don't fall back to Monospace (observed in at least one webmail client). - `fontFamily` is now set on every text-bearing element, not only on `<Body>`, because some clients (Outlook, several webmail readers) do not inherit body CSS into nested sections. - ASCII substitutions are gone: "Ueber" → "Über", "fuer" → "für", "bestaetigen" → "bestätigen", "uebernehmen" → "übernehmen", "verlaesslich" → "verlässlich". - InviteEmail + NewsEmail buttons switch from the off-brand yellow (#f0b84b) to the brand dark green so the CTA matches the header. /invite form: - InviteState gains an `attempt` counter plus echoed checkbox `values`, mirroring the /register and /onboarding fix from earlier branches. A failed submit no longer wipes the Datenschutz / Adressbuch-Opt-In ticks. Passwords stay empty for security. - Field error <p> elements gain role="alert" + aria-live="polite" so screen readers announce validation failures on submit. Inputs use aria-describedby to link to error / helper text. Profile validation: - Telephone numbers must match a permissive pattern that still rejects obvious garbage (previously "abc-123-not-a-phone" was accepted). - Postal codes must match an alphanumeric pattern of 3–10 chars (previously "ABCDE" was accepted). - Child date-of-birth is now validated via superRefine: it must be a parseable date, not in the future, and not before 1900. Previously a kid born in 2030 was accepted. - The three Profil server actions now surface the first Zod issue message instead of generic "Ungültige Eingabedaten." toasts. Misc: - "fuer" → "für" in the Adressbuch page subtitle. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-17 23:49:01 +02:00
parent 211bb9e300
commit fa06da324c
11 changed files with 304 additions and 69 deletions
@@ -11,6 +11,8 @@ import {
  Text,
 } from "@react-email/components";

+import { fontStack } from "./_styles";
+
 type AlertEmailProps = {
  date: string;
  childName: string;
@@ -25,26 +27,26 @@ export function AlertEmail({
  return (
    <Html lang="de">
      <Head />
-      <Preview>Dringender Notdienst-Alarm fuer {date}</Preview>
+      <Preview>Dringender Notdienst-Alarm für {date}</Preview>
      <Body style={styles.body}>
        <Container style={styles.container}>
          <Section style={styles.alertBar}>
            <Text style={styles.kicker}>Dringend</Text>
-            <Heading style={styles.heading}>Notdienst heute bestaetigen</Heading>
+            <Heading style={styles.heading}>Notdienst heute bestätigen</Heading>
            <Text style={styles.lead}>
-              Eine Fachkraft ist ausgefallen. Fuer {childName} ist ein
+              Eine Fachkraft ist ausgefallen. Für {childName} ist ein
              Notdienst-Einsatz am {date} hinterlegt.
            </Text>
          </Section>

          <Section style={styles.card}>
            <Text style={styles.text}>
-              Bitte bestaetige schnell, ob du den Notdienst uebernehmen kannst,
-              damit die Kita den Tag verlaesslich planen kann.
+              Bitte bestätige schnell, ob du den Notdienst übernehmen kannst,
+              damit die Kita den Tag verlässlich planen kann.
            </Text>

            <Button href={confirmLink} style={styles.button}>
-              Notdienst bestaetigen
+              Notdienst bestätigen
            </Button>

            <Section style={styles.detailBox}>
@@ -75,8 +77,7 @@ const styles = {
  body: {
    margin: 0,
    backgroundColor: "#fff7ed",
-    fontFamily:
-      '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontFamily: fontStack,
    color: "#30170f",
  },
  container: {
@@ -108,12 +109,14 @@ const styles = {
    fontSize: "30px",
    lineHeight: "1.16",
    fontWeight: 850,
+    fontFamily: fontStack,
  },
  lead: {
    margin: 0,
    color: "#ffe4e6",
    fontSize: "16px",
    lineHeight: "1.55",
+    fontFamily: fontStack,
  },
  card: {
    padding: "28px",
@@ -127,6 +130,7 @@ const styles = {
    color: "#44251a",
    fontSize: "16px",
    lineHeight: "1.65",
+    fontFamily: fontStack,
  },
  button: {
    display: "inline-block",
@@ -137,6 +141,7 @@ const styles = {
    fontSize: "15px",
    fontWeight: 800,
    textDecoration: "none",
+    fontFamily: fontStack,
  },
  detailBox: {
    margin: "28px 0 0",
@@ -182,5 +187,6 @@ const styles = {
    fontSize: "12px",
    lineHeight: "1.5",
    textAlign: "center" as const,
+    fontFamily: fontStack,
  },
 };