06-Apr-2026 — make all Brevo templates fluid, consistent, and Ramblers-aligned #223

build 579 — commit 8811ac3

Introduce a shared Ramblers-aligned email base layout that all NGX transactional templates inherit from, matching the Ramblers MailChimp national campaign design system.

Layout builder (`ramblers-email-layout.ts`) now generates complete HTML

Several recent Ramblers national campaigns were used as the structural reference point for the Brevo email redesign. The implementation started from those campaigns, but a few details were intentionally refined during development so the final Brevo output rendered more consistently across desktop, mobile, Outlook and the in-app preview.

Element	Value
Container max-width	`600px` fixed desktop, responsive at `768px` and `480px` breakpoints
Page background	`#f4f4f4`
Content background	`#ffffff`
Body font	`Helvetica, Arial, sans-serif`, `16px`, `#222222`, `150%` line-height
H1	Helvetica `40px` bold `#222222`, centered, `125%` line-height
H2	Helvetica `34px` bold `#222222`, left-aligned
H3	Helvetica `22px` bold `#444444`, left-aligned
H4	Helvetica `20px` bold `#444444`, left-aligned
Body links	`#c05711` (burnt orange) with underline
Header treatment	White content container with linked banner image and no extra internal banner padding
Footer background	`#404141` (charcoal) with white `12px` centred text
Footer social row	Centred social icons in an email-safe table layout with vertical padding
Image treatment	`border: 0; height: auto; outline: none;` plus `-ms-interpolation-mode: bicubic` for Outlook
Outlook compat	`mso-table-lspace: 0pt` and `mso-table-rspace: 0pt`, plus related Outlook-safe table/image handling
CTA style	Rectangular full-width button, accent background, bold dark text (`#222222`), centred, `20px` vertical padding, no rounded corners, no border
Section divider	Accent-coloured horizontal rule, `6px` thick, inset to align with the body-content column rather than full edge-to-edge container width

Accent colour — named palette with three known values

The only token that varies by email context is the accent colour, used for CTA button backgrounds and divider rules. The shared footer/background typography does not vary by accent in the shipped implementation.

Brand name	Hex	Usage
Sunrise	`#F9B104`	Default primary accent, CTA buttons and divider rules
Rosie cheeks	`#F6B09D`	Optional accent for divider/button variants
Mint cake	`#9BC8AB`	Optional accent for divider/button variants

Notes on the final implementation

The Brevo templates were rebuilt around a shared Ramblers-aligned layout rather than separate per-template wrappers.
Transactional and campaign templates now share the same header, divider, spacing, typography and footer system.
The greeting/salutation position was standardised via messageMergeFields.ADDRESS_LINE.

Improved WYSIWYG Preview on email send dialog

The preview experience was also updated so the rendered output more closely matches the sent email styling.
Add backend Brevo template rendering for realistic preview output and update committee/group-event notification preview tabs to use isolated iframe rendering rather than Angular DOM injection
Normalise salutation handling around ADDRESS_LINE so templates and Angular notification bodies no longer duplicate greetings
Align Ramblers-fed event contact links and CTA labels in notification previews with real event-type and remote-contact behaviour
Centralise default email link styling in render-time substitution so Angular-generated body links inherit the Ramblers email treatment more consistently
Refine shared layout spacing, divider alignment, mobile heading styling, footer icon layout, per-event separators, and preview scrolling based on live rendering checks
Update StringUtilsService.asTitle to normalise tokenised values through asWords first, with unit coverage for kebab-case and camelCase inputs

This is the preview tab of the notification page, showing all links and text correctly formatted as it will be seen in the recipients email:

Data Migration

New migration (20260406000000) reseeds all templates on deploy.
All 8 Brevo HTML templates converted to body-content-only snippets wrapped by the shared layout at seed time. Welcome template "your your" typo fixed. Committee notification component colours aligned with design system.
repair Brevo template reseeding to search all templates, preserve canonical IDs, archive or remove broken duplicates, and rewire stale notification config template references during the April migration
harden sender handling and logging for Brevo template create/update flows, including clearer template-specific failures and sender-aware recovery for invalid remote template state