Skip to content

Commit e196b19

Browse files
bukinoshitagabrielmferncubic-dev-ai[bot]
committed
feat(demo): use Tailwind v4 in linear-login-code.tsx (#2490)
Co-authored-by: gabriel miranda <[email protected]> Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
1 parent b111a20 commit e196b19

File tree

3 files changed

+232
-98
lines changed

3 files changed

+232
-98
lines changed

‎apps/demo/emails/magic-links/linear-login-code.tsx‎

Lines changed: 42 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,10 @@ import {
1010
Link,
1111
Preview,
1212
Section,
13+
Tailwind,
1314
Text,
1415
} from '@react-email/components';
16+
import tailwindConfig from '../tailwind.config';
1517

1618
interface LinearLoginCodeEmailProps {
1719
validationCode?: string;
@@ -26,33 +28,46 @@ export const LinearLoginCodeEmail = ({
2628
}: LinearLoginCodeEmailProps) => (
2729
<Html>
2830
<Head />
29-
<Body style={main}>
30-
<Preview>Your login code for Linear</Preview>
31-
<Container style={container}>
32-
<Img
33-
src={`${baseUrl}/static/linear-logo.png`}
34-
width="42"
35-
height="42"
36-
alt="Linear"
37-
style={logo}
38-
/>
39-
<Heading style={heading}>Your login code for Linear</Heading>
40-
<Section style={buttonContainer}>
41-
<Button style={button} href="https://linear.app">
42-
Login to Linear
43-
</Button>
44-
</Section>
45-
<Text style={paragraph}>
46-
This link and code will only be valid for the next 5 minutes. If the
47-
link does not work, you can use the login verification code directly:
48-
</Text>
49-
<code style={code}>{validationCode}</code>
50-
<Hr style={hr} />
51-
<Link href="https://linear.app" style={reportLink}>
52-
Linear
53-
</Link>
54-
</Container>
55-
</Body>
31+
<Tailwind config={tailwindConfig}>
32+
<Body className="bg-white font-linear">
33+
<Preview>Your login code for Linear</Preview>
34+
<Container className="mx-auto my-0 max-w-[560px] px-0 pt-5 pb-12">
35+
<Img
36+
src={`${baseUrl}/static/linear-logo.png`}
37+
width="42"
38+
height="42"
39+
alt="Linear"
40+
className="rounded-3xl w-[42px] h-[42px]"
41+
/>
42+
<Heading className="text-[24px] tracking-[-0.5px] leading-[1.3] font-normal text-[#484848] pt-[17px] px-0 pb-0">
43+
Your login code for Linear
44+
</Heading>
45+
<Section className="py-[27px] px-0">
46+
<Button
47+
className="bg-[#5e6ad2] rounded font-semibold text-white text-[15px] no-underline text-center block py-[11px] px-[23px]"
48+
href="https://linear.app"
49+
>
50+
Login to Linear
51+
</Button>
52+
</Section>
53+
<Text className="mb-[15px] mx-0 mt-0 leading-[1.4] text-[15px] text-[#3c4149]">
54+
This link and code will only be valid for the next 5 minutes. If the
55+
link does not work, you can use the login verification code
56+
directly:
57+
</Text>
58+
<code className="font-mono font-bold px-1 py-px bg-[#dfe1e4] text-[#3c4149] text-[21px] tracking-[-0.3px] rounded">
59+
{validationCode}
60+
</code>
61+
<Hr className="border-[#dfe1e4] mt-[42px] mb-[26px]" />
62+
<Link
63+
href="https://linear.app"
64+
className="text-[#b4becc] text-[14px]"
65+
>
66+
Linear
67+
</Link>
68+
</Container>
69+
</Body>
70+
</Tailwind>
5671
</Html>
5772
);
5873

@@ -61,74 +76,3 @@ LinearLoginCodeEmail.PreviewProps = {
6176
} as LinearLoginCodeEmailProps;
6277

6378
export default LinearLoginCodeEmail;
64-
65-
const logo = {
66-
borderRadius: 21,
67-
width: 42,
68-
height: 42,
69-
};
70-
71-
const main = {
72-
backgroundColor: '#ffffff',
73-
fontFamily:
74-
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
75-
};
76-
77-
const container = {
78-
margin: '0 auto',
79-
padding: '20px 0 48px',
80-
maxWidth: '560px',
81-
};
82-
83-
const heading = {
84-
fontSize: '24px',
85-
letterSpacing: '-0.5px',
86-
lineHeight: '1.3',
87-
fontWeight: '400',
88-
color: '#484848',
89-
padding: '17px 0 0',
90-
};
91-
92-
const paragraph = {
93-
margin: '0 0 15px',
94-
fontSize: '15px',
95-
lineHeight: '1.4',
96-
color: '#3c4149',
97-
};
98-
99-
const buttonContainer = {
100-
padding: '27px 0 27px',
101-
};
102-
103-
const button = {
104-
backgroundColor: '#5e6ad2',
105-
borderRadius: '3px',
106-
fontWeight: '600',
107-
color: '#fff',
108-
fontSize: '15px',
109-
textDecoration: 'none',
110-
textAlign: 'center' as const,
111-
display: 'block',
112-
padding: '11px 23px',
113-
};
114-
115-
const reportLink = {
116-
fontSize: '14px',
117-
color: '#b4becc',
118-
};
119-
120-
const hr = {
121-
borderColor: '#dfe1e4',
122-
margin: '42px 0 26px',
123-
};
124-
125-
const code = {
126-
fontFamily: 'monospace',
127-
fontWeight: '700',
128-
padding: '1px 4px',
129-
backgroundColor: '#dfe1e4',
130-
letterSpacing: '-0.3px',
131-
fontSize: '21px',
132-
borderRadius: '4px',
133-
color: '#3c4149',
134-
};

‎apps/demo/emails/tailwind.config.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ export default {
55
theme: {
66
fontFamily: {
77
amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'],
8+
linear:
9+
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
810
stripe: [
911
'-apple-system',
1012
'BlinkMacSystemFont',

‎demo‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html dir="ltr" lang="en">
3+
<head>
4+
<link
5+
rel="preload"
6+
as="image"
7+
href="https://react-email-demo-r83t4405a-resend.vercel.app/static/aws-logo.png" />
8+
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
9+
<meta name="x-apple-disable-message-reformatting" />
10+
<!--$-->
11+
</head>
12+
<body style="background-color:#fff">
13+
<table
14+
border="0"
15+
width="100%"
16+
cellpadding="0"
17+
cellspacing="0"
18+
role="presentation"
19+
align="center">
20+
<tbody>
21+
<tr>
22+
<td style="background-color:#fff;color:#212121">
23+
<div
24+
style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
25+
data-skip-in-text="true">
26+
AWS Email Verification
27+
<div>
28+
 ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
29+
</div>
30+
</div>
31+
<table
32+
align="center"
33+
width="100%"
34+
border="0"
35+
cellpadding="0"
36+
cellspacing="0"
37+
role="presentation"
38+
style="max-width:37.5em;padding:20px;margin:0 auto;background-color:#eee">
39+
<tbody>
40+
<tr style="width:100%">
41+
<td>
42+
<table
43+
align="center"
44+
width="100%"
45+
border="0"
46+
cellpadding="0"
47+
cellspacing="0"
48+
role="presentation"
49+
style="background-color:#fff">
50+
<tbody>
51+
<tr>
52+
<td>
53+
<table
54+
align="center"
55+
width="100%"
56+
border="0"
57+
cellpadding="0"
58+
cellspacing="0"
59+
role="presentation"
60+
style="background-color:#252f3d;display:flex;padding:20px 0;align-items:center;justify-content:center">
61+
<tbody>
62+
<tr>
63+
<td>
64+
<img
65+
alt="AWS&#x27;s Logo"
66+
height="45"
67+
src="https://react-email-demo-r83t4405a-resend.vercel.app/static/aws-logo.png"
68+
style="display:block;outline:none;border:none;text-decoration:none"
69+
width="75" />
70+
</td>
71+
</tr>
72+
</tbody>
73+
</table>
74+
<table
75+
align="center"
76+
width="100%"
77+
border="0"
78+
cellpadding="0"
79+
cellspacing="0"
80+
role="presentation"
81+
style="padding:25px 35px">
82+
<tbody>
83+
<tr>
84+
<td>
85+
<h1
86+
style="color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:20px;font-weight:bold;margin-bottom:15px">
87+
Verify your email address
88+
</h1>
89+
<p
90+
style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;margin-bottom:14px;margin-top:24px;margin-right:0;margin-left:0">
91+
Thanks for starting the new AWS account
92+
creation process. We want to make sure
93+
it&#x27;s really you. Please enter the
94+
following verification code when prompted.
95+
If you don&#x27;t want to create an
96+
account, you can ignore this message.
97+
</p>
98+
<table
99+
align="center"
100+
width="100%"
101+
border="0"
102+
cellpadding="0"
103+
cellspacing="0"
104+
role="presentation"
105+
style="display:flex;align-items:center;justify-content:center">
106+
<tbody>
107+
<tr>
108+
<td>
109+
<p
110+
style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0;font-weight:bold;text-align:center;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0">
111+
Verification code
112+
</p>
113+
<p
114+
style="font-size:36px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:10px 0;font-weight:bold;text-align:center;margin-top:10px;margin-right:0;margin-bottom:10px;margin-left:0">
115+
596853
116+
</p>
117+
<p
118+
style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0px;text-align:center;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px">
119+
(This code is valid for 10
120+
minutes)
121+
</p>
122+
</td>
123+
</tr>
124+
</tbody>
125+
</table>
126+
</td>
127+
</tr>
128+
</tbody>
129+
</table>
130+
<hr
131+
style="width:100%;border:none;border-top:1px solid #eaeaea" />
132+
<table
133+
align="center"
134+
width="100%"
135+
border="0"
136+
cellpadding="0"
137+
cellspacing="0"
138+
role="presentation"
139+
style="padding:25px 35px">
140+
<tbody>
141+
<tr>
142+
<td>
143+
<p
144+
style="font-size:14px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:0px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px">
145+
Amazon Web Services will never email you
146+
and ask you to disclose or verify your
147+
password, credit card, or banking account
148+
number.
149+
</p>
150+
</td>
151+
</tr>
152+
</tbody>
153+
</table>
154+
</td>
155+
</tr>
156+
</tbody>
157+
</table>
158+
<p
159+
style="font-size:12px;line-height:24px;color:#333;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;margin:24px 0;padding:0 20px;margin-top:24px;margin-right:0;margin-bottom:24px;margin-left:0">
160+
This message was produced and distributed by Amazon Web
161+
Services, Inc., 410 Terry Ave. North, Seattle, WA 98109.
162+
© 2022, Amazon Web Services, Inc.. All rights reserved.
163+
AWS is a registered trademark of<!-- -->
164+
<a
165+
href="https://amazon.com"
166+
style="color:#2754C5;text-decoration-line:none;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:14px;text-decoration:underline"
167+
target="_blank"
168+
>Amazon.com</a
169+
>, Inc. View our<!-- -->
170+
<a
171+
href="https://amazon.com"
172+
style="color:#2754C5;text-decoration-line:none;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif;font-size:14px;text-decoration:underline"
173+
target="_blank"
174+
>privacy policy</a
175+
>.
176+
</p>
177+
</td>
178+
</tr>
179+
</tbody>
180+
</table>
181+
</td>
182+
</tr>
183+
</tbody>
184+
</table>
185+
<!--/$-->
186+
</body>
187+
</html>
188+

0 commit comments

Comments
 (0)