diff --git a/apps/demo/emails/magic-links/raycast-magic-link.tsx b/apps/demo/emails/magic-links/raycast-magic-link.tsx index 5a8e7c1b4e..1d091f0d1c 100644 --- a/apps/demo/emails/magic-links/raycast-magic-link.tsx +++ b/apps/demo/emails/magic-links/raycast-magic-link.tsx @@ -9,8 +9,10 @@ import { Link, Preview, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface RaycastMagicLinkEmailProps { magicLink?: string; @@ -25,47 +27,52 @@ export const RaycastMagicLinkEmail = ({ }: RaycastMagicLinkEmailProps) => ( - - Log in with this magic link. - - Raycast - 🪄 Your magic link -
- - - 👉 Click here to sign in 👈 - + + + Log in with this magic link. + + Raycast + + 🪄 Your magic link + +
+ + + 👉 Click here to sign in 👈 + + + + If you didn't request this, please ignore this email. + +
+ + Best, +
- Raycast Team - - If you didn't request this, please ignore this email. +
+ + + Raycast Technologies Inc. -
- - Best, -
- Raycast Team - -
- - Raycast Technologies Inc. - - 2093 Philadelphia Pike #3222, Claymont, DE 19703 - - - + + 2093 Philadelphia Pike #3222, Claymont, DE 19703 + + + + ); @@ -74,47 +81,3 @@ RaycastMagicLinkEmail.PreviewProps = { } as RaycastMagicLinkEmailProps; export default RaycastMagicLinkEmail; - -const main = { - backgroundColor: '#ffffff', - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', -}; - -const container = { - margin: '0 auto', - padding: '20px 25px 48px', - backgroundImage: 'url("/static/raycast-bg.png")', - backgroundPosition: 'bottom', - backgroundRepeat: 'no-repeat, no-repeat', -}; - -const heading = { - fontSize: '28px', - fontWeight: 'bold', - marginTop: '48px', -}; - -const body = { - margin: '24px 0', -}; - -const paragraph = { - fontSize: '16px', - lineHeight: '26px', -}; - -const link = { - color: '#FF6363', -}; - -const hr = { - borderColor: '#dddddd', - marginTop: '48px', -}; - -const footer = { - color: '#8898aa', - fontSize: '12px', - marginLeft: '4px', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index a458204086..8ad41d97f5 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -5,6 +5,8 @@ export default { theme: { fontFamily: { amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'], + raycast: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', slack: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif", twitch: ['HelveticaNeue', 'Helvetica', 'Arial', 'sans-serif'],