Skip to content

Commit b111a20

Browse files
gabrielmferngabrielmfern
committed
feat(demo): use Tailwind v4 in stripe-welcome.tsx (#2531)
1 parent 0d9d7c2 commit b111a20

File tree

2 files changed

+101
-130
lines changed

2 files changed

+101
-130
lines changed

‎apps/demo/emails/tailwind.config.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@ export default {
55
theme: {
66
fontFamily: {
77
amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'],
8+
stripe: [
9+
'-apple-system',
10+
'BlinkMacSystemFont',
11+
'"Segoe UI"',
12+
'Roboto',
13+
'"Helvetica Neue"',
14+
'Ubuntu',
15+
'sans-serif',
16+
],
817
},
918
},
1019
} satisfies TailwindConfig;

‎apps/demo/emails/welcome/stripe-welcome.tsx‎

Lines changed: 92 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ import {
99
Link,
1010
Preview,
1111
Section,
12+
Tailwind,
1213
Text,
1314
} from '@react-email/components';
15+
import tailwindConfig from '../tailwind.config';
1416

1517
const baseUrl = process.env.VERCEL_URL
1618
? `https://${process.env.VERCEL_URL}`
@@ -19,138 +21,98 @@ const baseUrl = process.env.VERCEL_URL
1921
export const StripeWelcomeEmail = () => (
2022
<Html>
2123
<Head />
22-
<Body style={main}>
23-
<Preview>You're now ready to make live transactions with Stripe!</Preview>
24-
<Container style={container}>
25-
<Section style={box}>
26-
<Img
27-
src={`${baseUrl}/static/stripe-logo.png`}
28-
width="49"
29-
height="21"
30-
alt="Stripe"
31-
/>
32-
<Hr style={hr} />
33-
<Text style={paragraph}>
34-
Thanks for submitting your account information. You're now ready to
35-
make live transactions with Stripe!
36-
</Text>
37-
<Text style={paragraph}>
38-
You can view your payments and a variety of other information about
39-
your account right from your dashboard.
40-
</Text>
41-
<Button style={button} href="https://dashboard.stripe.com/login">
42-
View your Stripe Dashboard
43-
</Button>
44-
<Hr style={hr} />
45-
<Text style={paragraph}>
46-
If you haven't finished your integration, you might find our{' '}
47-
<Link
48-
style={anchor}
49-
href="https://docs.stripe.com/dashboard/basics"
24+
<Tailwind config={tailwindConfig}>
25+
<Body className="bg-[#f6f9fc] font-stripe">
26+
<Preview>
27+
You're now ready to make live transactions with Stripe!
28+
</Preview>
29+
<Container className="bg-white mx-auto py-5 pb-12 mb-16">
30+
<Section className="px-12">
31+
<Img
32+
src={`${baseUrl}/static/stripe-logo.png`}
33+
width="49"
34+
height="21"
35+
alt="Stripe"
36+
/>
37+
<Hr className="border-[#e6ebf1] my-5" />
38+
<Text className="text-[#525f7f] text-base leading-6 text-left">
39+
Thanks for submitting your account information. You're now ready
40+
to make live transactions with Stripe!
41+
</Text>
42+
<Text className="text-[#525f7f] text-base leading-6 text-left">
43+
You can view your payments and a variety of other information
44+
about your account right from your dashboard.
45+
</Text>
46+
<Button
47+
className="bg-[#656ee8] rounded-[3px] text-white text-[16px] font-bold no-underline text-center block p-[10px]"
48+
href="https://dashboard.stripe.com/login"
5049
>
51-
docs
52-
</Link>{' '}
53-
handy.
54-
</Text>
55-
<Text style={paragraph}>
56-
Once you're ready to start accepting payments, you'll just need to
57-
use your live{' '}
58-
<Link
59-
style={anchor}
60-
href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
61-
>
62-
API keys
63-
</Link>{' '}
64-
instead of your test API keys. Your account can simultaneously be
65-
used for both test and live requests, so you can continue testing
66-
while accepting live payments. Check out our{' '}
67-
<Link
68-
style={anchor}
69-
href="https://docs.stripe.com/dashboard/basics"
70-
>
71-
tutorial about account basics
72-
</Link>
73-
.
74-
</Text>
75-
<Text style={paragraph}>
76-
Finally, we've put together a{' '}
77-
<Link
78-
style={anchor}
79-
href="https://docs.stripe.com/get-started/checklist/website"
80-
>
81-
quick checklist
82-
</Link>{' '}
83-
to ensure your website conforms to card network standards.
84-
</Text>
85-
<Text style={paragraph}>
86-
We'll be here to help you with any step along the way. You can find
87-
answers to most questions and get in touch with us on our{' '}
88-
<Link style={anchor} href="https://support.stripe.com">
89-
support site
90-
</Link>
91-
.
92-
</Text>
93-
<Text style={paragraph}>— The Stripe team</Text>
94-
<Hr style={hr} />
95-
<Text style={footer}>
96-
Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
97-
</Text>
98-
</Section>
99-
</Container>
100-
</Body>
50+
View your Stripe Dashboard
51+
</Button>
52+
<Hr className="border-[#e6ebf1] my-5" />
53+
<Text className="text-[#525f7f] text-base leading-6 text-left">
54+
If you haven't finished your integration, you might find our{' '}
55+
<Link
56+
className="text-[#556cd6]"
57+
href="https://docs.stripe.com/dashboard/basics"
58+
>
59+
docs
60+
</Link>{' '}
61+
handy.
62+
</Text>
63+
<Text className="text-[#525f7f] text-base leading-6 text-left">
64+
Once you're ready to start accepting payments, you'll just need to
65+
use your live{' '}
66+
<Link
67+
className="text-[#556cd6]"
68+
href="https://dashboard.stripe.com/login?redirect=%2Fapikeys"
69+
>
70+
API keys
71+
</Link>{' '}
72+
instead of your test API keys. Your account can simultaneously be
73+
used for both test and live requests, so you can continue testing
74+
while accepting live payments. Check out our{' '}
75+
<Link
76+
className="text-[#556cd6]"
77+
href="https://docs.stripe.com/dashboard/basics"
78+
>
79+
tutorial about account basics
80+
</Link>
81+
.
82+
</Text>
83+
<Text className="text-[#525f7f] text-base leading-6 text-left">
84+
Finally, we've put together a{' '}
85+
<Link
86+
className="text-[#556cd6]"
87+
href="https://docs.stripe.com/get-started/checklist/website"
88+
>
89+
quick checklist
90+
</Link>{' '}
91+
to ensure your website conforms to card network standards.
92+
</Text>
93+
<Text className="text-[#525f7f] text-base leading-6 text-left">
94+
We'll be here to help you with any step along the way. You can
95+
find answers to most questions and get in touch with us on our{' '}
96+
<Link
97+
className="text-[#556cd6]"
98+
href="https://support.stripe.com"
99+
>
100+
support site
101+
</Link>
102+
.
103+
</Text>
104+
<Text className="text-[#525f7f] text-base leading-6 text-left">
105+
— The Stripe team
106+
</Text>
107+
<Hr className="border-[#e6ebf1] my-5" />
108+
<Text className="text-[#8898aa] text-xs leading-4">
109+
Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080
110+
</Text>
111+
</Section>
112+
</Container>
113+
</Body>
114+
</Tailwind>
101115
</Html>
102116
);
103117

104118
export default StripeWelcomeEmail;
105-
106-
const main = {
107-
backgroundColor: '#f6f9fc',
108-
fontFamily:
109-
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
110-
};
111-
112-
const container = {
113-
backgroundColor: '#ffffff',
114-
margin: '0 auto',
115-
padding: '20px 0 48px',
116-
marginBottom: '64px',
117-
};
118-
119-
const box = {
120-
padding: '0 48px',
121-
};
122-
123-
const hr = {
124-
borderColor: '#e6ebf1',
125-
margin: '20px 0',
126-
};
127-
128-
const paragraph = {
129-
color: '#525f7f',
130-
131-
fontSize: '16px',
132-
lineHeight: '24px',
133-
textAlign: 'left' as const,
134-
};
135-
136-
const anchor = {
137-
color: '#556cd6',
138-
};
139-
140-
const button = {
141-
backgroundColor: '#656ee8',
142-
borderRadius: '5px',
143-
color: '#fff',
144-
fontSize: '16px',
145-
fontWeight: 'bold',
146-
textDecoration: 'none',
147-
textAlign: 'center' as const,
148-
display: 'block',
149-
padding: '10px',
150-
};
151-
152-
const footer = {
153-
color: '#8898aa',
154-
fontSize: '12px',
155-
lineHeight: '16px',
156-
};

0 commit comments

Comments
 (0)