From 968d108c28d6411f53e51717a457f78aa113c9a7 Mon Sep 17 00:00:00 2001 From: "t.indorf" Date: Tue, 19 May 2026 10:29:42 +0200 Subject: [PATCH] Improve invite email layout --- src/emails/InviteEmail.tsx | 81 ++++++++++++++++++++------------------ 1 file changed, 43 insertions(+), 38 deletions(-) diff --git a/src/emails/InviteEmail.tsx b/src/emails/InviteEmail.tsx index b0528d5..a8d27f4 100644 --- a/src/emails/InviteEmail.tsx +++ b/src/emails/InviteEmail.tsx @@ -4,7 +4,6 @@ import { Container, Head, Heading, - Hr, Html, Preview, Section, @@ -30,15 +29,16 @@ export function InviteEmail({ Aktiviere deinen Kita-Planer Account für {kitaName} -
- Kita-Planer +
+
+ Kita-Planer +
+ Einladung zur Kita-App Willkommen bei {kitaName} Hallo {parentName}, dein Eltern-Account wurde vorbereitet. -
-
Ü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({ {inviteLink}
-
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, },