jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat(emails): update email layout padding and remove min-height for improved design consistency

Browse Source
This commit is contained in:
Jose Selesan
2026-06-03 10:57:23 -03:00
parent b20b5c2b8b
commit 228004a7e0
3 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
AGENTS.md
View File

@@ -204,6 +204,7 @@ Exportado como `wrapLayout(content)`. Proporciona:
- Fondo: `#edf7f4` - Fondo: `#edf7f4`
- Card blanca: `max-width: 520px`, `border-radius: 28px`, `box-shadow: 0 24px 70px rgba(15,23,42,0.12)`, `border: 1px solid rgba(5,9,20,0.1)` - Card blanca: `max-width: 520px`, `border-radius: 28px`, `box-shadow: 0 24px 70px rgba(15,23,42,0.12)`, `border: 1px solid rgba(5,9,20,0.1)`
- Playzer favicon: `{APP_BASE_URL}/playzer-favicon-512-transparent.png` (está en `apps/frontend/public/`) - Playzer favicon: `{APP_BASE_URL}/playzer-favicon-512-transparent.png` (está en `apps/frontend/public/`)
- **Sin `min-height: 100vh`**: la card empieza arriba, no centrada verticalmente
```typescript ```typescript
import { wrapLayout } from '@/emails/booking-confirmation'; import { wrapLayout } from '@/emails/booking-confirmation';
@@ -222,6 +223,15 @@ const html = wrapLayout(`<tr>...contenido...</tr>`);
| **Pie** | Sin pie de marca. Solo texto secundario opcional centrado si es necesario. | | **Pie** | Sin pie de marca. Solo texto secundario opcional centrado si es necesario. |
| **Sin botones de acción** | Los emails de booking **no** incluyen los botones "Compartir por WhatsApp" ni "Hacer otra reserva". | | **Sin botones de acción** | Los emails de booking **no** incluyen los botones "Compartir por WhatsApp" ni "Hacer otra reserva". |
### Padding estándar
| Ubicación | Valor |
|-----------|-------|
| Wrapper (outer `<td>`) | `padding: 24px 12px` |
| Primer `<td>` del contenido (header) | `padding: 24px 20px 16px` |
| `<td>` intermedios (cards, texto) | `padding: 0 20px 16px` |
| Último `<td>` del contenido | `padding: 0 20px 24px` |
### Colores de badges según estado ### Colores de badges según estado
| Estado | Fondo badge | Texto badge | | Estado | Fondo badge | Texto badge |

28
apps/backend/src/emails/booking-confirmation.ts
View File

@@ -59,9 +59,9 @@ export function wrapLayout(content: string) {
<style>${BASE_STYLES}</style> <style>${BASE_STYLES}</style>
</head> </head>
<body style="margin:0;padding:0;background-color:#edf7f4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;"> <body style="margin:0;padding:0;background-color:#edf7f4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#edf7f4;min-height:100vh;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#edf7f4;">
<tr> <tr>
<td align="center" style="padding:32px 16px;"> <td align="center" style="padding:24px 12px;">
<table role="presentation" width="100%" style="max-width:520px;background-color:#ffffff;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,42,0.12);border:1px solid rgba(5,9,20,0.1);"> <table role="presentation" width="100%" style="max-width:520px;background-color:#ffffff;border-radius:28px;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,42,0.12);border:1px solid rgba(5,9,20,0.1);">
${content} ${content}
</table> </table>
@@ -78,7 +78,7 @@ export function bookingConfirmationHtml(data: BookingEmailData): string {
const content = ` const content = `
<tr> <tr>
<td style="padding:32px 32px 24px;"> <td style="padding:24px 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr> <tr>
<td valign="top"> <td valign="top">
@@ -111,7 +111,7 @@ export function bookingConfirmationHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 24px;"> <td style="padding:0 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);">
<tr> <tr>
<td style="padding:20px 24px;"> <td style="padding:20px 24px;">
@@ -147,7 +147,7 @@ export function bookingConfirmationHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 24px;"> <td style="padding:0 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;">
<tr> <tr>
<td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;"> <td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;">
@@ -172,7 +172,7 @@ export function bookingConfirmationHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 32px;"> <td style="padding:0 20px 24px;">
<p style="margin:0;font-size:13px;color:#6b7280;text-align:center;line-height:1.5;"> <p style="margin:0;font-size:13px;color:#6b7280;text-align:center;line-height:1.5;">
Present&aacute; el c&oacute;digo de reserva al llegar al complejo. Present&aacute; el c&oacute;digo de reserva al llegar al complejo.
<br /> <br />
@@ -189,7 +189,7 @@ export function bookingCancelledHtml(data: BookingEmailData): string {
const content = ` const content = `
<tr> <tr>
<td style="padding:32px 32px 24px;"> <td style="padding:24px 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr> <tr>
<td valign="top"> <td valign="top">
@@ -222,7 +222,7 @@ export function bookingCancelledHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 24px;"> <td style="padding:0 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);">
<tr> <tr>
<td style="padding:20px 24px;"> <td style="padding:20px 24px;">
@@ -242,7 +242,7 @@ export function bookingCancelledHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 24px;"> <td style="padding:0 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fef2f2;border-radius:24px;border:1px solid rgba(220,38,38,0.3);"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fef2f2;border-radius:24px;border:1px solid rgba(220,38,38,0.3);">
<tr> <tr>
<td style="padding:20px 24px;"> <td style="padding:20px 24px;">
@@ -257,7 +257,7 @@ export function bookingCancelledHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 32px;"> <td style="padding:0 20px 24px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;">
<tr> <tr>
<td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;"> <td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;">
@@ -289,7 +289,7 @@ export function bookingNoShowHtml(data: BookingEmailData): string {
const content = ` const content = `
<tr> <tr>
<td style="padding:32px 32px 24px;"> <td style="padding:24px 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr> <tr>
<td valign="top"> <td valign="top">
@@ -322,7 +322,7 @@ export function bookingNoShowHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 24px;"> <td style="padding:0 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#f0fdf4;border-radius:24px;border:1px solid rgba(5,150,105,0.3);">
<tr> <tr>
<td style="padding:20px 24px;"> <td style="padding:20px 24px;">
@@ -342,7 +342,7 @@ export function bookingNoShowHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 24px;"> <td style="padding:0 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fffbeb;border-radius:24px;border:1px solid rgba(217,119,6,0.3);"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color:#fffbeb;border-radius:24px;border:1px solid rgba(217,119,6,0.3);">
<tr> <tr>
<td style="padding:20px 24px;"> <td style="padding:20px 24px;">
@@ -357,7 +357,7 @@ export function bookingNoShowHtml(data: BookingEmailData): string {
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 32px;"> <td style="padding:0 20px 24px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;">
<tr> <tr>
<td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;"> <td width="50%" style="padding:16px;border-right:1px solid #e5e7eb;background-color:#ffffff;">

8
apps/backend/src/lib/auth.ts
View File

@@ -38,7 +38,7 @@ export const auth = betterAuth({
const content = ` const content = `
<tr> <tr>
<td style="padding:32px 32px 24px;"> <td style="padding:24px 20px 16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"> <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr> <tr>
<td valign="top"> <td valign="top">
@@ -71,7 +71,7 @@ export const auth = betterAuth({
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 24px;"> padding:0 20px 16px;
<p style="margin:0;font-size:15px;color:#374151;line-height:1.6;"> <p style="margin:0;font-size:15px;color:#374151;line-height:1.6;">
Hac&eacute; click en el bot&oacute;n de abajo para verificar tu direcci&oacute;n de correo electr&oacute;nico y empezar a usar Playzer. Hac&eacute; click en el bot&oacute;n de abajo para verificar tu direcci&oacute;n de correo electr&oacute;nico y empezar a usar Playzer.
</p> </p>
@@ -79,7 +79,7 @@ export const auth = betterAuth({
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 32px;"> <td style="padding:0 20px 24px;">
<table role="presentation" cellpadding="0" cellspacing="0"> <table role="presentation" cellpadding="0" cellspacing="0">
<tr> <tr>
<td style="background-color:#059669;border-radius:12px;text-align:center;"> <td style="background-color:#059669;border-radius:12px;text-align:center;">
@@ -91,7 +91,7 @@ export const auth = betterAuth({
</tr> </tr>
<tr> <tr>
<td style="padding:0 32px 32px;"> <td style="padding:0 20px 24px;">
<p style="margin:0;font-size:13px;color:#9ca3af;text-align:center;line-height:1.5;"> <p style="margin:0;font-size:13px;color:#9ca3af;text-align:center;line-height:1.5;">
Si no creaste una cuenta en Playzer, ignor&aacute; este mensaje. Si no creaste una cuenta en Playzer, ignor&aacute; este mensaje.
</p> </p>