From e4dd642aa97399dd8efd4f040f7edfd41b36a0fd Mon Sep 17 00:00:00 2001 From: Bu Kinoshita Date: Mon, 29 Sep 2025 19:34:17 +0000 Subject: [PATCH 1/4] refactor(demo): yelp with tailwind --- apps/demo/emails/notifications/yelp-recent-login.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx index 5b56a4a219..a57135d201 100644 --- a/apps/demo/emails/notifications/yelp-recent-login.tsx +++ b/apps/demo/emails/notifications/yelp-recent-login.tsx @@ -12,6 +12,7 @@ import { Section, Text, } from '@react-email/components'; +import { Tailwind } from '@react-email/tailwind'; interface YelpRecentLoginEmailProps { userFirstName?: string; From 109f87f8a295b942fb6945450bdf1bffc66ee8b0 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 2 Oct 2025 17:16:23 -0300 Subject: [PATCH 2/4] use tailwind v4 --- .../notifications/yelp-recent-login.tsx | 220 ++++++------------ apps/demo/emails/tailwind.config.ts | 17 ++ 2 files changed, 93 insertions(+), 144 deletions(-) diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx index a57135d201..7584ac5ab3 100644 --- a/apps/demo/emails/notifications/yelp-recent-login.tsx +++ b/apps/demo/emails/notifications/yelp-recent-login.tsx @@ -13,6 +13,7 @@ import { Text, } from '@react-email/components'; import { Tailwind } from '@react-email/tailwind'; +import tailwindConfig from '../tailwind.config'; interface YelpRecentLoginEmailProps { userFirstName?: string; @@ -41,105 +42,84 @@ 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 + + + + ); }; @@ -153,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; From fdb100529e5b189d7fa366d1de457e182ce4a4c3 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Thu, 2 Oct 2025 17:21:22 -0300 Subject: [PATCH 3/4] move Head inside and fix import --- apps/demo/emails/notifications/yelp-recent-login.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx index 7584ac5ab3..1f052b8072 100644 --- a/apps/demo/emails/notifications/yelp-recent-login.tsx +++ b/apps/demo/emails/notifications/yelp-recent-login.tsx @@ -10,9 +10,9 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; -import { Tailwind } from '@react-email/tailwind'; import tailwindConfig from '../tailwind.config'; interface YelpRecentLoginEmailProps { @@ -41,8 +41,8 @@ export const YelpRecentLoginEmail = ({ return ( - + Yelp recent login From 4edf43b0be06a277089b576baa01a9cacb896a81 Mon Sep 17 00:00:00 2001 From: gabriel miranda Date: Tue, 7 Oct 2025 12:35:01 -0300 Subject: [PATCH 4/4] fix slight differences --- .../notifications/yelp-recent-login.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx index 1f052b8072..b632bf6bdf 100644 --- a/apps/demo/emails/notifications/yelp-recent-login.tsx +++ b/apps/demo/emails/notifications/yelp-recent-login.tsx @@ -46,11 +46,11 @@ export const YelpRecentLoginEmail = ({ Yelp recent login -
+
Yelp logo
-
+
- + Hi {userFirstName}, - + We noticed a recent login to your Yelp account. @@ -73,15 +73,15 @@ export const YelpRecentLoginEmail = ({ Time: {formattedDate} - + Device: {loginDevice} - + Location: {loginLocation} - + *Approximate geographic location based on IP address: {loginIp} @@ -89,7 +89,7 @@ export const YelpRecentLoginEmail = ({ 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. @@ -97,7 +97,7 @@ export const YelpRecentLoginEmail = ({ - @@ -113,7 +113,7 @@ export const YelpRecentLoginEmail = ({ />
- + © 2022 | Yelp Inc., 350 Mission Street, San Francisco, CA 94105, U.S.A. | www.yelp.com