wkadmin/the-tip-top-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: harmonize newsletter email colors with orange theme

Browse Source 
- Change header background from gold to vibrant orange (#f59e0b → #ea580c)
- Update welcome section to match header colors
- Change footer from dark gray to orange gradient for consistency
- Add logo icon in white circle for professional appearance
- Update game section border to orange
- Change benefit items background to orange tones (#fef3c7 → #fed7aa)
- All sections now use consistent orange/red color palette

Design improvements:
- Cohesive color scheme throughout the email
- Logo icon in white circular background with shadow
- Modern and energetic orange theme matching buttons
- Better visual hierarchy and brand consistency

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-11-24 16:29:36 +01:00
parent 93cd8d38ff
commit 5c8d6b9262
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/services/newsletter.service.js
View File

@ -103,7 +103,7 @@ export const sendNewsletterConfirmationEmail = async (email) => {
box-shadow: 0 10px 40px rgba(0,0,0,0.15); box-shadow: 0 10px 40px rgba(0,0,0,0.15);
} }
.header { .header {
background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%); background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
color: white; color: white;
padding: 50px 30px; padding: 50px 30px;
text-align: center; text-align: center;
@ -116,6 +116,14 @@ export const sendNewsletterConfirmationEmail = async (email) => {
gap: 15px; gap: 15px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.logo-image {
width: 60px;
height: 60px;
background: white;
border-radius: 50%;
padding: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.logo-icon { .logo-icon {
font-size: 48px; font-size: 48px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
@ -134,7 +142,7 @@ export const sendNewsletterConfirmationEmail = async (email) => {
font-weight: 500; font-weight: 500;
} }
.welcome-section { .welcome-section {
background: linear-gradient(135deg, #d4a574 0%, #c4956a 100%); background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
color: white; color: white;
padding: 40px 30px; padding: 40px 30px;
text-align: center; text-align: center;
@ -176,12 +184,12 @@ export const sendNewsletterConfirmationEmail = async (email) => {
} }
.game-section { .game-section {
background: white; background: white;
border: 3px solid #d4a574; border: 3px solid #f59e0b;
border-radius: 20px; border-radius: 20px;
padding: 35px; padding: 35px;
text-align: center; text-align: center;
margin: 30px 0; margin: 30px 0;
box-shadow: 0 4px 15px rgba(212, 165, 116, 0.2); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25);
} }
.game-icon { .game-icon {
font-size: 64px; font-size: 64px;
@ -277,9 +285,9 @@ export const sendNewsletterConfirmationEmail = async (email) => {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px; padding: 15px;
background: linear-gradient(135deg, #faf9f5 0%, #f5f5f0 100%); background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
border-radius: 10px; border-radius: 10px;
border-left: 4px solid #d4a574; border-left: 4px solid #f59e0b;
} }
.benefit-icon { .benefit-icon {
font-size: 28px; font-size: 28px;
@ -291,8 +299,8 @@ export const sendNewsletterConfirmationEmail = async (email) => {
font-weight: 500; font-weight: 500;
} }
.footer { .footer {
background: linear-gradient(135deg, #5a5a4e 0%, #4a4a42 100%); background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
color: #e5e4dc; color: white;
text-align: center; text-align: center;
padding: 40px 30px; padding: 40px 30px;
} }
@ -304,7 +312,7 @@ export const sendNewsletterConfirmationEmail = async (email) => {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
margin-bottom: 15px; margin-bottom: 15px;
color: #d4a574; color: white;
} }
.footer-date { .footer-date {
font-size: 13px; font-size: 13px;
@ -329,7 +337,9 @@ export const sendNewsletterConfirmationEmail = async (email) => {
<!-- En-tête avec Logo --> <!-- En-tête avec Logo -->
<div class="header"> <div class="header">
<div class="logo-container"> <div class="logo-container">
<div class="logo-icon">🍃</div> <div class="logo-image">
<div class="logo-icon">🍃</div>
</div>
<div class="logo-text">Thé Tip Top</div> <div class="logo-text">Thé Tip Top</div>
</div> </div>
<div class="header-subtitle">Newsletter Jeu Concours</div> <div class="header-subtitle">Newsletter Jeu Concours</div>