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

feat: add brand assets, design tokens and light/dark theme

Browse Source 
- Use real logo/isotype SVGs across app and emails
- Token-based color system aligned with landing (brand scale + semantic tokens)
- ThemeProvider (light/dark/system) with header toggle and settings card
- Embed logo in transactional emails; centralize email colors
This commit is contained in:
Jose Selesan
2026-09-16 17:35:24 -03:00
parent 35ab3f0c06
commit 6100c998be
34 changed files with 435 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/backend/src/lib/email.ts
View File

@@ -1,9 +1,31 @@
import { readFileSync } from 'node:fs'
import nodemailer, { type Transporter } from 'nodemailer'
type VerificationEmailData = { email: string; url: string; name?: string }
type PasswordResetEmailData = { email: string; url: string; name?: string }
type InvitationEmailData = { email: string; url: string; organizationName: string }
// Colores de marca (mismo sistema que la web: index.css de apps/web).
const BRAND_600 = '#2544ea'
const TEXT_STRONG = '#0f172a'
const TEXT_MUTED = '#475569'
const ON_ACCENT = '#ffffff'
const LINK_BG = BRAND_600
// Logotipo embebido como data URI para que los mails no dependan de hosting.
function loadLogoTypoDataUri(): string {
try {
const base64 = readFileSync(
new URL('../assets/logotipo-y-organica.png', import.meta.url),
).toString('base64')
return `data:image/png;base64,${base64}`
} catch {
return ''
}
}
const LOGO_DATA_URI = loadLogoTypoDataUri()
interface EmailProvider {
sendVerificationEmail(data: VerificationEmailData): Promise<void>
sendPasswordResetEmail(data: PasswordResetEmailData): Promise<void>
@@ -30,11 +52,15 @@ class SMTPEmailProvider implements EmailProvider {
}
private layout(title: string, body: string) {
const header = LOGO_DATA_URI
? `<img src="${LOGO_DATA_URI}" alt="Gruperly" width="252" height="83" style="height:36px;width:auto;display:block;margin:0 auto;" />`
: '<h2 style="margin:0 0 16px;">Gruperly</h2>'
return `
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto; padding: 24px; color: #0a2540;">
<h2 style="margin: 0 0 16px;">Gruperly</h2>
<h3 style="margin: 0 0 8px;">${title}</h3>
<p style="line-height: 1.6; color: #334155;">${body}</p>
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 480px; margin: 0 auto; padding: 24px; color: ${TEXT_MUTED};">
<div style="text-align:center;margin-bottom:20px;">${header}</div>
<h3 style="margin: 0 0 8px; color: ${TEXT_STRONG};">${title}</h3>
<p style="line-height: 1.6; color: ${TEXT_MUTED};">${body}</p>
</div>
`
}
@@ -49,7 +75,7 @@ class SMTPEmailProvider implements EmailProvider {
}
async sendVerificationEmail({ email, url, name }: VerificationEmailData) {
const link = `<a href="${url}" style="display:inline-block;background:#1e90ff;color:#fff;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Verificar email</a>`
const link = `<a href="${url}" style="display:inline-block;background:${LINK_BG};color:${ON_ACCENT};text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Verificar email</a>`
await this.send(
email,
'Verifica tu email en Gruperly',
@@ -61,7 +87,7 @@ class SMTPEmailProvider implements EmailProvider {
}
async sendPasswordResetEmail({ email, url, name }: PasswordResetEmailData) {
const link = `<a href="${url}" style="display:inline-block;background:#1e90ff;color:#fff;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Restablecer contraseña</a>`
const link = `<a href="${url}" style="display:inline-block;background:${LINK_BG};color:${ON_ACCENT};text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Restablecer contraseña</a>`
await this.send(
email,
'Restablece tu contraseña en Gruperly',
@@ -73,7 +99,7 @@ class SMTPEmailProvider implements EmailProvider {
}
async sendOrganizationInvitation({ email, url, organizationName }: InvitationEmailData) {
const link = `<a href="${url}" style="display:inline-block;background:#1e90ff;color:#fff;text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Unirme a ${organizationName}</a>`
const link = `<a href="${url}" style="display:inline-block;background:${LINK_BG};color:${ON_ACCENT};text-decoration:none;padding:12px 24px;border-radius:12px;font-weight:600;">Unirme a ${organizationName}</a>`
await this.send(
email,
`Te invitaron a ${organizationName} en Gruperly`,