Skip to content

Commit e16d145

Browse files
sprwooDaniel Yangalexboden
authored
Implement dark mode and add user-config-lookup email and mailing list email (#29)
Hi, I have implemented the dark mode using CSS media. This was the simplest way I could figure out how to do this. This will also require some proper colouring since right now it just inverts the light mode's colour. Also includes additional emails from #16 Resolves #16 Resolves #17 --------- Co-authored-by: Daniel Yang <dyang339@uwo.ca> Co-authored-by: Alex Boden <alex.boden@uwaterloo.ca>
1 parent 2a8df5a commit e16d145

File tree

5 files changed

+190
-11
lines changed

5 files changed

+190
-11
lines changed

‎emails/_common/watcloud-email.tsx‎

Lines changed: 68 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,75 @@ export function WATcloudEmail({
2020
}) {
2121
return (
2222
<Html>
23-
<Head />
23+
<Head>
24+
<style>
25+
{`
26+
/*
27+
CSS style block for dark mode
28+
Dark mode requires the !important tag to override the default styles
29+
30+
This has not been tested in email clients, so it may break.
31+
32+
This works on Microsoft Edge but not Google Chrome, so may need to look for alternate methods?
33+
*/
34+
@media (prefers-color-scheme: dark) {
35+
body, div {
36+
background-color: #333 !important;
37+
color: #ffffff !important;
38+
}
39+
code {
40+
background-color: #c9c5c5 !important;
41+
}
42+
43+
.email-container {
44+
border: 1px solid #696969 !important;
45+
border-radius: 5px;
46+
margin: 40px auto;
47+
padding: 20px;
48+
maxWidth: 600px;
49+
}
50+
}
51+
52+
body, div {
53+
background-color: #ffffff;
54+
color: #333;
55+
margin: auto;
56+
font-family: sans-serif;
57+
}
58+
59+
code {
60+
background-color: #808080
61+
}
62+
63+
.email-container {
64+
border: 1px solid #eaeaea;
65+
border-radius: 5px;
66+
margin: 40px auto;
67+
padding: 20px;
68+
max-width: 600px;
69+
}
70+
71+
/*
72+
There probably is a way to integrate this into where the this button is actually used
73+
*/
74+
.confirmation-button {
75+
background-color: #007BFF;
76+
color: #ffffff !important;
77+
padding: 10px 20px;
78+
text-decoration: none;
79+
border-radius: 5px;
80+
font-size: 18px;
81+
}
82+
83+
.confirmation-button:hover {
84+
background-color: #0056b3;
85+
}
86+
`}
87+
</style>
88+
</Head>
2489
<Preview>{previewText}</Preview>
25-
<Body style={{ backgroundColor: "#ffffff", color: "#333", margin: "auto", fontFamily: "sans-serif" }}>
26-
<Container style={{ border: "1px solid #eaeaea", borderRadius: "5px", margin: "40px auto", padding: "20px", maxWidth: "600px" }}>
90+
<Body>
91+
<Container className="email-container">
2792
<Img src={getAsset('watcloud-logo').resolveFromCache()} alt="WATcloud Logo" style={{ display: "block", margin: "0 auto" }} height="100" />
2893
{children}
2994
</Container>

‎emails/mailing-list.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {
2+
Heading,
3+
Hr,
4+
Img,
5+
Link,
6+
Markdown,
7+
Text
8+
} from "@react-email/components";
9+
import { z } from "zod";
10+
import { WATcloudEmail } from "./_common/watcloud-email";
11+
12+
const CODE_TTL_SEC = 60 * 60 * 24
13+
14+
const mailingListEmailProps = z.object({
15+
email: z.string(),
16+
confirmationURL: z.string(),
17+
mailingList: z.string(),
18+
});
19+
20+
type mailingListEmailProps = z.infer<typeof mailingListEmailProps>;
21+
22+
export function mailingListEmail(props: mailingListEmailProps) {
23+
const {
24+
email,
25+
confirmationURL,
26+
mailingList,
27+
} = mailingListEmailProps.parse(props);
28+
29+
const previewText = `Confirm your Subscription`;
30+
31+
return (
32+
<WATcloudEmail previewText={previewText}>
33+
<Text>Thanks for signing up for updates from {mailingList}</Text>
34+
<Text>Please confirm your subscription by clicking the button below. This confirmation email will expire in {CODE_TTL_SEC / 60 / 60} hours. </Text>
35+
<Link className="confirmation-button" href={confirmationURL}>Confirm Subscription</Link>
36+
<Text>If the button above does not work, please copy and paste the following URL into your browser</Text>
37+
<pre>{confirmationURL}</pre>
38+
<Text>This email was sent to {email}. If you did not request this subscription, no further action is required. You won't be subscribed if you don't click the confirmation link.</Text>
39+
</WATcloudEmail>
40+
);
41+
};
42+
43+
mailingListEmail.PreviewProps = {
44+
email: "John Doe",
45+
confirmationURL: "https://google.com",
46+
mailingList: "WATcloud",
47+
} as mailingListEmailProps;
48+
49+
export default mailingListEmail;

‎emails/user-config.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
Heading,
3+
Hr,
4+
Img,
5+
Link,
6+
Markdown,
7+
Text
8+
} from "@react-email/components";
9+
import { z } from "zod";
10+
import { WATcloudEmail } from "./_common/watcloud-email";
11+
12+
const userConfigEmailProps = z.object({
13+
name: z.string(),
14+
editLink: z.string(),
15+
});
16+
17+
type userConfigEmailProps = z.infer<typeof userConfigEmailProps>;
18+
19+
export function userConfigEmail(props: userConfigEmailProps) {
20+
const {
21+
name,
22+
editLink,
23+
} = userConfigEmailProps.parse(props);
24+
25+
const previewText = `User Configuration for ${name}`;
26+
27+
return (
28+
<WATcloudEmail previewText={previewText}>
29+
<Text>Hi {name},</Text>
30+
<Text>Greetings from WATcloud! Your WATcloud user config edit link is ready for you <Link href={editLink}>here.</Link></Text>
31+
<Text>If you have any questions or need assistance, don't hesitate to reach out to your WATcloud contact or the WATcloud team at <Link href="mailto:infra-outreach@watonomous.ca">infra-outreach@watonomous.ca</Link>.</Text>
32+
<Text>Vroom vroom, <br></br> WATcloud Team.</Text>
33+
</WATcloudEmail>
34+
);
35+
};
36+
37+
userConfigEmail.PreviewProps = {
38+
name: "John Doe",
39+
editLink: "https://google.com",
40+
} as userConfigEmailProps;
41+
42+
export default userConfigEmail;

‎package-lock.json‎

Lines changed: 27 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,24 @@
77
"dist"
88
],
99
"scripts": {
10-
"dev": "NODE_ENV=development concurrently --kill-others \"email dev\" \"tsc -w\"",
10+
"dev": "cross-env NODE_ENV=development concurrently --kill-others \"email dev\" \"tsc -w\"",
1111
"build": "tsc",
1212
"prepack": "npm run build"
1313
},
1414
"dependencies": {
1515
"@react-email/components": "0.0.25",
1616
"commander": "^12.1.0",
1717
"dedent-js": "^1.0.1",
18-
"react": "18.3.1",
18+
"react": "^18.3.1",
1919
"react-dom": "18.3.1",
2020
"react-email": "3.0.1",
2121
"zod": "^3.23.8"
2222
},
2323
"devDependencies": {
24-
"@types/react": "18.3.4",
24+
"@types/react": "^18.3.18",
2525
"@types/react-dom": "18.3.0",
2626
"concurrently": "^9.0.1",
27+
"cross-env": "^7.0.3",
2728
"typescript": "^5.6.3"
2829
}
2930
}

0 commit comments

Comments
 (0)