Skip to content

Commit 046d237

Browse files
bukinoshitagabrielmfern
bukinoshita
and
gabrielmfern
committed
feat(demo): use Tailwind v4 in slack-confirm.tsx (#2492)
Co-authored-by: gabriel miranda <[email protected]>
1 parent f5b806f commit 046d237

File tree

2 files changed

+119
-183
lines changed

2 files changed

+119
-183
lines changed

‎apps/demo/emails/magic-links/slack-confirm.tsx‎

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

1618
interface SlackConfirmEmailProps {
1719
validationCode?: string;
@@ -26,121 +28,127 @@ export const SlackConfirmEmail = ({
2628
}: SlackConfirmEmailProps) => (
2729
<Html>
2830
<Head />
29-
<Body style={main}>
30-
<Preview>Confirm your email address</Preview>
31-
<Container style={container}>
32-
<Section style={logoContainer}>
33-
<Img
34-
src={`${baseUrl}/static/slack-logo.png`}
35-
width="120"
36-
height="36"
37-
alt="Slack"
38-
/>
39-
</Section>
40-
<Heading style={h1}>Confirm your email address</Heading>
41-
<Text style={heroText}>
42-
Your confirmation code is below - enter it in your open browser window
43-
and we'll help you get signed in.
44-
</Text>
31+
<Tailwind config={tailwindConfig}>
32+
<Body className="bg-white font-slack mx-auto my-0">
33+
<Preview>Confirm your email address</Preview>
34+
<Container className="mx-auto my-0 py-0 px-5">
35+
<Section className="mt-8">
36+
<Img
37+
src={`${baseUrl}/static/slack-logo.png`}
38+
width="120"
39+
height="36"
40+
alt="Slack"
41+
/>
42+
</Section>
43+
<Heading className="text-[#1d1c1d] text-4xl font-bold my-[30px] mx-0 p-0 leading-[42px]">
44+
Confirm your email address
45+
</Heading>
46+
<Text className="text-xl mb-7.5">
47+
Your confirmation code is below - enter it in your open browser
48+
window and we'll help you get signed in.
49+
</Text>
4550

46-
<Section style={codeBox}>
47-
<Text style={confirmationCodeText}>{validationCode}</Text>
48-
</Section>
51+
<Section className="bg-[rgb(245,244,245)] rounded mb-[30px] py-10 px-[10px]">
52+
<Text className="text-3xl leading-[24px] text-center align-middle">
53+
{validationCode}
54+
</Text>
55+
</Section>
4956

50-
<Text style={text}>
51-
If you didn't request this email, there's nothing to worry about, you
52-
can safely ignore it.
53-
</Text>
57+
<Text className="text-black text-sm leading-6">
58+
If you didn't request this email, there's nothing to worry about,
59+
you can safely ignore it.
60+
</Text>
5461

55-
<Section>
56-
<Row style={footerLogos}>
57-
<Column style={{ width: '66%' }}>
58-
<Img
59-
src={`${baseUrl}/static/slack-logo.png`}
60-
width="120"
61-
height="36"
62-
alt="Slack"
63-
/>
64-
</Column>
65-
<Column align="right">
66-
<Link href="/">
67-
<Img
68-
src={`${baseUrl}/static/slack-twitter.png`}
69-
width="32"
70-
height="32"
71-
alt="Slack"
72-
style={socialMediaIcon}
73-
/>
74-
</Link>
75-
<Link href="/">
62+
<Section>
63+
<Row className="mb-8 pl-2 pr-2">
64+
<Column className="w-2/3">
7665
<Img
77-
src={`${baseUrl}/static/slack-facebook.png`}
78-
width="32"
79-
height="32"
66+
src={`${baseUrl}/static/slack-logo.png`}
67+
width="120"
68+
height="36"
8069
alt="Slack"
81-
style={socialMediaIcon}
8270
/>
83-
</Link>
84-
<Link href="/">
85-
<Img
86-
src={`${baseUrl}/static/slack-linkedin.png`}
87-
width="32"
88-
height="32"
89-
alt="Slack"
90-
style={socialMediaIcon}
91-
/>
92-
</Link>
93-
</Column>
94-
</Row>
95-
</Section>
96-
97-
<Section>
98-
<Link
99-
style={footerLink}
100-
href="https://slackhq.com"
101-
target="_blank"
102-
rel="noopener noreferrer"
103-
>
104-
Our blog
105-
</Link>
106-
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
107-
<Link
108-
style={footerLink}
109-
href="https://slack.com/legal"
110-
target="_blank"
111-
rel="noopener noreferrer"
112-
>
113-
Policies
114-
</Link>
115-
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
116-
<Link
117-
style={footerLink}
118-
href="https://slack.com/help"
119-
target="_blank"
120-
rel="noopener noreferrer"
121-
>
122-
Help center
123-
</Link>
124-
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
125-
<Link
126-
style={footerLink}
127-
href="https://slack.com/community"
128-
target="_blank"
129-
rel="noopener noreferrer"
130-
data-auth="NotApplicable"
131-
data-linkindex="6"
132-
>
133-
Slack Community
134-
</Link>
135-
<Text style={footerText}>
136-
©2022 Slack Technologies, LLC, a Salesforce company. <br />
137-
500 Howard Street, San Francisco, CA 94105, USA <br />
138-
<br />
139-
All rights reserved.
140-
</Text>
141-
</Section>
142-
</Container>
143-
</Body>
71+
</Column>
72+
<Column align="right">
73+
<Link href="/">
74+
<Img
75+
src={`${baseUrl}/static/slack-twitter.png`}
76+
width="32"
77+
height="32"
78+
alt="Slack"
79+
className="inline ml-2"
80+
/>
81+
</Link>
82+
<Link href="/">
83+
<Img
84+
src={`${baseUrl}/static/slack-facebook.png`}
85+
width="32"
86+
height="32"
87+
alt="Slack"
88+
className="inline ml-2"
89+
/>
90+
</Link>
91+
<Link href="/">
92+
<Img
93+
src={`${baseUrl}/static/slack-linkedin.png`}
94+
width="32"
95+
height="32"
96+
alt="Slack"
97+
className="inline ml-2"
98+
/>
99+
</Link>
100+
</Column>
101+
</Row>
102+
</Section>
103+
104+
<Section>
105+
<Link
106+
className="text-[#b7b7b7] underline"
107+
href="https://slackhq.com"
108+
target="_blank"
109+
rel="noopener noreferrer"
110+
>
111+
Our blog
112+
</Link>
113+
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
114+
<Link
115+
className="text-[#b7b7b7] underline"
116+
href="https://slack.com/legal"
117+
target="_blank"
118+
rel="noopener noreferrer"
119+
>
120+
Policies
121+
</Link>
122+
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
123+
<Link
124+
className="text-[#b7b7b7] underline"
125+
href="https://slack.com/help"
126+
target="_blank"
127+
rel="noopener noreferrer"
128+
>
129+
Help center
130+
</Link>
131+
&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
132+
<Link
133+
className="text-[#b7b7b7] underline"
134+
href="https://slack.com/community"
135+
target="_blank"
136+
rel="noopener noreferrer"
137+
data-auth="NotApplicable"
138+
data-linkindex="6"
139+
>
140+
Slack Community
141+
</Link>
142+
<Text className="text-xs leading-[15px] text-left mb-[50px] text-[#b7b7b7]">
143+
©2022 Slack Technologies, LLC, a Salesforce company. <br />
144+
500 Howard Street, San Francisco, CA 94105, USA <br />
145+
<br />
146+
All rights reserved.
147+
</Text>
148+
</Section>
149+
</Container>
150+
</Body>
151+
</Tailwind>
144152
</Html>
145153
);
146154

@@ -149,77 +157,3 @@ SlackConfirmEmail.PreviewProps = {
149157
} as SlackConfirmEmailProps;
150158

151159
export default SlackConfirmEmail;
152-
153-
const footerText = {
154-
fontSize: '12px',
155-
color: '#b7b7b7',
156-
lineHeight: '15px',
157-
textAlign: 'left' as const,
158-
marginBottom: '50px',
159-
};
160-
161-
const footerLink = {
162-
color: '#b7b7b7',
163-
textDecoration: 'underline',
164-
};
165-
166-
const footerLogos = {
167-
marginBottom: '32px',
168-
paddingLeft: '8px',
169-
paddingRight: '8px',
170-
};
171-
172-
const socialMediaIcon = {
173-
display: 'inline',
174-
marginLeft: '8px',
175-
};
176-
177-
const main = {
178-
backgroundColor: '#ffffff',
179-
margin: '0 auto',
180-
fontFamily:
181-
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
182-
};
183-
184-
const container = {
185-
margin: '0 auto',
186-
padding: '0px 20px',
187-
};
188-
189-
const logoContainer = {
190-
marginTop: '32px',
191-
};
192-
193-
const h1 = {
194-
color: '#1d1c1d',
195-
fontSize: '36px',
196-
fontWeight: '700',
197-
margin: '30px 0',
198-
padding: '0',
199-
lineHeight: '42px',
200-
};
201-
202-
const heroText = {
203-
fontSize: '20px',
204-
lineHeight: '28px',
205-
marginBottom: '30px',
206-
};
207-
208-
const codeBox = {
209-
background: 'rgb(245, 244, 245)',
210-
borderRadius: '4px',
211-
marginBottom: '30px',
212-
padding: '40px 10px',
213-
};
214-
215-
const confirmationCodeText = {
216-
fontSize: '30px',
217-
textAlign: 'center' as const,
218-
verticalAlign: 'middle',
219-
};
220-
221-
const text = {
222-
color: '#000',
223-
fontSize: '14px',
224-
lineHeight: '24px',
225-
};

‎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+
slack:
9+
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
810
twitch: ['HelveticaNeue', 'Helvetica', 'Arial', 'sans-serif'],
911
'stack-overflow': ['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
1012
'stack-overflow-mono': 'Consolas,monospace',

0 commit comments

Comments
 (0)