diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 818e585c13..0e2be54cdf 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -5,6 +5,15 @@ export default { theme: { fontFamily: { amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + stripe: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Ubuntu', + 'sans-serif', + ], }, }, } satisfies TailwindConfig; diff --git a/apps/demo/emails/welcome/stripe-welcome.tsx b/apps/demo/emails/welcome/stripe-welcome.tsx index 9422531e01..1ceac00d5d 100644 --- a/apps/demo/emails/welcome/stripe-welcome.tsx +++ b/apps/demo/emails/welcome/stripe-welcome.tsx @@ -9,8 +9,10 @@ import { Link, Preview, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` @@ -19,138 +21,98 @@ const baseUrl = process.env.VERCEL_URL export const StripeWelcomeEmail = () => ( - - You're now ready to make live transactions with Stripe! - -
- Stripe -
- - Thanks for submitting your account information. You're now ready to - make live transactions with Stripe! - - - You can view your payments and a variety of other information about - your account right from your dashboard. - - -
- - If you haven't finished your integration, you might find our{' '} - + + + You're now ready to make live transactions with Stripe! + + +
+ Stripe +
+ + Thanks for submitting your account information. You're now ready + to make live transactions with Stripe! + + + You can view your payments and a variety of other information + about your account right from your dashboard. + +
- - + View your Stripe Dashboard + +
+ + If you haven't finished your integration, you might find our{' '} + + docs + {' '} + handy. + + + Once you're ready to start accepting payments, you'll just need to + use your live{' '} + + API keys + {' '} + instead of your test API keys. Your account can simultaneously be + used for both test and live requests, so you can continue testing + while accepting live payments. Check out our{' '} + + tutorial about account basics + + . + + + Finally, we've put together a{' '} + + quick checklist + {' '} + to ensure your website conforms to card network standards. + + + We'll be here to help you with any step along the way. You can + find answers to most questions and get in touch with us on our{' '} + + support site + + . + + + — The Stripe team + +
+ + Stripe, 354 Oyster Point Blvd, South San Francisco, CA 94080 + +
+ + + ); export default StripeWelcomeEmail; - -const main = { - backgroundColor: '#f6f9fc', - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif', -}; - -const container = { - backgroundColor: '#ffffff', - margin: '0 auto', - padding: '20px 0 48px', - marginBottom: '64px', -}; - -const box = { - padding: '0 48px', -}; - -const hr = { - borderColor: '#e6ebf1', - margin: '20px 0', -}; - -const paragraph = { - color: '#525f7f', - - fontSize: '16px', - lineHeight: '24px', - textAlign: 'left' as const, -}; - -const anchor = { - color: '#556cd6', -}; - -const button = { - backgroundColor: '#656ee8', - borderRadius: '5px', - color: '#fff', - fontSize: '16px', - fontWeight: 'bold', - textDecoration: 'none', - textAlign: 'center' as const, - display: 'block', - padding: '10px', -}; - -const footer = { - color: '#8898aa', - fontSize: '12px', - lineHeight: '16px', -};