diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx index 5b56a4a219..b632bf6bdf 100644 --- a/apps/demo/emails/notifications/yelp-recent-login.tsx +++ b/apps/demo/emails/notifications/yelp-recent-login.tsx @@ -10,8 +10,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface YelpRecentLoginEmailProps { userFirstName?: string; @@ -39,106 +41,85 @@ export const YelpRecentLoginEmail = ({ return ( - - - Yelp recent login - -
- Yelp logo -
- -
- + + + + Yelp recent login + +
+ Yelp logo +
+ +
+ + Yelp header illustration + + + + + + Hi {userFirstName}, + + + We noticed a recent login to your Yelp account. + + + + Time: + {formattedDate} + + + Device: + {loginDevice} + + + Location: + {loginLocation} + + + *Approximate geographic location based on IP address: + {loginIp} + + + + If this was you, there's nothing else you need to do. + + + If this wasn't you or if you have additional questions, + please see our support page. + + + + + + + + +
+ +
Yelp header illustration - - - - - - Hi {userFirstName}, - - - We noticed a recent login to your Yelp account. - - - - Time: - {formattedDate} - - - Device: - {loginDevice} - - - Location: - {loginLocation} - - - *Approximate geographic location based on IP address: - {loginIp} - - - - If this was you, there's nothing else you need to do. - - - If this wasn't you or if you have additional questions, please - see our support page. - - - - - - - - -
- -
- Yelp footer decoration -
- - - © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, - U.S.A. | www.yelp.com - - - +
+ + + © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, + U.S.A. | www.yelp.com + + + + ); }; @@ -152,51 +133,3 @@ YelpRecentLoginEmail.PreviewProps = { } as YelpRecentLoginEmailProps; export default YelpRecentLoginEmail; - -const main = { - backgroundColor: '#fff', - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', -}; - -const paragraph = { - fontSize: 16, -}; - -const logo = { - padding: '30px 20px', -}; - -const buttonContainer = { - textAlign: 'center' as const, -}; - -const button = { - backgroundColor: '#e00707', - borderRadius: 3, - color: '#FFF', - fontWeight: 'bold', - border: '1px solid rgb(0,0,0, 0.1)', - cursor: 'pointer', - display: 'inline-block', - padding: '12px 30px', - textDecoration: 'none', -}; - -const content = { - border: '1px solid rgb(0,0,0, 0.1)', - borderRadius: '3px', - overflow: 'hidden', -}; - -const image = { - maxWidth: '100%', -}; - -const boxInfos = { - padding: '20px', -}; - -const containerImageFooter = { - padding: '45px 0 0 0', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 3c1a2b8acb..5847110442 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -2,4 +2,21 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components'; export default { presets: [pixelBasedPreset], + theme: { + extend: { + fontFamily: { + yelp: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + 'Oxygen-Sans', + 'Ubuntu', + 'Cantarell', + '"Helvetica Neue"', + 'sans-serif', + ], + }, + }, + }, } satisfies TailwindConfig;