diff --git a/apps/demo/emails/magic-links/linear-login-code.tsx b/apps/demo/emails/magic-links/linear-login-code.tsx index 6c6265daf6..1e94cb076d 100644 --- a/apps/demo/emails/magic-links/linear-login-code.tsx +++ b/apps/demo/emails/magic-links/linear-login-code.tsx @@ -10,8 +10,10 @@ import { Link, Preview, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface LinearLoginCodeEmailProps { validationCode?: string; @@ -26,33 +28,46 @@ export const LinearLoginCodeEmail = ({ }: LinearLoginCodeEmailProps) => ( - - Your login code for Linear - - Linear - Your login code for Linear -
- -
- - This link and code will only be valid for the next 5 minutes. If the - link does not work, you can use the login verification code directly: - - {validationCode} -
- - Linear - - - + + + Your login code for Linear + + Linear + + Your login code for Linear + +
+ +
+ + This link and code will only be valid for the next 5 minutes. If the + link does not work, you can use the login verification code + directly: + + + {validationCode} + +
+ + Linear + + + + ); @@ -61,74 +76,3 @@ LinearLoginCodeEmail.PreviewProps = { } as LinearLoginCodeEmailProps; export default LinearLoginCodeEmail; - -const logo = { - borderRadius: 21, - width: 42, - height: 42, -}; - -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 0 48px', - maxWidth: '560px', -}; - -const heading = { - fontSize: '24px', - letterSpacing: '-0.5px', - lineHeight: '1.3', - fontWeight: '400', - color: '#484848', - padding: '17px 0 0', -}; - -const paragraph = { - margin: '0 0 15px', - fontSize: '15px', - lineHeight: '1.4', - color: '#3c4149', -}; - -const buttonContainer = { - padding: '27px 0 27px', -}; - -const button = { - backgroundColor: '#5e6ad2', - borderRadius: '3px', - fontWeight: '600', - color: '#fff', - fontSize: '15px', - textDecoration: 'none', - textAlign: 'center' as const, - display: 'block', - padding: '11px 23px', -}; - -const reportLink = { - fontSize: '14px', - color: '#b4becc', -}; - -const hr = { - borderColor: '#dfe1e4', - margin: '42px 0 26px', -}; - -const code = { - fontFamily: 'monospace', - fontWeight: '700', - padding: '1px 4px', - backgroundColor: '#dfe1e4', - letterSpacing: '-0.3px', - fontSize: '21px', - borderRadius: '4px', - color: '#3c4149', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 3c1a2b8acb..a7e3ce9c32 100644 --- a/apps/demo/emails/tailwind.config.ts +++ b/apps/demo/emails/tailwind.config.ts @@ -2,4 +2,10 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components'; export default { presets: [pixelBasedPreset], + theme: { + fontFamily: { + linear: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif', + }, + }, } satisfies TailwindConfig;