{"id":"69d415119f23152e64341dd2","title":"2026 04 06 Issue 223","path":"how-to/committee/release-notes/2026-04-06-issue-223","contentMarkdown":"# 06-Apr-2026 — make all Brevo templates fluid, consistent, and Ramblers-aligned [#223](https://github.com/nbarrett/ngx-ramblers/issues/223)\n\n## [build 579](https://github.com/nbarrett/ngx-ramblers/actions/runs/24048805738) — [commit 8811ac3](https://github.com/nbarrett/ngx-ramblers/commit/8811ac310b5bc13eea9996998d2ff0dfbb038b4b)\n\n_____\n\nIntroduce a shared Ramblers-aligned email base layout that all NGX transactional templates inherit from, matching the Ramblers MailChimp national campaign design system.\n\n### Layout builder (`ramblers-email-layout.ts`) now generates complete HTML \n\n* 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.\n\n| Element | Value |\n|---|---|\n| Container max-width | `600px` fixed desktop, responsive at `768px` and `480px` breakpoints |\n| Page background | `#f4f4f4` |\n| Content background | `#ffffff` |\n| Body font | `Helvetica, Arial, sans-serif`, `16px`, `#222222`, `150%` line-height |\n| H1 | Helvetica `40px` bold `#222222`, centered, `125%` line-height |\n| H2 | Helvetica `34px` bold `#222222`, left-aligned |\n| H3 | Helvetica `22px` bold `#444444`, left-aligned |\n| H4 | Helvetica `20px` bold `#444444`, left-aligned |\n| Body links | `#c05711` (burnt orange) with underline |\n| Header treatment | White content container with linked banner image and no extra internal banner padding |\n| Footer background | `#404141` (charcoal) with white `12px` centred text |\n| Footer social row | Centred social icons in an email-safe table layout with vertical padding |\n| Image treatment | `border: 0; height: auto; outline: none;` plus `-ms-interpolation-mode: bicubic` for Outlook |\n| Outlook compat | `mso-table-lspace: 0pt` and `mso-table-rspace: 0pt`, plus related Outlook-safe table/image handling |\n| CTA style | Rectangular full-width button, accent background, bold dark text (`#222222`), centred, `20px` vertical padding, no rounded corners, no border |\n| Section divider | Accent-coloured horizontal rule, `6px` thick, inset to align with the body-content column rather than full edge-to-edge container width |\n\n### Accent colour — named palette with three known values\n\nThe 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.\n\n| Brand name | Hex | Usage |\n|---|---|---|\n| **Sunrise** | `#F9B104` | Default primary accent, CTA buttons and divider rules |\n| **Rosie cheeks** | `#F6B09D` | Optional accent for divider/button variants |\n| **Mint cake** | `#9BC8AB` | Optional accent for divider/button variants |\n\n### Notes on the final implementation\n\n- The Brevo templates were rebuilt around a shared Ramblers-aligned layout rather than separate per-template wrappers.\n- Transactional and campaign templates now share the same header, divider, spacing, typography and footer system.\n- The greeting/salutation position was standardised via `messageMergeFields.ADDRESS_LINE`.\n\n### Improved WYSIWYG Preview on email send dialog\n\n\n- The preview experience was also updated so the rendered output more closely matches the sent email styling.\n- 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\n- Normalise salutation handling around ADDRESS_LINE so templates and Angular notification bodies no longer duplicate greetings\n- Align Ramblers-fed event contact links and CTA labels in notification previews with real event-type and remote-contact behaviour\n- Centralise default email link styling in render-time substitution so Angular-generated body links inherit the Ramblers email treatment more consistently\n- Refine shared layout spacing, divider alignment, mobile heading styling, footer icon layout, per-event separators, and preview scrolling based on live rendering checks\n- Update StringUtilsService.asTitle to normalise tokenised values through asWords first, with unit coverage for kebab-case and camelCase inputs\n* 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:\n\n![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/6018a03b-e564-4f21-b74c-f1f852c910bd.jpeg)\n\n### Data Migration\n- New migration (20260406000000) reseeds all templates on deploy.\n- 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.\n- 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\n- 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","contentHtml":"<h1>06-Apr-2026 — make all Brevo templates fluid, consistent, and Ramblers-aligned <a href=\"https://github.com/nbarrett/ngx-ramblers/issues/223\">#223</a></h1>\n<h2><a href=\"https://github.com/nbarrett/ngx-ramblers/actions/runs/24048805738\">build 579</a> — <a href=\"https://github.com/nbarrett/ngx-ramblers/commit/8811ac310b5bc13eea9996998d2ff0dfbb038b4b\">commit 8811ac3</a></h2>\n<hr>\n<p>Introduce a shared Ramblers-aligned email base layout that all NGX transactional templates inherit from, matching the Ramblers MailChimp national campaign design system.</p>\n<h3>Layout builder (<code>ramblers-email-layout.ts</code>) now generates complete HTML</h3>\n<ul>\n<li>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.</li>\n</ul>\n<table>\n<thead>\n<tr>\n<th>Element</th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Container max-width</td>\n<td><code>600px</code> fixed desktop, responsive at <code>768px</code> and <code>480px</code> breakpoints</td>\n</tr>\n<tr>\n<td>Page background</td>\n<td><code>#f4f4f4</code></td>\n</tr>\n<tr>\n<td>Content background</td>\n<td><code>#ffffff</code></td>\n</tr>\n<tr>\n<td>Body font</td>\n<td><code>Helvetica, Arial, sans-serif</code>, <code>16px</code>, <code>#222222</code>, <code>150%</code> line-height</td>\n</tr>\n<tr>\n<td>H1</td>\n<td>Helvetica <code>40px</code> bold <code>#222222</code>, centered, <code>125%</code> line-height</td>\n</tr>\n<tr>\n<td>H2</td>\n<td>Helvetica <code>34px</code> bold <code>#222222</code>, left-aligned</td>\n</tr>\n<tr>\n<td>H3</td>\n<td>Helvetica <code>22px</code> bold <code>#444444</code>, left-aligned</td>\n</tr>\n<tr>\n<td>H4</td>\n<td>Helvetica <code>20px</code> bold <code>#444444</code>, left-aligned</td>\n</tr>\n<tr>\n<td>Body links</td>\n<td><code>#c05711</code> (burnt orange) with underline</td>\n</tr>\n<tr>\n<td>Header treatment</td>\n<td>White content container with linked banner image and no extra internal banner padding</td>\n</tr>\n<tr>\n<td>Footer background</td>\n<td><code>#404141</code> (charcoal) with white <code>12px</code> centred text</td>\n</tr>\n<tr>\n<td>Footer social row</td>\n<td>Centred social icons in an email-safe table layout with vertical padding</td>\n</tr>\n<tr>\n<td>Image treatment</td>\n<td><code>border: 0; height: auto; outline: none;</code> plus <code>-ms-interpolation-mode: bicubic</code> for Outlook</td>\n</tr>\n<tr>\n<td>Outlook compat</td>\n<td><code>mso-table-lspace: 0pt</code> and <code>mso-table-rspace: 0pt</code>, plus related Outlook-safe table/image handling</td>\n</tr>\n<tr>\n<td>CTA style</td>\n<td>Rectangular full-width button, accent background, bold dark text (<code>#222222</code>), centred, <code>20px</code> vertical padding, no rounded corners, no border</td>\n</tr>\n<tr>\n<td>Section divider</td>\n<td>Accent-coloured horizontal rule, <code>6px</code> thick, inset to align with the body-content column rather than full edge-to-edge container width</td>\n</tr>\n</tbody></table>\n<h3>Accent colour — named palette with three known values</h3>\n<p>The only token that varies by email context is the <strong>accent colour</strong>, used for CTA button backgrounds and divider rules. The shared footer/background typography does <strong>not</strong> vary by accent in the shipped implementation.</p>\n<table>\n<thead>\n<tr>\n<th>Brand name</th>\n<th>Hex</th>\n<th>Usage</th>\n</tr>\n</thead>\n<tbody><tr>\n<td><strong>Sunrise</strong></td>\n<td><code>#F9B104</code></td>\n<td>Default primary accent, CTA buttons and divider rules</td>\n</tr>\n<tr>\n<td><strong>Rosie cheeks</strong></td>\n<td><code>#F6B09D</code></td>\n<td>Optional accent for divider/button variants</td>\n</tr>\n<tr>\n<td><strong>Mint cake</strong></td>\n<td><code>#9BC8AB</code></td>\n<td>Optional accent for divider/button variants</td>\n</tr>\n</tbody></table>\n<h3>Notes on the final implementation</h3>\n<ul>\n<li>The Brevo templates were rebuilt around a shared Ramblers-aligned layout rather than separate per-template wrappers.</li>\n<li>Transactional and campaign templates now share the same header, divider, spacing, typography and footer system.</li>\n<li>The greeting/salutation position was standardised via <code>messageMergeFields.ADDRESS_LINE</code>.</li>\n</ul>\n<h3>Improved WYSIWYG Preview on email send dialog</h3>\n<ul>\n<li>The preview experience was also updated so the rendered output more closely matches the sent email styling.</li>\n<li>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</li>\n<li>Normalise salutation handling around ADDRESS_LINE so templates and Angular notification bodies no longer duplicate greetings</li>\n<li>Align Ramblers-fed event contact links and CTA labels in notification previews with real event-type and remote-contact behaviour</li>\n<li>Centralise default email link styling in render-time substitution so Angular-generated body links inherit the Ramblers email treatment more consistently</li>\n<li>Refine shared layout spacing, divider alignment, mobile heading styling, footer icon layout, per-event separators, and preview scrolling based on live rendering checks</li>\n<li>Update StringUtilsService.asTitle to normalise tokenised values through asWords first, with unit coverage for kebab-case and camelCase inputs</li>\n</ul>\n<ul>\n<li>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:</li>\n</ul>\n<p><img src=\"https://ngx-ramblers.org.uk/api/aws/s3/site-content/6018a03b-e564-4f21-b74c-f1f852c910bd.jpeg\" alt=\"\"></p>\n<h3>Data Migration</h3>\n<ul>\n<li>New migration (20260406000000) reseeds all templates on deploy.</li>\n<li>All 8 Brevo HTML templates converted to body-content-only snippets wrapped by the shared layout at seed time. Welcome template &quot;your your&quot; typo fixed. Committee notification component colours aligned with design system.</li>\n<li>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</li>\n<li>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</li>\n</ul>\n"}