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

In this commit we improve templates used in website_forum. 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 1843224 (and 1868112) and to PR #25313
(and #25889).

1 files changed, 94 insertions, 38 deletions

diff --git a/addons/website_forum/data/forum_data.xml b/addons/website_forum/data/forum_data.xml
index 1e2007fcd96..1567ab8d770 100644
--- a/addons/website_forum/data/forum_data.xml
+++ b/addons/website_forum/data/forum_data.xml
@@ -138,46 +138,102 @@
         <record id="validation_email" model="mail.template">
             <field name="name">Forum: Email Verification</field>
             <field name="model_id" ref="base.model_res_users"/>
-            <field name="email_from"><![CDATA["${object.company_id.name|safe}" <${(object.company_id.email or user.email)|safe}>]]></field>
+            <field name="subject">${object.company_id.name} Forums validation</field>
+            <field name="email_from">${('&lt;%s&gt;' % (object.env.user.company_id.email or user.email)) | safe}</field>
             <field name="email_to">${object.email|safe}</field>
-            <field name="subject"><![CDATA[${object.company_id.name} Forums validation]]></field>
-            <field name="body_html"><![CDATA[
-<div summary="o_mail_notification" style="padding:0px; width:600px; margin:0 auto; background: #FFFFFF repeat top /100%;color:#777777">
-    <table cellspacing="0" cellpadding="0" style="width:600px; border-collapse:collapse; background:inherit; color:inherit">
-        <tbody><tr>
-            <td valign="center" width="200" style="padding:0px 10px 5px 5px; font-size: 12px">
-                <img src="/logo.png" style="padding: 0px; margin: 0px; height: auto; width: 80px;" alt="${user.company_id.name}">
-            </td>
-        </tr></tbody>
+            <field name="body_html" type="html">
+<table border="0" cellpadding="0" cellspacing="0" style="padding-top: 16px; background-color: #F1F1F1; color: #454748; width: 100%; border-collapse:separate;"><tr><td align="center">
+<table border="0" cellpadding="0" cellspacing="0" width="590" style="padding: 16px; background-color: white; color: #454748; border-collapse:separate;">
+<tbody>
+    <!-- HEADER -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr>
+                    <td valign="middle">
+                        <span style="font-size: 10px;">Your Forum</span><br/>
+                        <span style="font-size: 20px; font-weight: bold;">
+                            ${object.company_id.name} Forum validation
+                        </span>
+                    </td>
+                    <td valign="middle" align="right">
+                        <img src="/logo.png?company=${user.company_id.id}" style="padding: 0px; margin: 0px; height: auto; width: 80px;" alt="${user.company_id.name}"/>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2" style="text-align:center;">
+                        <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin:16px 0px 16px 0px;"/>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+    <!-- CONTENT -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: white; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr>
+                    <td valign="top" style="font-size: 13px;">
+                        <p style="margin: 0px; padding: 0px; font-size: 13px;">
+                            Hello ${object.name},<br /><br />
+                            You have been invited to validate your email in order to get access to "${object.company_id.name}" Q/A Forums.
+                            To validate your email, please click on the following link:
+                            <div style="margin: 16px 0px 16px 0px;">
+                                <a href="${ctx.get('token_url')}"
+                                    style="background-color: #875A7B; padding: 8px 16px 8px 16px; text-decoration: none; color: #fff; border-radius: 5px; font-size:13px;">
+                                    Validate my account
+                                </a>
+                            </div>
+                            Thanks for your participation!
+                        </p>
+                    </td>
+                </tr>
+                <tr>
+                    <td style="text-align:center;">
+                        <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0; margin: 16px 0px 16px 0px;"/>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+    <!-- FOOTER -->
+    <tr>
+        <td align="center" style="min-width: 590px;">
+            <table border="0" cellpadding="0" cellspacing="0" width="590" style=" font-family: 'Verdana Regular'; color: #454748; min-width: 590px; background-color: white; font-size: 11px; padding: 0px 8px 0px 8px; border-collapse:separate;">
+                <tr>
+                    <td valign="middle" align="left">
+                         ${user.company_id.name}
+                    </td>
+                    <td valign="middle" align="right" style="opacity: 0.7;">
+                        ${user.company_id.phone}
+                        % if user.company_id.email:
+                            | <a href="'mailto:%s' % ${user.company_id.email}" style="text-decoration:none; color: #454748;">
+                                ${user.company_id.email}
+                            </a>
+                        % endif
+                        % if user.company_id.website:
+                            | <a href="${user.company_id.website}" style="text-decoration:none; color: #454748;">
+                                ${user.company_id.website}
+                            </a>
+                        % endif
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</tbody>
+</table>
+</td></tr>
+<!-- POWERED BY -->
+<tr><td align="center" style="min-width: 590px;">
+    <table border="0" cellpadding="0" cellspacing="0" width="590" style="min-width: 590px; background-color: #F1F1F1; color: #454748; padding: 8px; border-collapse:separate;">
+        <tr><td style="text-align: center; font-size: 13px;">
+            Powered by <a target="_blank" href="https://www.odoo.com" style="color: #875A7B;">Odoo</a>
+        </td></tr>
     </table>
-</div>
-<div summary="o_mail_notification" style="padding:0px; width:600px; margin:0 auto; background: #FFFFFF repeat top /100%;color:#777777">
-    <table cellspacing="0" cellpadding="0" style="vertical-align:top; padding:0px; border-collapse:collapse; background:inherit; color:inherit">
-        <tbody><tr>
-            <td valign="top" style="width:600px; padding:0px 10px 5px 5px;">
-                <div>
-                    <hr width="100%" style="background-color:rgb(204,204,204);border:medium none;clear:both;display:block;font-size:0px;min-height:1px;line-height:0;margin:0px auto;padding:0">
-                </div>
-            </td>
-        </tr></tbody>
-    </table>
-</div>
-<div style="padding:0px; width:600px; max-width:600px; margin:0 auto; background: #FFFFFF repeat top /100%; color:#777777">
-    <table cellspacing="0" cellpadding="0" style="width:600px ;text-align:justify; margin:0 auto; border-collapse:collapse; background:inherit; color:inherit">
-        <tbody><tr>
-            <td style="padding:0px 10px 5px 5px;font-size: 14px;">
-                <p>Dear ${object.name},</p>
-                <p>You have been invited to validate your email in order to get access to
-                "${object.company_id.name}" Q/A Forums.</p>
-                <p>To validate your email, please click on the following link:</p>
-                <a style="margin-left: 15px; padding:5px 10px; border-radius: 3px; background-color:#875A7B; text-align:center; text-decoration:none; color:#F7FBFD;" href="${ctx.get('token_url')}">
-                    Validate my account for "${object.company_id.name}" Q/A Forums
-                </a>
-                <p>Thanks for your participation!</p>
-            </td>
-        </tr></tbody>
-    </table>
-</div>]]></field>
+</td></tr>
+</table>
+            </field>
         </record>
 
     </data>