[IMP] digest: improve digest layout and add new digest tips

PURPOSE

Review the tips and digest layout design to make sure they have a WOW effect
and increase trial conversion/retention.

SPECIFICATIONS: LAYOUT

Besides changing the tips, a cleaning of digest layout was performed. Emails
were reported to look not neat in Outlook and somewhat random in mail.com or
gmail.com.

Most recent HTML CSS cannot be used to make HTML emails because each email
provider renders emails its own way. This means a given email may renders
differently in gmail.com and outlook.

The layout of the email was composed of several levels of embedded tables
which means huge maintenance effort. So it was totally rewritten with divs
and CSS, but some properties are not taken into account.

A lot of page component improvements were done. It consisted in replacing most
of the style attribute in tags with CSS classes and ids. This step is
especially useful for tip formatting because before, if a style modification
was needed, it had to be performed on each tip individually.

SPECIFICATIONS: TIPS

“Speed up your workflow with shortcuts”
“Click on an avatar to chat with a user”
“A calculator in Odoo”
“How to ping users in internal notes?”
“Knowledge is power”

LINKS

Task ID-2274264
COM PR: odoo/odoo#53580
ENT PR: odoo/enterprise#1139

X-original-commit: 04aa36da30c107e482935b1673374c9302e4cf6a

13 files changed, 412 insertions, 263 deletions

diff --git a/addons/digest/data/digest_data.xml b/addons/digest/data/digest_data.xml
index 30a8316f469..a697d17b43d 100644
--- a/addons/digest/data/digest_data.xml
+++ b/addons/digest/data/digest_data.xml
@@ -15,35 +15,297 @@
             body {
                 margin: 0;
                 padding: 0;
+                font-family: Arial, Helvetica, Verdana, sans-serif;
             }
-            @media only screen and (max-width:650px) {
-                .d-block{
+            #header_background {
+                background-color: #875a7b;
+            }
+            .global_layout {
+                max-width: 588px;
+                margin: 0 auto;
+                border: 1px solid #eeeeee;
+                border-top: 0;
+                background-color: #ffffff;
+            }
+            .company_name {
+                display: inline;
+                vertical-align: middle;
+                font-weight: bold;
+                color: #8f8f8f;
+            }
+            .title_subtitle {
+                font-weight: bold;
+                color: #282f33;
+                word-break: break-all;
+            }
+            .button {
+                float: right;
+                background-color: #875a7b;
+                color: #ffffff;
+                border-radius: 5px;
+            }
+            #button_connect {
+                text-align: center;
+            }
+            .date {
+                color: #8f8f8f;
+            }
+            .tip_title {
+                margin-top: 0;
+                font-weight: bold;
+            }
+            .tip_content {
+                margin: 0 auto;
+                color:#333333;
+                text-align: justify;
+                text-justify: inter-word;
+            }
+            .illustration_border {
+                width: 100%;
+                border: 1px solid grey;
+            }
+            .kpi_row_footer {
+                padding-bottom: 20px;
+            }
+            .kpi_header {
+                overflow: auto;
+                margin-bottom: 10px;
+                padding-bottom: 10px;
+                border-bottom: 1px solid #eeeeee;
+                font-size: 15px;
+                font-weight: bold;
+                color: #282f33;
+            }
+            #button_open_report {
+                padding: 5px 10px;
+                font-size: 12px;
+                font-weight: normal;
+            }
+            .kpi_cell {
+                float: left;
+                width: 33%;
+                text-align: center;
+            }
+            .kpi_value {
+                color: #282f33;
+                font-weight: bold;
+                text-decoration: none;
+            }
+            .kpi_value_label {
+                display: inline-block;
+                margin-bottom: 10px;
+                color: #888888;
+                font-size: 12px;
+                text-transform: uppercase;
+            }
+            .kpi_margin {
+                width: 75px;
+                padding: 5px 10px;
+                text-decoration: none;
+                border-radius: 5px;
+            }
+            .positive_kpi_margin {
+                border: 1px solid #c4ecd7;
+                background-color: #d5f1e2;
+                color: #17613a;
+            }
+            .negative_kpi_margin {
+                border: 1px solid #f4cfce;
+                background-color: #f7dddc;
+                color: #712b29;
+            }
+            .kpi_trick {
+                clear: both;
+            }
+            .download_app {
+                height: 40px;
+                margin-bottom: 5px;
+                display: inline-block;
+            }
+            .preference_div {
+                clear: both;
+                background-color: #eeeeee;
+                text-align: center;
+            }
+            .preference {
+                margin-bottom: 15px;
+                color: #6b6d70;
+            }
+            .preference a {
+                text-decoration: none;
+            }
+            .by_odoo {
+                color: #8f8f8f;
+            }
+            .odoo_link {
+                text-decoration: none;
+            }
+            .odoo_link_text {
+                font-weight: bold;
+                color: #875a7b;
+            }
+            .run_business {
+                color: #2d2a26;
+            }
+            #footer {
+                background-color: #eeeeee;
+                color: #8f8f8f;
+                text-align: center;
+            }
+
+            @media only screen and (max-width: 650px) {
+                .d-block {
                     display: block !important;
                 }
-                .mobile-hide{
-                    display: none !important;
+                #header_background {
+                    padding-top: 0px;
+                }
+                #header {
+                    padding: 15px 20px;
+                    border: 1px solid #eeeeee;
+                }
+                .global_layout {
+                    padding: 20px;
+                }
+                .company_name {
+                    font-size: 15px;
+                }
+                .title_subtitle {
+                    margin: 5px auto;
+                }
+                #button_connect {
+                    padding: 4px 10px;
+                    font-size: 12px;
+                }
+                .date {
+                    margin-top: 10px;
+                    font-size: 10px;
+                }
+                .tip_title {
+                    font-size: 14px;
+                }
+                .tip_content {
+                    margin: 10px auto 0 auto;
+                    font-size: 12px;
+                    line-height: 20px;
+                }
+                .illustration_border {
+                    margin-top: 15px;
+                }
+                .kpi_value {
+                    font-size: 20px;
+                }
+                .kpi_margin {
+                    font-size: 10px;
+                }
+                .kpi_margin_margin {
+                    margin-bottom: 5px;
+                }
+                .preference_div {
+                    padding: 15px;
+                }
+                .preference {
+                    font-size: 12px;
                 }
-                .mobile-w-75{
-                    width: 75% !important;
+                .by_odoo {
+                    font-size: 10px;
                 }
-                .mobile-w-33{
-                    width: 33% !important;
+                .run_business {
+                    margin: 20px auto;
+                    font-size: 12px;
                 }
-                .font-25{
-                    font-size: 25px !important;
-                    line-height: 25px !important;
+                #footer {
+                    font-size: 15px;
                 }
-                .font-18{
-                    font-size: 18px !important;
-                    line-height: 25px !important;
+                #powered {
+                    margin-top: 15px;
                 }
-                .font-16{
-                    font-size: 16px !important;
-                    line-height: 25px !important;
+                .tip_twocol {
+                    overflow: auto;
+                    margin-top: 15px;
                 }
-                .font-12{
-                    font-size: 12px !important;
-                    line-height: 20px !important;
+                .tip_twocol_left {
+                    text-align: left;
+                }
+                .tip_twocol_img {
+                    width: 90%;
+                }
+            }
+
+            @media only screen and (min-width: 651px) {
+                #header_background {
+                    padding-top: 70px;
+                }
+                #header {
+                    padding: 20px 30px 25px 30px;
+                    border-left: 1px solid #875a7b;
+                    border-right: 1px solid #875a7b;
+                }
+                .global_layout {
+                    padding: 25px 30px 30px 30px;
+                }
+                .company_name {
+                    font-size: 25px;
+                }
+                .title_subtitle {
+                    margin: 10px auto;
+                }
+                .button {
+                    padding: 5px 10px;
+                }
+                #button_connect {
+                    padding: 6px 10px;
+                    font-size: 15px;
+                }
+                .date {
+                    margin-top: 15px;
+                    font-size: 12px;
+                }
+                .tip_title {
+                    font-size: 20px;
+                }
+                .tip_content {
+                    margin: 15px auto 0 auto;
+                    font-size: 15px;
+                    line-height: 25px;
+                }
+                .illustration_border {
+                    margin-top: 20px;
+                }
+                .kpi_value {
+                    font-size: 30px;
+                }
+                .kpi_margin {
+                    font-size: 12px;
+                }
+                .kpi_margin_margin {
+                    margin-bottom: 10px;
+                }
+                .preference_div {
+                    padding: 20px;
+                }
+                .preference {
+                    font-size: 15px;
+                }
+                .by_odoo {
+                    font-size: 12px;
+                }
+                .run_business {
+                    margin: 15px auto;
+                    font-size: 18px;
+                }
+                #footer {
+                    font-size: 20px;
+                }
+                #stock_tip {
+                    overflow: auto;
+                    margin-top: 20px;
+                }
+                #stock_div_img {
+                    text-align: center;
+                }
+                #stock_img {
+                    width: 70%;
                 }
             }
          </style>
@@ -56,147 +318,78 @@
 
     <!-- DIGEST MAIN TEMPLATE -->
     <template id="digest_mail_main">
-<div style="margin:0; padding:0">
-    <table cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr class="mobile-hide" bgcolor="#875a7b"><td height="70"> </td></tr>
-        <tr bgcolor="#875a7b">
-            <td align="center" valign="top">
-                <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border: 1px solid #eeeeee;width: 100%; max-width: 650px; padding: 30px 30px">
-                    <tr>
-                        <td>
-                            <table cellspacing="0" cellpadding="0" border="0" width="580" align="center" style="width:100%; max-width:580px;">
-                                <tr>
-                                    <td class="mobile-w-75" style="text-align: left;">
-                                        <span class="font-16" style="color:#8F8F8F;font-weight:bold;font-size: 20px; line-height: 30px;" t-field="company.name"/>
-                                        <br/>
-                                        <div class="font-18" style="color:#282f33;font-weight:bold;font-size: 25px; line-height: 35px; margin-right: 5px; display: inline-block; max-width: 500px;word-break: break-all;" t-esc="title"/>
-                                        <div t-if="sub_title" class="font-18" style="color:#282f33;font-weight:bold;font-size: 25px; line-height: 35px; margin-right: 5px; display: inline-block; max-width: 500px;word-break: break-all;" t-esc="sub_title"/>
-                                        <div class="font-12" style="color:#8F8F8F;font-size: 15px;display: inline-block;"><t t-esc="formatted_date"/></div>
-                                    </td>
-                                    <td valign="top" style="text-align:right;">
-                                        <a t-att-href="top_button_url" target="_blank" style="text-align: center; color: #fff; background-color: #9a5b82; border-radius: 8px; font-size: 15px; padding: 5px 10px;  display: inline-block; text-decoration: none; min-width: 65px;">
-                                            <span t-esc="top_button_label"/>
-                                        </a>
-                                    </td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
-    <table t-if="tips" cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr>
-            <td align="center" valign="top">
-                <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border: 1px solid #eeeeee; border-bottom: none;width: 100%; max-width: 650px; padding:30px 30px">
-                    <tr>
-                        <td>
-                            <table t-foreach="tips" t-as="tip" cellspacing="0" cellpadding="0" border="0" width="580" align="center" style="width:100%; max-width:580px;">
-                                <tr>
-                                    <td valign="top">
-                                        <t t-raw="tip"/>
-                                    </td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
-    <table t-if="kpi_data" cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr>
-            <td align="center" valign="top">
-                <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border: 1px solid #eeeeee; border-bottom: none;width: 100%; max-width: 650px; padding:30px 30px">
-                    <tr t-foreach="kpi_data" t-as="kpi_info">
-                        <td t-if="kpi_info.get('kpi_col1') or kpi_info.get('kpi_col2') or kpi_info.get('kpi_col3')">
-                            <table cellspacing="0" cellpadding="0" border="0" width="580" align="center" style="width:100%; max-width:580px;">
-                                <tr>
-                                    <td align="left" style="border-bottom: 1px solid #eeeeee;">
-                                        <span style="color:#282f33;font-size: 15px; font-weight: bold; line-height: 30px" t-esc="kpi_info['kpi_fullname']"/>
-                                        <a t-if="kpi_info['kpi_action']" t-att-href="'/web#action=%s' % kpi_info['kpi_action']"
-                                            style="float:right; background-color:#875A7B;margin-left: 5px; padding: 5px 12px 5px 12px; text-decoration: none; color: #ffffff; border-radius: 3px; font-size:13px; font-weight:bold; margin-bottom: 5px;">
-                                            View
-                                        </a>
-                                    </td>
-                                </tr>
-                                <tr>
-                                    <td>
-                                        <table cellspacing="0" cellpadding="0" align="center" border="0" style="width:100%; padding: 20px 0;">
-                                            <tr valign="top">
-                                                <td t-if="kpi_info.get('kpi_col1')" class="mobile-w-33" width="196" style=" text-align: center;">
-                                                    <t t-call="digest.digest_tool_kpi">
-                                                        <t t-set="kpi_value" t-value="kpi_info['kpi_col1']['value']"/>
-                                                        <t t-set="kpi_margin" t-value="kpi_info['kpi_col1'].get('margin')"/>
-                                                        <t t-set="kpi_subtitle" t-value="kpi_info['kpi_col1']['col_subtitle']"/>
-                                                    </t>
-                                                </td>
-                                                <td t-if="kpi_info.get('kpi_col2')" class="mobile-w-33" width="196" style=" text-align: center;">
-                                                    <t t-call="digest.digest_tool_kpi">
-                                                        <t t-set="kpi_value" t-value="kpi_info['kpi_col2']['value']"/>
-                                                        <t t-set="kpi_margin" t-value="kpi_info['kpi_col2'].get('margin')"/>
-                                                        <t t-set="kpi_subtitle" t-value="kpi_info['kpi_col2']['col_subtitle']"/>
-                                                    </t>
-                                                </td>
-                                                <td t-if="kpi_info.get('kpi_col3')" class="mobile-w-33" width="196" style=" text-align: center;">
-                                                    <t t-call="digest.digest_tool_kpi">
-                                                        <t t-set="kpi_value" t-value="kpi_info['kpi_col3']['value']"/>
-                                                        <t t-set="kpi_margin" t-value="kpi_info['kpi_col3'].get('margin')"/>
-                                                        <t t-set="kpi_subtitle" t-value="kpi_info['kpi_col3']['col_subtitle']"/>
-                                                    </t>
-                                                </td>
-                                            </tr>
-                                        </table>
-                                    </td>
-                                </tr>
-                            </table>
-                        </td>
-                    </tr>
-                </table>
-                <table t-if="preferences" bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border-left: 1px solid #eeeeee; border-right: 1px solid #eeeeee; width: 100%; max-width: 650px; padding:30px 30px">
-                    <tr>
-                        <td bgcolor="#fafafa" width="100%" style="padding-top: 20px; padding-bottom: 20px;" align="center">
-                            <p t-foreach="preferences" t-as="preference" class="font-12" style="font-size: 15px; color: #6b6d70">
-                                <t t-raw="preference"/>
-                            </p>
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
-    <t t-if="body" t-raw="body"/>
-    <table t-if="display_mobile_banner" cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr>
-            <td align="center" valign="top">
-                <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="border: 1px solid #eeeeee; width: 100%; max-width: 650px; padding:30px 30px">
-                    <tr valign="top">
-                        <td>
-                            <t t-call="digest.digest_section_mobile"/>
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
-    <table cellspacing="0" cellpadding="0" align="center" border="0" bgcolor="#eeeeee" style="width:100%; font-family: Arial,Helvetica,Verdana,sans-serif;">
-        <tr>
-            <td align="center" valign="top">
-                <table bgcolor="#eeeeee" cellspacing="0" cellpadding="0" width="650" align="center" border="0" style="margin-top:30px;font-size: 15px; text-align:center; width: 100%; max-width: 650px;">
-                    <tr>
-                        <td style="color:#8F8F8F;font-weight:bold;font-size: 20px; line-height: 30px;" t-esc="company.name"/>
-                    </tr>
-                    <tr>
-                        <td style="color:#8F8F8F;font-size: 12px; line-height: 30px;">Powered by <a href="https://www.odoo.com" target="_blank" style="color:#875A7B">Odoo</a>.</td>
-                    </tr>
-                    <tr>
-                        <td height="30"> </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-    </table>
+<div id="header_background">
+    <div class="global_layout" id="header">
+        <div style="overflow: auto;">
+            <p t-field="company.name" class="company_name" />
+            <a t-att-href="top_button_url" target="_blank"><span t-esc="top_button_label" class="button" id="button_connect" /></a>
+        </div>
+        <div class="title_subtitle">
+            <p t-esc="title" />
+            <p t-if="sub_title" t-esc="sub_title" />
+        </div>
+        <div t-esc="formatted_date" class="date" />
+    </div>
+</div>
+
+<div style="background-color: #eeeeee;">
+<div t-foreach="tips" t-as="tip" t-raw="tip" class="global_layout" />
+
+<div t-if="kpi_data" class="global_layout" style="padding-bottom: 0;">
+    <div t-foreach="kpi_data" t-as="kpi_info" class="kpi_row_footer">
+        <div t-if="kpi_info.get('kpi_col1') or kpi_info.get('kpi_col2') or kpi_info.get('kpi_col3')">
+            <div class="kpi_header">
+                <span t-esc="kpi_info['kpi_fullname']" style="vertical-align: middle;" />
+                <a t-if="kpi_info['kpi_action']" t-att-href="'/web#action=%s' % kpi_info['kpi_action']"><span class="button" id="button_open_report">Open Report</span></a>
+            </div>
+            <div t-if="kpi_info.get('kpi_col1')" class="kpi_cell">
+                <div t-call="digest.digest_tool_kpi" >
+                    <t t-set="kpi_value" t-value="kpi_info['kpi_col1']['value']"/>
+                    <t t-set="kpi_margin" t-value="kpi_info['kpi_col1'].get('margin')"/>
+                    <t t-set="kpi_subtitle" t-value="kpi_info['kpi_col1']['col_subtitle']"/>
+                </div>
+            </div>
+            <div t-if="kpi_info.get('kpi_col2')" class="kpi_cell">
+                <div t-call="digest.digest_tool_kpi">
+                    <div t-set="kpi_value" t-value="kpi_info['kpi_col2']['value']"/>
+                    <div t-set="kpi_margin" t-value="kpi_info['kpi_col2'].get('margin')"/>
+                    <div t-set="kpi_subtitle" t-value="kpi_info['kpi_col2']['col_subtitle']"/>
+                </div>
+            </div>
+            <div t-if="kpi_info.get('kpi_col3')" class="kpi_cell">
+                <div t-call="digest.digest_tool_kpi">
+                    <div t-set="kpi_value" t-value="kpi_info['kpi_col3']['value']"/>
+                    <div t-set="kpi_margin" t-value="kpi_info['kpi_col3'].get('margin')"/>
+                    <div t-set="kpi_subtitle" t-value="kpi_info['kpi_col3']['col_subtitle']"/>
+                </div>
+            </div>
+            <div class="kpi_trick" />
+        </div>
+    </div>
+</div>
+
+<div t-if="preferences">
+    <div class="global_layout">
+        <div class="preference_div">
+            <div t-foreach="preferences" t-as="preference" class="preference">
+                <t t-raw="preference"/>
+            </div>
+            <div class="by_odoo">
+                Sent by <a href="https://www.odoo.com" target="_blank" class="odoo_link"><span class="odoo_link_text">Odoo</span></a> – <a href="/web#view_type=form&amp;model=digest.digest&amp;id=${object.id}" target="_blank" style="text-decoration: none;"><span style="color: #8f8f8f;">Unsubscribe</span></a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<t t-if="body" t-raw="body"/>
+<div t-if="display_mobile_banner" t-call="digest.digest_section_mobile" />
+
+<div class="global_layout" id="footer">
+    <p style="font-weight: bold;">My Company (San Francisco)</p>
+    <p class="by_odoo" id="powered">
+        Powered by <a href="https://www.odoo.com" target="_blank" class="odoo_link"><span class="odoo_link_text">Odoo</span></a>
+    </p>
+</div>
 </div>
     </template>
 
@@ -205,20 +398,20 @@
 
     <!-- MOBILE BANNER -->
     <template id="digest_section_mobile">
-<table cellspacing="0" cellpadding="0" border="0" width="580" align="center" style="width:100%; max-width:580px;">
-    <tr>
-       <td valign="top" width="168">
-            <img src="https://www.odoo.com/web/image/24717933/odoo-mobile.png" alt="Odoo Mobile" width="168"/>
-        </td>
-        <td valign="top">
-            <p class="font-16" style="color:#2d2a26;font-size: 18px;line-height: 23px; margin-top: 20px">Run your business from anywhere with <br class="mobile-hide" /><b>Odoo Mobile</b>.</p>
-            <a href="https://play.google.com/store/apps/details?id=com.odoo.mobile" target="_blank"><img src="https://www.odoo.com/digest/static/src/img/google_play.png" style="display:inline-block;height: 40px; margin-bottom: 5px"/></a>
-            <span class="mobile-hide"> </span>
-            <a href="https://itunes.apple.com/us/app/odoo/id1272543640" target="_blank"><img src="https://www.odoo.com/digest/static/src/img/app_store.png" style="display:inline-block;height: 40px; margin-bottom: 5px"/></a>
-
-        </td>
-    </tr>
-</table>
+<div class="global_layout" style="overflow: auto;">
+    <div style="width: 50%; float: left; text-align: right;">
+        <img src="https://www.odoo.com/web/image/24717933/odoo-mobile.png" alt="Odoo Mobile" />
+    </div>
+    <div style="width: 50%; float: left;">
+        <p class="run_business">Run your business from anywhere with <b>Odoo Mobile</b>.</p>
+        <div>
+            <a href="https://play.google.com/store/apps/details?id=com.odoo.mobile" target="_blank"><img class="download_app" src="https://www.odoo.com/digest/static/src/img/google_play.png" /></a>
+        </div>
+        <div>
+            <a href="https://itunes.apple.com/us/app/odoo/id1272543640" target="_blank"><img class="download_app" src="https://www.odoo.com/digest/static/src/img/app_store.png" /></a>
+        </div>
+    </div>
+</div>
     </template>
 
 
@@ -226,24 +419,14 @@
 
     <!-- KPI DISPLAY -->
     <template id="digest_tool_kpi">
-<span class="font-25" style="color:#282f33;font-size: 35px; font-weight: bold; text-decoration: none; line-height: 36px;">
-    <t t-esc="kpi_value"/>
-</span><br/>
-<span style="color:#888888;display: inline-block; font-size: 12px; line-height: 18px; text-transform: uppercase;">
-    <t t-esc="kpi_subtitle"/>
-</span>
-<t t-if="kpi_margin">
-    <t t-if="kpi_margin &gt; 0.0">
-        <div style="background-color:#d5f1e2; border: 1px solid #c4ecd7; margin: 10px auto;width: 67px; line-height:27px; text-decoration: none; color: #17613a; border-radius: 5px; font-size:13px;">
-            ▲ <t t-esc="'%.2f' % kpi_margin"/>
-        </div>
-    </t>
-    <t t-elif="kpi_margin &lt; 0.0">
-        <div style="background-color:#f7dddc; border: 1px solid #f4cfce; margin: 10px auto;width: 67px; line-height:27px; text-decoration: none; color: #712b29; border-radius: 5px; font-size:13px;">
-            ▼ <t t-esc="'%.2f' % kpi_margin"/>
-        </div>
-    </t>
-</t>
+<span t-esc="kpi_value" class="kpi_value" />
+<br/>
+<span t-esc="kpi_subtitle" class="kpi_value_label" />
+<div t-if="kpi_margin" class="kpi_margin_margin">
+    <span   t-if="kpi_margin &gt; 0.0" class="kpi_margin positive_kpi_margin">▲ <t t-esc="'%.2f' % kpi_margin"/> %</span>
+    <span t-elif="kpi_margin &lt; 0.0" class="kpi_margin negative_kpi_margin">▼ <t t-esc="'%.2f' % kpi_margin"/> %</span>
+</div>
     </template>
 
-</data></odoo>
+</data>
+</odoo>
diff --git a/addons/digest/data/digest_tips_data.xml b/addons/digest/data/digest_tips_data.xml
index 9b690a7f770..1a479a541d6 100644
--- a/addons/digest/data/digest_tips_data.xml
+++ b/addons/digest/data/digest_tips_data.xml
@@ -2,106 +2,72 @@
 <odoo>
     <data noupdate="1">
         <record id="digest_digest_default" model="digest.digest">
-            <field name="name">Your Odoo Periodic Report</field>
+            <field name="name">Your Odoo Periodic Digest</field>
             <field name="periodicity">daily</field>
             <field name="user_ids" eval="[(4, ref('base.user_admin'))]"/>
             <field name="next_run_date" eval="(DateTime.now() + timedelta(days=1)).strftime('%Y-%m-%d')"/>
             <field name="kpi_res_users_connected">True</field>
             <field name="kpi_mail_message_total">True</field>
         </record>
-    </data>
 
-    <data>
         <record id="digest_tip_digest_0" model="digest.tip">
-            <field name="name">Invite Team Members</field>
-            <field name="sequence">1</field>
-            <field name="group_id" ref="base.group_erp_manager"/>
+            <field name="name">Tip: Speed up your workflow with shortcuts</field>
+            <field name="sequence">800</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Invite Team Members</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Go to your general settings to invite new users to your database.</p>
-    <img src="/digest/static/src/img/tips-digest-invite-team.jpg" style="max-width: 580px" width="100%"/>
+    <p class="tip_title">Tip: Speed up your workflow with shortcuts</p>
+    <p class="tip_content">Press ALT in any screen to highlight shortcuts for every button in the screen. It is useful to process multiple documents in batch.</p>
+    <img src="/digest/static/src/img/alt-shortcuts.gif" class="illustration_border" />
 </div>
             </field>
         </record>
-
         <record id="digest_tip_digest_1" model="digest.tip">
-            <field name="name"> Want to learn more about Odoo?</field>
-            <field name="sequence">2</field>
-            <field name="group_id" ref="base.group_user"/>
+            <field name="name">Tip: Click on an avatar to chat with a user</field>
+            <field name="sequence">2100</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px"> Want to learn more about Odoo?</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Visit our <a href="https://www.odoo.com/slides">eLearning Platform</a></p>
+    <p class="tip_title">Tip: Click on an avatar to chat with a user</p>
+    <p class="tip_content">Have a question about a document? Click on the responsible user's picture to start a conversation. If his avatar has a green dot, he is online.</p>
+    <img src="/digest/static/src/img/avatar.gif" class="illustration_border" />
 </div>
             </field>
         </record>
-
         <record id="digest_tip_digest_2" model="digest.tip">
-            <field name="name">Odoo Push Notifications</field>
-            <field name="sequence">3</field>
-            <field name="group_id" ref="base.group_erp_manager"/>
+            <field name="name">Tip: A calculator in Odoo</field>
+            <field name="sequence">2300</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Odoo Push Notifications</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Change your browser settings to "Allow Push Notifications" and never miss a thing.</p>
-    <img src="/digest/static/src/img/tips-digest-browser-notifications.jpg" style="max-width: 580px" width="100%"/>
+    <p class="tip_title">Tip: A calculator in Odoo</p>
+    <p class="tip_content">When editing a number, you can use formulae by typing the `=` character. This is useful when computing a margin or a discount on a quotation, sale order or invoice.</p>
+    <img src="/digest/static/src/img/calculator.gif" class="illustration_border" />
 </div>
             </field>
         </record>
-
         <record id="digest_tip_digest_3" model="digest.tip">
-            <field name="name">Reach your full potential with Odoo</field>
-            <field name="sequence">4</field>
-            <field name="group_id" ref="base.group_erp_manager"/>
-            <field name="tip_description" type="html">
-<div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Reach your full potential with Odoo</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Take a look at our <a href="https://www.odoo.com/page/tour">App videos</a> and discover the next tool that will allow you to work better and faster.</p>
-</div>
-            </field>
-        </record>
-
-        <record id="digest_tip_mail_0" model="digest.tip">
-            <field name="name">Did you know?</field>
-            <field name="sequence">10</field>
-            <field name="group_id" ref="base.group_user"/>
-            <field name="tip_description" type="html">
-<div>
-    % set users = object.env['res.users'].search([('share', '=' , False)], limit=10, order='id desc')
-    % set channel_id = object.env.ref('mail.channel_all_employees').id
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Did you know?</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">You can ping your colleagues by tagging them in your messages using “@” followed by their name. They will be instantly notified.</p>
-    <img src="/digest/static/src/img/tips-mail-notifications.jpg" style="max-width: 580px" width="100%"/>
-    <div style="margin-top: 20px; background-color: #f8f9fa">
-        <p class="font-12" style="text-align:center; color:#888888;font-size: 13px; line-height: 25px; margin:0;"><b>${', '.join(users.mapped('name'))}</b> just signed up.  <a href="/web#action=mail.action_discuss&amp;active_id=${channel_id}" style="color: #875a7b; font-weight: bold">Say hello in the company's discussion channel.</a>
-        </p>
-    </div>
-</div>
-            </field>
-        </record>
-        <record id="digest_tip_mail_1" model="digest.tip">
-            <field name="name">Get things done with activities</field>
-            <field name="sequence">11</field>
-            <field name="group_id" ref="base.group_user"/>
+            <field name="name">Tip: How to ping users in internal notes?</field>
+            <field name="sequence">2400</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Get things done with activities</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Use activities on any business document to schedule meetings, calls and todos.</p>
-    <img src="/digest/static/src/img/tips-mail-activities.jpg" style="max-width: 580px" width="100%" />
+    <p class="tip_title">Tip: How to ping users in internal notes?</p>
+    <p class="tip_content">Type "@" to notify someone in a message, or "#" to link to a channel. Try to notify @OdooBot to test the feature.</p>
+    <img src="/digest/static/src/img/notifications.gif" class="illustration_border" />
 </div>
             </field>
         </record>
-
-        <record id="digest_tip_mail_2" model="digest.tip">
-            <field name="name">Follow what you want</field>
-            <field name="sequence">12</field>
-            <field name="group_id" ref="base.group_user"/>
+        <record id="digest_tip_digest_4" model="digest.tip">
+            <field name="name">Tip: Knowledge is power</field>
+            <field name="sequence">2500</field>
+            <field name="group_id" ref="base.group_user" />
             <field name="tip_description" type="html">
 <div>
-    <b class="font-16" style="font-size: 20px;line-height: 30px">Follow what you want</b>
-    <p class="font-12" style="color:#888888;font-size: 15px; line-height: 25px; margin-top:0;">Keep track of any object in Odoo (opportunity, sales order, etc.) and choose exactly what you want to follow (discussion, status, status change, etc.).</p>
-    <img src="/digest/static/src/img/tips-mail-following.jpg" style="max-width: 580px" width="100%" />
+    <p class="tip_title">Tip: Knowledge is power</p>
+    <p class="tip_content">When following documents, use the pencil icon to fine-tune the information you want to receive.
+Follow a project / sales team to keep track of this project's tasks / this team's opportunities.</p>
+    <img src="/digest/static/src/img/following.png" class="illustration_border" />
 </div>
             </field>
         </record>
diff --git a/addons/digest/models/digest.py b/addons/digest/models/digest.py
index a206906121c..5576d3c58ad 100644
--- a/addons/digest/models/digest.py
+++ b/addons/digest/models/digest.py
@@ -257,13 +257,13 @@ class Digest(models.Model):
         if self._context.get('digest_slowdown'):
             preferences.append(_("We have noticed you did not connect these last few days so we've automatically switched your preference to weekly Digests."))
         elif self.periodicity == 'daily' and user.has_group('base.group_erp_manager'):
-            preferences.append('%s <a href="/digest/%s/set_periodicity?periodicity=weekly" target="_blank" style="color:#875A7B; font-weight: bold;">%s</a>' % (
+            preferences.append('%s <p><a href="/digest/%s/set_periodicity?periodicity=weekly" target="_blank" style="color:#875A7B; font-weight: bold;">%s</a></p>' % (
                 _('Prefer a broader overview ?'),
                 self.id,
                 _('Switch to weekly Digests')
             ))
         if user.has_group('base.group_erp_manager'):
-            preferences.append('%s <a href="/web#view_type=form&amp;model=%s&amp;id=%s" target="_blank" style="color:#875A7B; font-weight: bold;">%s</a>' % (
+            preferences.append('%s <p><a href="/web#view_type=form&amp;model=%s&amp;id=%s" target="_blank" style="color:#875A7B; font-weight: bold;">%s</a></p>' % (
                 _('Want to customize this email?'),
                 self._name,
                 self.id,
diff --git a/addons/digest/static/src/img/alt-shortcuts.gif b/addons/digest/static/src/img/alt-shortcuts.gif
new file mode 100644
index 00000000000..ea362ca2b27
--- /dev/null
+++ b/addons/digest/static/src/img/alt-shortcuts.gif
diff --git a/addons/digest/static/src/img/avatar.gif b/addons/digest/static/src/img/avatar.gif
new file mode 100644
index 00000000000..dd2f0efeb10
--- /dev/null
+++ b/addons/digest/static/src/img/avatar.gif
diff --git a/addons/digest/static/src/img/calculator.gif b/addons/digest/static/src/img/calculator.gif
new file mode 100644
index 00000000000..a97ec0750a1
--- /dev/null
+++ b/addons/digest/static/src/img/calculator.gif
diff --git a/addons/digest/static/src/img/following.png b/addons/digest/static/src/img/following.png
new file mode 100644
index 00000000000..751ddf99069
--- /dev/null
+++ b/addons/digest/static/src/img/following.png
diff --git a/addons/digest/static/src/img/notifications.gif b/addons/digest/static/src/img/notifications.gif
new file mode 100644
index 00000000000..9cb5f83b76c
--- /dev/null
+++ b/addons/digest/static/src/img/notifications.gif
diff --git a/addons/digest/static/src/img/tips-digest-browser-notifications.jpg b/addons/digest/static/src/img/tips-digest-browser-notifications.jpg
deleted file mode 100644
index 38bd5b680b7..00000000000
--- a/addons/digest/static/src/img/tips-digest-browser-notifications.jpg
+++ /dev/null
diff --git a/addons/digest/static/src/img/tips-digest-invite-team.jpg b/addons/digest/static/src/img/tips-digest-invite-team.jpg
deleted file mode 100644
index 3ee2932800a..00000000000
--- a/addons/digest/static/src/img/tips-digest-invite-team.jpg
+++ /dev/null
diff --git a/addons/digest/static/src/img/tips-mail-activities.jpg b/addons/digest/static/src/img/tips-mail-activities.jpg
deleted file mode 100644
index a1c00cb4e91..00000000000
--- a/addons/digest/static/src/img/tips-mail-activities.jpg
+++ /dev/null
diff --git a/addons/digest/static/src/img/tips-mail-following.jpg b/addons/digest/static/src/img/tips-mail-following.jpg
deleted file mode 100644
index d83e57d4896..00000000000
--- a/addons/digest/static/src/img/tips-mail-following.jpg
+++ /dev/null
diff --git a/addons/digest/static/src/img/tips-mail-notifications.jpg b/addons/digest/static/src/img/tips-mail-notifications.jpg
deleted file mode 100644
index cfb2164c707..00000000000
--- a/addons/digest/static/src/img/tips-mail-notifications.jpg
+++ /dev/null