diff --git a/apps/demo/emails/reset-password/twitch-reset-password.tsx b/apps/demo/emails/reset-password/twitch-reset-password.tsx index 60eb156c32..de99963778 100644 --- a/apps/demo/emails/reset-password/twitch-reset-password.tsx +++ b/apps/demo/emails/reset-password/twitch-reset-password.tsx @@ -9,8 +9,10 @@ import { Preview, Row, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface TwitchResetPasswordEmailProps { username?: string; @@ -33,83 +35,85 @@ export const TwitchResetPasswordEmail = ({ return ( - - You updated the password for your Twitch account - -
- Twitch -
-
+ + + You updated the password for your Twitch account + +
+ Twitch +
+
+ + + + + +
+
+ Hi {username}, + + You updated the password for your Twitch account on{' '} + {formattedDate}. If this was you, then no further action is + required. + + + However if you did NOT perform this password change, please{' '} + + reset your account password + {' '} + immediately. + + + Remember to use a password that is both strong and unique to + your Twitch account. To learn more about how to create a strong + and unique password,{' '} + + click here. + + + + Still have questions? Please contact{' '} + + Twitch Support + + + + Thanks, +
+ Twitch Support Team + +
+ + +
- - - + + Twitter + + + Facebook + + + + + © 2022 Twitch, All Rights Reserved
+ 350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA +
-
- Hi {username}, - - You updated the password for your Twitch account on{' '} - {formattedDate}. If this was you, then no further action is - required. - - - However if you did NOT perform this password change, please{' '} - - reset your account password - {' '} - immediately. - - - Remember to use a password that is both strong and unique to your - Twitch account. To learn more about how to create a strong and - unique password,{' '} - - click here. - - - - Still have questions? Please contact{' '} - - Twitch Support - - - - Thanks, -
- Twitch Support Team - -
- - -
- - - Twitter - - - Facebook - - - - - © 2022 Twitch, All Rights Reserved
- 350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA - - -
- + + ); }; @@ -120,56 +124,3 @@ TwitchResetPasswordEmail.PreviewProps = { } as TwitchResetPasswordEmailProps; export default TwitchResetPasswordEmail; - -const fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif'; - -const main = { - backgroundColor: '#efeef1', - fontFamily, -}; - -const paragraph = { - lineHeight: 1.5, - fontSize: 14, -}; - -const container = { - maxWidth: '580px', - margin: '30px auto', - backgroundColor: '#ffffff', -}; - -const footer = { - maxWidth: '580px', - margin: '0 auto', -}; - -const content = { - padding: '5px 20px 10px 20px', -}; - -const logo = { - padding: 30, -}; - -const logoImg = { - margin: '0 auto', -}; - -const sectionsBorders = { - width: '100%', -}; - -const sectionBorder = { - borderBottom: '1px solid rgb(238,238,238)', - width: '249px', -}; - -const sectionCenter = { - borderBottom: '1px solid rgb(145,71,255)', - width: '102px', -}; - -const link = { - textDecoration: 'underline', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 4f97c110b2..10f6f52504 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -5,6 +5,7 @@ export default { theme: { fontFamily: { amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + twitch: ['HelveticaNeue', 'Helvetica', 'Arial', 'sans-serif'], 'stack-overflow': ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'], 'stack-overflow-mono': 'Consolas,monospace', github: