Skip to content

Commit f5b806f

Browse files
bukinoshitagabrielmfern
bukinoshita
and
gabrielmfern
committed
feat(demo): use Tailwind v4 in twitch-reset-password.tsx (#2504)
Co-authored-by: gabriel miranda <[email protected]>
1 parent 0609fd8 commit f5b806f

File tree

2 files changed

+79
-127
lines changed

2 files changed

+79
-127
lines changed

‎apps/demo/emails/reset-password/twitch-reset-password.tsx‎

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

1517
interface TwitchResetPasswordEmailProps {
1618
username?: string;
@@ -33,83 +35,85 @@ export const TwitchResetPasswordEmail = ({
3335
return (
3436
<Html>
3537
<Head />
36-
<Body style={main}>
37-
<Preview>You updated the password for your Twitch account</Preview>
38-
<Container style={container}>
39-
<Section style={logo}>
40-
<Img
41-
width={114}
42-
src={`${baseUrl}/static/twitch-logo.png`}
43-
alt="Twitch"
44-
style={logoImg}
45-
/>
46-
</Section>
47-
<Section style={sectionsBorders}>
38+
<Tailwind config={tailwindConfig}>
39+
<Body className="bg-[#efeef1] font-twitch">
40+
<Preview>You updated the password for your Twitch account</Preview>
41+
<Container className="max-w-[580px] my-[30px] mx-auto bg-white">
42+
<Section className="p-[30px]">
43+
<Img
44+
width={114}
45+
src={`${baseUrl}/static/twitch-logo.png`}
46+
alt="Twitch"
47+
className="mx-auto"
48+
/>
49+
</Section>
50+
<Section className="w-full">
51+
<Row>
52+
<Column className="[border-bottom:1px_solid_rgb(238,238,238)] w-[249px]" />
53+
<Column className="[border-bottom:1px_solid_rgb(145,71,255)] w-[102px]" />
54+
<Column className="[border-bottom:1px_solid_rgb(238,238,238)] w-[249px]" />
55+
</Row>
56+
</Section>
57+
<Section className="pt-[5px] px-5 pb-[10px]">
58+
<Text className="text-[14px] leading-[1.5]">Hi {username},</Text>
59+
<Text className="text-[14px] leading-[1.5]">
60+
You updated the password for your Twitch account on{' '}
61+
{formattedDate}. If this was you, then no further action is
62+
required.
63+
</Text>
64+
<Text className="text-[14px] leading-[1.5]">
65+
However if you did NOT perform this password change, please{' '}
66+
<Link href="https://www.twitch.tv" className="underline">
67+
reset your account password
68+
</Link>{' '}
69+
immediately.
70+
</Text>
71+
<Text className="text-[14px] leading-[1.5]">
72+
Remember to use a password that is both strong and unique to
73+
your Twitch account. To learn more about how to create a strong
74+
and unique password,{' '}
75+
<Link href="https://www.twitch.tv" className="underline">
76+
click here.
77+
</Link>
78+
</Text>
79+
<Text className="text-[14px] leading-[1.5]">
80+
Still have questions? Please contact{' '}
81+
<Link href="https://www.twitch.tv" className="underline">
82+
Twitch Support
83+
</Link>
84+
</Text>
85+
<Text className="text-[14px] leading-[1.5]">
86+
Thanks,
87+
<br />
88+
Twitch Support Team
89+
</Text>
90+
</Section>
91+
</Container>
92+
93+
<Section className="max-w-[580px] mx-auto">
4894
<Row>
49-
<Column style={sectionBorder} />
50-
<Column style={sectionCenter} />
51-
<Column style={sectionBorder} />
95+
<Column align="right" className="w-1/2 pr-2">
96+
<Img
97+
src={`${baseUrl}/static/twitch-icon-twitter.png`}
98+
alt="Twitter"
99+
/>
100+
</Column>
101+
<Column align="left" className="w-1/2 pl-2">
102+
<Img
103+
src={`${baseUrl}/static/twitch-icon-facebook.png`}
104+
alt="Facebook"
105+
/>
106+
</Column>
107+
</Row>
108+
<Row>
109+
<Text className="text-center text-[#706a7b]">
110+
© 2022 Twitch, All Rights Reserved <br />
111+
350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA
112+
</Text>
52113
</Row>
53114
</Section>
54-
<Section style={content}>
55-
<Text style={paragraph}>Hi {username},</Text>
56-
<Text style={paragraph}>
57-
You updated the password for your Twitch account on{' '}
58-
{formattedDate}. If this was you, then no further action is
59-
required.
60-
</Text>
61-
<Text style={paragraph}>
62-
However if you did NOT perform this password change, please{' '}
63-
<Link href="https://www.twitch.tv" style={link}>
64-
reset your account password
65-
</Link>{' '}
66-
immediately.
67-
</Text>
68-
<Text style={paragraph}>
69-
Remember to use a password that is both strong and unique to your
70-
Twitch account. To learn more about how to create a strong and
71-
unique password,{' '}
72-
<Link href="https://www.twitch.tv" style={link}>
73-
click here.
74-
</Link>
75-
</Text>
76-
<Text style={paragraph}>
77-
Still have questions? Please contact{' '}
78-
<Link href="https://www.twitch.tv" style={link}>
79-
Twitch Support
80-
</Link>
81-
</Text>
82-
<Text style={paragraph}>
83-
Thanks,
84-
<br />
85-
Twitch Support Team
86-
</Text>
87-
</Section>
88-
</Container>
89-
90-
<Section style={footer}>
91-
<Row>
92-
<Column align="right" style={{ width: '50%', paddingRight: '8px' }}>
93-
<Img
94-
src={`${baseUrl}/static/twitch-icon-twitter.png`}
95-
alt="Twitter"
96-
/>
97-
</Column>
98-
<Column align="left" style={{ width: '50%', paddingLeft: '8px' }}>
99-
<Img
100-
src={`${baseUrl}/static/twitch-icon-facebook.png`}
101-
alt="Facebook"
102-
/>
103-
</Column>
104-
</Row>
105-
<Row>
106-
<Text style={{ textAlign: 'center', color: '#706a7b' }}>
107-
© 2022 Twitch, All Rights Reserved <br />
108-
350 Bush Street, 2nd Floor, San Francisco, CA, 94104 - USA
109-
</Text>
110-
</Row>
111-
</Section>
112-
</Body>
115+
</Body>
116+
</Tailwind>
113117
</Html>
114118
);
115119
};
@@ -120,56 +124,3 @@ TwitchResetPasswordEmail.PreviewProps = {
120124
} as TwitchResetPasswordEmailProps;
121125

122126
export default TwitchResetPasswordEmail;
123-
124-
const fontFamily = 'HelveticaNeue,Helvetica,Arial,sans-serif';
125-
126-
const main = {
127-
backgroundColor: '#efeef1',
128-
fontFamily,
129-
};
130-
131-
const paragraph = {
132-
lineHeight: 1.5,
133-
fontSize: 14,
134-
};
135-
136-
const container = {
137-
maxWidth: '580px',
138-
margin: '30px auto',
139-
backgroundColor: '#ffffff',
140-
};
141-
142-
const footer = {
143-
maxWidth: '580px',
144-
margin: '0 auto',
145-
};
146-
147-
const content = {
148-
padding: '5px 20px 10px 20px',
149-
};
150-
151-
const logo = {
152-
padding: 30,
153-
};
154-
155-
const logoImg = {
156-
margin: '0 auto',
157-
};
158-
159-
const sectionsBorders = {
160-
width: '100%',
161-
};
162-
163-
const sectionBorder = {
164-
borderBottom: '1px solid rgb(238,238,238)',
165-
width: '249px',
166-
};
167-
168-
const sectionCenter = {
169-
borderBottom: '1px solid rgb(145,71,255)',
170-
width: '102px',
171-
};
172-
173-
const link = {
174-
textDecoration: 'underline',
175-
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export default {
55
theme: {
66
fontFamily: {
77
amazon: ['Ember', 'Helvetica', 'Arial', 'sans-serif'],
8+
twitch: ['HelveticaNeue', 'Helvetica', 'Arial', 'sans-serif'],
89
'stack-overflow': ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
910
'stack-overflow-mono': 'Consolas,monospace',
1011
github:

0 commit comments

Comments
 (0)