Merge branch 'codex/improve-invite-email'

2026-05-19 10:51:57 +02:00
parent b5eb288104 968d108c28
commit 811468a22b
1 changed files with 43 additions and 38 deletions
@@ -4,7 +4,6 @@ import {
  Container,
  Head,
  Heading,
-  Hr,
  Html,
  Preview,
  Section,
@@ -30,15 +29,16 @@ export function InviteEmail({
      <Preview>Aktiviere deinen Kita-Planer Account für {kitaName}</Preview>
      <Body style={styles.body}>
        <Container style={styles.container}>
-          <Section style={styles.header}>
+          <Section style={styles.card}>
+            <Section style={styles.brandBar}>
              <Text style={styles.brand}>Kita-Planer</Text>
+            </Section>
+            <Text style={styles.kicker}>Einladung zur Kita-App</Text>
            <Heading style={styles.heading}>Willkommen bei {kitaName}</Heading>
            <Text style={styles.lead}>
              Hallo {parentName}, dein Eltern-Account wurde vorbereitet.
            </Text>
-          </Section>

-          <Section style={styles.card}>
            <Text style={styles.text}>
              Über den folgenden Link kannst du dein Passwort setzen und deinen
              Account aktivieren. Danach hast du Zugriff auf die Kita-Planung,
@@ -56,7 +56,6 @@ export function InviteEmail({
            <Text style={styles.linkText}>{inviteLink}</Text>
          </Section>

-          <Hr style={styles.hr} />
          <Text style={styles.footer}>
            Diese Einladung wurde von deiner Kita erstellt. Wenn du sie nicht
            erwartet hast, kannst du diese E-Mail ignorieren.
@@ -76,54 +75,64 @@ const styles = {
    padding: "32px 20px",
    fontFamily: fontStack,
  },
-  header: {
-    padding: "28px 28px 20px",
+  card: {
+    padding: "0 28px 28px",
+    backgroundColor: colors.cardBg,
+    borderRadius: "10px",
+    border: `1px solid ${colors.border}`,
+    boxShadow: "0 10px 26px rgba(31, 59, 45, 0.08)",
+    overflow: "hidden",
+    fontFamily: fontStack,
+  },
+  brandBar: {
+    margin: "0 -28px 28px",
+    padding: "14px 28px",
    backgroundColor: colors.brandGreen,
-    borderRadius: "8px 8px 0 0",
    fontFamily: fontStack,
  },
  brand: {
-    margin: "0 0 28px",
+    margin: 0,
    color: colors.eyebrow,
-    fontSize: "13px",
-    fontWeight: 700,
+    fontSize: "12px",
+    fontWeight: 800,
    letterSpacing: "0.08em",
    textTransform: "uppercase" as const,
    fontFamily: fontStack,
  },
+  kicker: {
+    margin: "0 0 10px",
+    color: colors.brandGreenAccent,
+    fontSize: "12px",
+    fontWeight: 800,
+    letterSpacing: "0.06em",
+    textTransform: "uppercase" as const,
+    fontFamily: fontStack,
+  },
  heading: {
-    margin: "0 0 12px",
-    color: colors.textHeader,
-    fontSize: "30px",
-    lineHeight: "1.18",
+    margin: "0 0 14px",
+    color: colors.textPrimary,
+    fontSize: "28px",
+    lineHeight: "34px",
    fontWeight: 800,
    fontFamily: fontStack,
  },
  lead: {
-    margin: 0,
-    color: colors.lead,
+    margin: "0 0 22px",
+    color: colors.textBody,
    fontSize: "16px",
-    lineHeight: "1.55",
-    fontFamily: fontStack,
-  },
-  card: {
-    padding: "28px",
-    backgroundColor: colors.cardBg,
-    borderRadius: "0 0 8px 8px",
-    border: `1px solid ${colors.border}`,
-    borderTop: "0",
+    lineHeight: "24px",
    fontFamily: fontStack,
  },
  text: {
    margin: "0 0 24px",
    color: colors.textBody,
-    fontSize: "16px",
-    lineHeight: "1.65",
+    fontSize: "15px",
+    lineHeight: "24px",
    fontFamily: fontStack,
  },
  button: {
    display: "inline-block",
-    padding: "14px 22px",
+    padding: "14px 20px",
    backgroundColor: colors.brandGreen,
    color: "#ffffff",
    borderRadius: "6px",
@@ -136,26 +145,22 @@ const styles = {
    margin: "28px 0 8px",
    color: colors.textMuted,
    fontSize: "13px",
-    lineHeight: "1.5",
+    lineHeight: "20px",
    fontFamily: fontStack,
  },
  linkText: {
    margin: 0,
    color: colors.link,
    fontSize: "13px",
-    lineHeight: "1.5",
+    lineHeight: "20px",
    wordBreak: "break-all" as const,
    fontFamily: fontStack,
  },
-  hr: {
-    margin: "24px 0",
-    borderColor: colors.hr,
-  },
  footer: {
-    margin: 0,
+    margin: "20px 0 0",
    color: colors.textFaint,
    fontSize: "12px",
-    lineHeight: "1.5",
+    lineHeight: "18px",
    textAlign: "center" as const,
    fontFamily: fontStack,
  },