Skip to content

Commit 3dfbf2b

Browse files
florianbgtflorianbgt
committed
fix email styling
1 parent 31e17a0 commit 3dfbf2b

File tree

7 files changed

+918
-828
lines changed

7 files changed

+918
-828
lines changed

‎packages/core/src/email/templates/DowngradeEmail.tsx

Lines changed: 130 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { baseTemplate } from "./base.tsx";
2-
import { sharedStyles } from "./sharedStyles.ts";
32
import type {
43
StripeBillingCycle,
54
StripeProduct,
@@ -20,131 +19,144 @@ const DowngradeEmail = (props: {
2019
}) => {
2120
const previewText = "Confirmation of your subscription downgrade | NanoAPI";
2221

23-
return baseTemplate(
24-
previewText,
25-
<>
26-
{/* Header */}
27-
<div style={{ ...sharedStyles.centerText, ...sharedStyles.section }}>
28-
<div style={{ ...sharedStyles.iconCircle, backgroundColor: "#6b7280" }}>
29-
📋
30-
</div>
31-
<h1 style={sharedStyles.heading}>Subscription Change Confirmed</h1>
32-
<p style={sharedStyles.body}>
33-
Your subscription for <strong>"{props.workspaceName}"</strong>{" "}
34-
has been updated
35-
</p>
36-
</div>
37-
38-
{/* Plan Comparison */}
39-
<div style={{ ...sharedStyles.section, ...sharedStyles.contentSpacing }}>
40-
<h3 style={{ ...sharedStyles.subheading, ...sharedStyles.centerText }}>
41-
Your Plan Changes
42-
</h3>
43-
44-
<div style={sharedStyles.card}>
45-
<div style={{ marginBottom: "16px" }}>
46-
<div
47-
style={{
48-
...sharedStyles.small,
49-
textTransform: "uppercase",
50-
letterSpacing: "1px",
51-
}}
52-
>
53-
Current Plan
54-
</div>
55-
<div
56-
style={{ fontSize: "20px", fontWeight: "700", color: "#166534" }}
57-
>
58-
{props.oldSubscription.product}
59-
</div>
60-
<div style={sharedStyles.small}>
61-
{props.oldSubscription.billingCycle ?? "Custom billing cycle"}
62-
</div>
63-
</div>
64-
65-
<div
22+
const content = (
23+
<table cellPadding={0} cellSpacing={0} border={0} style={{ width: "100%" }}>
24+
<tr>
25+
<td>
26+
<h2
6627
style={{
67-
textAlign: "center",
68-
margin: "16px 0",
28+
margin: "0 0 20px 0",
6929
fontSize: "20px",
70-
color: "#6b7280",
30+
fontWeight: "bold",
31+
color: "#333333",
32+
fontFamily: "Arial, Helvetica, sans-serif",
7133
}}
7234
>
73-
⬇️
74-
</div>
75-
76-
<div>
77-
<div
35+
Subscription Change Confirmed
36+
</h2>
37+
<p
38+
style={{
39+
margin: "0 0 15px 0",
40+
fontSize: "14px",
41+
lineHeight: "1.5",
42+
color: "#333333",
43+
fontFamily: "Arial, Helvetica, sans-serif",
44+
}}
45+
>
46+
Your subscription for <strong>"{props.workspaceName}"</strong>{" "}
47+
has been updated
48+
</p>
49+
<h3
50+
style={{
51+
margin: "30px 0 15px 0",
52+
fontSize: "16px",
53+
fontWeight: "bold",
54+
color: "#333333",
55+
fontFamily: "Arial, Helvetica, sans-serif",
56+
}}
57+
>
58+
Your Plan Changes
59+
</h3>
60+
<p
61+
style={{
62+
margin: "0 0 10px 0",
63+
fontSize: "14px",
64+
lineHeight: "1.5",
65+
color: "#333333",
66+
fontFamily: "Arial, Helvetica, sans-serif",
67+
}}
68+
>
69+
<strong>Current Plan:</strong> {props.oldSubscription.product}{" "}
70+
({props.oldSubscription.billingCycle ?? "Custom billing cycle"})
71+
</p>
72+
<p
73+
style={{
74+
margin: "0 0 20px 0",
75+
fontSize: "14px",
76+
lineHeight: "1.5",
77+
color: "#333333",
78+
fontFamily: "Arial, Helvetica, sans-serif",
79+
}}
80+
>
81+
<strong>New Plan:</strong> {props.newSubscription.product}{" "}
82+
({props.newSubscription.billingCycle ?? "Custom billing cycle"})
83+
</p>
84+
<table
85+
cellPadding={0}
86+
cellSpacing={0}
87+
border={0}
88+
style={{ width: "100%", margin: "30px 0" }}
89+
>
90+
<tr>
91+
<td align="center">
92+
<table cellPadding={0} cellSpacing={0} border={0}>
93+
<tr>
94+
<td
95+
style={{
96+
backgroundColor: "#0066cc",
97+
padding: "12px 24px",
98+
}}
99+
>
100+
<a
101+
href="https://app.nanoapi.io"
102+
style={{
103+
color: "#ffffff",
104+
textDecoration: "none",
105+
fontSize: "16px",
106+
fontFamily: "Arial, Helvetica, sans-serif",
107+
fontWeight: "bold",
108+
display: "block",
109+
}}
110+
>
111+
Open App
112+
</a>
113+
</td>
114+
</tr>
115+
</table>
116+
</td>
117+
</tr>
118+
</table>
119+
<p
120+
style={{
121+
margin: "20px 0 0 0",
122+
fontSize: "14px",
123+
lineHeight: "1.5",
124+
color: "#666666",
125+
fontFamily: "Arial, Helvetica, sans-serif",
126+
}}
127+
>
128+
Your current subscription will remain active until the end of your
129+
billing period. The new subscription will take effect on{" "}
130+
<strong>{props.newSubscriptionDate}</strong>.
131+
</p>
132+
<p
133+
style={{
134+
margin: "20px 0 0 0",
135+
fontSize: "14px",
136+
lineHeight: "1.5",
137+
color: "#666666",
138+
fontFamily: "Arial, Helvetica, sans-serif",
139+
}}
140+
>
141+
Have questions about your subscription change? Our{" "}
142+
<a
143+
href="mailto:[email protected]"
78144
style={{
79-
...sharedStyles.small,
80-
textTransform: "uppercase",
81-
letterSpacing: "1px",
145+
color: "#0066cc",
146+
textDecoration: "underline",
147+
fontFamily: "Arial, Helvetica, sans-serif",
82148
}}
83149
>
84-
New Plan
85-
</div>
86-
<div
87-
style={{ fontSize: "20px", fontWeight: "700", color: "#991b1b" }}
88-
>
89-
{props.newSubscription.product}
90-
</div>
91-
<div style={sharedStyles.small}>
92-
{props.newSubscription.billingCycle ?? "Custom billing cycle"}
93-
</div>
94-
</div>
95-
</div>
96-
</div>
97-
98-
{/* Effective Date */}
99-
<div
100-
style={{ ...sharedStyles.warningBox, ...sharedStyles.contentSpacing }}
101-
>
102-
<h3
103-
style={{
104-
...sharedStyles.subheading,
105-
fontSize: "16px",
106-
margin: "0 0 8px 0",
107-
color: "#92400e",
108-
}}
109-
>
110-
Effective Date
111-
</h3>
112-
<p style={{ ...sharedStyles.small, color: "#92400e", margin: 0 }}>
113-
Your current subscription will remain active until the end of your
114-
billing period. The new subscription will take effect on{" "}
115-
<strong>{props.newSubscriptionDate}</strong>.
116-
</p>
117-
</div>
118-
119-
{/* Support */}
120-
<div
121-
style={{
122-
...sharedStyles.card,
123-
...sharedStyles.centerText,
124-
...sharedStyles.contentSpacing,
125-
}}
126-
>
127-
<p style={{ ...sharedStyles.small, margin: 0 }}>
128-
Have questions about your subscription change? Our{" "}
129-
<a href="mailto:[email protected]" style={sharedStyles.link}>
130-
support team
131-
</a>{" "}
132-
is here to help you.
133-
</p>
134-
</div>
135-
136-
{/* Footer */}
137-
<div style={{ ...sharedStyles.divider, ...sharedStyles.centerText }}>
138-
<p style={{ ...sharedStyles.body, margin: "0 0 8px 0" }}>
139-
Thank you for being part of our community! 🙏
140-
</p>
141-
<p style={sharedStyles.small}>
142-
Best regards,<br />
143-
The NanoAPI Team
144-
</p>
145-
</div>
146-
</>,
150+
support team
151+
</a>{" "}
152+
is here to help you.
153+
</p>
154+
</td>
155+
</tr>
156+
</table>
147157
);
158+
159+
return baseTemplate(previewText, content);
148160
};
149161

150162
DowngradeEmail.PreviewProps = {

0 commit comments

Comments
 (0)