diff --git a/apps/demo/emails/notifications/github-access-token.tsx b/apps/demo/emails/notifications/github-access-token.tsx index ee85b69b38..adb8d18885 100644 --- a/apps/demo/emails/notifications/github-access-token.tsx +++ b/apps/demo/emails/notifications/github-access-token.tsx @@ -8,8 +8,10 @@ import { Link, Preview, Section, + Tailwind, Text, } from '@react-email/components'; +import tailwindConfig from '../tailwind.config'; interface GithubAccessTokenEmailProps { username?: string; @@ -24,44 +26,51 @@ export const GithubAccessTokenEmail = ({ }: GithubAccessTokenEmailProps) => ( - - - A fine-grained personal access token has been added to your account - - - Github - - - @{username}, a personal access was created on your - account. - - -
- - Hey {username}! - - - A fine-grained personal access token (resend) was - recently added to your account. + + + + A fine-grained personal access token has been added to your account + + + Github + + + @{username}, a personal access was created on your + account. - -
- - Your security audit log ・{' '} - Contact support - +
+ + Hey {username}! + + + A fine-grained personal access token (resend) was + recently added to your account. + + + +
+ + + Your security audit log + {' '} + ・{' '} + Contact support + - - GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107 - - - + + GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107 + + + + ); @@ -70,58 +79,3 @@ GithubAccessTokenEmail.PreviewProps = { } as GithubAccessTokenEmailProps; export default GithubAccessTokenEmail; - -const main = { - backgroundColor: '#ffffff', - color: '#24292e', - fontFamily: - '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"', -}; - -const container = { - maxWidth: '480px', - margin: '0 auto', - padding: '20px 0 48px', -}; - -const title = { - fontSize: '24px', - lineHeight: 1.25, -}; - -const section = { - padding: '24px', - border: 'solid 1px #dedede', - borderRadius: '5px', - textAlign: 'center' as const, -}; - -const text = { - margin: '0 0 10px 0', - textAlign: 'left' as const, -}; - -const button = { - fontSize: '14px', - backgroundColor: '#28a745', - color: '#fff', - lineHeight: 1.5, - borderRadius: '0.5em', - padding: '12px 24px', -}; - -const links = { - textAlign: 'center' as const, -}; - -const link = { - color: '#0366d6', - fontSize: '12px', -}; - -const footer = { - color: '#6a737d', - fontSize: '12px', - textAlign: 'center' as const, - marginTop: '60px', -}; diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts index 25e0005dcd..60a8dd0bf2 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'], + github: + '-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"', yelp: [ '-apple-system', 'BlinkMacSystemFont',