PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fixed & finished Mail

Browse Source
This commit is contained in:
nocnico
2025-03-12 21:24:34 +01:00
parent 30b0caf19f
commit b1992f64d3
12 changed files with 2616 additions and 2168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
apps/hub-server/modules/mail-templates/CourseCompleted.tsx
View File

@@ -1,12 +1,190 @@
import * as React from "react";
import { Event, User } from "@repo/db";
import { Html, Button, render } from "@react-email/components";
const styles = `
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit;
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0px;
overflow: hidden;
}
.image_block img + div {
display: none;
}
sup,
sub {
font-size: 75%;
line-height: 0;
}
.menu_block.desktop_hide .menu-links span {
mso-hide: all;
}
@media (max-width: 700px) {
.desktop_hide table.icons-inner {
display: inline-block !important;
}
.icons-inner {
text-align: center;
}
.icons-inner td {
margin: 0 auto;
}
}
`;
const Template = ({ event, user }: { user: User; event: Event }) => (
<Html lang="en">
<p>You completed the Course {event.name}</p>
<p>Congratulation</p>
<Html lang="de">
<meta content="text/html; charset=utf-8" httpEquiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link
href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet"
type="text/css"
/>
<style>{styles}</style>
<body style={{ backgroundColor: "#FFFFFF", margin: 0, padding: 0 }}>
<table width="100%">
<tbody>
<tr>
<td>
<table
align="center"
width="680"
style={{ margin: "0 auto", color: "#000000" }}
>
<tbody>
<tr>
<td style={{ textAlign: "center", paddingTop: "30px" }}>
<img
src="http://localhost:3000/mail/var_logo.png"
alt="Logo"
width="80"
style={{ display: "block", margin: "0 auto" }}
/>
</td>
</tr>
<tr>
<td
style={{
textAlign: "center",
fontSize: "46px",
color: "#011936",
}}
>
<strong>Glückwunsch!</strong>
</td>
</tr>
<tr>
<td
style={{
textAlign: "center",
fontSize: "30px",
color: "#011936",
}}
>
Du hast den Kurs <strong>{event.name}</strong>{" "}
abgeschlossen!
</td>
</tr>
<tr>
<td style={{ textAlign: "center", padding: "20px" }}>
<img
src="http://localhost:3000/badges/p-1.png"
alt="Badge"
width="80"
style={{ display: "block", margin: "0 auto" }}
/>
</td>
</tr>
<tr>
<td
style={{
textAlign: "center",
fontSize: "18px",
color: "#011936",
}}
>
Mit dem Abschluss von Kursen verdienst du dir nach und
nach immer mehr Badges.
</td>
</tr>
<tr>
<td style={{ textAlign: "center", paddingTop: "20px" }}>
<a
href="https://your-platform.com"
style={{
padding: "10px",
textDecoration: "none",
borderRadius: "20px",
color: "#011936",
}}
>
Impressum
</a>
<span style={{ margin: "0 10px" }}>|</span>
<a
href="https://your-platform.com"
style={{
padding: "10px",
textDecoration: "none",
borderRadius: "20px",
color: "#011936",
}}
>
Datenschutzerklärung
</a>
<span style={{ margin: "0 10px" }}>|</span>
<a
href="https://your-platform.com"
style={{
padding: "10px",
textDecoration: "none",
borderRadius: "20px",
color: "#011936",
}}
>
Knowledgebase
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</Html>
);