Skip to content

Commit a890efc

Browse files
gabrielmferngabrielmfern
committed
use tailwind v4
1 parent 25f40f4 commit a890efc

File tree

2 files changed

+45
-98
lines changed

2 files changed

+45
-98
lines changed

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

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

1718
interface LinearLoginCodeEmailProps {
1819
validationCode?: string;
@@ -27,33 +28,43 @@ export const LinearLoginCodeEmail = ({
2728
}: LinearLoginCodeEmailProps) => (
2829
<Html>
2930
<Head />
30-
<Body style={main}>
31-
<Preview>Your login code for Linear</Preview>
32-
<Container style={container}>
33-
<Img
34-
src={`${baseUrl}/static/linear-logo.png`}
35-
width="42"
36-
height="42"
37-
alt="Linear"
38-
style={logo}
39-
/>
40-
<Heading style={heading}>Your login code for Linear</Heading>
41-
<Section style={buttonContainer}>
42-
<Button style={button} href="https://linear.app">
43-
Login to Linear
44-
</Button>
45-
</Section>
46-
<Text style={paragraph}>
47-
This link and code will only be valid for the next 5 minutes. If the
48-
link does not work, you can use the login verification code directly:
49-
</Text>
50-
<code style={code}>{validationCode}</code>
51-
<Hr style={hr} />
52-
<Link href="https://linear.app" style={reportLink}>
53-
Linear
54-
</Link>
55-
</Container>
56-
</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-10.5 h-10.5"
41+
/>
42+
<Heading className="text-2xl tracking-tight leading-[1.3] font-normal text-[#484848] pt-4 px-0 pb-0">
43+
Your login code for Linear
44+
</Heading>
45+
<Section className="py-7 px-0">
46+
<Button
47+
className="bg-[#5e6ad2] rounded font-semibold text-white text-[15px] no-underline text-center block py-[11px] px-6"
48+
href="https://linear.app"
49+
>
50+
Login to Linear
51+
</Button>
52+
</Section>
53+
<Text className="mb-4 mx-0 mt-0 leading-[1.4] text-[14px] 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-xl tracking-tight">
59+
{validationCode}
60+
</code>
61+
<Hr className="border-[#dfe1e4] mt-10.5 mb-6.5" />
62+
<Link href="https://linear.app" className="text-[#b4becc] text-sm">
63+
Linear
64+
</Link>
65+
</Container>
66+
</Body>
67+
</Tailwind>
5768
</Html>
5869
);
5970

@@ -63,73 +74,3 @@ LinearLoginCodeEmail.PreviewProps = {
6374

6475
export default LinearLoginCodeEmail;
6576

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

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,10 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
22

33
export default {
44
presets: [pixelBasedPreset],
5+
theme: {
6+
fontFamily: {
7+
linear:
8+
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
9+
},
10+
},
511
} satisfies TailwindConfig;

0 commit comments

Comments
 (0)