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

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

3 files changed, 258 insertions, 353 deletions

diff --git a/addons/hr_recruitment/data/hr_recruitment_data.xml b/addons/hr_recruitment/data/hr_recruitment_data.xml
index 0a5a6fad082..8eac525a86e 100644
--- a/addons/hr_recruitment/data/hr_recruitment_data.xml
+++ b/addons/hr_recruitment/data/hr_recruitment_data.xml
@@ -10,393 +10,293 @@
     <!-- Templates for interest / refusing applicants -->
     <record id="email_template_data_applicant_refuse" model="mail.template">
         <field name="name">Applicant: Refuse</field>
+        <field name="model_id" ref="hr_recruitment.model_hr_applicant"/>
         <field name="subject">Your Job Application: ${object.job_id.name | safe}</field>
         <field name="email_to">${(not object.partner_id and object.email_from or '') | safe}</field>
         <field name="partner_to">${object.partner_id.id or ''}</field>
-        <field name="lang">${object.partner_id.lang or ''}</field>
-        <field name="model_id" ref="hr_recruitment.model_hr_applicant"/>
-        <field name="user_signature" eval="False"/>
-        <field name="body_html"><![CDATA[
-          <div style="background-color:#F3F5F6;color:#515166;font-family:Arial,Helvetica,sans-serif;font-size:14px;">
-            <table style="width:600px;margin:10px auto;">
-                <tbody>
-                    <tr>
-                        <td>
-                            <a href="/">
-                                <img src="/logo" alt="${object.company_id.name}" style="vertical-align:baseline;max-width:100px;" />
-                            </a>
-                        </td>
-                        <td style="text-align:right;vertical-align:middle;">
-                            % if 'website_url' in object.job_id and object.job_id.website_url:
-                                <a href="${object.job_id.website_url}" style="background-color: #1abc9c; padding: 12px; font-weight: 12px; text-decoration: none; color: #fff; border-radius: 5px; font-size:16px;">Job Description</a>
-                            % endif
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <table style="width:600px;margin:0px auto;background-color:white;padding:8px; border:1px solid #e1e1e1;">
-            <tr>
-                <td style="font-size:16px; font-weight:300;">
-                    <p style="font-size:16px;">
-                        Hi,
-                    </p><p style="font-size:16px;">
-                        Thank you for your interest in joining the
-                        <b>${object.company_id.name}</b> team.  We wanted to
-                        let you know that, although your resume is competitive,
-                        our hiring team reviewed your application and <b>did not
-                        select it for further consideration</b>.
-                    </p><p style="font-size:16px;">
-                        Please note that recruiting is hard, and we can do
-                        mistake. Do not hesitate to reply to this email if you
-                        think we did a mistake, or if you want more information
-                        about our decision.
-                    </p><p style="font-size:16px;">
-                        We will, however, keep your resume on record and get in
-                        touch with you about future opportunities that may be a
-                        better fit for your skills and experience.
-                    </p>
-                    <p style="font-size:16px;">
-                        We wish you all the best in your job search and hope we
-                        will have the chance to consider you for another role
-                        in the future.
-                    </p>
-                    <p style="font-size:16px;">
-                        Regards,
-                    </p>
-
-                    <p style="color:grey;">-- <br/>
+        <field name="body_html" type="html">
+<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">
+            <div style="font-size: 13px; margin: 0px; padding: 0px;">
+                Hello,<br/><br/>
+                Thank you for your interest in joining the
+                <b>${object.company_id.name}</b> team.  We wanted to
+                let you know that, although your resume is competitive,
+                our hiring team reviewed your application and <b>did not
+                select it for further consideration</b>.
+                <br/><br/>
+                Please note that recruiting is hard, and we can do
+                mistake. Do not hesitate to reply to this email if you
+                think we did a mistake, or if you want more information
+                about our decision.
+                <br/><br/>
+                We will, however, keep your resume on record and get in
+                touch with you about future opportunities that may be a
+                better fit for your skills and experience.
+                <br/><br/>
+                We wish you all the best in your job search and hope we
+                will have the chance to consider you for another role
+                in the future.
+                <br/><br/>
+                Thank you,
+                <div style="font-size: 11px; color: grey;">
                     % if object.user_id:
+                        -- <br/>
                         <strong>${object.user_id.name}</strong><br/>
                         Email: ${object.user_id.email or ''}<br/>
                         Phone: ${object.user_id.phone or ''}
                     % else:
+                        -- <br/>
                         ${object.company_id.name}<br/>
                         The HR Team
                     % endif
-                    </p>
-
-                </td>
-            </tr>
-            </table>
-            <table style="width:600px;margin:0px auto;text-align:center;">
-                <tbody>
-                    <tr>
-                        <td style="padding-top:10px;font-size: 12px;">
-                            <div>Sent by ${object.company_id.name}</div>
-                            % if 'website_url' in object.job_id and object.job_id.website_url:
-                            <div>
-                                Discover <a href="/jobs" style="text-decoration:none;color:#717188;">our others jobs</a>.
-                            </div>
-                            % endif
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-          </div>
-        ]]></field>
+                </div>
+            </div>
+        </td>
+    </tr>
+</table>
+        </field>
+        <field name="user_signature" eval="False"/>
+        <field name="auto_delete" eval="True"/>
+        <field name="lang">${object.partner_id.lang or ''}</field>
     </record>
 
     <record id="email_template_data_applicant_interest" model="mail.template">
         <field name="name">Applicant: Interest</field>
-        <field name="subject">Your Application: ${object.job_id.name | safe}</field>
+        <field name="model_id" ref="hr_recruitment.model_hr_applicant"/>
+        <field name="subject">Your Job Application: ${object.job_id.name | safe}</field>
         <field name="email_to">${(not object.partner_id and object.email_from or '') | safe}</field>
         <field name="partner_to">${object.partner_id.id or ''}</field>
-        <field name="lang">${object.partner_id.lang or ''}</field>
-        <field name="model_id" ref="hr_recruitment.model_hr_applicant"/>
-        <field name="user_signature" eval="False"/>
-        <field name="body_html"><![CDATA[
-          <div style="background-color:#F3F5F6;color:#515166;font-family:Arial,Helvetica,sans-serif;font-size:14px;">
-            <table style="width:600px;margin:10px auto;">
-                <tbody>
-                    <tr>
-                        <td>
-                            <a href="/">
-                                <img src="/logo" alt="${object.company_id.name}" style="vertical-align:baseline;max-width:100px;" />
-                            </a>
-                        </td>
-                        <td style="text-align:right;vertical-align:middle;">
-                            % if 'website_url' in object.job_id and object.job_id.website_url:
-                                <a href="${object.job_id.website_url}" style="background-color: #1abc9c; padding: 12px; font-weight: 12px; text-decoration: none; color: #fff; border-radius: 5px; font-size:16px;">Job Description</a>
-                            % endif
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <table style="width:600px;margin:0px auto;background-color:white;padding:8px;border:1px solid #e1e1e1;">
-            <tr>
-                <td style="font-size:16px; font-weight:300;">
-                    <div style="text-align: center">
-                        <h2>Congratulations!</h2>
-                        <div style="color:grey;">Your resume has been positively reviewed.</div>
-                        <img src="/hr_recruitment/static/src/img/congratulations.png" alt="Congratulations!" style="width:175px;margin:20px 0;"/>
+        <field name="body_html" type="html">
+<table border="0" cellpadding="0" cellspacing="0" width="590" style="background-color: white; border-collapse: collapse; margin-left: 20px;">
+    <tr>
+        <td valign="top" style="padding: 0px 10px;">
+            <div style="text-align: center">
+                <h2>Congratulations!</h2>
+                <div style="color:grey;">Your resume has been positively reviewed.</div>
+                <img src="/hr_recruitment/static/src/img/congratulations.png" alt="Congratulations!" style="width:175px;margin:20px 0;"/>
+            </div>
+            <div style="font-size: 13px; margin: 0px; padding: 0px;">
+                We just reviewed your resume, and it caught our
+                attention. As we think you might be great for the
+                position, your application has been short listed for a
+                call or an interview.
+                <br/><br/>
+                % if 'website_url' in object.job_id and object.job_id.website_url:
+                    <div style="margin: 16px 8px 16px 8px;">
+                        <a href="${object.job_id.website_url}"
+                            style="background-color: #875a7b; text-decoration: none; color: #fff; padding: 8px 16px 8px 16px; border-radius: 5px;">Job Description</a>
                     </div>
-
-                    <p style="font-size:16px;">
-                        We just reviewed your resume, and it caught our
-                        attention. As we think you might be great for the
-                        position, your application has been short listed for a
-                        call or an interview.
-                    </p>
-
-                    % if object.user_id:
-                    <p style="font-size:16px;">
-                        You will soon be contacted by:
-                    </p>
-                    <table style="width:100%; border:0px solid white;">
-                    <tr>
-                        <td width="75">
-                            <img src="/web/image/res.users/${object.user_id.id}/image_small" alt="Avatar" style="vertical-align:baseline;max-width:64px;" />
-                        </td><td style="font-size:15px;">
-                            <strong>${object.user_id.name}</strong><br/>
-                            <span>Email: ${object.user_id.email or ''}</span><br/>
-                            <span>Phone: ${object.user_id.phone or ''}</span>
-                        </td>
-                    </tr>
+                % endif
+
+                % if object.user_id:
+                    You will soon be contacted by:
+                    <table>
+                        <tr>
+                            <td width="75">
+                                <img src="/web/image/res.users/${object.user_id.id}/image_small" alt="Avatar" style="vertical-align:baseline;max-width:64px;" />
+                            </td>
+                            <td>
+                                <strong>${object.user_id.name}</strong><br/>
+                                <span>Email: ${object.user_id.email or ''}</span><br/>
+                                <span>Phone: ${object.user_id.phone or ''}</span>
+                            </td>
+                        </tr>
                     </table>
+                    <br/><br/>
+                % endif
+                See you soon,
+                <div style="font-size: 11px; color: grey;">
+                    -- <br/>
+                    Odoo HR Team
+                    % if 'website_url' in object.job_id and object.job_id.website_url
+                        Discover <a href="/jobs" style="text-decoration:none;color:#717188;">all our jobs</a>.<br/>
                     % endif
-                    <p style="font-size:16px;margin:24px 0;">
-                        See you soon,
-                    </p><p style="font-size:16px;color: grey;">
-                        -- <br/>
-                        Odoo HR Team
-                    </p>
-
-                    <hr style="margin: 30px 0"/>
-                    <h3 style="color:#9A6C8E;"><strong>What is the next step?</strong></h3>
-                    <p style="font-size:16px;">
-                        We usually <strong>answer applications within 3 days</strong>.
-                        The next step is either a call or a meeting in our offices.
-                    </p><p style="font-size:16px;">
-                        Feel free to <strong>contact us if you want a faster
-                        feedback</strong> or if you don't get news from us
-                        quickly enough (just reply to this email).
-                    </p>
-                    <hr style="margin: 30px 0"/>
-
-                    <h3 style="color:#9A6C8E;"><strong>Want to learn about us?</strong></h3>
-                    <ol>
-                        <li><a style="color:#1CC5A9" href="https://www.odoo.com/blog/odoo-news-5/post/the-odoo-story-56">Founders' story</a></li>
-                        <li><a style="color:#1CC5A9" href="https://www.slideshare.net/openobject/the-odoo-culture">The Odoo Culture</a></li>
-                        <li><a style="color:#1CC5A9" href="https://www.odoo.com/page/about-us">About us</a></li>
-                    </ol>
-
-                    <hr style="margin: 30px 0"/>
-
-                    % set location = ''
-                    % if object.job_id.address_id.name:
-                        <p style="margin:0px 0px 0px 0px;"><strong>${object.job_id.address_id.name}</strong></p>
-                    % endif
-                    % if object.job_id.address_id.street:
-                        <p style="margin:0px 0px 0px 0px;">${object.job_id.address_id.street}</p>
-                        % set location = object.job_id.address_id.street
-                    % endif
-                    % if object.job_id.address_id.street2:
-                        <p style="margin:0px 0px 0px 0px;">${object.job_id.address_id.street2}</p>
-                        % set location = '%s, %s' % (location, object.job_id.address_id.street2)
-                    % endif
-                    <p style="margin:0px 0px 0px 0px;">
-                    % if object.job_id.address_id.city:
-                        ${object.job_id.address_id.city},
-                        % set location = '%s, %s' % (location, object.job_id.address_id.city)
-                    % endif
-                    % if object.job_id.address_id.state_id.name:
-                        ${object.job_id.address_id.state_id.name},
-                        % set location = '%s, %s' % (location, object.job_id.address_id.state_id.name)
-                    % endif
-                    % if object.job_id.address_id.zip:
-                        ${object.job_id.address_id.zip}
-                        % set location = '%s, %s' % (location, object.job_id.address_id.zip)
-                    % endif
-                    </p>
-                    % if object.job_id.address_id.country_id.name:
-                        <p style="margin:0px 0px 0px 0px;">${object.job_id.address_id.country_id.name}</p>
-                        % set location = '%s, %s' % (location, object.job_id.address_id.country_id.name)
-                    % endif
-
-                </td>
-            </tr>
-            </table>
-
-            % if object.job_id.address_id:
-            <div style="width:598px;margin:0px auto;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
-                <a href="https://maps.google.com/maps?q=${location}" target="new">
-                    <img src="http://maps.googleapis.com/maps/api/staticmap?autoscale=1&size=598x200&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xa5117d%7Clabel:%7C${location}" style="vertical-align:bottom;" alt="Google Maps"/>
-                </a>
+                </div>
+
+                <hr width="97%" 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;"/>
+                <h3 style="color:#9A6C8E;"><strong>What is the next step?</strong></h3>
+                We usually <strong>answer applications within 3 days</strong>.
+                <br/><br/>
+                The next step is either a call or a meeting in our offices.
+                <br/>
+                Feel free to <strong>contact us if you want a faster
+                feedback</strong> or if you don't get news from us
+                quickly enough (just reply to this email).
+                <br/>
+
+                <hr width="97%" 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;"/>
+                <h3 style="color:#9A6C8E;"><strong>Want to learn about us?</strong></h3>
+                <ol>
+                    <li><a style="color:#1CC5A9" href="https://www.odoo.com/blog/odoo-news-5/post/the-odoo-story-56">Founders' story</a></li>
+                    <li><a style="color:#1CC5A9" href="https://www.slideshare.net/openobject/the-odoo-culture">The Odoo Culture</a></li>
+                    <li><a style="color:#1CC5A9" href="https://www.odoo.com/page/about-us">About us</a></li>
+                </ol>
+
+                <hr width="97%" style="background-color: rgb(204,204,204); border: medium none; clear: both; display: block; font-size: 0px; min-height: 1px; line-height: 0; margin: 17px 0px 16px 0px;"/>
+                % set location = ''
+                % if object.job_id.address_id.name:
+                    <strong>${object.job_id.address_id.name}</strong><br/>
+                % endif
+                % if object.job_id.address_id.street:
+                    ${object.job_id.address_id.street}<br/>
+                    % set location = object.job_id.address_id.street
+                % endif
+                % if object.job_id.address_id.street2:
+                    ${object.job_id.address_id.street2}<br/>
+                    % set location = '%s, %s' % (location, object.job_id.address_id.street2)
+                % endif
+                % if object.job_id.address_id.city:
+                    ${object.job_id.address_id.city},
+                    % set location = '%s, %s' % (location, object.job_id.address_id.city)
+                % endif
+                % if object.job_id.address_id.state_id.name:
+                    ${object.job_id.address_id.state_id.name},
+                    % set location = '%s, %s' % (location, object.job_id.address_id.state_id.name)
+                % endif
+                % if object.job_id.address_id.zip:
+                    ${object.job_id.address_id.zip}
+                    % set location = '%s, %s' % (location, object.job_id.address_id.zip)
+                % endif
+                <br/>
+                % if object.job_id.address_id.country_id.name:
+                    ${object.job_id.address_id.country_id.name}<br/>
+                    % set location = '%s, %s' % (location, object.job_id.address_id.country_id.name)
+                % endif
+                <br/>
+
+                % if object.job_id.address_id:
+                    <a href="https://maps.google.com/maps?q=${location}" target="new">
+                        <img src="http://maps.googleapis.com/maps/api/staticmap?autoscale=1&amp;size=598x200&amp;maptype=roadmap&amp;format=png&amp;visual_refresh=true&amp;markers=size:mid%7Ccolor:0xa5117d%7Clabel:%7C${location}" style="vertical-align:bottom;"/>
+                    </a>
+                % endif
             </div>
-            % endif
-            <table style="width:600px;margin:0px auto;text-align:center;">
-                <tbody>
-                    <tr>
-                        <td style="padding-top:10px;font-size: 12px;">
-                            <div>Sent by ${object.company_id.name}</div>
-                            % if 'website_url' in object.job_id and object.job_id.website_url:
-                            <div>
-                                Discover <a href="/jobs" style="text-decoration:none;color:#717188;">all our jobs</a>.
-                            </div>
-                            % endif
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-
-          </div>
-        ]]></field>
+        </td>
+    </tr>
+</table></field>
+        <field name="user_signature" eval="False"/>
+        <field name="auto_delete" eval="True"/>
+        <field name="lang">${object.partner_id.lang or ''}</field>
     </record>
 
     <record id="email_template_data_applicant_congratulations" model="mail.template">
         <field name="name">Applicant: Acknowledgment</field>
-        <field name="subject">Job Application Confirmation: ${object.job_id.name | safe}</field>
+        <field name="model_id" ref="hr_recruitment.model_hr_applicant"/>
+        <field name="subject">Your Job Application: ${object.job_id.name | safe}</field>
         <field name="email_to">${(not object.partner_id and object.email_from or '') | safe}</field>
         <field name="partner_to">${object.partner_id.id or ''}</field>
-        <field name="lang">${object.partner_id.lang or ''}</field>
-        <field name="model_id" ref="hr_recruitment.model_hr_applicant"/>
-        <field name="user_signature" eval="False"/>
-        <field name="body_html"><![CDATA[
-          <div style="background-color:#F3F5F6;color:#515166;font-family:Arial,Helvetica,sans-serif;font-size:14px;">
-            <table style="width:600px;margin:10px auto;">
-                <tbody>
-                    <tr>
-                        <td>
-                            <a href="/">
-                                <img src="/logo" alt="${object.company_id.name}" style="vertical-align:baseline;max-width:100px;" />
-                            </a>
-                        </td>
-                        <td style="text-align:right;vertical-align:middle;">
-                            % if 'website_url' in object.job_id and object.job_id.website_url:
-                                <a href="${object.job_id.website_url}" style="background-color: #1abc9c; padding: 12px; font-weight: 12px; text-decoration: none; color: #fff; border-radius: 5px; font-size:16px;">Job Description</a>
-                            % endif
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-            <table style="width:600px;margin:0px auto;background-color:white;padding:8px;border:1px solid #e1e1e1;">
-            <tr>
-                <td style="font-size:16px; font-weight:300;">
-                    <p style="font-size:16px;">
-                        Hi,
-                    </p><p style="font-size:16px;">
-                        We confirm we successfully received your application to the job
-
-                        "<a href="${object.job_id.website_url or ''}" style="color:#9A6C8E;"><strong>${object.job_id.name}</strong></a>"
-                        at <strong>${object.company_id.name}</strong>.
-                    </p>
-                    <p style="font-size:16px;">
-                        We will come back to you shortly.
-                    </p>
+        <field name="body_html" type="html">
+<table border="0" cellpadding="0" cellspacing="0" width="590" style="background-color: white; border-collapse: collapse; margin-left: 20px;">
+    <tr>
+        <td valign="top" style="padding: 0px 10px;">
+            <div style="font-size: 13px; margin: 0px; padding: 0px;">
+                Hello,
+                <br/><br/>
+                We confirm we successfully received your application to the job
+                "<a href="${object.job_id.website_url or ''}" style="color:#9A6C8E;"><strong>${object.job_id.name}</strong></a>" at <strong>${object.company_id.name}</strong>.
+                <br/><br/>
+                We will come back to you shortly.
+
+                % if 'website_url' in object.job_id and object.job_id.website_url:
+                    <div style="margin: 16px 8px 16px 8px;">
+                        <a href="${object.job_id.website_url}"
+                            style="background-color: #875a7b; text-decoration: none; color: #fff; padding: 8px 16px 8px 16px; border-radius: 5px;">Job Description</a>
+                    </div>
+                % endif
 
-                    <hr style="margin: 30px 0"/>
-                    % if object.user_id:
+                <hr width="97%" 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;"/>
+                % if object.user_id:
                     <h3 style="color:#9A6C8E;"><strong>Your Contact:</strong></h3>
-                    <table style="width:100%; border:0px solid white;">
-                    <tr>
-                        <td width="75">
-                            <img src="/web/image/res.users/${object.user_id.id}/image_small" alt="Avatar" style="vertical-align:baseline;max-width:64px;" />
-                        </td><td style="font-size:15px;">
-                            <strong>${object.user_id.name}</strong><br/>
-                            <span>Email: ${object.user_id.email or ''}</span><br/>
-                            <span>Phone: ${object.user_id.phone or ''}</span>
-                        </td>
-                    </tr>
+                    <table>
+                        <tr>
+                            <td width="75">
+                                <img src="/web/image/res.users/${object.user_id.id}/image_small" alt="Avatar" style="vertical-align:baseline;max-width:64px;" />
+                            </td>
+                            <td>
+                                <strong>${object.user_id.name}</strong><br/>
+                                <span>Email: ${object.user_id.email or ''}</span><br/>
+                                <span>Phone: ${object.user_id.phone or ''}</span>
+                            </td>
+                        </tr>
                     </table>
-                    % endif
-
-                    <hr style="margin: 30px 0"/>
-
-                    <h3 style="color:#9A6C8E;"><strong>What is the next step?</strong></h3>
-                    <p>We usually <strong>answer applications within 3 days.</strong></p>
-                    <p>
-                        Feel free to <strong>contact us if you want a faster
-                        feedback</strong> or if you don't get news from us
-                        quickly enough (just reply to this email).
-                    </p>
-                    <hr style="margin: 30px 0"/>
-
-                    <h3 style="color:#9A6C8E;"><strong>Want to learn more?</strong></h3>
-                    <ol>
-                        <li><a style="color:#1CC5A9" href="https://www.odoo.com/blog/odoo-news-5/post/the-odoo-story-56">Founders' story</a></li>
-                        <li><a style="color:#1CC5A9" href="https://www.slideshare.net/openobject/the-odoo-culture">The Odoo Culture</a></li>
-                        <li><a style="color:#1CC5A9" href="https://www.odoo.com/page/about-us">About us</a></li>
-                    </ol>
-
-                    <hr style="margin: 30px 0"/>
-
-                    % set location = ''
-                    % if object.job_id.address_id.name:
-                        <p style="margin:0px 0px 0px 0px;"><strong>${object.job_id.address_id.name}</strong></p>
-                    % endif
-                    % if object.job_id.address_id.street:
-                        <p style="margin:0px 0px 0px 0px;">${object.job_id.address_id.street}</p>
-                        % set location = object.job_id.address_id.street
-                    % endif
-                    % if object.job_id.address_id.street2:
-                        <p style="margin:0px 0px 0px 0px;">${object.job_id.address_id.street2}</p>
-                        % set location = '%s, %s' % (location, object.job_id.address_id.street2)
-                    % endif
-                    <p style="margin:0px 0px 0px 0px;">
-                    % if object.job_id.address_id.city:
-                        ${object.job_id.address_id.city},
-                        % set location = '%s, %s' % (location, object.job_id.address_id.city)
-                    % endif
-                    % if object.job_id.address_id.state_id.name:
-                        ${object.job_id.address_id.state_id.name},
-                        % set location = '%s, %s' % (location, object.job_id.address_id.state_id.name)
-                    % endif
-                    % if object.job_id.address_id.zip:
-                        ${object.job_id.address_id.zip}
-                        % set location = '%s, %s' % (location, object.job_id.address_id.zip)
-                    % endif
-                    </p>
-                    % if object.job_id.address_id.country_id.name:
-                        <p style="margin:0px 0px 0px 0px;">${object.job_id.address_id.country_id.name}</p>
-                        % set location = '%s, %s' % (location, object.job_id.address_id.country_id.name)
-                    % endif
-
-                </td>
-            </tr>
-            </table>
-
-            % if object.job_id.address_id:
-            <div style="width:598px;margin:0px auto;border-left:1px solid #dddddd;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;">
-                <a href="https://maps.google.com/maps?q=${location}" target="new">
-                    <img src="http://maps.googleapis.com/maps/api/staticmap?autoscale=1&size=598x200&maptype=roadmap&format=png&visual_refresh=true&markers=size:mid%7Ccolor:0xa5117d%7Clabel:%7C${location}" style="vertical-align:bottom;" alt="Google Maps"/>
-                </a>
+                    <hr width="97%" 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;"/>
+                % endif
+
+                <h3 style="color:#9A6C8E;"><strong>What is the next step?</strong></h3>
+                We usually <strong>answer applications within 3 days.</strong><br/><br/>
+                Feel free to <strong>contact us if you want a faster
+                feedback</strong> or if you don't get news from us
+                quickly enough (just reply to this email).
+
+                <hr width="97%" 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;"/>
+                <h3 style="color:#9A6C8E;"><strong>Want to learn more?</strong></h3>
+                <ol>
+                    <li><a style="color:#1CC5A9" href="https://www.odoo.com/blog/odoo-news-5/post/the-odoo-story-56">Founders' story</a></li>
+                    <li><a style="color:#1CC5A9" href="https://www.slideshare.net/openobject/the-odoo-culture">The Odoo Culture</a></li>
+                    <li><a style="color:#1CC5A9" href="https://www.odoo.com/page/about-us">About us</a></li>
+                </ol>
+
+                <hr width="97%" style="background-color: rgb(204,204,204); border: medium none; clear: both; display: block; font-size: 0px; min-height: 1px; line-height: 0; margin: 17px 0px 16px 0px;"/>
+                % set location = ''
+                % if object.job_id.address_id.name:
+                    <strong>${object.job_id.address_id.name}</strong><br/>
+                % endif
+                % if object.job_id.address_id.street:
+                    ${object.job_id.address_id.street}<br/>
+                    % set location = object.job_id.address_id.street
+                % endif
+                % if object.job_id.address_id.street2:
+                    ${object.job_id.address_id.street2}<br/>
+                    % set location = '%s, %s' % (location, object.job_id.address_id.street2)
+                % endif
+                % if object.job_id.address_id.city:
+                    ${object.job_id.address_id.city},
+                    % set location = '%s, %s' % (location, object.job_id.address_id.city)
+                % endif
+                % if object.job_id.address_id.state_id.name:
+                    ${object.job_id.address_id.state_id.name},
+                    % set location = '%s, %s' % (location, object.job_id.address_id.state_id.name)
+                % endif
+                % if object.job_id.address_id.zip:
+                    ${object.job_id.address_id.zip}
+                    % set location = '%s, %s' % (location, object.job_id.address_id.zip)
+                % endif
+                <br/>
+                % if object.job_id.address_id.country_id.name:
+                    ${object.job_id.address_id.country_id.name}<br/>
+                    % set location = '%s, %s' % (location, object.job_id.address_id.country_id.name)
+                % endif
+                <br/>
+                % if object.job_id.address_id:
+                    <a href="https://maps.google.com/maps?q=${location}" target="new">
+                        <img src="http://maps.googleapis.com/maps/api/staticmap?autoscale=1&amp;size=598x200&amp;maptype=roadmap&amp;format=png&amp;visual_refresh=true&amp;markers=size:mid%7Ccolor:0xa5117d%7Clabel:%7C${location}" style="vertical-align:bottom;"/>
+                    </a>
+                % endif
             </div>
-            % endif
-            <table style="width:600px;margin:0px auto;text-align:center;">
-                <tbody>
-                    <tr>
-                        <td style="padding-top:10px;font-size: 12px;">
-                            <div>Sent by ${object.company_id.name}</div>
-                            % if 'website_url' in object.job_id and object.job_id.website_url:
-                            <div>
-                                Discover <a href="/jobs" style="text-decoration:none;color:#717188;">all our jobs</a>.
-                            </div>
-                            % endif
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-
-          </div>
-        ]]></field>
+        </td>
+    </tr>
+</table></field>
+        <field name="user_signature" eval="False"/>
+        <field name="auto_delete" eval="True"/>
+        <field name="lang">${object.partner_id.lang or ''}</field>
     </record>
 
     <record id="email_template_data_applicant_employee" model="mail.template">
         <field name="name">Applicant: Welcome new employee</field>
-        <field name="subject">Welcome ${object.name} </field>
         <field name="model_id" ref="hr.model_hr_employee"/>
-        <field name="body_html"><![CDATA[
-<p>Dear all,</p>
-<p>I’m very pleased to announce that <strong> ${object.name} </strong> will be
-joining us as a ${object.job_id.name}
-%if object.department_id:
-    in ${object.department_id.name}.
-%endif
-.</p>
-<p>Please welcome him/her and help him/her finding his/her marks.</p>]]></field>
+        <field name="subject">Welcome ${object.name} </field>
+        <field name="body_html" type="html">
+<div>
+    Hello all,<br/><br/>
+    I’m very pleased to announce that <strong> ${object.name} </strong> will be
+    joining us as a ${object.job_id.name}
+    %if object.department_id:
+        in ${object.department_id.name}.
+    %endif
+    <br/><br/>
+    Please welcome him/her and help him/her finding his/her marks.
+</div></field>
     </record>
 
         <!--    Resource(type_id)        -->
diff --git a/addons/hr_recruitment/models/hr_employee.py b/addons/hr_recruitment/models/hr_employee.py
index 5c88db5efa0..0d90897631e 100644
--- a/addons/hr_recruitment/models/hr_employee.py
+++ b/addons/hr_recruitment/models/hr_employee.py
@@ -35,5 +35,6 @@ class HrEmployee(models.Model):
             subject = MailTemplate.render_template(template_new_employee.subject, 'hr.employee', self.id)
             channel_all_employees.message_post(
                 body=body_html, subject=subject,
-                subtype='mail.mt_comment')
+                subtype='mail.mt_comment',
+                notif_layout='mail.mail_notification_light')
         return True
diff --git a/addons/hr_recruitment/models/hr_recruitment.py b/addons/hr_recruitment/models/hr_recruitment.py
index 898a5234939..c13fb3e417d 100644
--- a/addons/hr_recruitment/models/hr_recruitment.py
+++ b/addons/hr_recruitment/models/hr_recruitment.py
@@ -338,7 +338,11 @@ class Applicant(models.Model):
         applicant = self[0]
         changes, dummy = tracking[applicant.id]
         if 'stage_id' in changes and applicant.stage_id.template_id:
-            res['stage_id'] = (applicant.stage_id.template_id, {'composition_mode': 'mass_mail'})
+            res['stage_id'] = (applicant.stage_id.template_id, {
+                'auto_delete_message': True,
+                'subtype_id': self.env['ir.model.data'].xmlid_to_res_id('mail.mt_note'),
+                'notif_layout': 'mail.mail_notification_light'
+            })
         return res
 
     @api.multi