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
+
+
+ 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,
},