Skip to content

Commit 3f24cc5

Browse files
gabrielmferngabrielmfern
committed
use tailwind
1 parent a65e14a commit 3f24cc5

File tree

2 files changed

+49
-91
lines changed

2 files changed

+49
-91
lines changed

‎apps/demo/emails/notifications/github-access-token.tsx‎

Lines changed: 43 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import {
88
Link,
99
Preview,
1010
Section,
11+
Tailwind,
1112
Text,
1213
} from '@react-email/components';
13-
import { Tailwind } from '@react-email/tailwind';
14+
import tailwindConfig from '../tailwind.config';
1415

1516
interface GithubAccessTokenEmailProps {
1617
username?: string;
@@ -25,44 +26,50 @@ export const GithubAccessTokenEmail = ({
2526
}: GithubAccessTokenEmailProps) => (
2627
<Html>
2728
<Head />
28-
<Body style={main}>
29-
<Preview>
30-
A fine-grained personal access token has been added to your account
31-
</Preview>
32-
<Container style={container}>
33-
<Img
34-
src={`${baseUrl}/static/github.png`}
35-
width="32"
36-
height="32"
37-
alt="Github"
38-
/>
39-
40-
<Text style={title}>
41-
<strong>@{username}</strong>, a personal access was created on your
42-
account.
43-
</Text>
44-
45-
<Section style={section}>
46-
<Text style={text}>
47-
Hey <strong>{username}</strong>!
48-
</Text>
49-
<Text style={text}>
50-
A fine-grained personal access token (<Link>resend</Link>) was
51-
recently added to your account.
29+
<Tailwind config={tailwindConfig}>
30+
<Body className="bg-white text-[#24292e] font-github">
31+
<Preview>
32+
A fine-grained personal access token has been added to your account
33+
</Preview>
34+
<Container className="max-w-lg mx-auto py-5 pb-12">
35+
<Img
36+
src={`${baseUrl}/static/github.png`}
37+
width="32"
38+
height="32"
39+
alt="Github"
40+
/>
41+
42+
<Text className="text-2xl leading-tight">
43+
<strong>@{username}</strong>, a personal access was created on your
44+
account.
5245
</Text>
5346

54-
<Button style={button}>View your token</Button>
55-
</Section>
56-
<Text style={links}>
57-
<Link style={link}>Your security audit log</Link> ・{' '}
58-
<Link style={link}>Contact support</Link>
59-
</Text>
47+
<Section className="p-6 border border-solid border-[#dedede] rounded text-center">
48+
<Text className="mb-3 text-left">
49+
Hey <strong>{username}</strong>!
50+
</Text>
51+
<Text className="mb-3 text-left">
52+
A fine-grained personal access token (<Link>resend</Link>) was
53+
recently added to your account.
54+
</Text>
55+
56+
<Button className="text-sm bg-[#28a745] text-white leading-normal rounded-lg py-3 px-6">
57+
View your token
58+
</Button>
59+
</Section>
60+
<Text className="text-center">
61+
<Link className="text-[#0366d6] text-xs">
62+
Your security audit log
63+
</Link>{' '}
64+
・ <Link className="text-[#0366d6] text-xs">Contact support</Link>
65+
</Text>
6066

61-
<Text style={footer}>
62-
GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107
63-
</Text>
64-
</Container>
65-
</Body>
67+
<Text className="text-[#6a737d] text-xs text-center mt-16">
68+
GitHub, Inc. ・88 Colin P Kelly Jr Street ・San Francisco, CA 94107
69+
</Text>
70+
</Container>
71+
</Body>
72+
</Tailwind>
6673
</Html>
6774
);
6875

@@ -71,58 +78,3 @@ GithubAccessTokenEmail.PreviewProps = {
7178
} as GithubAccessTokenEmailProps;
7279

7380
export default GithubAccessTokenEmail;
74-
75-
const main = {
76-
backgroundColor: '#ffffff',
77-
color: '#24292e',
78-
fontFamily:
79-
'-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
80-
};
81-
82-
const container = {
83-
maxWidth: '480px',
84-
margin: '0 auto',
85-
padding: '20px 0 48px',
86-
};
87-
88-
const title = {
89-
fontSize: '24px',
90-
lineHeight: 1.25,
91-
};
92-
93-
const section = {
94-
padding: '24px',
95-
border: 'solid 1px #dedede',
96-
borderRadius: '5px',
97-
textAlign: 'center' as const,
98-
};
99-
100-
const text = {
101-
margin: '0 0 10px 0',
102-
textAlign: 'left' as const,
103-
};
104-
105-
const button = {
106-
fontSize: '14px',
107-
backgroundColor: '#28a745',
108-
color: '#fff',
109-
lineHeight: 1.5,
110-
borderRadius: '0.5em',
111-
padding: '12px 24px',
112-
};
113-
114-
const links = {
115-
textAlign: 'center' as const,
116-
};
117-
118-
const link = {
119-
color: '#0366d6',
120-
fontSize: '12px',
121-
};
122-
123-
const footer = {
124-
color: '#6a737d',
125-
fontSize: '12px',
126-
textAlign: 'center' as const,
127-
marginTop: '60px',
128-
};

‎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+
github:
8+
'-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
9+
},
10+
},
511
} satisfies TailwindConfig;

0 commit comments

Comments
 (0)