Skip to content

Commit cbf4f3b

Browse files
bukinoshitagabrielmferncubic-dev-ai[bot]
committed
feat(demo): use Tailwind v4 on all templates (#2487)
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 d46aa8c commit cbf4f3b

22 files changed

+2894
-3437
lines changed

‎apps/demo/emails/magic-links/aws-verify-email.tsx‎

Lines changed: 69 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ import {
99
Link,
1010
Preview,
1111
Section,
12+
Tailwind,
1213
Text,
1314
} from '@react-email/components';
15+
import tailwindConfig from '../tailwind.config';
1416

1517
interface AWSVerifyEmailProps {
1618
verificationCode?: string;
@@ -26,150 +28,80 @@ export default function AWSVerifyEmail({
2628
return (
2729
<Html>
2830
<Head />
29-
<Body style={main}>
30-
<Preview>AWS Email Verification</Preview>
31-
<Container style={container}>
32-
<Section style={coverSection}>
33-
<Section style={imageSection}>
34-
<Img
35-
src={`${baseUrl}/static/aws-logo.png`}
36-
width="75"
37-
height="45"
38-
alt="AWS's Logo"
39-
/>
40-
</Section>
41-
<Section style={upperSection}>
42-
<Heading style={h1}>Verify your email address</Heading>
43-
<Text style={mainText}>
44-
Thanks for starting the new AWS account creation process. We
45-
want to make sure it's really you. Please enter the following
46-
verification code when prompted. If you don&apos;t want to
47-
create an account, you can ignore this message.
48-
</Text>
49-
<Section style={verificationSection}>
50-
<Text style={verifyText}>Verification code</Text>
51-
52-
<Text style={codeText}>{verificationCode}</Text>
53-
<Text style={validityText}>
54-
(This code is valid for 10 minutes)
31+
<Tailwind config={tailwindConfig}>
32+
<Body className="bg-white font-aws text-[#212121]">
33+
<Preview>AWS Email Verification</Preview>
34+
<Container className="p-5 mx-auto bg-[#eee]">
35+
<Section className="bg-white">
36+
<Section className="bg-[#252f3d] flex py-5 items-center justify-center">
37+
<Img
38+
src={`${baseUrl}/static/aws-logo.png`}
39+
width="75"
40+
height="45"
41+
alt="AWS's Logo"
42+
/>
43+
</Section>
44+
<Section className="py-[25px] px-[35px]">
45+
<Heading className="text-[#333] text-[20px] font-bold mb-[15px]">
46+
Verify your email address
47+
</Heading>
48+
<Text className="text-[#333] text-[14px] leading-[24px] mt-6 mb-[14px] mx-0">
49+
Thanks for starting the new AWS account creation process. We
50+
want to make sure it's really you. Please enter the following
51+
verification code when prompted. If you don&apos;t want to
52+
create an account, you can ignore this message.
53+
</Text>
54+
<Section className="flex items-center justify-center">
55+
<Text className="text-[#333] m-0 font-bold text-center text-[14px]">
56+
Verification code
57+
</Text>
58+
59+
<Text className="text-[#333] text-[36px] my-[10px] mx-0 font-bold text-center">
60+
{verificationCode}
61+
</Text>
62+
<Text className="text-[#333] text-[14px] m-0 text-center">
63+
(This code is valid for 10 minutes)
64+
</Text>
65+
</Section>
66+
</Section>
67+
<Hr />
68+
<Section className="py-[25px] px-[35px]">
69+
<Text className="text-[#333] text-[14px] m-0">
70+
Amazon Web Services will never email you and ask you to
71+
disclose or verify your password, credit card, or banking
72+
account number.
5573
</Text>
5674
</Section>
5775
</Section>
58-
<Hr />
59-
<Section style={lowerSection}>
60-
<Text style={cautionText}>
61-
Amazon Web Services will never email you and ask you to disclose
62-
or verify your password, credit card, or banking account number.
63-
</Text>
64-
</Section>
65-
</Section>
66-
<Text style={footerText}>
67-
This message was produced and distributed by Amazon Web Services,
68-
Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
69-
Services, Inc.. All rights reserved. AWS is a registered trademark
70-
of{' '}
71-
<Link href="https://amazon.com" target="_blank" style={link}>
72-
Amazon.com
73-
</Link>
74-
, Inc. View our{' '}
75-
<Link href="https://amazon.com" target="_blank" style={link}>
76-
privacy policy
77-
</Link>
78-
.
79-
</Text>
80-
</Container>
81-
</Body>
76+
<Text className="text-[#333] text-[12px] my-[24px] mx-0 px-5 py-0">
77+
This message was produced and distributed by Amazon Web Services,
78+
Inc., 410 Terry Ave. North, Seattle, WA 98109. © 2022, Amazon Web
79+
Services, Inc.. All rights reserved. AWS is a registered trademark
80+
of{' '}
81+
<Link
82+
href="https://amazon.com"
83+
target="_blank"
84+
className="text-[#2754C5] underline text-[14px]"
85+
>
86+
Amazon.com
87+
</Link>
88+
, Inc. View our{' '}
89+
<Link
90+
href="https://amazon.com"
91+
target="_blank"
92+
className="text-[#2754C5] underline text-[14px]"
93+
>
94+
privacy policy
95+
</Link>
96+
.
97+
</Text>
98+
</Container>
99+
</Body>
100+
</Tailwind>
82101
</Html>
83102
);
84103
}
85104

86105
AWSVerifyEmail.PreviewProps = {
87106
verificationCode: '596853',
88107
} satisfies AWSVerifyEmailProps;
89-
90-
const main = {
91-
backgroundColor: '#fff',
92-
color: '#212121',
93-
};
94-
95-
const container = {
96-
padding: '20px',
97-
margin: '0 auto',
98-
backgroundColor: '#eee',
99-
};
100-
101-
const h1 = {
102-
color: '#333',
103-
fontFamily:
104-
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
105-
fontSize: '20px',
106-
fontWeight: 'bold',
107-
marginBottom: '15px',
108-
};
109-
110-
const link = {
111-
color: '#2754C5',
112-
fontFamily:
113-
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
114-
fontSize: '14px',
115-
textDecoration: 'underline',
116-
};
117-
118-
const text = {
119-
color: '#333',
120-
fontFamily:
121-
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
122-
fontSize: '14px',
123-
margin: '24px 0',
124-
};
125-
126-
const imageSection = {
127-
backgroundColor: '#252f3d',
128-
display: 'flex',
129-
padding: '20px 0',
130-
alignItems: 'center',
131-
justifyContent: 'center',
132-
};
133-
134-
const coverSection = { backgroundColor: '#fff' };
135-
136-
const upperSection = { padding: '25px 35px' };
137-
138-
const lowerSection = { padding: '25px 35px' };
139-
140-
const footerText = {
141-
...text,
142-
fontSize: '12px',
143-
padding: '0 20px',
144-
};
145-
146-
const verifyText = {
147-
...text,
148-
margin: 0,
149-
fontWeight: 'bold',
150-
textAlign: 'center' as const,
151-
};
152-
153-
const codeText = {
154-
...text,
155-
fontWeight: 'bold',
156-
fontSize: '36px',
157-
margin: '10px 0',
158-
textAlign: 'center' as const,
159-
};
160-
161-
const validityText = {
162-
...text,
163-
margin: '0px',
164-
textAlign: 'center' as const,
165-
};
166-
167-
const verificationSection = {
168-
display: 'flex',
169-
alignItems: 'center',
170-
justifyContent: 'center',
171-
};
172-
173-
const mainText = { ...text, marginBottom: '14px' };
174-
175-
const cautionText = { ...text, margin: '0px' };

‎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-
};

0 commit comments

Comments
 (0)