Skip to content

Commit 7ad2294

Browse files
gabrielmferngabrielmfern
committed
migrate google play policy to tailwind v4
1 parent 00991bc commit 7ad2294

File tree

2 files changed

+158
-155
lines changed

2 files changed

+158
-155
lines changed

‎apps/demo/emails/newsletters/google-play-policy-update.tsx‎

Lines changed: 151 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@ import {
1010
Preview,
1111
Row,
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
const baseUrl = process.env.VERCEL_URL
1819
? `https://${process.env.VERCEL_URL}`
@@ -21,171 +22,167 @@ const baseUrl = process.env.VERCEL_URL
2122
export const GooglePlayPolicyUpdateEmail = () => (
2223
<Html>
2324
<Head />
24-
<Body style={main}>
25-
<Preview>Google Play developers</Preview>
26-
<Container style={container}>
27-
<Section>
28-
<Row>
29-
<Column>
30-
<Img
31-
style={headerBlue}
32-
src={`${baseUrl}/static/google-play-header.png`}
33-
width="305"
34-
height="28"
35-
alt="Google Play developers header blue transparent"
36-
/>
37-
<Img
38-
style={sectionLogo}
39-
src={`${baseUrl}/static/google-play-logo.png`}
40-
width="155"
41-
height="31"
42-
alt="Google Play"
43-
/>
44-
</Column>
45-
</Row>
46-
</Section>
47-
48-
<Section style={paragraphContent}>
49-
<Hr style={hr} />
50-
<Text style={heading}>DEVELOPER UPDATE</Text>
51-
<Text style={paragraph}>Hello Google Play Developer,</Text>
52-
<Text style={paragraph}>
53-
We strive to make Google Play a safe and trusted experience for
54-
users.
55-
</Text>
56-
<Text style={paragraph}>
57-
We've added clarifications to our{' '}
58-
<Link href="https://notifications.google.com" style={link}>
59-
Target API Level policy
60-
</Link>
61-
. Because this is a clarification, our enforcement standards and
62-
practices for this policy remain the same.
63-
</Text>
64-
</Section>
65-
<Section style={paragraphList}>
66-
<Text style={paragraph}>
67-
We’re noting exceptions to the{' '}
68-
<Link href="https://notifications.google.com" style={link}>
69-
Target API Level policy
70-
</Link>
71-
, which can be found in our updated{' '}
72-
<Link href="https://notifications.google.com" style={link}>
73-
Help Center article.
74-
</Link>
75-
These exceptions include permanently private apps and apps that
76-
target automotive or wearables form factors and are bundled within
77-
the same package.{' '}
78-
<Link href="https://notifications.google.com" style={link}>
79-
Learn more
80-
</Link>
81-
</Text>
82-
</Section>
83-
<Section style={paragraphContent}>
84-
<Text style={paragraph}>
85-
We’re also extending the deadline to give you more time to adjust to
86-
these changes. Now, apps that target API level 29 or below will
87-
start experiencing reduced distribution starting <b>Jan 31, 2023</b>{' '}
88-
instead of Nov 1, 2022. If you need more time to update your app,
89-
you can request an extension to keep your app discoverable to all
90-
users until May 1, 2023.
91-
</Text>
92-
<Hr style={hr} />
93-
</Section>
94-
95-
<Section style={paragraphContent}>
96-
<Text style={paragraph}>Thank you,</Text>
97-
<Text style={{ ...paragraph, fontSize: '20px' }}>
98-
The Google Play team
99-
</Text>
100-
</Section>
101-
102-
<Section style={containerContact}>
103-
<Row>
104-
<Text style={paragraph}>Connect with us</Text>
105-
</Row>
106-
<Row
107-
align="left"
108-
style={{
109-
width: '84px',
110-
float: 'left',
111-
}}
112-
>
113-
<Column style={{ paddingRight: '4px' }}>
114-
<Link href="https://notifications.google.com">
25+
<Tailwind config={tailwindConfig}>
26+
<Body className="bg-[#dbddde] font-google">
27+
<Preview>Google Play developers</Preview>
28+
<Container className="my-[30px] mx-auto bg-white rounded-[5px] overflow-hidden">
29+
<Section>
30+
<Row>
31+
<Column>
11532
<Img
116-
width="28"
33+
className="-mt-px"
34+
src={`${baseUrl}/static/google-play-header.png`}
35+
width="305"
11736
height="28"
118-
src={`${baseUrl}/static/google-play-chat.png`}
37+
alt="Google Play developers header blue transparent"
11938
/>
120-
</Link>
121-
</Column>
122-
<Column style={{ paddingRight: '4px' }}>
123-
<Link href="https://notifications.google.com">
12439
<Img
125-
width="28"
126-
height="28"
127-
src={`${baseUrl}/static/google-play-icon.png`}
40+
className="px-10"
41+
src={`${baseUrl}/static/google-play-logo.png`}
42+
width="155"
43+
height="31"
44+
alt="Google Play"
12845
/>
46+
</Column>
47+
</Row>
48+
</Section>
49+
50+
<Section className="px-10">
51+
<Hr className="border-[#e8eaed] my-5" />
52+
<Text className="text-sm leading-[26px] font-bold text-[#004dcf]">
53+
DEVELOPER UPDATE
54+
</Text>
55+
<Text className="text-sm leading-[22px] text-[#3c4043]">
56+
Hello Google Play Developer,
57+
</Text>
58+
<Text className="text-sm leading-[22px] text-[#3c4043]">
59+
We strive to make Google Play a safe and trusted experience for
60+
users.
61+
</Text>
62+
<Text className="text-sm leading-[22px] text-[#3c4043]">
63+
We've added clarifications to our{' '}
64+
<Link
65+
href="https://notifications.google.com"
66+
className="text-sm leading-[22px] text-[#004dcf]"
67+
>
68+
Target API Level policy
12969
</Link>
130-
</Column>
131-
<Column style={{ paddingRight: '4px' }}>
132-
<Link href="https://notifications.google.com">
133-
<Img
134-
width="28"
135-
height="28"
136-
src={`${baseUrl}/static/google-play-academy.png`}
137-
/>
70+
. Because this is a clarification, our enforcement standards and
71+
practices for this policy remain the same.
72+
</Text>
73+
</Section>
74+
<Section className="pl-10">
75+
<Text className="text-sm leading-[22px] text-[#3c4043]">
76+
We're noting exceptions to the{' '}
77+
<Link
78+
href="https://notifications.google.com"
79+
className="text-sm leading-[22px] text-[#004dcf]"
80+
>
81+
Target API Level policy
82+
</Link>
83+
, which can be found in our updated{' '}
84+
<Link
85+
href="https://notifications.google.com"
86+
className="text-sm leading-[22px] text-[#004dcf]"
87+
>
88+
Help Center article.
13889
</Link>
139-
</Column>
140-
</Row>
141-
<Row>
142-
<Img
143-
style={footer}
144-
width="540"
145-
height="48"
146-
src={`${baseUrl}/static/google-play-footer.png`}
147-
/>
148-
</Row>
149-
</Section>
150-
151-
<Section style={{ ...paragraphContent, paddingBottom: 30 }}>
152-
<Text
153-
style={{
154-
...paragraph,
155-
fontSize: '12px',
156-
textAlign: 'center',
157-
margin: 0,
158-
}}
159-
>
160-
© 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA
161-
94043, USA
162-
</Text>
163-
<Text
164-
style={{
165-
...paragraph,
166-
fontSize: '12px',
167-
textAlign: 'center',
168-
margin: 0,
169-
}}
170-
>
171-
You have received this mandatory email service announcement to
172-
update you about important changes to your Google Play Developer
173-
account.
174-
</Text>
175-
</Section>
176-
</Container>
177-
</Body>
90+
These exceptions include permanently private apps and apps that
91+
target automotive or wearables form factors and are bundled within
92+
the same package.{' '}
93+
<Link
94+
href="https://notifications.google.com"
95+
className="text-sm leading-[22px] text-[#004dcf]"
96+
>
97+
Learn more
98+
</Link>
99+
</Text>
100+
</Section>
101+
<Section className="px-10">
102+
<Text className="text-sm leading-[22px] text-[#3c4043]">
103+
We're also extending the deadline to give you more time to adjust
104+
to these changes. Now, apps that target API level 29 or below will
105+
start experiencing reduced distribution starting{' '}
106+
<b>Jan 31, 2023</b> instead of Nov 1, 2022. If you need more time
107+
to update your app, you can request an extension to keep your app
108+
discoverable to all users until May 1, 2023.
109+
</Text>
110+
<Hr className="border-[#e8eaed] my-5" />
111+
</Section>
112+
113+
<Section className="px-10">
114+
<Text className="text-sm leading-[22px] text-[#3c4043]">
115+
Thank you,
116+
</Text>
117+
<Text className="text-xl leading-[22px] text-[#3c4043]">
118+
The Google Play team
119+
</Text>
120+
</Section>
121+
122+
<Section className="bg-[#f0fcff] w-[90%] rounded-[5px] overflow-hidden pl-5">
123+
<Row>
124+
<Text className="text-sm leading-[22px] text-[#3c4043]">
125+
Connect with us
126+
</Text>
127+
</Row>
128+
<Row align="left" className="w-[84px] float-left">
129+
<Column className="pr-1">
130+
<Link href="https://notifications.google.com">
131+
<Img
132+
width="28"
133+
height="28"
134+
src={`${baseUrl}/static/google-play-chat.png`}
135+
/>
136+
</Link>
137+
</Column>
138+
<Column className="pr-1">
139+
<Link href="https://notifications.google.com">
140+
<Img
141+
width="28"
142+
height="28"
143+
src={`${baseUrl}/static/google-play-icon.png`}
144+
/>
145+
</Link>
146+
</Column>
147+
<Column className="pr-1">
148+
<Link href="https://notifications.google.com">
149+
<Img
150+
width="28"
151+
height="28"
152+
src={`${baseUrl}/static/google-play-academy.png`}
153+
/>
154+
</Link>
155+
</Column>
156+
</Row>
157+
<Row>
158+
<Img
159+
className="max-w-full"
160+
width="540"
161+
height="48"
162+
src={`${baseUrl}/static/google-play-footer.png`}
163+
/>
164+
</Row>
165+
</Section>
166+
167+
<Section className="px-10 pb-[30px]">
168+
<Text className="text-xs leading-[22px] text-[#3c4043] text-center m-0">
169+
© 2022 Google LLC 1600 Amphitheatre Parkway, Mountain View, CA
170+
94043, USA
171+
</Text>
172+
<Text className="text-xs leading-[22px] text-[#3c4043] text-center m-0">
173+
You have received this mandatory email service announcement to
174+
update you about important changes to your Google Play Developer
175+
account.
176+
</Text>
177+
</Section>
178+
</Container>
179+
</Body>
180+
</Tailwind>
178181
</Html>
179182
);
180183

181184
export default GooglePlayPolicyUpdateEmail;
182185

183-
const main = {
184-
backgroundColor: '#dbddde',
185-
fontFamily:
186-
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
187-
};
188-
189186
const sectionLogo = {
190187
padding: '0 40px',
191188
};

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
1+
import { pixelBasedPreset, type TailwindConfig } from "@react-email/components";
22

33
export default {
44
presets: [pixelBasedPreset],
5+
theme: {
6+
fontFamily: {
7+
google:
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)