85 lines
No EOL
3.2 KiB
Markdown
85 lines
No EOL
3.2 KiB
Markdown
# Standardisation des Couleurs Email - Résumé des Modifications
|
|
|
|
## 🎯 Objectif
|
|
Uniformiser les couleurs de tous les types d'emails avec :
|
|
- **Header** : `#171424` (bleu-gris foncé)
|
|
- **Bouton** : `#efc543` (jaune doré) avec **texte noir**
|
|
|
|
## ✅ Modifications Réalisées
|
|
|
|
### 1. Service Email Universel (`lib/emailTemplateService.ts`)
|
|
- ✅ Ajout des constantes de couleur standardisées
|
|
- ✅ Remplacement de toutes les `headerColor` par `#171424`
|
|
- ✅ Remplacement de toutes les `buttonColor` par `#efc543`
|
|
- ✅ Remplacement de toutes les `buttonHoverColor` par `#d4a834`
|
|
|
|
### 2. Template HTML (`templates-mails/universal-template.html`)
|
|
- ✅ Modification de la couleur du texte des boutons : `color: #000` (noir)
|
|
- ✅ Variables CSS pour compatibilité avec les couleurs dynamiques
|
|
|
|
## 📊 Types d'Emails Affectés
|
|
Tous les 14 types d'emails utilisent maintenant les mêmes couleurs :
|
|
|
|
| Type d'Email | Header | Bouton | Texte Bouton |
|
|
|--------------|--------|---------|--------------|
|
|
| `contract-created` | `#171424` | `#efc543` | `#000` |
|
|
| `contract-updated` | `#171424` | `#efc543` | `#000` |
|
|
| `contract-cancelled` | `#171424` | `#efc543` | `#000` |
|
|
| `invitation` | `#171424` | `#efc543` | `#000` |
|
|
| `invoice` | `#171424` | `#efc543` | `#000` |
|
|
| `signature-request` | `#171424` | `#efc543` | `#000` |
|
|
| `signature-reminder` | `#171424` | `#efc543` | `#000` |
|
|
| `password-reset` | `#171424` | `#efc543` | `#000` |
|
|
| `otp` | `#171424` | `#efc543` | `#000` |
|
|
| `access-granted` | `#171424` | `#efc543` | `#000` |
|
|
| `access-revoked` | `#171424` | `#efc543` | `#000` |
|
|
| `notification` | `#171424` | `#efc543` | `#000` |
|
|
| `reminder` | `#171424` | `#efc543` | `#000` |
|
|
| `welcome` | `#171424` | `#efc543` | `#000` |
|
|
|
|
## 🔧 Détails Techniques
|
|
|
|
### Commandes Utilisées
|
|
```bash
|
|
# Remplacement automatique des couleurs header
|
|
sed -i '' 's/headerColor: '\''#[^'\'']*'\''/headerColor: '\''#171424'\''/g' lib/emailTemplateService.ts
|
|
|
|
# Remplacement automatique des couleurs bouton
|
|
sed -i '' 's/buttonColor: '\''#[^'\'']*'\''/buttonColor: '\''#efc543'\''/g' lib/emailTemplateService.ts
|
|
|
|
# Remplacement automatique des couleurs hover
|
|
sed -i '' 's/buttonHoverColor: '\''#[^'\'']*'\''/buttonHoverColor: '\''#d4a834'\''/g' lib/emailTemplateService.ts
|
|
```
|
|
|
|
### Variables CSS
|
|
```css
|
|
:root {
|
|
--header-color: #171424;
|
|
--button-color: #efc543;
|
|
--button-hover-color: #d4a834;
|
|
}
|
|
|
|
.cta {
|
|
background: var(--button-color, #efc543);
|
|
color: #000; /* Texte noir sur bouton jaune */
|
|
}
|
|
```
|
|
|
|
## ✅ Validation
|
|
- ✅ **Build Next.js** : Compilation réussie
|
|
- ✅ **Types TypeScript** : Validation réussie
|
|
- ✅ **Couleurs appliquées** : Tous les types d'emails standardisés
|
|
- ✅ **Template HTML** : Couleur de texte adaptée pour le contraste
|
|
|
|
## 🎨 Apparence Finale
|
|
- **Header** : Fond bleu-gris foncé (`#171424`) professionnel
|
|
- **Boutons** : Jaune doré (`#efc543`) avec texte noir pour un excellent contraste
|
|
- **Hover** : Version légèrement plus foncée (`#d4a834`) pour l'interactivité
|
|
|
|
## 📝 Notes
|
|
- Les couleurs des cartes et alertes restent spécifiques à chaque type d'email
|
|
- La cohérence visuelle est maintenant garantie pour tous les headers et boutons
|
|
- Le contraste texte/bouton respecte les standards d'accessibilité
|
|
|
|
---
|
|
*Modification effectuée le 2 octobre 2025* |