[IMP] website_slides: make templates more modern and updated with Odoo guidelines

In this commit we improve templates used in website_slides. Purpose of this commit
is to have templates that embed or use standard Odoo email layouts to make
them look modern and have a common style across all emails.

Main guidelines

 * better use of div / p / br to try to lessen layout issues, especially
   when updating templates using the editor;
 * correctly sequence the templates fields definition;
 * correctly set templates values notably auto_delete and user_signature
   fields to avoid confusion;
 * correctly layout the email content using light notification email. It
   can either propagate the layout choice through various send mail methods
   or directly embed the styling in the templates for more technical or
   complex templates;
 * use email_formatted computed field when possible to avoid having hand-made
   from / to addresses;
 * fix various typos and improve subjects when necessary;

Content of emails is not necessarily updated as the purpose of this task is
about styling, not content itself.

This commit is linked to task ID 1843376 (and 1868112) and closes PR #25349
(and #25889).

1 files changed, 38 insertions, 34 deletions

diff --git a/addons/website_slides/data/website_slides_data.xml b/addons/website_slides/data/website_slides_data.xml
index 1b174481796..05d5f2d0aca 100644
--- a/addons/website_slides/data/website_slides_data.xml
+++ b/addons/website_slides/data/website_slides_data.xml
@@ -16,50 +16,54 @@
 
         <record id="slide_template_published" model="mail.template">
             <field name="name">Slide Published</field>
-            <field name="subject">New ${object.slide_type} published on ${object.channel_id.name}</field>
             <field name="model_id" ref="model_slide_slide"/>
+            <field name="subject">New ${object.slide_type} published on ${object.channel_id.name}</field>
+            <field name="body_html" type="html">
+<div style="margin: 0px; padding: 0px;">
+    <p style="margin: 0px; padding: 0px; font-size: 13px;">
+        Hello<br/><br/>
+        A new ${object.slide_type} <strong>${object.name}</strong> has been published on ${object.channel_id.name} at ${format_tz(object.write_date, tz=user.tz)}
+        <div style="margin: 16px 8px 16px 8px; text-align: center;">
+            <a href="${object.website_url}">
+                <img alt="${object.name}" src="${ctx['base_url']}/web/image/slide.slide/${object.id}/image" style="height:auto; width:150px; margin: 16px;"/>
+            </a>
+        </div>
+        <div style="margin: 16px 8px 16px 8px; text-align: center;">
+            <a href="${object.website_url}"
+                style="background-color: #875a7b; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px;">View <strong>${object.name}</strong></a>
+        </div>
+    </p>
+</div>
+            </field>
             <field name="auto_delete" eval="True"/>
-            <field name="body_html"><![CDATA[
-<p>Hello,</p>
-<p>
-    A new ${object.slide_type} <strong>${object.name}</strong> has been published on ${object.channel_id.name} at ${format_tz(object.write_date, tz=user.tz)}
-</p>
-<p style="text-align: center; margin-top: 10px;">
-    <a href="${object.website_url}">
-        <img alt="${object.name}" src="${ctx['base_url']}/web/image/slide.slide/${object.id}/image" style="height:auto; width:150px; background-color: #cccccc; margin: 16px;">
-    </a>
-</p>
-<p style="text-align: center; margin-top: 10px;">
-    <a style="-webkit-user-select: none; padding: 5px 10px; font-size: 12px; line-height: 18px; color: #FFFFFF; border-color:#875A7B; text-decoration: none; display: inline-block; margin-bottom: 0px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; background-image: none; background-color: #875A7B; border: 1px solid #875A7B; border-radius:3px" class="o_default_snippet_text" href="${object.website_url}">
-        View <strong>${object.name}</strong>
-    </a>
-</p>
-]]></field>
+            <field name="user_signature" eval="True"/>
         </record>
 
         <record id="slide_template_shared" model="mail.template">
             <field name="name">Slide Shared</field>
-            <field name="subject">${user.name} shared a ${object.slide_type} with you!</field>
             <field name="model_id" ref="model_slide_slide"/>
+            <field name="subject">${user.name} shared a ${object.slide_type} with you!</field>
             <field name="email_from">${(user.email or '')|safe}</field>
             <field name="email_to">${ctx['email']}</field>
+            <field name="body_html" type="html">
+<div style="margin: 0px; padding: 0px;">
+    <p style="margin: 0px; padding: 0px; font-size: 13px;">
+        Hello<br/><br/>
+        ${user.name} shared the ${object.slide_type} <strong>${object.name}</strong> with you!
+        <div style="margin: 16px 8px 16px 8px; text-align: center;">
+            <a href="${object.website_url}">
+                <img alt="${object.name}" src="${ctx['base_url']}/web/image/slide.slide/${object.id}/image" style="height:auto; width:150px; margin: 16px;"/>
+            </a>
+        </div>
+        <div style="margin: 16px 8px 16px 8px; text-align: center;">
+            <a href="${object.website_url}"
+                style="background-color: #875a7b; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px;">View <strong>${object.name}</strong></a>
+        </div>
+    </p>
+</div>
+            </field>
             <field name="auto_delete" eval="True"/>
-            <field name="body_html"><![CDATA[
-<p>Hello,</p>
-<p>
-    ${user.name} shared the ${object.slide_type} <strong>${object.name}</strong> with you!
-</p>
-<p style="text-align: center; margin-top: 10px;">
-    <a href="${object.website_url}">
-        <img alt="${object.name}" src="${ctx['base_url']}/web/image/slide.slide/${object.id}/image" style="height:auto; width:150px; background-color: #cccccc; margin: 16px;">
-    </a>
-</p>
-<p style="text-align: center; margin-top: 10px;">
-    <a style="-webkit-user-select: none; padding: 5px 10px; font-size: 12px; line-height: 18px; color: #FFFFFF; border-color:#875A7B; text-decoration: none; display: inline-block; margin-bottom: 0px; font-weight: 400; text-align: center; vertical-align: middle; cursor: pointer; white-space: nowrap; background-image: none; background-color: #875A7B; border: 1px solid #875A7B; border-radius:3px" class="o_default_snippet_text" href="${object.website_url}">
-        View <strong>${object.name}</strong>
-    </a>
-</p>
-]]></field>
+            <field name="user_signature" eval="True"/>
         </record>
 
         <record model="slide.channel" id="channel_public">