react-email 1.4.2-canary.1 → 1.4.2-canary.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/.react-email/next-env.d.ts +0 -0
  2. package/.react-email/package.json +0 -0
  3. package/.react-email/postcss.config.js +0 -0
  4. package/.react-email/src/components/button.tsx +0 -0
  5. package/.react-email/src/components/code.tsx +0 -0
  6. package/.react-email/src/components/heading.tsx +0 -0
  7. package/.react-email/src/components/icon-base.tsx +0 -0
  8. package/.react-email/src/components/icon-button.tsx +0 -0
  9. package/.react-email/src/components/icon-check.tsx +0 -0
  10. package/.react-email/src/components/icon-clipboard.tsx +0 -0
  11. package/.react-email/src/components/icon-download.tsx +0 -0
  12. package/.react-email/src/components/index.ts +0 -0
  13. package/.react-email/src/components/layout.tsx +0 -0
  14. package/.react-email/src/components/logo.tsx +0 -0
  15. package/.react-email/src/components/send.tsx +0 -0
  16. package/.react-email/src/components/sidebar.tsx +0 -0
  17. package/.react-email/src/components/text.tsx +0 -0
  18. package/.react-email/src/components/tooltip-content.tsx +0 -0
  19. package/.react-email/src/components/tooltip.tsx +0 -0
  20. package/.react-email/src/components/topbar.tsx +0 -0
  21. package/.react-email/src/pages/_app.tsx +26 -0
  22. package/.react-email/src/pages/_document.tsx +0 -0
  23. package/.react-email/src/pages/index.tsx +0 -0
  24. package/.react-email/src/styles/globals.css +0 -0
  25. package/.react-email/src/utils/as.ts +0 -0
  26. package/.react-email/src/utils/copy-text-to-clipboard.ts +0 -0
  27. package/.react-email/src/utils/index.ts +0 -0
  28. package/.react-email/src/utils/unreachable.ts +0 -0
  29. package/.react-email/tailwind.config.js +0 -0
  30. package/.react-email/tsconfig.json +0 -0
  31. package/dist/commands/exportTemplates.js +20 -1
  32. package/emails/airbnb-review.tsx +163 -0
  33. package/emails/dropbox-reset-password.tsx +85 -0
  34. package/emails/google-play-policy-update.tsx +229 -0
  35. package/emails/koala-welcome.tsx +97 -0
  36. package/emails/linear-login-code.tsx +124 -0
  37. package/emails/notion-magic-link.tsx +133 -0
  38. package/emails/plaid-verify-identity.tsx +133 -0
  39. package/emails/raycast-magic-link.tsx +107 -0
  40. package/emails/static/airbnb-logo.png +0 -0
  41. package/emails/static/airbnb-review-user.jpg +0 -0
  42. package/emails/static/chat.png +0 -0
  43. package/emails/static/dropbox.png +0 -0
  44. package/emails/static/google-play-academy.png +0 -0
  45. package/emails/static/google-play-chat.png +0 -0
  46. package/emails/static/google-play-footer.png +0 -0
  47. package/emails/static/google-play-header.png +0 -0
  48. package/emails/static/google-play-icon.png +0 -0
  49. package/emails/static/google-play-logo.png +0 -0
  50. package/emails/static/google-play-pl.png +0 -0
  51. package/emails/static/google-play.png +0 -0
  52. package/emails/static/linear-logo.png +0 -0
  53. package/emails/static/notion-logo.png +0 -0
  54. package/emails/static/plaid.png +0 -0
  55. package/emails/static/raycast-bg.png +0 -0
  56. package/emails/static/raycast-logo.png +0 -0
  57. package/emails/static/stripe-logo.png +0 -0
  58. package/emails/static/twitch-icon-facebook.png +0 -0
  59. package/emails/static/twitch-icon-twitter.png +0 -0
  60. package/emails/static/twitch-logo.png +0 -0
  61. package/emails/static/vercel-arrow.png +0 -0
  62. package/emails/static/vercel-logo.png +0 -0
  63. package/emails/static/yelp-footer.png +0 -0
  64. package/emails/static/yelp-header.png +0 -0
  65. package/emails/static/yelp-logo.png +0 -0
  66. package/emails/stripe-welcome.tsx +152 -0
  67. package/emails/twitch-reset-password.tsx +138 -0
  68. package/emails/vercel-invite-user.tsx +196 -0
  69. package/emails/yelp-recent-login.tsx +158 -0
  70. package/package.json +4 -3
  71. package/source/commands/exportTemplates.ts +28 -1
@@ -0,0 +1,97 @@
1
+ import { Button } from '@react-email/button';
2
+ import { Container } from '@react-email/container';
3
+ import { Head } from '@react-email/head';
4
+ import { Hr } from '@react-email/hr';
5
+ import { Html } from '@react-email/html';
6
+ import { Img } from '@react-email/img';
7
+ import { Preview } from '@react-email/preview';
8
+ import { Section } from '@react-email/section';
9
+ import { Text } from '@react-email/text';
10
+ import * as React from 'react';
11
+
12
+ export default function Email() {
13
+ return (
14
+ <Html>
15
+ <Head />
16
+ <Preview>
17
+ The sales intelligence platform that helps you uncover qualified leads.
18
+ </Preview>
19
+ <Section style={main}>
20
+ <Container style={container}>
21
+ <Img
22
+ src="https://assets.koala.live/images/koala-email-banner.png"
23
+ width="170"
24
+ height="50"
25
+ alt="Koala"
26
+ style={logo}
27
+ />
28
+ <Text style={paragraph}>Hi Zeno,</Text>
29
+ <Text style={paragraph}>
30
+ Welcome to Koala, the sales intelligence platform that helps you
31
+ uncover qualified leads and close deals faster.
32
+ </Text>
33
+ <Section style={btnContainer}>
34
+ <Button pX={12} pY={12} style={button} href="https://getkoala.com">
35
+ Get started
36
+ </Button>
37
+ </Section>
38
+ <Text style={paragraph}>
39
+ Best,
40
+ <br />
41
+ The Koala team
42
+ </Text>
43
+ <Hr style={hr} />
44
+ <Text style={footer}>408 Warren Rd - San Mateo, CA 94402</Text>
45
+ </Container>
46
+ </Section>
47
+ </Html>
48
+ );
49
+ }
50
+
51
+ const fontFamily =
52
+ '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
53
+
54
+ const main = {
55
+ backgroundColor: '#ffffff',
56
+ };
57
+
58
+ const container = {
59
+ margin: '0 auto',
60
+ padding: '20px 0 48px',
61
+ };
62
+
63
+ const logo = {
64
+ margin: '0 auto',
65
+ };
66
+
67
+ const paragraph = {
68
+ fontFamily,
69
+ fontSize: '16px',
70
+ lineHeight: '26px',
71
+ };
72
+
73
+ const btnContainer = {
74
+ textAlign: 'center' as const,
75
+ };
76
+
77
+ const button = {
78
+ fontFamily,
79
+ backgroundColor: '#5F51E8',
80
+ borderRadius: '3px',
81
+ color: '#fff',
82
+ fontSize: '16px',
83
+ textDecoration: 'none',
84
+ textAlign: 'center' as const,
85
+ display: 'block',
86
+ };
87
+
88
+ const hr = {
89
+ borderColor: '#cccccc',
90
+ margin: '20px 0',
91
+ };
92
+
93
+ const footer = {
94
+ fontFamily,
95
+ color: '#8898aa',
96
+ fontSize: '12px',
97
+ };
@@ -0,0 +1,124 @@
1
+ import { Button } from '@react-email/button';
2
+ import { Container } from '@react-email/container';
3
+ import { Head } from '@react-email/head';
4
+ import { Hr } from '@react-email/hr';
5
+ import { Html } from '@react-email/html';
6
+ import { Img } from '@react-email/img';
7
+ import { Link } from '@react-email/link';
8
+ import { Preview } from '@react-email/preview';
9
+ import { Section } from '@react-email/section';
10
+ import { Text } from '@react-email/text';
11
+ import * as React from 'react';
12
+
13
+ export default function Email() {
14
+ return (
15
+ <Html>
16
+ <Head />
17
+ <Preview>Your login code for Linear</Preview>
18
+ <Section style={main}>
19
+ <Container style={container}>
20
+ <Img
21
+ src="/static/linear-logo.png"
22
+ width="42"
23
+ height="42"
24
+ alt="Linear"
25
+ style={logo}
26
+ />
27
+ <Text style={heading}>Your login code for Linear</Text>
28
+ <Section style={buttonContainer}>
29
+ <Button pY={11} pX={23} style={button} href="https://linear.app">
30
+ Login to Linear
31
+ </Button>
32
+ </Section>
33
+ <Text style={paragraph}>
34
+ This link and code will only be valid for the next 5 minutes. If the
35
+ link does not work, you can use the login verification code
36
+ directly:
37
+ </Text>
38
+ <Section>
39
+ <code style={code}>tt226-5398x</code>
40
+ </Section>
41
+ <Hr style={hr} />
42
+ <Link href="https://linear.app" style={reportLink}>
43
+ Linear
44
+ </Link>
45
+ </Container>
46
+ </Section>
47
+ </Html>
48
+ );
49
+ }
50
+
51
+ const logo = {
52
+ borderRadius: 21,
53
+ width: 42,
54
+ height: 42,
55
+ };
56
+
57
+ const fontFamily =
58
+ '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
59
+
60
+ const main = {
61
+ backgroundColor: '#ffffff',
62
+ };
63
+
64
+ const container = {
65
+ margin: '0 auto',
66
+ padding: '20px 0 48px',
67
+ width: '560px',
68
+ };
69
+
70
+ const heading = {
71
+ fontFamily,
72
+ fontSize: '24px',
73
+ letterSpacing: '-0.5px',
74
+ lineHeight: '1.3',
75
+ fontWeight: '400',
76
+ color: '#484848',
77
+ padding: '17px 0 0',
78
+ };
79
+
80
+ const paragraph = {
81
+ fontFamily,
82
+ margin: '0 0 15px',
83
+ fontSize: '15px',
84
+ lineHeight: '1.4',
85
+ color: '#3c4149',
86
+ };
87
+
88
+ const buttonContainer = {
89
+ padding: '27px 0 27px',
90
+ };
91
+
92
+ const button = {
93
+ fontFamily,
94
+ backgroundColor: '#5e6ad2',
95
+ borderRadius: '3px',
96
+ fontWeight: '600',
97
+ color: '#fff',
98
+ fontSize: '15px',
99
+ textDecoration: 'none',
100
+ textAlign: 'center' as const,
101
+ display: 'block',
102
+ };
103
+
104
+ const reportLink = {
105
+ fontFamily,
106
+ fontSize: '14px',
107
+ color: '#b4becc',
108
+ };
109
+
110
+ const hr = {
111
+ borderColor: '#dfe1e4',
112
+ margin: '42px 0 26px',
113
+ };
114
+
115
+ const code = {
116
+ fontFamily: 'monospace',
117
+ fontWeight: '700',
118
+ padding: '1px 4px',
119
+ backgroundColor: '#dfe1e4',
120
+ letterSpacing: '-0.3px',
121
+ fontSize: '21px',
122
+ borderRadius: '4px',
123
+ color: '#3c4149',
124
+ };
@@ -0,0 +1,133 @@
1
+ import { Container } from '@react-email/container';
2
+ import { Head } from '@react-email/head';
3
+ import { Html } from '@react-email/html';
4
+ import { Img } from '@react-email/img';
5
+ import { Link } from '@react-email/link';
6
+ import { Preview } from '@react-email/preview';
7
+ import { Section } from '@react-email/section';
8
+ import { Text } from '@react-email/text';
9
+ import * as React from 'react';
10
+
11
+ export default function Email() {
12
+ return (
13
+ <Html>
14
+ <Head />
15
+ <Preview>Log in with this magic link</Preview>
16
+ <Section style={main}>
17
+ <Container style={container}>
18
+ <Text style={h1}>Login</Text>
19
+ <Link
20
+ href="https://notion.so"
21
+ target="_blank"
22
+ style={{
23
+ ...link,
24
+ display: 'block',
25
+ marginBottom: '16px',
26
+ }}
27
+ >
28
+ Click here to log in with this magic link
29
+ </Link>
30
+ <Text style={{ ...text, marginBottom: '14px' }}>
31
+ Or, copy and paste this temporary login code:
32
+ </Text>
33
+ <code style={code}>sparo-ndigo-amurt-secan</code>
34
+ <Text
35
+ style={{
36
+ ...text,
37
+ color: '#ababab',
38
+ marginTop: '14px',
39
+ marginBottom: '16px',
40
+ }}
41
+ >
42
+ If you didn&apos;t try to login, you can safely ignore this email.
43
+ </Text>
44
+ <Text
45
+ style={{
46
+ ...text,
47
+ color: '#ababab',
48
+ marginTop: '12px',
49
+ marginBottom: '38px',
50
+ }}
51
+ >
52
+ Hint: You can set a permanent password in Settings & members → My
53
+ account.
54
+ </Text>
55
+ <Img
56
+ src="/static/notion-logo.png"
57
+ width="32"
58
+ height="32"
59
+ alt="Notion's Logo"
60
+ />
61
+ <Text style={footer}>
62
+ <Link
63
+ href="https://notion.so"
64
+ target="_blank"
65
+ style={{ ...link, color: '#898989' }}
66
+ >
67
+ Notion.so
68
+ </Link>
69
+ , the all-in-one-workspace
70
+ <br />
71
+ for your notes, tasks, wikis, and databases.
72
+ </Text>
73
+ </Container>
74
+ </Section>
75
+ </Html>
76
+ );
77
+ }
78
+
79
+ const main = {
80
+ backgroundColor: '#ffffff',
81
+ };
82
+
83
+ const container = {
84
+ paddingLeft: '12px',
85
+ paddingRight: '12px',
86
+ margin: '0 auto',
87
+ };
88
+
89
+ const h1 = {
90
+ color: '#333',
91
+ fontFamily:
92
+ "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
93
+ fontSize: '24px',
94
+ fontWeight: 'bold',
95
+ margin: '40px 0',
96
+ padding: '0',
97
+ };
98
+
99
+ const link = {
100
+ color: '#2754C5',
101
+ fontFamily:
102
+ "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
103
+ fontSize: '14px',
104
+ textDecoration: 'underline',
105
+ };
106
+
107
+ const text = {
108
+ color: '#333',
109
+ fontFamily:
110
+ "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
111
+ fontSize: '14px',
112
+ margin: '24px 0',
113
+ };
114
+
115
+ const footer = {
116
+ color: '#898989',
117
+ fontFamily:
118
+ "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
119
+ fontSize: '12px',
120
+ lineHeight: '22px',
121
+ marginTop: '12px',
122
+ marginBottom: '24px',
123
+ };
124
+
125
+ const code = {
126
+ display: 'inline-block',
127
+ padding: '16px 4.5%',
128
+ width: '90.5%',
129
+ backgroundColor: '#f4f4f4',
130
+ borderRadius: '5px',
131
+ border: '1px solid #eee',
132
+ color: '#333',
133
+ };
@@ -0,0 +1,133 @@
1
+ import { Container } from '@react-email/container';
2
+ import { Head } from '@react-email/head';
3
+ import { Section } from '@react-email/section';
4
+ import { Html } from '@react-email/html';
5
+ import { Img } from '@react-email/img';
6
+ import { Link } from '@react-email/link';
7
+ import { Text } from '@react-email/text';
8
+ import * as React from 'react';
9
+
10
+ export default function Email() {
11
+ return (
12
+ <Html>
13
+ <Head />
14
+ <Container style={container}>
15
+ <Img
16
+ src="/static/plaid.png"
17
+ width="212"
18
+ height="88"
19
+ alt="Plaid"
20
+ style={logo}
21
+ />
22
+ <Text style={tertiary}>Verify Your Identity</Text>
23
+ <Text style={secondary}>
24
+ Enter the following code to finish linking Venmo.
25
+ </Text>
26
+ <Section style={codeContainer}>
27
+ <Text style={code}>144833</Text>
28
+ </Section>
29
+ <Text style={paragraph}>Not expecting this email?</Text>
30
+ <Text style={paragraph}>
31
+ Contact{' '}
32
+ <Link href="mailto:login@plaid.com" style={link}>
33
+ login@plaid.com
34
+ </Link>{' '}
35
+ if you did not request this code.
36
+ </Text>
37
+ </Container>
38
+ <Text style={footer}>Securely powered by Plaid.</Text>
39
+ </Html>
40
+ );
41
+ }
42
+
43
+ const container = {
44
+ backgroundColor: '#ffffff',
45
+ border: '1px solid #eee',
46
+ borderRadius: '5px',
47
+ boxShadow: '0 5px 10px rgba(20,50,70,.2)',
48
+ marginTop: '20px',
49
+ width: '360px',
50
+ margin: '0 auto',
51
+ padding: '68px 0 130px',
52
+ };
53
+
54
+ const logo = {
55
+ margin: '0 auto',
56
+ };
57
+
58
+ const tertiary = {
59
+ color: '#0a85ea',
60
+ fontSize: '11px',
61
+ fontWeight: 700,
62
+ fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
63
+ height: '16px',
64
+ letterSpacing: '0',
65
+ lineHeight: '16px',
66
+ margin: '16px 8px 8px 8px',
67
+ textTransform: 'uppercase' as const,
68
+ textAlign: 'center' as const,
69
+ };
70
+
71
+ const secondary = {
72
+ color: '#000',
73
+ display: 'inline-block',
74
+ fontFamily: 'HelveticaNeue-Medium,Helvetica,Arial,sans-serif',
75
+ fontSize: '20px',
76
+ fontWeight: 500,
77
+ lineHeight: '24px',
78
+ marginBottom: '0',
79
+ marginTop: '0',
80
+ textAlign: 'center' as const,
81
+ };
82
+
83
+ const codeContainer = {
84
+ background: 'rgba(0,0,0,.05)',
85
+ borderRadius: '4px',
86
+ margin: '16px auto 14px',
87
+ verticalAlign: 'middle',
88
+ width: '280px',
89
+ };
90
+
91
+ const code = {
92
+ color: '#000',
93
+ display: 'inline-block',
94
+ fontFamily: 'HelveticaNeue-Bold',
95
+ fontSize: '32px',
96
+ fontWeight: 700,
97
+ letterSpacing: '6px',
98
+ lineHeight: '40px',
99
+ paddingBottom: '8px',
100
+ paddingTop: '8px',
101
+ margin: '0 auto',
102
+ width: '100%',
103
+ textAlign: 'center' as const,
104
+ };
105
+
106
+ const paragraph = {
107
+ color: '#444',
108
+ fontSize: '15px',
109
+ fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
110
+ letterSpacing: '0',
111
+ lineHeight: '23px',
112
+ padding: '0 40px',
113
+ margin: '0',
114
+ textAlign: 'center' as const,
115
+ };
116
+
117
+ const link = {
118
+ color: '#444',
119
+ textDecoration: 'underline',
120
+ };
121
+
122
+ const footer = {
123
+ color: '#000',
124
+ fontSize: '12px',
125
+ fontWeight: 800,
126
+ letterSpacing: '0',
127
+ lineHeight: '23px',
128
+ margin: '0',
129
+ marginTop: '20px',
130
+ fontFamily: 'HelveticaNeue,Helvetica,Arial,sans-serif',
131
+ textAlign: 'center' as const,
132
+ textTransform: 'uppercase' as const,
133
+ };
@@ -0,0 +1,107 @@
1
+ import { Container } from '@react-email/container';
2
+ import { Head } from '@react-email/head';
3
+ import { Hr } from '@react-email/hr';
4
+ import { Html } from '@react-email/html';
5
+ import { Img } from '@react-email/img';
6
+ import { Link } from '@react-email/link';
7
+ import { Preview } from '@react-email/preview';
8
+ import { Section } from '@react-email/section';
9
+ import { Text } from '@react-email/text';
10
+ import * as React from 'react';
11
+
12
+ export default function Email() {
13
+ return (
14
+ <Html>
15
+ <Head />
16
+ <Preview>Log in with this magic link.</Preview>
17
+ <Section style={main}>
18
+ <Container style={container}>
19
+ <Img
20
+ src="/static/raycast-logo.png"
21
+ width={48}
22
+ height={48}
23
+ alt="Raycast"
24
+ />
25
+ <Text style={heading}>🪄 Your magic link</Text>
26
+ <Section style={body}>
27
+ <Text style={paragraph}>
28
+ <Link style={link} href="https://raycast.com">
29
+ 👉 Click here to sign in 👈
30
+ </Link>
31
+ </Text>
32
+ <Text style={paragraph}>
33
+ If you didn't request this, please ignore this email.
34
+ </Text>
35
+ </Section>
36
+ <Text style={paragraph}>
37
+ Best,
38
+ <br />- Raycast Team
39
+ </Text>
40
+ <Hr style={hr} />
41
+ <Img
42
+ src="/static/raycast-logo.png"
43
+ width={32}
44
+ height={32}
45
+ style={{
46
+ WebkitFilter: 'grayscale(100%)',
47
+ filter: 'grayscale(100%)',
48
+ margin: '20px 0',
49
+ }}
50
+ />
51
+ <Text style={footer}>Raycast Technologies Inc.</Text>
52
+ <Text style={footer}>
53
+ 2093 Philadelphia Pike #3222, Claymont, DE 19703
54
+ </Text>
55
+ </Container>
56
+ </Section>
57
+ </Html>
58
+ );
59
+ }
60
+
61
+ const fontFamily =
62
+ '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
63
+
64
+ const main = {
65
+ backgroundColor: '#ffffff',
66
+ };
67
+
68
+ const container = {
69
+ margin: '0 auto',
70
+ padding: '20px 25px 48px',
71
+ backgroundImage: 'url("/assets/raycast-bg.png")',
72
+ backgroundPosition: 'bottom',
73
+ backgroundRepeat: 'no-repeat, no-repeat',
74
+ };
75
+
76
+ const heading = {
77
+ fontFamily,
78
+ fontSize: '28px',
79
+ fontWeight: 'bold',
80
+ marginTop: '48px',
81
+ };
82
+
83
+ const body = {
84
+ margin: '24px 0',
85
+ };
86
+
87
+ const paragraph = {
88
+ fontFamily,
89
+ fontSize: '16px',
90
+ lineHeight: '26px',
91
+ };
92
+
93
+ const link = {
94
+ color: '#FF6363',
95
+ };
96
+
97
+ const hr = {
98
+ borderColor: '#dddddd',
99
+ marginTop: '48px',
100
+ };
101
+
102
+ const footer = {
103
+ fontFamily,
104
+ color: '#8898aa',
105
+ fontSize: '12px',
106
+ marginLeft: '4px',
107
+ };
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file
Binary file