diff --git a/apps/demo/emails/reviews/amazon-review.tsx b/apps/demo/emails/reviews/amazon-review.tsx index 08fb4a2ffb..02da9acef4 100644 --- a/apps/demo/emails/reviews/amazon-review.tsx +++ b/apps/demo/emails/reviews/amazon-review.tsx @@ -10,8 +10,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface AmazonReviewEmailProps { titleText?: string; @@ -38,204 +40,158 @@ export const AmazonReviewEmail = ({ - - Amazon Review - -
- - - + + + Amazon Review + +
+ + + + Amazon Prime Logo + + + +
+ +
+ + + + {titleText} + + {reviewText} + + +
+ +
+ + Amazon Prime Logo - - - -
- -
- - - {titleText} - {reviewText} - - -
- -
- - - Amazon Book - - - - - 14 Habits of Highly Productive Developers (English Edition) - - Start with rating this product - - {reviwStars.map((star, index) => ( + + + + + 14 Habits of Highly Productive Developers (English Edition) + + Start with rating this product + + {reviwStars.map((star, index) => ( + Amazon Rating + ))} + + + Your reviews will be posted on Amazon using your public + name. + Check your public name. + + + +
+ +
+ + + + How about evaluating a previous purchase?{' '} + + View more + + + + +
+ +
+ +
+ + Amazon Rating - ))} - - - Your reviews will be posted on Amazon using your public name. - Check your public name. + + + + {socialMediaIcons.map((src, index) => ( + Amazon Social Midia + ))} + + +
+ +
+ + + Customer reviews must adhere to the{' '} + + Community Guidelines + {' '} + . - - -
- -
- - - - How about evaluating a previous purchase?{' '} - View more + + We hope this message was helpful to you. However, if you + prefer not to receive this type of communication from{' '} + + Amazon.com + {' '} + at{' '} + + alanturing@gmail.com{' '} + + ,{' '} + + click here + {' '} + . - - -
- -
- -
- - - Amazon Logo - - - - {socialMediaIcons.map((src, index) => ( - Amazon Social Midia - ))} - - -
- -
- - - Customer reviews must adhere to the{' '} - Community Guidelines . - - - We hope this message was helpful to you. However, if you prefer - not to receive this type of communication from{' '} - Amazon.com at{' '} - alanturing@gmail.com ,{' '} - click here . - - - Please note that product prices and availability are subject to - change. - - - © 2023 Amazon.com, Inc. or its affiliates. Amazon and all - associated marks are trademarks of Amazon.com, Inc. or its - affiliates. - - Reference: 706784740 - -
- - + + Please note that product prices and availability are subject + to change. + + + © 2023 Amazon.com, Inc. or its affiliates. Amazon and all + associated marks are trademarks of Amazon.com, Inc. or its + affiliates. + + + Reference: 706784740 + + +
+ + + ); }; -export default AmazonReviewEmail; - -const main = { - fontFamily: 'Ember,Helvetica,Arial,sans-seri', - backgroundColor: '#ffffff', -}; - -const container = { - borderTop: '4px solid #FF9900', - margin: '0 auto', - padding: '20px', - width: '640px', -}; - -const title = { - color: '#232f3e', - fontSize: '36px', - lineHeight: '38px', - fontWeight: '400', - margin: '20px 0', -}; - -const ratingContent = { - paddingLeft: '30px', -}; +AmazonReviewEmail.tailwindConfig = tailwindConfig; -const rating = { - display: 'inline-block', -}; - -const previewPurchase = { - background: '#008296', - color: '#ffffff', - padding: '8px 0', -}; - -const previewPurchaseLink = { - color: '#ffffff', - textDecoration: 'underline', - cursor: 'pointer', -}; - -const socialMedia = { - display: 'inline-block', - marginLeft: '10px', -}; - -const communityLink = { - color: '#666666', - textDecoration: 'underline', - cursor: 'pointer', -}; - -const clickHereLink = { - color: '#999999', - textDecoration: 'underline', - cursor: 'pointer', -}; - -const urlLink = { - color: '#1155cc', - textDecoration: 'underline', - cursor: 'pointer', -}; - -const footerText = { - fontSize: '10px', - color: '#666666', - margin: '8px 0', -}; +export default AmazonReviewEmail; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 3c1a2b8acb..818e585c13 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -2,4 +2,9 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components'; export default { presets: [pixelBasedPreset], + theme: { + fontFamily: { + amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + }, + }, } satisfies TailwindConfig;