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.
- package/.react-email/next-env.d.ts +0 -0
- package/.react-email/package.json +0 -0
- package/.react-email/postcss.config.js +0 -0
- package/.react-email/src/components/button.tsx +0 -0
- package/.react-email/src/components/code.tsx +0 -0
- package/.react-email/src/components/heading.tsx +0 -0
- package/.react-email/src/components/icon-base.tsx +0 -0
- package/.react-email/src/components/icon-button.tsx +0 -0
- package/.react-email/src/components/icon-check.tsx +0 -0
- package/.react-email/src/components/icon-clipboard.tsx +0 -0
- package/.react-email/src/components/icon-download.tsx +0 -0
- package/.react-email/src/components/index.ts +0 -0
- package/.react-email/src/components/layout.tsx +0 -0
- package/.react-email/src/components/logo.tsx +0 -0
- package/.react-email/src/components/send.tsx +0 -0
- package/.react-email/src/components/sidebar.tsx +0 -0
- package/.react-email/src/components/text.tsx +0 -0
- package/.react-email/src/components/tooltip-content.tsx +0 -0
- package/.react-email/src/components/tooltip.tsx +0 -0
- package/.react-email/src/components/topbar.tsx +0 -0
- package/.react-email/src/pages/_app.tsx +26 -0
- package/.react-email/src/pages/_document.tsx +0 -0
- package/.react-email/src/pages/index.tsx +0 -0
- package/.react-email/src/styles/globals.css +0 -0
- package/.react-email/src/utils/as.ts +0 -0
- package/.react-email/src/utils/copy-text-to-clipboard.ts +0 -0
- package/.react-email/src/utils/index.ts +0 -0
- package/.react-email/src/utils/unreachable.ts +0 -0
- package/.react-email/tailwind.config.js +0 -0
- package/.react-email/tsconfig.json +0 -0
- package/dist/commands/exportTemplates.js +20 -1
- package/emails/airbnb-review.tsx +163 -0
- package/emails/dropbox-reset-password.tsx +85 -0
- package/emails/google-play-policy-update.tsx +229 -0
- package/emails/koala-welcome.tsx +97 -0
- package/emails/linear-login-code.tsx +124 -0
- package/emails/notion-magic-link.tsx +133 -0
- package/emails/plaid-verify-identity.tsx +133 -0
- package/emails/raycast-magic-link.tsx +107 -0
- package/emails/static/airbnb-logo.png +0 -0
- package/emails/static/airbnb-review-user.jpg +0 -0
- package/emails/static/chat.png +0 -0
- package/emails/static/dropbox.png +0 -0
- package/emails/static/google-play-academy.png +0 -0
- package/emails/static/google-play-chat.png +0 -0
- package/emails/static/google-play-footer.png +0 -0
- package/emails/static/google-play-header.png +0 -0
- package/emails/static/google-play-icon.png +0 -0
- package/emails/static/google-play-logo.png +0 -0
- package/emails/static/google-play-pl.png +0 -0
- package/emails/static/google-play.png +0 -0
- package/emails/static/linear-logo.png +0 -0
- package/emails/static/notion-logo.png +0 -0
- package/emails/static/plaid.png +0 -0
- package/emails/static/raycast-bg.png +0 -0
- package/emails/static/raycast-logo.png +0 -0
- package/emails/static/stripe-logo.png +0 -0
- package/emails/static/twitch-icon-facebook.png +0 -0
- package/emails/static/twitch-icon-twitter.png +0 -0
- package/emails/static/twitch-logo.png +0 -0
- package/emails/static/vercel-arrow.png +0 -0
- package/emails/static/vercel-logo.png +0 -0
- package/emails/static/yelp-footer.png +0 -0
- package/emails/static/yelp-header.png +0 -0
- package/emails/static/yelp-logo.png +0 -0
- package/emails/stripe-welcome.tsx +152 -0
- package/emails/twitch-reset-password.tsx +138 -0
- package/emails/vercel-invite-user.tsx +196 -0
- package/emails/yelp-recent-login.tsx +158 -0
- package/package.json +4 -3
- 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'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
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|